Update src/App.js

src/App.js

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+import { modelCompanies, allModels, findModelById } from './models/modelConfig';
 import './App.css';
 
 function App() {
@@ -7,17 +8,23 @@ function App() {
   const [isLoading, setIsLoading] = useState(false);
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [showModelDropdown, setShowModelDropdown] = useState(false);
-  const [selectedModel, setSelectedModel] = useState('synapse-7b');
-  
+  const [selectedModel, setSelectedModel] = useState('deepseek-v3.2-exp');
+  const [hfToken, setHfToken] = useState('');
+  const [showAuth, setShowAuth] = useState(true);
+  const [error, setError] = useState('');
+
   const messagesEndRef = useRef(null);
   const textareaRef = useRef(null);
   const dropdownRef = useRef(null);
 
-  const availableModels = [
-    { id: 'synapse-7b', name: 'Synapse-7B', description: 'Fast and efficient model for general tasks' },
-    { id: 'synapse-13b', name: 'Synapse-13B', description: 'Advanced model for complex reasoning' },
-    { id: 'synapse-70b', name: 'Synapse-70B', description: 'Most powerful model for expert tasks' }
-  ];
+  // Check for stored token on component mount
+  useEffect(() => {
+    const storedToken = localStorage.getItem('hf_token');
+    if (storedToken) {
+      setHfToken(storedToken);
+      setShowAuth(false);
+    }
+  }, []);
 
   // Scroll to bottom of messages
   const scrollToBottom = () => {
@@ -57,8 +64,32 @@ function App() {
     }
   }, [isDarkMode]);
 
+  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('');
+  };
+
+  const handleClearToken = () => {
+    localStorage.removeItem('hf_token');
+    setHfToken('');
+    setShowAuth(true);
+    setMessages([]);
+  };
+
   const handleSendMessage = async () => {
-    if (!inputValue.trim() || isLoading) return;
+    if (!inputValue.trim() || isLoading || !hfToken) return;
 
     const userMessage = {
       id: Date.now(),
@@ -70,18 +101,45 @@ function App() {
     setMessages(prev => [...prev, userMessage]);
     setInputValue('');
     setIsLoading(true);
+    setError('');
 
-    // Simulate AI response
-    setTimeout(() => {
+    try {
+      const currentModelConfig = findModelById(selectedModel);
+      
+      // 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: `This is a simulated response from ${selectedModel}. In a real implementation, this would connect to your Hugging Face model endpoint.`,
+        content: response,
         role: 'assistant',
         timestamp: new Date()
       };
       setMessages(prev => [...prev, aiMessage]);
+    } catch (err) {
+      setError('Failed to get response from AI model. Please check your token and try again.');
+      console.error('API Error:', err);
+    } finally {
       setIsLoading(false);
-    }, 2000);
+    }
+  };
+
+  // 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) => {
@@ -96,7 +154,76 @@ function App() {
     setShowModelDropdown(false);
   };
 
-  const currentModel = availableModels.find(model => model.id === selectedModel);
+  const currentModel = findModelById(selectedModel);
+
+  // Group models by company for dropdown
+  const groupedModels = modelCompanies;
+
+  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>
+              <span style={{ fontSize: '28px' }}>SynapseAI</span>
+            </div>
+            
+            <h2 className="auth-title">Welcome to SynapseAI</h2>
+            <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" width="16" height="16" style={{ marginRight: '8px' }}></i>
+                {error}
+              </div>
+            )}
+
+            <div className="auth-input">
+              <input
+                type="password"
+                className="input"
+                placeholder="Enter your Hugging Face token (hf_...)"
+                value={hfToken}
+                onChange={(e) => setHfToken(e.target.value)}
+                onKeyPress={(e) => e.key === 'Enter' && handleTokenSubmit()}
+              />
+            </div>
+
+            <div className="auth-actions">
+              <button className="btn primary" onClick={handleTokenSubmit}>
+                <i data-lucide="key" width="16" height="16"></i>
+                Start Chatting
+              </button>
+            </div>
+
+            <div className="token-info">
+              <h4>How to get your Hugging Face token:</h4>
+              <ol>
+                <li>Go to <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer">huggingface.co</a></li>
+                <li>Sign in to your account</li>
+                <li>Go to Settings → Access Tokens</li>
+                <li>Create a new token with read permissions</li>
+                <li>Copy and paste it here</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if (window.lucide) {
+                window.lucide.createIcons();
+              }
+            `
+          }}
+        />
+      </div>
+    );
+  }
 
   return (
     <div className={`App ${isDarkMode ? 'dark' : ''}`}>
@@ -107,12 +234,23 @@ function App() {
             <i data-lucide="brain" width="28" height="28"></i>
             <span>SynapseAI</span>
           </div>
-          <button 
-            className="btn ghost theme-toggle"
-            onClick={() => setIsDarkMode(!isDarkMode)}
-          >
-            <i data-lucide={isDarkMode ? "sun" : "moon"} width="20" height="20"></i>
-          </button>
+          
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            <div className="token-display">
+              <i data-lucide="key" width="14" height="14"></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>
+              </div>
+            </div>
+            
+            <button 
+              className="btn ghost theme-toggle"
+              onClick={() => setIsDarkMode(!isDarkMode)}
+            >
+              <i data-lucide={isDarkMode ? "sun" : "moon"} width="20" height="20"></i>
+            </button>
+          </div>
         </header>
 
         {/* Chat Messages */}
@@ -122,8 +260,11 @@ function App() {
               <div className="card" style={{ maxWidth: '600px', margin: '0 auto' }}>
                 <i data-lucide="sparkles" width="48" height="48" style={{ marginBottom: '16px', color: '#71717a' }}></i>
                 <h2 style={{ marginBottom: '8px', fontSize: '24px', fontWeight: '600' }}>Welcome to SynapseAI</h2>
-                <p style={{ color: '#71717a', lineHeight: '1.5' }}>
-                  Start a conversation with our AI assistant. Choose your preferred model and begin chatting!
+                <p style={{ color: '#71717a', lineHeight: '1.5', marginBottom: '16px' }}>
+                  Start a conversation with our AI models. Select your preferred model from the dropdown below.
+                </p>
+                <p style={{ fontSize: '14px', color: '#a1a1aa' }}>
+                  Current Model: <strong>{currentModel?.name}</strong> by {currentModel?.company}
                 </p>
               </div>
             </div>
@@ -150,6 +291,14 @@ function App() {
           <div ref={messagesEndRef} />
         </div>
 
+        {/* Error Display */}
+        {error && (
+          <div className="error-message">
+            <i data-lucide="alert-circle" width="16" height="16" style={{ marginRight: '8px' }}></i>
+            {error}
+          </div>
+        )}
+
         {/* Input Area */}
         <div className="input-container">
           <div className="chat-input-wrapper">
@@ -159,27 +308,36 @@ function App() {
                 className="btn model-selector"
                 onClick={() => setShowModelDropdown(!showModelDropdown)}
               >
-                <i data-lucide="cpu" width="16" height="16"></i>
-                <span style={{ marginLeft: '8px' }}>{currentModel.name}</span>
-                <i data-lucide="chevron-down" width="16" height="16" style={{ marginLeft: '4px' }}></i>
+                <i data-lucide={currentModel?.companyLogo || "cpu"} width="16" height="16"></i>
+                <span style={{ flex: 1, textAlign: 'left' }}>{currentModel?.name}</span>
+                <i data-lucide="chevron-down" width="16" height="16"></i>
               </button>
 
               {showModelDropdown && (
                 <div className="dropdown-content">
-                  {availableModels.map((model) => (
-                    <div
-                      key={model.id}
-                      className={`dropdown-item ${selectedModel === model.id ? 'active' : ''}`}
-                      onClick={() => handleModelSelect(model.id)}
-                    >
-                      <i data-lucide="cpu" width="16" height="16"></i>
-                      <div style={{ flex: 1 }}>
-                        <div style={{ fontWeight: '500' }}>{model.name}</div>
-                        <div style={{ fontSize: '12px', opacity: '0.7' }}>{model.description}</div>
+                  {groupedModels.map((company) => (
+                    <div key={company.id} className="company-section">
+                      <div className="company-header">
+                        <i data-lucide={company.logo} width="16" height="16"></i>
+                        {company.name}
                       </div>
-                      {selectedModel === model.id && (
-                        <i data-lucide="check" width="16" height="16"></i>
-                      )}
+                      {company.models.map((model) => (
+                        <div
+                          key={model.id}
+                          className={`dropdown-item ${selectedModel === model.id ? 'active' : ''}`}
+                          onClick={() => handleModelSelect(model.id)}
+                        >
+                          <div className="model-info">
+                            <div className="model-name">{model.name}</div>
+                            <div className="model-description">{model.description}</div>
+                          </div>
+                          <div className="model-check">
+                            {selectedModel === model.id && (
+                              <i data-lucide="check" width="16" height="16"></i>
+                            )}
+                          </div>
+                        </div>
+                      ))}
                     </div>
                   ))}
                 </div>
@@ -204,7 +362,7 @@ function App() {
               onClick={handleSendMessage}
               disabled={!inputValue.trim() || isLoading}
             >
-              <i data-lucide="send" width="20" height="20"></i>
+              <i data-lucide="send" width="18" height="18"></i>
             </button>
           </div>
         </div>