Update src/App.js

src/App.js

@@ -1,25 +1,227 @@
-import logo from './logo.svg';
+import React, { useState, useRef, useEffect } from 'react';
 import './App.css';
 
 function App() {
+  const [messages, setMessages] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [showModelDropdown, setShowModelDropdown] = useState(false);
+  const [selectedModel, setSelectedModel] = useState('synapse-7b');
+  
+  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' }
+  ];
+
+  // Scroll to bottom of messages
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setShowModelDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = '150px';
+      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 200) + 'px';
+    }
+  }, [inputValue]);
+
+  // Toggle dark mode
+  useEffect(() => {
+    if (isDarkMode) {
+      document.body.classList.add('dark');
+    } else {
+      document.body.classList.remove('dark');
+    }
+  }, [isDarkMode]);
+
+  const handleSendMessage = async () => {
+    if (!inputValue.trim() || isLoading) return;
+
+    const userMessage = {
+      id: Date.now(),
+      content: inputValue.trim(),
+      role: 'user',
+      timestamp: new Date()
+    };
+
+    setMessages(prev => [...prev, userMessage]);
+    setInputValue('');
+    setIsLoading(true);
+
+    // Simulate AI response
+    setTimeout(() => {
+      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.`,
+        role: 'assistant',
+        timestamp: new Date()
+      };
+      setMessages(prev => [...prev, aiMessage]);
+      setIsLoading(false);
+    }, 2000);
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  const handleModelSelect = (modelId) => {
+    setSelectedModel(modelId);
+    setShowModelDropdown(false);
+  };
+
+  const currentModel = availableModels.find(model => model.id === selectedModel);
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className={`App ${isDarkMode ? 'dark' : ''}`}>
+      <div className="chat-container">
+        {/* Header */}
+        <header className="header">
+          <div className="logo">
+            <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>
+        </header>
+
+        {/* Chat Messages */}
+        <div className="chat-messages">
+          {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>
+                <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>
+              </div>
+            </div>
+          )}
+
+          {messages.map((message) => (
+            <div key={message.id} className={`message ${message.role}`}>
+              <div className="message-content">
+                {message.content}
+              </div>
+            </div>
+          ))}
+
+          {isLoading && (
+            <div className="message assistant">
+              <div className="typing-indicator">
+                <div className="typing-dot"></div>
+                <div className="typing-dot"></div>
+                <div className="typing-dot"></div>
+              </div>
+            </div>
+          )}
+          
+          <div ref={messagesEndRef} />
+        </div>
+
+        {/* Input Area */}
+        <div className="input-container">
+          <div className="chat-input-wrapper">
+            {/* Model Selector */}
+            <div className="dropdown" ref={dropdownRef}>
+              <button 
+                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>
+              </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>
+                      </div>
+                      {selectedModel === model.id && (
+                        <i data-lucide="check" width="16" height="16"></i>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Chat Input */}
+            <textarea
+              ref={textareaRef}
+              className="input chat-input"
+              placeholder="Message SynapseAI..."
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyPress={handleKeyPress}
+              disabled={isLoading}
+              rows={1}
+            />
+
+            {/* Send Button */}
+            <button
+              className="send-button"
+              onClick={handleSendMessage}
+              disabled={!inputValue.trim() || isLoading}
+            >
+              <i data-lucide="send" width="20" height="20"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Initialize Lucide Icons */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            if (window.lucide) {
+              window.lucide.createIcons();
+            }
+          `
+        }}
+      />
     </div>
   );
 }
 
-export default App;
+export default App;