ChatMessage.tsx

import React from 'react';

interface ChatMessageProps {
  message: string;
  sender: 'user' | 'agent';
  timestamp: Date;
}

export function ChatMessage({ message, sender, timestamp }: ChatMessageProps) {
  return (
    <div className={`flex ${sender === 'user' ? 'justify-end' : 'justify-start'} mb-4`}>
      <div className={`max-w-[70%] rounded-lg p-3 ${
        sender === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-100'
      }`}>
        <p className="text-sm">{message}</p>
        <span className="text-xs text-gray-500 mt-1">
          {timestamp.toLocaleTimeString()}
        </span>
      </div>
    </div>
  );
}