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>
  );
}