hahachait
ab88ae30f1
- 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
43 lines
1.5 KiB
React
43 lines
1.5 KiB
React
/* ========================================
|
|
Message Component — padhle (Refined Workspace)
|
|
======================================== */
|
|
|
|
import "./Message.css";
|
|
|
|
const Message = ({ message }) => {
|
|
const { role, text } = message;
|
|
const isUser = role === "user";
|
|
|
|
return (
|
|
<div className={`message ${isUser ? "message--user" : "message--assistant"}`}>
|
|
{!isUser && (
|
|
<div className="message__avatar">
|
|
<div className="message__avatar-icon">
|
|
<span className="material-symbols-outlined" style={{ fontWeight: 700 }}>school</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="message__bubble">
|
|
<div className="message__text">{text}</div>
|
|
</div>
|
|
|
|
{/* Action buttons for assistant messages */}
|
|
{!isUser && (
|
|
<div className="message__actions">
|
|
<button className="message__action" aria-label="Helpful" title="Helpful">
|
|
<span className="material-symbols-outlined">thumb_up</span>
|
|
</button>
|
|
<button className="message__action" aria-label="Save note" title="Save Note">
|
|
<span className="material-symbols-outlined">bookmark_border</span>
|
|
</button>
|
|
<button className="message__action message__action--primary" aria-label="Explain deeper" title="Explain Deeper">
|
|
<span className="material-symbols-outlined" style={{ fontWeight: 700 }}>menu_book</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Message;
|