hackathon-template/components/chat/chat-messages.tsx
2026-05-08 20:24:34 +12:00

32 lines
889 B
TypeScript

import { cn } from "@/lib/utils";
import { UIMessage } from "ai";
interface ChatMessagesProps {
messages: UIMessage[];
}
export function ChatMessages({ messages }: ChatMessagesProps) {
return (
<div className="flex flex-col gap-2">
{messages.map((message, index) => (
<div
key={index}
className={cn(
"bg-primary text-primary-foreground px-3 py-2 rounded-lg whitespace-pre-wrap wrap-break-word break-all",
message.role === "user"
? "self-end bg-primary text-primary-foreground"
: "self-start bg-accent text-accent-foreground",
)}
>
{message.parts.map((part, index) => {
if (part.type === "text") {
return <span key={index}>{part.text}</span>;
}
return null;
})}
</div>
))}
</div>
);
}