Upload components/ChatMessage.jsx with huggingface_hub

components/ChatMessage.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+const ChatMessage = ({ type, content, products, clarification, debug }) => {
+  return (
+    <div className={`msg mb-4 p-3 rounded-lg shadow-sm ${type === 'user' ? 'bg-blue-50 border-l-4 border-blue-500' : 'bg-green-50 border-r-4 border-green-500'}`}>
+      {type === 'user' && <div className="user font-bold text-blue-700 mb-1">👤 شما:</div>}
+      {type === 'bot' && <div className="bot font-bold text-green-700 mb-1">🤖 پاسخ:</div>}
+      
+      {type === 'text' && <p className="text-gray-800 whitespace-pre-wrap">{content}</p>}
+      
+      {type === 'product_list' && (
+        <div>
+          <p className="font-bold text-gray-700 mb-2"><b>نتیجه:</b> {content}</p>
+          <p className="text-sm text-gray-600 mb-3">تعداد: {products?.length || 0}</p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {products?.map((product, index) => (
+              <div key={index} className="product bg-white border border-gray-200 p-4 rounded-md shadow-sm hover:shadow-md transition-shadow">
+                <div className="font-bold text-lg text-gray-800 mb-1">{product.name}</div>
+                <div className="text-sm text-gray-600 mb-2">قیمت: {product.formatted_price} تومان</div>
+                <div className="text-sm text-gray-500 mb-2">وضعیت: {product.stock ? '✅ موجود' : '❌ ناموجود'}</div>
+                <div className="text-sm text-gray-500">
+                  برند: {product.brand || '-'} | شهر: {product.city || '-'}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      
+      {clarification && (
+        <div className="clarification mt-4 p-3 bg-red-50 border border-red-200 rounded text-red-700 font-bold">
+          ❗ ابهام تشخیص داده شد: {clarification}
+        </div>
+      )}
+      
+      {debug && (
+        <div className="debug-box mt-6 bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto">
+          <details>
+            <summary className="cursor-pointer font-bold hover:text-green-300">🧪 فیلترهای استخراج‌شده توسط LLM (JSON)</summary>
+            <pre className="text-xs mt-2 whitespace-pre-wrap">{JSON.stringify(debug, null, 2)}</pre>
+          </details>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatMessage;