41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { Avatar } from "@/components/ui/avatar"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface ChatMessageProps {
|
|
content: string
|
|
isUser: boolean
|
|
timestamp: Date
|
|
avatar?: string
|
|
}
|
|
|
|
export function ChatMessage({ content, isUser, timestamp, avatar }: ChatMessageProps) {
|
|
return (
|
|
<div className={cn("flex w-full gap-3 p-4", isUser ? "justify-end" : "justify-start")}>
|
|
{!isUser && (
|
|
<Avatar className="h-8 w-8">
|
|
<div className="bg-primary text-primary-foreground flex h-full w-full items-center justify-center rounded-full text-sm font-semibold">
|
|
AI
|
|
</div>
|
|
</Avatar>
|
|
)}
|
|
|
|
<div className={cn("rounded-lg p-3 max-w-[80%]", isUser ? "bg-primary text-primary-foreground" : "bg-muted")}>
|
|
<p className="whitespace-pre-wrap">{content}</p>
|
|
<div className={cn("text-xs mt-1", isUser ? "text-primary-foreground/70" : "text-muted-foreground")}>
|
|
{timestamp.toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{isUser && avatar && (
|
|
<Avatar className="h-8 w-8">
|
|
<img src={avatar || "/placeholder.svg"} alt="User" className="rounded-full" />
|
|
</Avatar>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|