- ChatPanelContext with localStorage persistence (nexus:chat-panel-open) - ChatInput with Enter/Shift+Enter/Escape keyboard shortcuts and auto-resize - ChatMessage renders user bubbles (bg-secondary) and assistant markdown via ChatMarkdownMessage - ChatInput.test.tsx with 6 passing tests (keyboard shortcuts, max-height, submit state)
29 lines
685 B
TypeScript
29 lines
685 B
TypeScript
import { ChatMarkdownMessage } from "./ChatMarkdownMessage";
|
|
import { cn } from "../lib/utils";
|
|
|
|
interface ChatMessageProps {
|
|
role: "user" | "assistant" | "system";
|
|
content: string;
|
|
}
|
|
|
|
export function ChatMessage({ role, content }: ChatMessageProps) {
|
|
if (role === "user") {
|
|
return (
|
|
<div className="flex justify-end">
|
|
<div
|
|
className={cn(
|
|
"max-w-[85%] rounded-lg bg-secondary px-3 py-2 text-secondary-foreground text-sm",
|
|
)}
|
|
>
|
|
{content}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
// assistant or system
|
|
return (
|
|
<div className="max-w-full">
|
|
<ChatMarkdownMessage content={content} />
|
|
</div>
|
|
);
|
|
}
|