import { ChatMarkdownMessage } from "./ChatMarkdownMessage";
import { cn } from "../lib/utils";

interface ChatMessageProps {
  role: "user" | "assistant" | "system";
  content: string;
}

export function ChatMessage({ role, content }: ChatMessageProps) {
  if (role === "user") {
    return (
      <div className="flex justify-end">
        <div
          className={cn(
            "max-w-[85%] rounded-lg bg-secondary px-3 py-2 text-secondary-foreground text-sm",
          )}
        >
          {content}
        </div>
      </div>
    );
  }
  // assistant or system
  return (
    <div className="max-w-full">
      <ChatMarkdownMessage content={content} />
    </div>
  );
}