blank/frontend-v2/components/ChatMessage.tsx

/**
 * 聊天消息组件
 */
'use client';

import { useEffect } from 'react';

interface ChatMessageProps {
  role: 'user' | 'assistant';
  content: string;
  isLoading?: boolean;
}

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

  // 调试日志
  useEffect(() => {
    if (!isUser) {
      console.log('[ChatMessage] Rendering assistant message:', {
        contentLength: content?.length || 0,
        contentPreview: content?.substring(0, 100),
        isLoading,
      });
    }
  }, [content, isLoading, isUser]);

  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
      <div
        className={`message-bubble ${
          isUser ? 'user-message' : 'assistant-message'
        }`}
      >
        {!isUser && (
          <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
            AI 助手
          </div>
        )}
        <div className="whitespace-pre-wrap break-words">
          {content || <span className="text-gray-400 italic">暂无内容</span>}
          {isLoading && (
            <span className="inline-block ml-1 animate-pulse">▊</span>
          )}
        </div>
      </div>
    </div>
  );
}