frontend/src/components/assistant/MessageBubble.jsx

import { Bot, User } from 'lucide-react';
import { motion } from 'framer-motion';
import ReactMarkdown from 'react-markdown';

export default function MessageBubble({ message }) {
  const isUser = message.role === 'user';

  return (
    <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className={`flex gap-3 ${isUser ? 'flex-row-reverse' : ''}`}>
      <span
        className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border ${
          isUser ? 'border-amber-400/25 bg-amber-500/10' : 'border-cyan-400/25 bg-cyan-500/10'
        }`}
      >
        {isUser ? <User className="h-4 w-4 text-amber-200" /> : <Bot className="h-4 w-4 text-cyan-200" />}
      </span>
      <div className={`min-w-0 max-w-[84%] ${isUser ? 'items-end' : 'items-start'} flex flex-col gap-2`}>
        <div
          className={`rounded-lg border px-4 py-3 text-sm ${
            isUser
              ? 'path-text border-amber-400/20 bg-amber-500/10 text-slate-100'
              : message.error
                ? 'path-text border-red-400/20 bg-red-500/10 text-red-200'
                : 'path-text border-white/10 bg-white/[0.04] text-slate-100'
          }`}
        >
          {isUser ? <p>{message.content}</p> : <ReactMarkdown className="markdown-body">{message.content}</ReactMarkdown>}
        </div>
        {!isUser && message.details && (
          <div className="w-full space-y-1.5">
            {message.details.implementation && (
              <details className="rounded-lg border border-white/10 bg-white/[0.03] text-xs">
                <summary className="cursor-pointer px-3 py-2 font-medium text-cyan-200">Implementation</summary>
                <p className="px-3 pb-3 text-slate-400">{message.details.implementation}</p>
              </details>
            )}
            {message.details.risks && (
              <details className="rounded-lg border border-amber-400/15 bg-amber-500/[0.04] text-xs">
                <summary className="cursor-pointer px-3 py-2 font-medium text-amber-200">Risks</summary>
                <p className="px-3 pb-3 text-slate-400">{message.details.risks}</p>
              </details>
            )}
          </div>
        )}
      </div>
    </motion.div>
  );
}