AI Chat Bubble

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card, CardContent } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";

export default function AIChatBubble01() {
  // Self-contained LLM chat messages
  const messages = [
    {
      id: 1,
      author: "User",
      avatar: "https://i.pravatar.cc/40?img=5",
      text: "Can you explain what ShadCN UI is?",
      timestamp: "10:02 AM",
    },
    {
      id: 2,
      author: "ChatGPT",
      avatar: "https://i.pravatar.cc/40?img=12",
      text: "Sure! ShadCN UI is a collection of accessible and composable React components built on top of Tailwind CSS, perfect for building modern UIs quickly.",
      timestamp: "10:03 AM",
    },
  ];

  return (
    <Card className="border-0 p-12">
      <CardContent className="p-0">
        <ScrollArea className="h-[400px]">
          {messages.map((msg) => (
            <div
              key={msg.id}
              className={cn(
                "flex items-start gap-3 mb-4",
                msg.author === "ChatGPT" ? "flex-row" : "flex-row-reverse"
              )}
            >
              <Avatar>
                <AvatarImage src={msg.avatar} />
                <AvatarFallback>{msg.author[0]}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                {/* Use ShadCN card-like bubbles without custom colors */}
                <Card className="p-2 rounded-lg border border-border max-w-md">
                  <CardContent className="p-0">
                    {msg.text}
                  </CardContent>
                </Card>
                <span className="text-xs text-muted-foreground mt-1 self-end">
                  {msg.timestamp}
                </span>
              </div>
            </div>
          ))}
        </ScrollArea>
      </CardContent>
    </Card>
  );
}