diff --git a/frontend/index.html b/frontend/index.html index 27725d8..2eb9a12 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,13 +3,17 @@ - padhLe — Learn Smarter + padhle — Workspace +
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 1115dae..f84e62c 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,9 +1,8 @@ /* ======================================== - App Component — padhLe + App Component — padhle (Refined Workspace) ======================================== */ import { useState } from "react"; -import "./styles/App.css"; import Sidebar from "./components/sidebar/Sidebar"; import TopNav from "./components/top-nav/TopNav"; import ChatHistory from "./components/chat-history/ChatHistory"; @@ -11,19 +10,16 @@ import ChatInput from "./components/chat-input/ChatInput"; function App() { const [messages, setMessages] = useState([]); - const [activeSubject, setActiveSubject] = useState("science"); + const [activeSubject, setActiveSubject] = useState("Choose Subject"); const [activeChat, setActiveChat] = useState(null); - const [activeTab, setActiveTab] = useState("chat"); - const [greetingDismissed, setGreetingDismissed] = useState(false); + const [activeGrade, setActiveGrade] = useState("Choose standard"); + const [activeChapter, setActiveChapter] = useState("Choose Chapter"); const handleSend = (text) => { if (!text.trim()) return; - // Add user message setMessages((prev) => [...prev, { id: Date.now(), role: "user", text }]); - // TODO: Send to backend and get AI response - // Simulating AI response for now setTimeout(() => { setMessages((prev) => [ ...prev, @@ -42,7 +38,6 @@ function App() { return (
- {/* Left Sidebar — brand, subjects, chat history, settings */}
- {/* Top Navigation — tabs + actions */} - + - {/* Chat Area */}
- {!greetingDismissed && messages.length === 0 && ( -
-

Welcome to padhLe 📚

-

Let's make today a great day for learning.

- -
- )}
- {/* Input Bar */} - +
); diff --git a/frontend/src/components/chat-history/ChatHistory.css b/frontend/src/components/chat-history/ChatHistory.css index 94bc3a5..33bca4b 100644 --- a/frontend/src/components/chat-history/ChatHistory.css +++ b/frontend/src/components/chat-history/ChatHistory.css @@ -1,99 +1,212 @@ /* ======================================== - ChatHistory Component — padhLe (Bauhaus) + ChatHistory Component — padhle (Refined Workspace) ======================================== */ +/* Main Chat History */ .chat-history { flex: 1; - padding: var(--spacing-lg) 0; overflow-y: auto; + background-color: var(--color-background); } +/* Focus Column — centered content area */ +.chat-history__focus { + max-width: var(--container-max); + margin: 0 auto; + padding: 48px 24px 128px; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100%; +} + +/* Welcome Header */ +.chat-history__welcome { + text-align: center; + margin-bottom: 48px; +} + +.chat-history__welcome-icon { + display: flex; + align-items: center; + justify-content: center; + position: relative; + margin-bottom: 16px; + color: var(--color-primary); +} + +.chat-history__welcome-icon .material-symbols-outlined { + font-size: 48px; + line-height: 1; +} + +.chat-history__welcome-sparkle { + position: absolute; + top: -4px; + right: -16px; + font-size: 20px; + color: var(--color-primary); + font-weight: 700; +} + +.chat-history__welcome-title { + font-family: var(--font-heading); + font-size: var(--font-size-display-lg); + font-weight: var(--font-weight-bold); + color: var(--color-primary); + letter-spacing: -0.02em; + line-height: var(--line-height-tight); + margin-bottom: 12px; +} + +.chat-history__welcome-subtitle { + font-size: var(--font-size-body-md); + color: var(--color-on-surface-variant); + max-width: 440px; + margin: 0 auto; + line-height: var(--line-height-relaxed); +} + +/* Bento Grid */ +.chat-history__bento { + display: grid; + grid-template-columns: 1fr; + gap: 16px; + width: 100%; + margin-bottom: 24px; +} + +@media (min-width: 768px) { + .chat-history__bento { + grid-template-columns: repeat(4, 1fr); + } +} + +/* Bento Card */ +.chat-history__bento-card { + position: relative; + text-align: left; + padding: 20px; + border: var(--border-thin); + border-radius: var(--radius-xl); + background-color: var(--color-surface-lowest); + cursor: pointer; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); + display: flex; + flex-direction: column; + min-height: 120px; + overflow: hidden; +} + +.chat-history__bento-card:hover { + border-color: var(--color-outline); + box-shadow: var(--shadow-card-hover); +} + +.chat-history__bento-icon-wrap { + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 16px; +} + +.chat-history__bento-icon-wrap .material-symbols-outlined { + font-size: 20px; + line-height: 1; +} + +.chat-history__bento-text { + flex: 1; + font-size: 14px; + line-height: 1.625; + color: var(--color-on-surface); + margin-bottom: 16px; +} + +.chat-history__bento-text-main { + color: var(--color-on-surface); +} + +.chat-history__bento-text-highlight { + font-weight: 600; +} + +.chat-history__bento-arrow { + position: absolute; + bottom: 20px; + right: 20px; + font-size: 20px; + line-height: 1; + color: var(--color-on-surface-variant); + opacity: 0.5; + transition: color var(--transition-fast), opacity var(--transition-fast); +} + +.chat-history__bento-card:hover .chat-history__bento-arrow { + color: var(--color-primary); + opacity: 1; +} + +/* Info Panel */ +.chat-history__info { + width: 100%; + border: var(--border-thin); + border-radius: var(--radius-xl); + padding: 24px; + display: flex; + align-items: flex-start; + gap: 16px; + background-color: var(--color-surface-lowest); + position: relative; + overflow: hidden; +} + +.chat-history__info-icon-wrap { + width: 48px; + height: 48px; + border-radius: 50%; + background-color: var(--color-surface-low); + display: flex; + align-items: center; + justify-content: center; + border: var(--border-thin); + border-color: rgba(0, 0, 0, 0.05); + flex-shrink: 0; +} + +.chat-history__info-icon-wrap .material-symbols-outlined { + font-size: 22px; + line-height: 1; + color: var(--color-on-surface); +} + +.chat-history__info-content { + flex: 1; +} + +.chat-history__info-title { + font-size: 15px; + font-weight: var(--font-weight-bold); + color: var(--color-primary); + margin-bottom: 4px; +} + +.chat-history__info-text { + font-size: 14px; + line-height: 1.4; + color: var(--color-on-surface-variant); +} + +/* Message List */ .chat-history__list { display: flex; flex-direction: column; - gap: var(--spacing-xl); - padding-bottom: var(--spacing-xl); -} - -/* Empty / Welcome State */ -.chat-history__empty { - display: flex; - justify-content: center; - align-items: center; - min-height: 50vh; - text-align: center; - padding: var(--spacing-2xl); -} - -.chat-history__empty-content { - max-width: 600px; + gap: 24px; + padding: 24px 0; width: 100%; -} - -.chat-history__empty-title { - font-family: var(--font-heading); - font-size: 3rem; - font-weight: 800; - text-transform: uppercase; - letter-spacing: 0.02em; - color: var(--color-primary); - margin-bottom: var(--spacing-xs); -} - -.chat-history__empty-tagline { - font-family: var(--font-body); - font-size: 1.1rem; - font-weight: 700; - color: var(--color-text-variant); - margin-bottom: var(--spacing-2xl); -} - -/* Suggested Prompts */ -.chat-history__prompts { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--spacing-md); -} - -.chat-history__prompt { - display: flex; - align-items: flex-start; - gap: var(--spacing-sm); - padding: var(--spacing-md); - border: var(--border-thick); - border-radius: var(--border-radius); - background-color: var(--color-surface); - cursor: pointer; - text-align: left; - font-family: var(--font-body); - font-size: 0.85rem; - font-weight: 700; - line-height: 1.5; - color: var(--color-text); - box-shadow: var(--shadow-brutal-sm); - transition: all var(--transition-fast); -} - -.chat-history__prompt:hover { - background-color: var(--color-surface-container); - transform: translateY(-2px); - box-shadow: var(--shadow-brutal); -} - -.chat-history__prompt:active { - transform: translateY(2px); - box-shadow: none; -} - -.chat-history__prompt-icon { - font-size: 1.25rem; - flex-shrink: 0; - margin-top: 2px; -} - -.chat-history__prompt-text { - color: var(--color-text); - text-transform: uppercase; - letter-spacing: 0.03em; - font-weight: 700; + max-width: var(--container-max); + margin: 0 auto; } diff --git a/frontend/src/components/chat-history/ChatHistory.jsx b/frontend/src/components/chat-history/ChatHistory.jsx index da32cb2..c172e83 100644 --- a/frontend/src/components/chat-history/ChatHistory.jsx +++ b/frontend/src/components/chat-history/ChatHistory.jsx @@ -1,53 +1,131 @@ /* ======================================== - ChatHistory Component — padhLe + ChatHistory Component — padhle (Refined Workspace) ======================================== */ import Message from "../message/Message"; import "./ChatHistory.css"; -const ChatHistory = ({ messages, onPromptClick }) => { - const suggestedPrompts = [ - { icon: "🧪", text: "Explain how photosynthesis works in simple terms" }, - { icon: "📐", text: "Help me understand derivatives in calculus" }, - { icon: "🏛️", text: "What caused the Industrial Revolution?" }, - { icon: "📝", text: "Help me analyze themes in Romeo and Juliet" }, - ]; - +const ChatHistory = ({ messages, activeSubject, activeGrade, activeChapter, onPromptClick }) => { const hasMessages = messages.length > 0; - return ( -
- {hasMessages ? ( + const suggestions = [ + { + id: 1, + icon: "eco", + iconFilled: true, + color: "--color-accent-green", + colorBg: "--color-accent-green-bg", + keywords: ["photosynthesis"], + text: "Explain how ", + textEnd: " works in simple terms", + }, + { + id: 2, + icon: "calculate", + iconFilled: false, + color: "--color-accent-blue", + colorBg: "--color-accent-blue-bg", + keywords: ["derivatives"], + text: "Help me understand ", + textEnd: " in calculus", + }, + { + id: 3, + icon: "account_balance", + iconFilled: false, + color: "--color-accent-orange", + colorBg: "--color-accent-orange-bg", + keywords: ["Industrial"], + text: "What caused the ", + textEnd: " Revolution?", + }, + { + id: 4, + icon: "edit", + iconFilled: true, + color: "--color-accent-purple", + colorBg: "--color-accent-purple-bg", + keywords: ["Romeo and Juliet"], + text: "Help me analyze themes in ", + textEnd: "", + }, + ]; + + const fullPromptTexts = suggestions.map((s) => s.text + s.keywords.join(" ") + s.textEnd); + + if (hasMessages) { + return ( +
{messages.map((message) => ( ))}
- ) : ( -
-
-

- Welcome to padhLe -

-

- Your AI tutor for grades 6–12. Ask anything! -

+
+ ); + } -
- {suggestedPrompts.map((prompt, index) => ( - - ))} -
+ return ( +
+
+ {/* Welcome Header */} +
+
+ menu_book + auto_awesome +
+

Welcome to padhle

+

Your AI tutor for grades 6–12. Ask anything!

+
+ + {/* Bento Grid Suggestions */} +
+ {suggestions.map((suggestion) => { + const colorVar = suggestion.color.replace("--", "var("); + const bgColorVar = suggestion.colorBg.replace("--", "var("); + + return ( + + ); + })} +
+ + {/* Info Panel */} +
+
+ lightbulb +
+
+

Focused on your learning

+

+ I'll answer questions related to your selected subject and chapter +
+ using your textbook content. +

- )} +
); }; diff --git a/frontend/src/components/chat-input/ChatInput.css b/frontend/src/components/chat-input/ChatInput.css index 49a8914..b81c6c8 100644 --- a/frontend/src/components/chat-input/ChatInput.css +++ b/frontend/src/components/chat-input/ChatInput.css @@ -1,145 +1,165 @@ /* ======================================== - ChatInput Component — padhLe (Bauhaus) + ChatInput Component — padhle (Refined Workspace) ======================================== */ +/* Main Input Bar */ .chat-input { - padding: var(--spacing-md) 0; - border-top: var(--border-thick); - background-color: var(--color-surface); - box-shadow: 0 -4px 0 0px var(--color-outline); + flex-shrink: 0; + width: 100%; + /* Gradient fade from background */ + background: linear-gradient(to top, var(--color-background) 50%, transparent); + padding-top: 24px; + padding-bottom: 32px; + padding-left: 24px; + padding-right: 24px; + display: flex; + justify-content: center; } -.chat-input__wrapper { - max-width: 900px; - margin: 0 auto; - padding: var(--spacing-md) var(--spacing-lg); +/* Container — centered content */ +.chat-input__container { + width: 100%; + max-width: 800px; } -/* Form Container */ +/* Form */ .chat-input__form { display: flex; align-items: flex-end; - gap: var(--spacing-sm); - border: var(--border-thick); - border-radius: var(--border-radius); - padding: var(--spacing-sm); - background-color: var(--color-surface); - box-shadow: var(--shadow-brutal-sm); - transition: all var(--transition-fast); + gap: 8px; + padding: 8px; + border: var(--border-thin); + border-radius: 32px; + background-color: var(--color-surface-lowest); + box-shadow: var(--shadow-input); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .chat-input__form:focus-within { - box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15), var(--shadow-brutal-sm); border-color: var(--color-primary); + box-shadow: var(--shadow-input-focus); } -/* Attachments */ -.chat-input__attachments { - display: flex; - align-items: center; - gap: var(--spacing-xs); - padding-bottom: 2px; -} - +/* Attachment Button */ .chat-input__attach-btn { display: flex; align-items: center; justify-content: center; - width: 38px; - height: 38px; - border: var(--border-medium); - border-radius: var(--border-radius); - background: transparent; + width: 44px; + height: 44px; + border: var(--border-thin); + border-radius: 50%; + background-color: var(--color-surface-lowest); cursor: pointer; - color: var(--color-text-variant); - box-shadow: var(--shadow-brutal-sm); - transition: all var(--transition-fast); -} - -.chat-input__attach-btn:hover { - background-color: var(--color-surface-variant); - color: var(--color-text); - transform: translateY(-1px); -} - -/* Textarea Field */ -.chat-input__field { - flex: 1; - font-family: var(--font-body); - font-size: 1rem; - font-weight: 600; - line-height: 1.5; - color: var(--color-text); - background-color: transparent; - border: none; - padding: var(--spacing-sm); - resize: none; - outline: none; - min-height: 24px; - max-height: 200px; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -.chat-input__field::placeholder { - color: var(--color-text-variant); - opacity: 0.6; -} - -/* Send Button */ -.chat-input__submit { - display: flex; - align-items: center; - justify-content: center; - width: 42px; - height: 42px; - border: var(--border-medium); - border-radius: var(--border-radius); - background: transparent; - cursor: not-allowed; - color: var(--color-text-variant); - box-shadow: var(--shadow-brutal-sm); - opacity: 0.4; - transition: all var(--transition-fast); + color: var(--color-on-surface-variant); + transition: background-color var(--transition-fast), color var(--transition-fast); flex-shrink: 0; } -.chat-input__submit--active { +.chat-input__attach-btn:hover { + background-color: var(--color-surface-low); + color: var(--color-primary); +} + +.chat-input__attach-btn .material-symbols-outlined { + font-size: 20px; + line-height: 1; +} + +/* Textarea */ +.chat-input__field { + flex: 1; + font-family: var(--font-body); + font-size: 15px; + font-weight: var(--font-weight-regular); + line-height: 1.5; + color: var(--color-primary); + background-color: transparent; + border: none; + padding: 8px 4px; + resize: none; + outline: none; + min-height: 44px; + max-height: 128px; +} + +.chat-input__field::placeholder { + color: var(--color-outline); + font-weight: var(--font-weight-regular); +} + +/* Actions Container */ +.chat-input__actions { + display: flex; + align-items: center; + gap: 4px; + flex-shrink: 0; +} + +/* Mic Button */ +.chat-input__mic-btn { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border: none; + border-radius: 50%; + background: transparent; + cursor: pointer; + color: var(--color-on-surface-variant); + transition: background-color var(--transition-fast), color var(--transition-fast); + flex-shrink: 0; +} + +.chat-input__mic-btn:hover { + background-color: var(--color-surface-low); + color: var(--color-primary); +} + +.chat-input__mic-btn .material-symbols-outlined { + font-size: 20px; + line-height: 1; +} + +/* Send Button */ +.chat-input__send-btn { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border: none; + border-radius: 50%; + background: transparent; + cursor: not-allowed; + color: var(--color-on-surface-variant); + opacity: 0.3; + transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); + flex-shrink: 0; +} + +.chat-input__send-btn--active { background-color: var(--color-primary); color: var(--color-on-primary); - border-color: var(--color-outline); cursor: pointer; opacity: 1; } -.chat-input__submit--active:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-brutal); +.chat-input__send-btn--active:hover { + opacity: 0.9; } -.chat-input__submit--active:active { - transform: translateY(2px); - box-shadow: none; +.chat-input__send-btn .material-symbols-outlined { + font-size: 20px; + line-height: 1; } /* Disclaimer */ .chat-input__disclaimer { - font-family: var(--font-heading); - font-size: 0.65rem; - font-weight: 800; - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--color-text-variant); - text-align: center; - margin-top: var(--spacing-md); - padding: var(--spacing-xs) var(--spacing-sm); - border: var(--border-medium); - border-radius: var(--border-radius); - display: inline-block; - background-color: var(--color-surface); - box-shadow: var(--shadow-brutal-sm); -} - -.chat-input__disclaimer-wrapper { + font-size: var(--font-size-label-sm); + font-weight: var(--font-weight-medium); + color: var(--color-on-surface-variant); text-align: center; + margin-top: 12px; } diff --git a/frontend/src/components/chat-input/ChatInput.jsx b/frontend/src/components/chat-input/ChatInput.jsx index af5633c..52ed5c9 100644 --- a/frontend/src/components/chat-input/ChatInput.jsx +++ b/frontend/src/components/chat-input/ChatInput.jsx @@ -1,11 +1,11 @@ /* ======================================== - ChatInput Component — padhLe + ChatInput Component — padhle (Refined Workspace) ======================================== */ import { useState, useRef, useEffect } from "react"; import "./ChatInput.css"; -const ChatInput = ({ onSend }) => { +const ChatInput = ({ onSend, placeholder }) => { const [text, setText] = useState(""); const textareaRef = useRef(null); @@ -38,79 +38,59 @@ const ChatInput = ({ onSend }) => { return (
-
+
- {/* Attachment buttons */} -
- - -
+ {/* Attachment */} + {/* Textarea */}