Chat Message

1import { cn } from "@/lib/utils";
2import { Logo } from "@/components/ui/logo";
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4 
5interface Message {
6  id: string;
7  content: string;
8  sender: "user" | "ai";
9  timestamp: Date;
10}
11 
12interface ChatMessageProps {
13  message: Message;
14}
15 
16export function ChatMessage({ message }: ChatMessageProps) {
17  return (
18    <div
19      className={cn(
20        "flex gap-4",
21        message.sender === "user" ? "justify-end" : "justify-start"
22      )}
23    >
24      {message.sender === "ai" && (
25        <div className="shrink-0">
26          <div className="size-8 rounded-full bg-secondary flex items-center justify-center">
27            <Logo className="size-6" />
28          </div>
29        </div>
30      )}
31 
32      <div
33        className={cn(
34          "rounded-2xl px-4 py-3 max-w-[80%]",
35          message.sender === "user"
36            ? "bg-primary text-primary-foreground"
37            : "bg-secondary"
38        )}
39      >
40        <p className="text-sm leading-relaxed">{message.content}</p>
41      </div>
42 
43      {message.sender === "user" && (
44        <div className="shrink-0">
45          <Avatar className="size-8">
46            <AvatarImage src="/ln.png" alt="User" />
47            <AvatarFallback>U</AvatarFallback>
48          </Avatar>
49        </div>
50      )}
51    </div>
52  );
53}
54