refactor: redesign UI to match EduAI Refined Workspace
- Replace Bauhaus aesthetic with Material Design 3-inspired layout - Add working grade/subject/chapter dropdown selectors with placeholder options - Fix ChatInput layout: remove position:absolute, use flex column flow - Update sidebar with Material Icons, upgrade card, and clean hover states - Add TopNav dropdowns with click-outside-to-close behavior - Modernize message bubbles, action buttons, and welcome state - Replace SVG icons with Material Symbols throughout - Apply consistent BEM naming, CSS custom properties, no inline styles
This commit is contained in:
@@ -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 (
|
||||
<div className="chat-history">
|
||||
{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 (
|
||||
<div className="chat-history">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
<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>
|
||||
return (
|
||||
<div className="chat-history">
|
||||
<div className="chat-history__focus">
|
||||
{/* Welcome Header */}
|
||||
<div className="chat-history__welcome">
|
||||
<div className="chat-history__welcome-icon">
|
||||
<span className="material-symbols-outlined" style={{ fontWeight: 200 }}>menu_book</span>
|
||||
<span className="material-symbols-outlined chat-history__welcome-sparkle">auto_awesome</span>
|
||||
</div>
|
||||
<h2 className="chat-history__welcome-title">Welcome to padhle</h2>
|
||||
<p className="chat-history__welcome-subtitle">Your AI tutor for grades 6–12. Ask anything!</p>
|
||||
</div>
|
||||
|
||||
{/* Bento Grid Suggestions */}
|
||||
<div className="chat-history__bento">
|
||||
{suggestions.map((suggestion) => {
|
||||
const colorVar = suggestion.color.replace("--", "var(");
|
||||
const bgColorVar = suggestion.colorBg.replace("--", "var(");
|
||||
|
||||
return (
|
||||
<button
|
||||
key={suggestion.id}
|
||||
className="chat-history__bento-card"
|
||||
onClick={() => {
|
||||
const text = fullPromptTexts[suggestion.id - 1];
|
||||
onPromptClick(text);
|
||||
}}
|
||||
>
|
||||
<div className="chat-history__bento-icon-wrap" style={{ backgroundColor: `var(${bgColorVar})` }}>
|
||||
<span className="material-symbols-outlined" style={{ color: `var(${colorVar})`, fontWeight: suggestion.iconFilled ? 700 : 200 }}>
|
||||
{suggestion.icon}
|
||||
</span>
|
||||
</div>
|
||||
<div className="chat-history__bento-text">
|
||||
<span className="chat-history__bento-text-main">{suggestion.text}</span>
|
||||
<span className="chat-history__bento-text-highlight" style={{ color: `var(${colorVar})`, fontWeight: 600 }}>
|
||||
{suggestion.keywords[0]}
|
||||
</span>
|
||||
{suggestion.textEnd}
|
||||
</div>
|
||||
<span className="material-symbols-outlined chat-history__bento-arrow">arrow_forward</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Info Panel */}
|
||||
<div className="chat-history__info">
|
||||
<div className="chat-history__info-icon-wrap">
|
||||
<span className="material-symbols-outlined">lightbulb</span>
|
||||
</div>
|
||||
<div className="chat-history__info-content">
|
||||
<h4 className="chat-history__info-title">Focused on your learning</h4>
|
||||
<p className="chat-history__info-text">
|
||||
I'll answer questions related to your selected subject and chapter
|
||||
<br />
|
||||
using your textbook content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user