Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import ChatMessage from '../components/ChatMessage';
+import InputArea from '../components/InputArea';
+
+export default function Home() {
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const API_URL = 'http://localhost:8000/api/v1/chat'; // آدرس endpoint
+
+  const handleSend = async (message) => {
+    setIsLoading(true);
+    setError(null);
+    const userMessage = { type: 'user', content: message };
+    setMessages((prev) => [...prev, userMessage]);
+
+    try {
+      const res = await fetch(API_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: message,
+          user_id: 1,
+        }),
+      });
+
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setMessages((prev) => [...prev, { type: 'bot', ...data }]);
+    } catch (e) {
+      setError(e.message);
+      setMessages((prev) => [
+        ...prev,
+        { type: 'bot', content: `❌ خطا در ارسال پیام: ${e.message}` },
+      ]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex flex-col items-center py-10 px-4">
+      {/* Header */}
+      <div className="w-full max-w-4xl mb-8 text-center">
+        <h1 className="text-3xl md:text-4xl font-extrabold text-gray-800 mb-2">
+          🧠 Enterprise Search Chat
+        </h1>
+        <p className="text-gray-600">چت هوشمند جستجوی تجاری</p>
+      </div>
+
+      {/* Chat Container */}
+      <div className="w-full max-w-4xl bg-white rounded-xl shadow-lg overflow-hidden flex flex-col h-[70vh]">
+        {/* Messages Area */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4 bg-gray-50">
+          {messages.length === 0 && (
+            <div className="text-center text-gray-400 py-10">
+              <p className="text-lg">پیامی موجود نیست. شروع کنید!</p>
+              <p className="text-sm mt-2">مثال: برند اپکس بالای 5 میلیون</p>
+            </div>
+          )}
+          {messages.map((msg, idx) => (
+            <ChatMessage key={idx} {...msg} />
+          ))}
+          {isLoading && (
+            <div className="text-center text-gray-500 py-4 animate-pulse">
+              <p>در حال پردازش...</p>
+            </div>
+          )}
+          {error && (
+            <div className="bg-red-100 text-red-700 p-3 rounded-lg text-center">
+              {error}
+            </div>
+          )}
+        </div>
+
+        {/* Input Area */}
+        <div className="p-4 bg-white border-t border-gray-200">
+          <InputArea onSend={handleSend} />
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="mt-6 text-center">
+        Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noreferrer" className="text-blue-600 hover:text-blue-800 font-bold underline">anyCoder</a>
+      </div>
+    </div>
+  );
+}