Update src/App.js

src/App.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { modelCompanies, allModels, findModelById } from './models/modelConfig';
+import { HuggingFaceService } from './services/huggingfaceService';
 import './App.css';
 
 function App() {
@@ -16,8 +17,21 @@ function App() {
   const messagesEndRef = useRef(null);
   const textareaRef = useRef(null);
   const dropdownRef = useRef(null);
+  const currentMessageRef = useRef(null);
 
-  // Check for stored token on component mount
+  // Initialize Lucide icons
+  useEffect(() => {
+    const initIcons = () => {
+      if (window.lucide) {
+        window.lucide.createIcons();
+      } else {
+        setTimeout(initIcons, 100);
+      }
+    };
+    initIcons();
+  }, []);
+
+  // Check for stored token
   useEffect(() => {
     const storedToken = localStorage.getItem('hf_token');
     if (storedToken) {
@@ -26,11 +40,7 @@ function App() {
     }
   }, []);
 
-  // Scroll to bottom of messages
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  };
-
+  // Scroll to bottom
   useEffect(() => {
     scrollToBottom();
   }, [messages]);
@@ -42,7 +52,6 @@ function App() {
         setShowModelDropdown(false);
       }
     };
-
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
@@ -64,18 +73,19 @@ function App() {
     }
   }, [isDarkMode]);
 
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
   const handleTokenSubmit = () => {
     if (!hfToken.trim()) {
       setError('Please enter your Hugging Face token');
       return;
     }
-
-    // Basic token validation (HF tokens typically start with "hf_")
     if (!hfToken.startsWith('hf_')) {
       setError('Please enter a valid Hugging Face token');
       return;
     }
-
     localStorage.setItem('hf_token', hfToken.trim());
     setShowAuth(false);
     setError('');
@@ -103,45 +113,65 @@ function App() {
     setIsLoading(true);
     setError('');
 
+    // Create assistant message for streaming
+    const assistantMessageId = Date.now() + 1;
+    const assistantMessage = {
+      id: assistantMessageId,
+      content: '',
+      role: 'assistant',
+      timestamp: new Date()
+    };
+
+    setMessages(prev => [...prev, assistantMessage]);
+    currentMessageRef.current = assistantMessageId;
+
     try {
       const currentModelConfig = findModelById(selectedModel);
+      const hfService = new HuggingFaceService(hfToken);
       
-      // Simulate API call - Replace this with actual Hugging Face Inference API call
-      const response = await simulateHuggingFaceCall(inputValue.trim(), currentModelConfig, hfToken);
-      
-      const aiMessage = {
-        id: Date.now() + 1,
-        content: response,
-        role: 'assistant',
-        timestamp: new Date()
-      };
-      setMessages(prev => [...prev, aiMessage]);
+      const chatMessages = [
+        ...messages.filter(msg => msg.role !== 'assistant' || msg.content),
+        userMessage
+      ].map(msg => ({
+        role: msg.role,
+        content: msg.content
+      }));
+
+      await hfService.streamChatCompletionAlt(
+        chatMessages,
+        currentModelConfig,
+        (chunk) => {
+          // Update message content with streaming chunks
+          setMessages(prev => prev.map(msg => 
+            msg.id === assistantMessageId 
+              ? { ...msg, content: msg.content + chunk }
+              : msg
+          ));
+        },
+        () => {
+          // Streaming completed
+          setIsLoading(false);
+          currentMessageRef.current = null;
+        },
+        (errorMsg) => {
+          // Error handling
+          setError(`Model error: ${errorMsg}`);
+          setIsLoading(false);
+          currentMessageRef.current = null;
+          
+          // Remove empty assistant message on error
+          setMessages(prev => prev.filter(msg => msg.id !== assistantMessageId));
+        }
+      );
+
     } catch (err) {
-      setError('Failed to get response from AI model. Please check your token and try again.');
-      console.error('API Error:', err);
-    } finally {
+      setError('Failed to connect to AI model');
       setIsLoading(false);
+      currentMessageRef.current = null;
+      setMessages(prev => prev.filter(msg => msg.id !== assistantMessageId));
     }
   };
 
-  // Simulate Hugging Face API call - Replace with actual implementation
-  const simulateHuggingFaceCall = async (message, modelConfig, token) => {
-    // This is a simulation - replace with actual Hugging Face Inference API
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(`This is a simulated response from ${modelConfig.name} (${modelConfig.company}). 
-
-In a real implementation, this would connect to the Hugging Face Inference API using:
-
-Model: ${modelConfig.endpoint}
-Provider: ${modelConfig.provider}
-Token: ${token.substring(0, 10)}...
-
-Your message: "${message}"`);
-      }, 2000);
-    });
-  };
-
   const handleKeyPress = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -155,17 +185,16 @@ Your message: "${message}"`);
   };
 
   const currentModel = findModelById(selectedModel);
-
-  // Group models by company for dropdown
   const groupedModels = modelCompanies;
 
+  // Auth Modal
   if (showAuth) {
     return (
       <div className={`App ${isDarkMode ? 'dark' : ''}`}>
         <div className="auth-modal">
           <div className="auth-content">
             <div className="logo" style={{ justifyContent: 'center', marginBottom: '24px' }}>
-              <i data-lucide="brain" width="32" height="32"></i>
+              <i data-lucide="brain"></i>
               <span style={{ fontSize: '28px' }}>SynapseAI</span>
             </div>
             
@@ -176,7 +205,7 @@ Your message: "${message}"`);
 
             {error && (
               <div className="error-message">
-                <i data-lucide="alert-circle" width="16" height="16" style={{ marginRight: '8px' }}></i>
+                <i data-lucide="alert-circle"></i>
                 {error}
               </div>
             )}
@@ -194,7 +223,7 @@ Your message: "${message}"`);
 
             <div className="auth-actions">
               <button className="btn primary" onClick={handleTokenSubmit}>
-                <i data-lucide="key" width="16" height="16"></i>
+                <i data-lucide="key"></i>
                 Start Chatting
               </button>
             </div>
@@ -211,16 +240,6 @@ Your message: "${message}"`);
             </div>
           </div>
         </div>
-
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              if (window.lucide) {
-                window.lucide.createIcons();
-              }
-            `
-          }}
-        />
       </div>
     );
   }
@@ -231,16 +250,16 @@ Your message: "${message}"`);
         {/* Header */}
         <header className="header">
           <div className="logo">
-            <i data-lucide="brain" width="28" height="28"></i>
+            <i data-lucide="brain"></i>
             <span>SynapseAI</span>
           </div>
           
           <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
             <div className="token-display">
-              <i data-lucide="key" width="14" height="14"></i>
+              <i data-lucide="key"></i>
               <span className="token-text">Token: {hfToken.substring(0, 10)}...</span>
               <div className="clear-token" onClick={handleClearToken} title="Clear token">
-                <i data-lucide="x" width="14" height="14"></i>
+                <i data-lucide="x"></i>
               </div>
             </div>
             
@@ -248,7 +267,7 @@ Your message: "${message}"`);
               className="btn ghost theme-toggle"
               onClick={() => setIsDarkMode(!isDarkMode)}
             >
-              <i data-lucide={isDarkMode ? "sun" : "moon"} width="20" height="20"></i>
+              <i data-lucide={isDarkMode ? "sun" : "moon"}></i>
             </button>
           </div>
         </header>
@@ -258,10 +277,10 @@ Your message: "${message}"`);
           {messages.length === 0 && (
             <div className="welcome-message">
               <div className="card" style={{ maxWidth: '600px', margin: '0 auto' }}>
-                <i data-lucide="sparkles" width="48" height="48" style={{ marginBottom: '16px', color: '#71717a' }}></i>
+                <i data-lucide="sparkles"></i>
                 <h2 style={{ marginBottom: '8px', fontSize: '24px', fontWeight: '600' }}>Welcome to SynapseAI</h2>
                 <p style={{ color: '#71717a', lineHeight: '1.5', marginBottom: '16px' }}>
-                  Start a conversation with our AI models. Select your preferred model from the dropdown below.
+                  Start a conversation with AI models. Select your preferred model below.
                 </p>
                 <p style={{ fontSize: '14px', color: '#a1a1aa' }}>
                   Current Model: <strong>{currentModel?.name}</strong> by {currentModel?.company}
@@ -273,12 +292,12 @@ Your message: "${message}"`);
           {messages.map((message) => (
             <div key={message.id} className={`message ${message.role}`}>
               <div className="message-content">
-                {message.content}
+                {message.content || (message.role === 'assistant' && isLoading && '...')}
               </div>
             </div>
           ))}
 
-          {isLoading && (
+          {isLoading && !currentMessageRef.current && (
             <div className="message assistant">
               <div className="typing-indicator">
                 <div className="typing-dot"></div>
@@ -294,7 +313,7 @@ Your message: "${message}"`);
         {/* Error Display */}
         {error && (
           <div className="error-message">
-            <i data-lucide="alert-circle" width="16" height="16" style={{ marginRight: '8px' }}></i>
+            <i data-lucide="alert-circle"></i>
             {error}
           </div>
         )}
@@ -308,9 +327,9 @@ Your message: "${message}"`);
                 className="btn model-selector"
                 onClick={() => setShowModelDropdown(!showModelDropdown)}
               >
-                <i data-lucide={currentModel?.companyLogo || "cpu"} width="16" height="16"></i>
+                <i data-lucide={currentModel?.companyLogo || "cpu"}></i>
                 <span style={{ flex: 1, textAlign: 'left' }}>{currentModel?.name}</span>
-                <i data-lucide="chevron-down" width="16" height="16"></i>
+                <i data-lucide="chevron-down"></i>
               </button>
 
               {showModelDropdown && (
@@ -318,7 +337,7 @@ Your message: "${message}"`);
                   {groupedModels.map((company) => (
                     <div key={company.id} className="company-section">
                       <div className="company-header">
-                        <i data-lucide={company.logo} width="16" height="16"></i>
+                        <i data-lucide={company.logo}></i>
                         {company.name}
                       </div>
                       {company.models.map((model) => (
@@ -332,9 +351,7 @@ Your message: "${message}"`);
                             <div className="model-description">{model.description}</div>
                           </div>
                           <div className="model-check">
-                            {selectedModel === model.id && (
-                              <i data-lucide="check" width="16" height="16"></i>
-                            )}
+                            {selectedModel === model.id && <i data-lucide="check"></i>}
                           </div>
                         </div>
                       ))}
@@ -362,22 +379,11 @@ Your message: "${message}"`);
               onClick={handleSendMessage}
               disabled={!inputValue.trim() || isLoading}
             >
-              <i data-lucide="send" width="18" height="18"></i>
+              <i data-lucide="send"></i>
             </button>
           </div>
         </div>
       </div>
-
-      {/* Initialize Lucide Icons */}
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-            if (window.lucide) {
-              window.lucide.createIcons();
-            }
-          `
-        }}
-      />
     </div>
   );
 }