Upload components/ChatMessage.js with huggingface_hub

components/ChatMessage.js

@@ -0,0 +1,32 @@
+export default function ChatMessage({ message, isUser }) {
+  const formatTime = (timestamp) => {
+    return new Date(timestamp).toLocaleTimeString('en-US', { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  };
+
+  return (
+    <div className={`flex mb-4 ${isUser ? 'justify-end' : 'justify-start'}`}>
+      <div className={`flex items-start space-x-2 max-w-[80%] ${isUser ? 'flex-row-reverse space-x-reverse' : ''}`}>
+        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-medium ${
+          isUser ? 'bg-primary-500' : 'bg-secondary-500'
+        }`}>
+          {isUser ? 'You' : 'AI'}
+        </div>
+        <div>
+          <div className={`message-bubble ${
+            isUser ? 'user-message' : 'bot-message'
+          }`}>
+            <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.content}</p>
+          </div>
+          <div className={`text-xs text-gray-500 mt-1 ${
+            isUser ? 'text-right' : 'text-left'
+          }`}>
+            {formatTime(message.timestamp)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}