Upload components/ChatMessage.jsx with huggingface_hub

components/ChatMessage.jsx

@@ -0,0 +1,82 @@
+export default function ChatMessage({ message }) {
+  const isBot = message.sender === 'bot'
+  
+  const formatTime = (date) => {
+    return new Date(date).toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    })
+  }
+
+  return (
+    <div
+      className={`flex items-start space-x-3 animate-slide-up ${
+        isBot ? '' : 'flex-row-reverse space-x-reverse'
+      }`}
+    >
+      <div
+        className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${
+          isBot
+            ? 'bg-primary-500'
+            : 'bg-gradient-to-br from-purple-500 to-pink-500'
+        }`}
+      >
+        {isBot ? (
+          <svg
+            className="w-6 h-6 text-white"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="w-6 h-6 text-white"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+            />
+          </svg>
+        )}
+      </div>
+
+      <div className="flex-1 max-w-[80%]">
+        <div
+          className={`rounded-2xl p-4 shadow-md ${
+            isBot
+              ? 'bg-white dark:bg-gray-800 rounded-tl-none'
+              : 'bg-gradient-to-br from-primary-500 to-primary-600 text-white rounded-tr-none'
+          }`}
+        >
+          <p
+            className={`text-sm md:text-base leading-relaxed ${
+              isBot ? 'text-gray-800 dark:text-gray-200' : 'text-white'
+            }`}
+          >
+            {message.text}
+          </p>
+        </div>
+        <p
+          className={`text-xs text-gray-500 dark:text-gray-400 mt-1 ${
+            isBot ? 'ml-2' : 'mr-2 text-right'
+          }`}
+        >
+          {formatTime(message.timestamp)}
+        </p>
+      </div>
+    </div>
+  )
+}