Upload components/ChatMessage.jsx with huggingface_hub

components/ChatMessage.jsx

@@ -0,0 +1,14 @@
+import { format } from 'date-fns';
+
+export default function ChatMessage({ message, isUser }) {
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`}>
+      <div className={`max-w-xs md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg p-3 ${isUser ? 'bg-primary text-white rounded-br-none' : 'bg-gray-100 text-gray-800 rounded-bl-none'}`}>
+        <p className="mb-1">{message.text}</p>
+        <p className="text-xs opacity-70 text-right">
+          {format(new Date(message.timestamp), 'h:mm a')}
+        </p>
+      </div>
+    </div>
+  );
+}