d1cb55ff1a
- New palette: deep nook green sidebar, sage user bubbles, warm cream answer cards - shadcn-style UI primitives: Button (CVA variants), Textarea, Input, Badge, Table - cn() utility (clsx + tailwind-merge) - lucide-react icons throughout (no more text-only buttons) - Simba mode: custom CSS toggle switch - Send button: circular amber button with arrow icon - AnswerBubble: amber gradient accent bar, loading dots animation - QuestionBubble: sage green pill with rounded-3xl - ToolBubble: centered leaf-green badge pill - ConversationList: active item highlighting, proper selectedId prop - Sidebar: collapsible with PanelLeftClose/Open icons, icon-only collapsed state - LoginScreen: decorative background blobs, refined rounded card - AdminPanel: proper icon buttons, leaf-green save confirmation - Fonts: Playfair Display (brand) + Nunito 800 weight added Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import ReactMarkdown from "react-markdown";
|
|
import { cn } from "../lib/utils";
|
|
|
|
type AnswerBubbleProps = {
|
|
text: string;
|
|
loading?: boolean;
|
|
};
|
|
|
|
export const AnswerBubble = ({ text, loading }: AnswerBubbleProps) => {
|
|
return (
|
|
<div className="flex justify-start message-enter">
|
|
<div
|
|
className={cn(
|
|
"max-w-[78%] rounded-3xl rounded-bl-md",
|
|
"bg-warm-white border border-sand-light/70",
|
|
"shadow-sm shadow-sand/30",
|
|
"overflow-hidden",
|
|
)}
|
|
>
|
|
{/* amber accent bar */}
|
|
<div className="h-0.5 w-full bg-gradient-to-r from-amber-soft via-amber-glow/50 to-transparent" />
|
|
|
|
<div className="px-4 py-3">
|
|
{loading ? (
|
|
<div className="flex items-center gap-1.5 py-1 px-1">
|
|
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
|
|
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
|
|
<span className="loading-dot w-2 h-2 rounded-full bg-amber-soft inline-block" />
|
|
</div>
|
|
) : (
|
|
<div className="markdown-content text-sm leading-relaxed text-charcoal">
|
|
<ReactMarkdown>{text}</ReactMarkdown>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|