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

import { cn } from '@/lib/utils';
import { renderMarkdown } from '@/lib/markdown';
import type { Message } from '@/types';

export function ChatMessage({ message }: { message: Message }) {
  const isUser = message.role === 'user';
  const isEmpty = !message.content;

  return (
    <div className={cn('mb-4 flex', isUser ? 'justify-end' : 'justify-start')}>
      <div
        className={cn(
          'max-w-[80%] rounded-lg px-4 py-2.5',
          isUser
            ? 'bg-zinc-800 text-zinc-100'
            : 'bg-zinc-900 text-zinc-300 border border-zinc-800'
        )}
      >
        {isEmpty ? (
          <span className="text-zinc-600 italic text-xs">...</span>
        ) : isUser ? (
          <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
        ) : (
          <div
            className="markdown-body text-sm leading-relaxed"
            dangerouslySetInnerHTML={{ __html: renderMarkdown(message.content) }}
          />
        )}
      </div>
    </div>
  );
}