import React from 'react';

interface ChatMessageProps {
  content: string;
  role: 'user' | 'assistant';
  timestamp: Date;
}

export const ChatMessage: React.FC<ChatMessageProps> = ({ content, role, timestamp }) => {
  // 格式化时间戳
  const formattedTime = timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  
  // 将消息内容按换行符分割
  const messageParts = content.split('\n');

  return (
    <div className={`flex items-end mb-4 ${role === 'user' ? 'justify-end' : 'justify-start'}`}>
      {role === 'assistant' && (
        <div className="user-avatar mr-2">
          <span>AI</span>
        </div>
      )}
      
      <div className={`p-3 rounded-lg ${role === 'user' ? 'message-user' : 'message-bot'}`}>
        {messageParts.map((part, index) => (
          <React.Fragment key={index}>
            {part}
            {index < messageParts.length - 1 && <br />}
          </React.Fragment>
        ))}
      </div>
      
      {role === 'user' && (
        <div className="user-avatar ml-2">
          <span>我</span>
        </div>
      )}
      
      <span className="text-xs text-gray-500 ml-2 opacity-70">
        {formattedTime}
      </span>
    </div>
  );
};