video-create/web/client/src/components/chat/ChatMessage.tsx

import { cn } from '@/lib/utils';
import { renderMarkdown } from '@/lib/markdown';
import { RefreshCw, ArrowRight, Quote, Bot, User } from 'lucide-react';
import type { Message } from '@/types';

interface Props {
  message: Message;
  onRegenerate?: (msgId: string) => void;
  onContinue?: (msgId: string) => void;
  onQuote?: (content: string) => void;
}

export function ChatMessage({ message, onRegenerate, onContinue, onQuote }: Props) {
  const isUser = message.role === 'user';
  const isEmpty = !message.content;

  return (
    <div className={cn('flex gap-3 mb-6', isUser ? 'flex-row-reverse' : 'flex-row')}>
      {/* Avatar */}
      <div className={cn(
        'w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0',
        isUser ? 'bg-indigo-600 text-white' : 'bg-zinc-100 text-zinc-500'
      )}>
        {isUser ? <User size={15} /> : <Bot size={15} />}
      </div>

      {/* Content */}
      <div className={cn('flex-1 max-w-[75%]', isUser && 'flex flex-col items-end')}>
        {/* Role label */}
        <div className={cn('text-[10px] font-medium mb-1 px-1', isUser ? 'text-right text-indigo-500' : 'text-zinc-400')}>
          {isUser ? '你' : '美图 Agent'}
        </div>

        {/* Bubble */}
        <div className={cn(
          'rounded-2xl px-4 py-3 text-sm leading-relaxed',
          isUser
            ? 'bg-indigo-600 text-white rounded-tr-md'
            : 'bg-white text-zinc-700 border border-zinc-200/60 shadow-sm rounded-tl-md'
        )}>
          {isEmpty ? (
            <div className="flex items-center gap-1 text-zinc-400">
              <span className="inline-block w-1.5 h-1.5 bg-zinc-300 rounded-full animate-pulse" />
              <span className="inline-block w-1.5 h-1.5 bg-zinc-300 rounded-full animate-pulse delay-100" />
              <span className="inline-block w-1.5 h-1.5 bg-zinc-300 rounded-full animate-pulse delay-200" />
            </div>
          ) : isUser ? (
            <p className="whitespace-pre-wrap">{message.content}</p>
          ) : (
            <div className="markdown-body" dangerouslySetInnerHTML={{ __html: renderMarkdown(message.content) }} />
          )}
        </div>

        {/* Actions - only for assistant messages */}
        {!isUser && !isEmpty && (
          <div className="flex gap-0.5 mt-1 opacity-0 hover:opacity-100 transition-opacity px-1">
            <button onClick={() => onQuote?.(message.content)}
              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors">
              <Quote size={10} />引用
            </button>
            <button onClick={() => onRegenerate?.(message.id)}
              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors">
              <RefreshCw size={10} />重新生成
            </button>
            <button onClick={() => onContinue?.(message.id)}
              className="flex items-center gap-1 px-2 py-0.5 rounded text-[10px] text-zinc-400 hover:text-zinc-600 hover:bg-zinc-100 transition-colors">
              <ArrowRight size={10} />继续
            </button>
          </div>
        )}
      </div>
    </div>
  );
}