Upload components/ChatInterface.jsx with huggingface_hub

components/ChatInterface.jsx

@@ -1,37 +1,19 @@
 import { useState, useRef, useEffect } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { FaRobot, FaUser, FaPaperPlane, FaMicrophone, FaStop, FaCopy, FaThumbsUp, FaThumbsDown, FaRedo, FaLanguage, FaBrain, FaGlobe, FaCheckCircle, FaExclamationTriangle } from 'react-icons/fa'
-import ReactMarkdown from 'react-markdown'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
-import toast from 'react-hot-toast'
+import { FaPaperPlane, FaMicrophone, FaStop } from 'react-icons/fa'
 
-export default function ChatInterface({ language, theme }) {
+const ChatInterface = ({ language }) => {
   const [messages, setMessages] = useState([
     {
       id: 1,
-      type: 'assistant',
-      content: language === 'fa' ? 
-        'سلام! من GhadirSync-AI هستم، دستیار هوشمند شما. چطور می‌توانم به شما کمک کنم؟' :
-        'Hello! I am GhadirSync-AI, your intelligent assistant. How can I help you?',
-      timestamp: new Date(),
-      sources: [],
-      confidence: 0.95
+      text: language === 'fa' 
+        ? 'سلام! من GhadirSync-AI هستم. چگونه می‌توانم به شما کمک کنم؟' 
+        : 'Hello! I am GhadirSync-AI. How can I help you?',
+      sender: 'bot'
     }
   ])
   const [input, setInput] = useState('')
-  const [isTyping, setIsTyping] = useState(false)
   const [isListening, setIsListening] = useState(false)
-  const [selectedModel, setSelectedModel] = useState('local')
-  const [useInternet, setUseInternet] = useState(false)
   const messagesEndRef = useRef(null)
-  const inputRef = useRef(null)
-
-  const models = [
-    { id: 'local', name: language === 'fa' ? 'مدل محلی' : 'Local Model', icon: FaBrain, color: 'text-green-400' },
-    { id: 'gpt4', name: 'GPT-4', icon: FaGlobe, color: 'text-blue-400' },
-    { id: 'claude', name: 'Claude', icon: FaBrain, color: 'text-purple-400' },
-  ]
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
@@ -41,226 +23,80 @@ export default function ChatInterface({ language, theme }) {
     scrollToBottom()
   }, [messages])
 
-  const handleSend = async () => {
+  const handleSend = () => {
     if (!input.trim()) return
 
     const userMessage = {
-      id: Date.now(),
-      type: 'user',
-      content: input,
-      timestamp: new Date(),
+      id: messages.length + 1,
+      text: input,
+      sender: 'user'
     }
 
-    setMessages(prev => [...prev, userMessage])
+    setMessages([...messages, userMessage])
     setInput('')
-    setIsTyping(true)
 
-    // Simulate AI response
+    // Simulate bot response
     setTimeout(() => {
-      const aiResponse = {
-        id: Date.now() + 1,
-        type: 'assistant',
-        content: generateAIResponse(input),
-        timestamp: new Date(),
-        sources: useInternet ? [
-          { title: 'Wikipedia', url: 'https://wikipedia.org' },
-          { title: 'Stack Overflow', url: 'https://stackoverflow.com' }
-        ] : [],
-        confidence: Math.random() * 0.3 + 0.7,
-        model: selectedModel
+      const botMessage = {
+        id: messages.length + 2,
+        text: language === 'fa' 
+          ? 'پیام شما دریافت شد. در حال پردازش درخواست...' 
+          : 'Message received. Processing your request...',
+        sender: 'bot'
       }
-      setMessages(prev => [...prev, aiResponse])
-      setIsTyping(false)
-    }, 1500)
-  }
-
-  const generateAIResponse = (userInput) => {
-    const responses = {
-      fa: [
-        `برای سوال "${userInput}"، من تحلیل کاملی ارائه می‌دهم:\n\n## تحلیل اصلی\n\n1. **نکته اول**: این یک موضوع مهم است\n2. **نکته دوم**: نیاز به بررسی بیشتر دارد\n3. **نکته سوم**: پیشنهادات عملی\n\n\`\`\`javascript\n// نمونه کد\nfunction example() {\n  return "Hello World";\n}\n\`\`\`\n\n**نتیجه‌گیری**: بر اساس تحلیل، بهترین راهکار...`,
-        `در پاسخ به "${userInput}":\n\n### اطلاعات کلیدی\n\n- 🎯 هدف اصلی\n- 📊 تحلیل داده‌ها\n- 💡 راهکارهای نوآورانه\n\n## پیشنهادات\n\n1. راهکار اول\n2. راهکار دوم\n3. راهکار سوم\n\n**توجه**: این اطلاعات بر اساس بهترین منابع موجود است.`,
-      ],
-      en: [
-        `For your question "${userInput}", here's my comprehensive analysis:\n\n## Main Analysis\n\n1. **First Point**: This is an important topic\n2. **Second Point**: Requires further investigation\n3. **Third Point**: Practical suggestions\n\n\`\`\`python\n# Sample code\ndef example():\n    return "Hello World"\n\`\`\`\n\n**Conclusion**: Based on the analysis, the best solution is...`,
-        `In response to "${userInput}":\n\n### Key Information\n\n- 🎯 Main objective\n- 📊 Data analysis\n- 💡 Innovative solutions\n\n## Recommendations\n\n1. First solution\n2. Second solution\n3. Third solution\n\n**Note**: This information is based on the best available sources.`,
-      ]
-    }
-
-    const langResponses = responses[language] || responses.en
-    return langResponses[Math.floor(Math.random() * langResponses.length)]
+      setMessages(prev => [...prev, botMessage])
+    }, 1000)
   }
 
-  const handleVoiceInput = () => {
-    if (isListening) {
-      setIsListening(false)
-      toast.success(language === 'fa' ? 'ضبط صدا متوقف شد' : 'Voice recording stopped')
-    } else {
-      setIsListening(true)
-      toast.success(language === 'fa' ? 'در حال ضبط صدا...' : 'Recording voice...')
-      
-      // Simulate voice recognition
-      setTimeout(() => {
-        setInput(language === 'fa' ? 'این یک متن نمونه از تشخیص صدا است' : 'This is a sample text from voice recognition')
-        setIsListening(false)
-      }, 3000)
-    }
-  }
-
-  const handleCopyMessage = (content) => {
-    navigator.clipboard.writeText(content)
-    toast.success(language === 'fa' ? 'کپی شد!' : 'Copied!')
-  }
-
-  const handleRegenerateResponse = (messageId) => {
-    setIsTyping(true)
-    setTimeout(() => {
-      setMessages(prev => prev.map(msg => 
-        msg.id === messageId 
-          ? { 
-              ...msg, 
-              content: generateAIResponse(' regenerated response'),
-              timestamp: new Date()
-            }
-          : msg
-      ))
-      setIsTyping(false)
-    }, 1500)
+  const toggleListening = () => {
+    setIsListening(!isListening)
+    // Here you would integrate with Web Speech API
   }
 
   return (
-    <div className="flex flex-col h-full space-y-4">
-      {/* Model Selection */}
-      <div className="flex items-center justify-between p-4 bg-gray-800 rounded-lg">
-        <div className="flex items-center space-x-reverse space-x-4">
-          <span className="text-sm font-medium">
-            {language === 'fa' ? 'مدل هوش مصنوعی:' : 'AI Model:'}
-          </span>
-          <div className="flex space-x-reverse space-x-2">
-            {models.map(model => {
-              const Icon = model.icon
-              return (
-                <button
-                  key={model.id}
-                  onClick={() => setSelectedModel(model.id)}
-                  className={`flex items-center space-x-reverse space-x-2 px-3 py-2 rounded-lg transition-all ${
-                    selectedModel === model.id
-                      ? 'bg-primary-600 text-white'
-                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
-                  }`}
-                >
-                  <Icon className={`w-4 h-4 ${model.color}`} />
-                  <span className="text-sm">{model.name}</span>
-                </button>
-              )
-            })}
+    <div className="bg-white rounded-lg shadow-md p-4">
+      <div className="h-96 overflow-y-auto mb-4 space-y-4">
+        {messages.map((message) => (
+          <div 
+            key={message.id} 
+            className={`flex ${message.sender === 'user' ? 'justify-start' : 'justify-end'}`}
+          >
+            <div 
+              className={`max-w-xs md:max-w-md lg:max-w-lg rounded-lg p-3 ${message.sender === 'user' 
+                ? 'bg-blue-100 text-blue-900' 
+                : 'bg-gray-200 text-gray-900'}`}
+            >
+              {message.text}
+            </div>
           </div>
-        </div>
-        
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="flex items-center">
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+          placeholder={language === 'fa' ? 'پیام خود را بنویسید...' : 'Type your message...'}
+          className="flex-1 p-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
         <button
-          onClick={() => setUseInternet(!useInternet)}
-          className={`flex items-center space-x-reverse space-x-2 px-3 py-2 rounded-lg transition-all ${
-            useInternet
-              ? 'bg-green-600 text-white'
-              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
-          }`}
+          onClick={toggleListening}
+          className={`px-3 py-2 ${isListening ? 'bg-red-500' : 'bg-gray-500'} text-white`}
         >
-          <FaGlobe className="w-4 h-4" />
-          <span className="text-sm">
-            {language === 'fa' ? 'اینترنت' : 'Internet'}
-          </span>
+          {isListening ? <FaStop /> : <FaMicrophone />}
+        </button>
+        <button
+          onClick={handleSend}
+          className="px-4 py-2 bg-blue-600 text-white rounded-r hover:bg-blue-700"
+        >
+          <FaPaperPlane />
         </button>
       </div>
+    </div>
+  )
+}
 
-      {/* Messages */}
-      <div className="flex-1 overflow-y-auto space-y-4 p-4 bg-gray-800 rounded-lg">
-        <AnimatePresence>
-          {messages.map(message => (
-            <motion.div
-              key={message.id}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -20 }}
-              className={`flex ${message.type === 'user' ? 'justify-start' : 'justify-end'}`}
-            >
-              <div className={`flex space-x-reverse space-x-3 max-w-3xl ${
-                message.type === 'user' ? 'flex-row' : 'flex-row-reverse'
-              }`}>
-                <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
-                  message.type === 'user' ? 'bg-primary-500' : 'bg-secondary-500'
-                }`}>
-                  {message.type === 'user' ? (
-                    <FaUser className="w-5 h-5 text-white" />
-                  ) : (
-                    <FaRobot className="w-5 h-5 text-white" />
-                  )}
-                </div>
-                
-                <div className={`flex-1 p-4 rounded-lg ${
-                  message.type === 'user' 
-                    ? 'bg-primary-600 text-white' 
-                    : 'bg-gray-700 text-gray-100'
-                }`}>
-                  <div className="flex items-start justify-between mb-2">
-                    <span className="text-xs opacity-75">
-                      {message.timestamp.toLocaleTimeString()}
-                    </span>
-                    {message.type === 'assistant' && (
-                      <div className="flex items-center space-x-reverse space-x-2">
-                        {message.confidence && (
-                          <span className="text-xs opacity-75">
-                            {Math.round(message.confidence * 100)}%
-                          </span>
-                        )}
-                        <button
-                          onClick={() => handleCopyMessage(message.content)}
-                          className="opacity-50 hover:opacity-100 transition-opacity"
-                        >
-                          <FaCopy className="w-3 h-3" />
-                        </button>
-                        <button
-                          onClick={() => handleRegenerateResponse(message.id)}
-                          className="opacity-50 hover:opacity-100 transition-opacity"
-                        >
-                          <FaRedo className="w-3 h-3" />
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                  
-                  <div className="prose prose-sm max-w-none prose-invert">
-                    <ReactMarkdown
-                      components={{
-                        code({ node, inline, className, children, ...props }) {
-                          const match = /language-(\w+)/.exec(className || '')
-                          return !inline && match ? (
-                            <SyntaxHighlighter
-                              style={vscDarkPlus}
-                              language={match[1]}
-                              PreTag="div"
-                              className="rounded-lg"
-                              {...props}
-                            >
-                              {String(children).replace(/\n$/, '')}
-                            </SyntaxHighlighter>
-                          ) : (
-                            <code className={className} {...props}>
-                              {children}
-                            </code>
-                          )
-                        }
-
-                    >
-                      {message.content}
-                    </ReactMarkdown>
-                  </div>
-                  
-                  {message.sources && message.sources.length > 0 && (
-                    <div className="mt-4 pt-4 border-t border-gray-600">
-                      <p className="text-xs font-medium mb-2 opacity-75">
-                        {language === 'fa' ? 'منابع:' : 'Sources:'}
-                      </p>
-                      <div className="space-y-1">
-                        {message.sources.map((source, index) => (
-                          <a
-                            key={index}
-                            href={source.url}
+export default ChatInterface