frontend/src/components/ChatMessage.tsx

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

export default function ChatMessage({ role, content }: ChatMessageProps) {
  const isUser = role === "user";

  return (
    <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-4`}>
      <div
        className={`max-w-[75%] rounded-2xl px-4 py-3 ${
          isUser
            ? "bg-blue-600 text-white"
            : "bg-gray-100 text-gray-900"
        }`}
      >
        <p className="text-sm font-medium mb-1 opacity-70">
          {isUser ? "Bạn" : "Trợ lý Pháp luật"}
        </p>
        <div className="whitespace-pre-wrap text-[15px] leading-relaxed">
          {content}
        </div>
      </div>
    </div>
  );
}