feat(frontend): Scholarchat-inspired UI refactor with top nav, sidebar, and message actions

- Add TopNav component with AI Chat, Study Guides, Progress tabs - Refactor sidebar to include brand, new chat, subjects, chat history, settings - Add message action buttons (Helpful, Note, Deeper) on assistant responses - Enhance ChatInput with photo, mic attachment icons and AI disclaimer - Improve welcome state with 2x2 suggested prompt grid - Update global layout for proper sidebar offset (fix nav overlap) - Remove obsolete Header component - All styles: strict BEM naming, zero inline CSS, Paper Look theme
2026-08-14 08:07:42 -04:00
commit c9085bdefb
35 changed files with 4907 additions and 0 deletions
@@ -0,0 +1,55 @@
+/* ========================================
+   ChatHistory Component — padhLe
+   ======================================== */
+
+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 hasMessages = messages.length > 0;
+
+  return (
+    <div className="chat-history">
+      {hasMessages ? (
+        <div className="chat-history__list">
+          {messages.map((message) => (
+            <Message key={message.id} message={message} />
+          ))}
+        </div>
+      ) : (
+        <div className="chat-history__empty">
+          <div className="chat-history__empty-content">
+            <h2 className="chat-history__empty-title">
+              Welcome to padhLe
+            </h2>
+            <p className="chat-history__empty-tagline">
+              Your AI tutor for grades 6–12. Ask anything!
+            </p>
+
+            <div className="chat-history__prompts">
+              {suggestedPrompts.map((prompt, index) => (
+                <button
+                  key={index}
+                  className="chat-history__prompt"
+                  onClick={() => onPromptClick(prompt.text)}
+                >
+                  <span className="chat-history__prompt-icon">{prompt.icon}</span>
+                  <span className="chat-history__prompt-text">{prompt.text}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatHistory;