Update src/App.js

src/App.js

@@ -3,6 +3,9 @@ import { modelCompanies, allModels, findModelById } from './models/modelConfig';
 import { HuggingFaceService } from './services/huggingfaceService';
 import './App.css';
 
+// Import Lucide icons
+import { createIcons, Brain, Key, Sun, Moon, X, ChevronDown, Cpu, BrainCircuit, Atom, Check, Send, AlertCircle, Sparkles } from 'lucide-react';
+
 function App() {
   const [messages, setMessages] = useState([]);
   const [inputValue, setInputValue] = useState('');
@@ -21,14 +24,23 @@ function App() {
 
   // Initialize Lucide icons
   useEffect(() => {
-    const initIcons = () => {
-      if (window.lucide) {
-        window.lucide.createIcons();
-      } else {
-        setTimeout(initIcons, 100);
+    createIcons({
+      icons: {
+        Brain,
+        Key,
+        Sun,
+        Moon,
+        X,
+        ChevronDown,
+        Cpu,
+        BrainCircuit,
+        Atom,
+        Check,
+        Send,
+        AlertCircle,
+        Sparkles
       }
-    };
-    initIcons();
+    });
   }, []);
 
   // Check for stored token
@@ -59,7 +71,7 @@ function App() {
   // Auto-resize textarea
   useEffect(() => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = '150px';
+      textareaRef.current.style.height = 'auto';
       textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px';
     }
   }, [inputValue]);
@@ -137,35 +149,31 @@ function App() {
         content: msg.content
       }));
 
-      await hfService.streamChatCompletionAlt(
+      await hfService.streamChatCompletion(
         chatMessages,
         currentModelConfig,
         (chunk) => {
-          // Update message content with streaming chunks
           setMessages(prev => prev.map(msg => 
             msg.id === assistantMessageId 
-              ? { ...msg, content: msg.content + chunk }
+              ? { ...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 connect to AI model');
+      console.error('Chat error:', err);
+      setError(`Failed to connect to AI model: ${err.message}`);
       setIsLoading(false);
       currentMessageRef.current = null;
       setMessages(prev => prev.filter(msg => msg.id !== assistantMessageId));
@@ -202,14 +210,12 @@ function App() {
             <p className="auth-description">
               Enter your Hugging Face token to start chatting with AI models
             </p>
-
             {error && (
               <div className="error-message">
                 <i data-lucide="alert-circle"></i>
                 {error}
               </div>
             )}
-
             <div className="auth-input">
               <input
                 type="password"
@@ -220,14 +226,12 @@ function App() {
                 onKeyPress={(e) => e.key === 'Enter' && handleTokenSubmit()}
               />
             </div>
-
             <div className="auth-actions">
               <button className="btn primary" onClick={handleTokenSubmit}>
                 <i data-lucide="key"></i>
                 Start Chatting
               </button>
             </div>
-
             <div className="token-info">
               <h4>How to get your Hugging Face token:</h4>
               <ol>
@@ -288,7 +292,6 @@ function App() {
               </div>
             </div>
           )}
-
           {messages.map((message) => (
             <div key={message.id} className={`message ${message.role}`}>
               <div className="message-content">
@@ -296,7 +299,6 @@ function App() {
               </div>
             </div>
           ))}
-
           {isLoading && !currentMessageRef.current && (
             <div className="message assistant">
               <div className="typing-indicator">
@@ -331,7 +333,6 @@ function App() {
                 <span style={{ flex: 1, textAlign: 'left' }}>{currentModel?.name}</span>
                 <i data-lucide="chevron-down"></i>
               </button>
-
               {showModelDropdown && (
                 <div className="dropdown-content">
                   {groupedModels.map((company) => (