Update app.py

app.py

@@ -12,11 +12,16 @@ import re
 app = Flask(__name__)
 
 # Configure logging with file output in a writable directory
-log_path = '/app/openwebui.log'
-os.makedirs(os.path.dirname(log_path), exist_ok=True)
-log_handler = RotatingFileHandler(log_path, maxBytes=1000000, backupCount=5)
-log_handler.setFormatter(logging.Formatter('%(asctime)s - %(levelname)s - %(message)s'))
-logging.getLogger().addHandler(log_handler)
+log_dir = '/app/logs'
+log_path = os.path.join(log_dir, 'openwebui.log')
+try:
+    os.makedirs(log_dir, exist_ok=True)
+    log_handler = RotatingFileHandler(log_path, maxBytes=1000000, backupCount=5)
+    log_handler.setFormatter(logging.Formatter('%(asctime)s - %(levelname)s - %(message)s'))
+    logging.getLogger().addHandler(log_handler)
+except Exception as e:
+    logging.getLogger().addHandler(logging.StreamHandler())  # Fallback to stderr
+    logging.error(f"Failed to initialize file logging: {e}")
 logging.getLogger().setLevel(logging.INFO)
 
 # Configuration
@@ -28,7 +33,7 @@ TEMPERATURE = float(os.getenv('TEMPERATURE', '0.7'))
 class OllamaManager:
     def __init__(self, base_url: str):
         self.base_url = base_url.rstrip('/')
-        self.available_models = ALLOWED_MODELS  # Initialize with allowed models
+        self.available_models = ALLOWED_MODELS
         self.refresh_models()
     
     def refresh_models(self) -> None:
@@ -38,14 +43,19 @@ class OllamaManager:
             response.raise_for_status()
             data = response.json()
             models = [model['name'] for model in data.get('models', [])]
-            # Filter models to only include those in ALLOWED_MODELS
             self.available_models = [model for model in models if model in ALLOWED_MODELS]
             if not self.available_models:
                 self.available_models = ALLOWED_MODELS
                 logging.warning("No allowed models found in API response, using ALLOWED_MODELS")
             logging.info(f"Available models: {self.available_models}")
+        except requests.exceptions.ConnectionError as e:
+            logging.error(f"Connection error refreshing models: {e}")
+            self.available_models = ALLOWED_MODELS
+        except requests.exceptions.HTTPError as e:
+            logging.error(f"HTTP error refreshing models: {e}")
+            self.available_models = ALLOWED_MODELS
         except Exception as e:
-            logging.error(f"Error refreshing models: {e}")
+            logging.error(f"Unexpected error refreshing models: {e}")
             self.available_models = ALLOWED_MODELS
     
     def list_models(self) -> List[str]:
@@ -55,6 +65,7 @@ class OllamaManager:
     def generate(self, model_name: str, prompt: str, stream: bool = False, **kwargs) -> Any:
         """Generate text using a model, with optional streaming."""
         if model_name not in self.available_models:
+            logging.warning(f"Attempted to generate with unavailable model: {model_name}")
             return {"status": "error", "message": f"Model {model_name} not available"}
         
         try:
@@ -72,14 +83,21 @@ class OllamaManager:
                 response = requests.post(f"{self.base_url}/api/generate", json=payload, timeout=120)
                 response.raise_for_status()
                 data = response.json()
+                logging.info(f"Generated response with model {model_name}")
                 return {
                     "status": "success",
                     "response": data.get('response', ''),
                     "model": model_name,
                     "usage": data.get('usage', {})
                 }
+        except requests.exceptions.ConnectionError as e:
+            logging.error(f"Connection error generating response: {e}")
+            return {"status": "error", "message": f"Connection error: {str(e)}"}
+        except requests.exceptions.HTTPError as e:
+            logging.error(f"HTTP error generating response: {e}")
+            return {"status": "error", "message": f"HTTP error: {str(e)}"}
         except Exception as e:
-            logging.error(f"Error generating response: {e}")
+            logging.error(f"Unexpected error generating response: {e}")
             return {"status": "error", "message": str(e)}
     
     def health_check(self) -> Dict[str, Any]:
@@ -87,15 +105,22 @@ class OllamaManager:
         try:
             response = requests.get(f"{self.base_url}/api/tags", timeout=10)
             response.raise_for_status()
+            logging.info("Health check successful")
             return {"status": "healthy", "available_models": len(self.available_models)}
+        except requests.exceptions.ConnectionError as e:
+            logging.error(f"Health check connection error: {e}")
+            return {"status": "unhealthy", "error": f"Connection error: {str(e)}"}
+        except requests.exceptions.HTTPError as e:
+            logging.error(f"Health check HTTP error: {e}")
+            return {"status": "unhealthy", "error": f"HTTP error: {str(e)}"}
         except Exception as e:
-            logging.error(f"Health check failed: {e}")
+            logging.error(f"Health check unexpected error: {e}")
             return {"status": "unhealthy", "error": str(e)}
 
 # Initialize Ollama manager
 ollama_manager = OllamaManager(OLLAMA_BASE_URL)
 
-# HTML template for the chat interface with improved UI and Sandpack
+# HTML template for the chat interface with comprehensive, mobile-optimized UI
 HTML_TEMPLATE = '''
 <!DOCTYPE html>
 <html lang="en">
@@ -115,28 +140,32 @@ HTML_TEMPLATE = '''
     </script>
     <style>
         :root {
-            --primary-color: #667eea;
-            --secondary-color: #764ba2;
+            --primary-color: #5a4bff;
+            --secondary-color: #7b3fe4;
             --text-color: #333;
-            --bg-color: #fafbfc;
+            --bg-color: #f8fafc;
             --message-bg-user: var(--primary-color);
             --message-bg-assistant: white;
             --avatar-user: var(--primary-color);
-            --avatar-assistant: #28a745;
-            --border-color: #e9ecef;
+            --avatar-assistant: #2ea44f;
+            --border-color: #e2e8f0;
             --input-bg: white;
+            --sidebar-bg: #ffffff;
+            --sidebar-border: #e2e8f0;
         }
         .dark-mode {
             --primary-color: #3b4a8c;
             --secondary-color: #4a2e6b;
-            --text-color: #f0f0f0;
-            --bg-color: #1a1a1a;
+            --text-color: #e2e8f0;
+            --bg-color: #1a202c;
             --message-bg-user: var(--primary-color);
-            --message-bg-assistant: #2a2a2a;
+            --message-bg-assistant: #2d3748;
             --avatar-user: var(--primary-color);
-            --avatar-assistant: #1a7a3a;
-            --border-color: #4a4a4a;
-            --input-bg: #3a3a3a;
+            --avatar-assistant: #276749;
+            --border-color: #4a5568;
+            --input-bg: #2d3748;
+            --sidebar-bg: #2d3748;
+            --sidebar-border: #4a5568;
         }
         * {
             margin: 0;
@@ -148,55 +177,110 @@ HTML_TEMPLATE = '''
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
             color: var(--text-color);
             min-height: 100vh;
-            padding: 20px;
+            overflow-x: hidden;
         }
         .container {
-            max-width: 1200px;
-            margin: 0 auto;
+            display: flex;
+            max-width: 100%;
+            min-height: 100vh;
             background: var(--bg-color);
-            border-radius: 20px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-            overflow: hidden;
-            position: relative;
         }
-        .theme-toggle {
-            position: absolute;
+        .sidebar {
+            width: 250px;
+            background: var(--sidebar-bg);
+            border-right: 1px solid var(--sidebar-border);
+            padding: 20px;
+            position: fixed;
+            height: 100%;
+            transform: translateX(-100%);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+        }
+        .sidebar.open {
+            transform: translateX(0);
+        }
+        .sidebar-toggle {
+            position: fixed;
             top: 10px;
-            right: 10px;
-            background: none;
+            left: 10px;
+            background: var(--primary-color);
+            color: white;
             border: none;
+            padding: 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            z-index: 1100;
+        }
+        .sidebar h2 {
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+        }
+        .chat-history {
+            list-style: none;
+            overflow-y: auto;
+            max-height: calc(100vh - 100px);
+        }
+        .chat-history-item {
+            padding: 10px;
+            border-radius: 8px;
+            margin-bottom: 10px;
             cursor: pointer;
-            font-size: 1.2rem;
+            transition: background 0.2s;
+        }
+        .chat-history-item:hover {
+            background: var(--border-color);
+        }
+        .chat-history-item.active {
+            background: var(--primary-color);
             color: white;
         }
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
         .header {
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
             color: white;
-            padding: 30px;
+            padding: 20px;
             text-align: center;
+            position: relative;
+        }
+        .theme-toggle {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.5rem;
+            color: white;
         }
         .header h1 {
-            font-size: 2.5rem;
+            font-size: 2rem;
             margin-bottom: 10px;
             font-weight: 700;
         }
         .header p {
-            font-size: 1.1rem;
+            font-size: 1rem;
             opacity: 0.9;
         }
         .controls {
-            padding: 20px 30px;
+            padding: 15px 20px;
             background: var(--bg-color);
             border-bottom: 1px solid var(--border-color);
             display: flex;
-            gap: 15px;
-            align-items: center;
+            gap: 10px;
             flex-wrap: wrap;
+            justify-content: center;
         }
         .control-group {
             display: flex;
             align-items: center;
             gap: 8px;
+            flex: 1;
+            min-width: 200px;
         }
         .control-group label {
             font-weight: 600;
@@ -205,7 +289,8 @@ HTML_TEMPLATE = '''
         }
         .control-group select,
         .control-group input {
-            padding: 8px 12px;
+            flex: 1;
+            padding: 10px;
             border: 2px solid var(--border-color);
             border-radius: 8px;
             font-size: 14px;
@@ -219,7 +304,7 @@ HTML_TEMPLATE = '''
             border-color: var(--primary-color);
         }
         .chat-container {
-            height: 500px;
+            flex: 1;
             overflow-y: auto;
             padding: 20px;
             background: var(--bg-color);
@@ -254,7 +339,7 @@ HTML_TEMPLATE = '''
             background: var(--message-bg-assistant);
             padding: 15px 20px;
             border-radius: 18px;
-            max-width: 70%;
+            max-width: 80%;
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             line-height: 1.5;
             color: var(--text-color);
@@ -278,6 +363,7 @@ HTML_TEMPLATE = '''
             cursor: pointer;
             font-size: 12px;
             color: var(--text-color);
+            transition: background 0.2s;
         }
         .code-button:hover {
             background: rgba(0,0,0,0.2);
@@ -289,24 +375,25 @@ HTML_TEMPLATE = '''
             overflow: hidden;
         }
         .input-container {
-            padding: 20px 30px;
+            padding: 15px 20px;
             background: var(--bg-color);
             border-top: 1px solid var(--border-color);
         }
         .input-form {
             display: flex;
-            gap: 15px;
+            gap: 10px;
+            align-items: center;
         }
         .input-field {
             flex: 1;
-            padding: 15px 20px;
+            padding: 12px 15px;
             border: 2px solid var(--border-color);
             border-radius: 25px;
             font-size: 16px;
             transition: border-color 0.3s;
             resize: none;
             min-height: 50px;
-            max-height: 120px;
+            max-height: 150px;
             background: var(--input-bg);
             color: var(--text-color);
         }
@@ -315,7 +402,7 @@ HTML_TEMPLATE = '''
             border-color: var(--primary-color);
         }
         .send-button {
-            padding: 15px 30px;
+            padding: 12px 20px;
             background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
             color: white;
             border: none;
@@ -324,7 +411,7 @@ HTML_TEMPLATE = '''
             font-weight: 600;
             cursor: pointer;
             transition: transform 0.2s;
-            min-width: 100px;
+            min-width: 80px;
         }
         .send-button:hover {
             transform: translateY(-2px);
@@ -353,107 +440,173 @@ HTML_TEMPLATE = '''
             border-radius: 18px;
             color: #6c757d;
             font-style: italic;
+            margin: 20px;
         }
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
         @media (max-width: 768px) {
+            .container {
+                flex-direction: column;
+            }
+            .sidebar {
+                width: 100%;
+                height: auto;
+                max-height: 80vh;
+                position: fixed;
+                top: 0;
+                left: 0;
+                transform: translateY(-100%);
+                border-right: none;
+                border-bottom: 1px solid var(--sidebar-border);
+            }
+            .sidebar.open {
+                transform: translateY(0);
+            }
+            .sidebar-toggle {
+                top: 10px;
+                left: 10px;
+                z-index: 1100;
+            }
+            .main-content {
+                margin-top: 60px;
+            }
             .controls {
                 flex-direction: column;
-                align-items: stretch;
+                gap: 15px;
             }
             .control-group {
-                justify-content: space-between;
+                flex-direction: column;
+                align-items: stretch;
+            }
+            .control-group select,
+            .control-group input {
+                width: 100%;
             }
             .message-content {
-                max-width: 85%;
+                max-width: 90%;
+            }
+            .header {
+                padding: 15px;
+            }
+            .header h1 {
+                font-size: 1.8rem;
+            }
+            .header p {
+                font-size: 0.9rem;
+            }
+            .input-container {
+                padding: 10px 15px;
+            }
+            .send-button {
+                padding: 10px 15px;
+                min-width: 60px;
             }
         }
     </style>
 </head>
 <body>
+    <button class="sidebar-toggle" id="sidebar-toggle">☰</button>
     <div class="container">
-        <div class="header">
-            <h1>🤖 OpenWebUI</h1>
-            <p>Chat with your local Ollama models through Hugging Face Spaces</p>
+        <div class="sidebar" id="sidebar">
+            <h2>Chat History</h2>
+            <ul class="chat-history" id="chat-history">
+                <!-- Chat history items will be populated here -->
+            </ul>
         </div>
-        
-        <div class="controls">
-            <div class="control-group">
-                <label for="model-select">Model:</label>
-                <select id="model-select">
-                    <option value="">Select a model...</option>
-                </select>
+        <div class="main-content">
+            <div class="header">
+                <button class="theme-toggle" id="theme-toggle">🌙</button>
+                <h1>🤖 OpenWebUI</h1>
+                <p>Chat with AI models powered by Ollama on Hugging Face Spaces</p>
             </div>
-            <div class="control-group">
-                <label for="temperature">Temperature:</label>
-                <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7">
-                <span id="temp-value">0.7</span>
-            </div>
-            <div class="control-group">
-                <label for="max-tokens">Max Tokens:</label>
-                <input type="number" id="max-tokens" min="1" max="4096" value="2048">
+            
+            <div class="controls">
+                <div class="control-group">
+                    <label for="model-select">Model:</label>
+                    <select id="model-select">
+                        <option value="">Select a model...</option>
+                    </select>
+                </div>
+                <div class="control-group">
+                    <label for="temperature">Temperature:</label>
+                    <div style="flex: 1; display: flex; align-items: center; gap: 8px;">
+                        <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7">
+                        <span id="temp-value">0.7</span>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label for="max-tokens">Max Tokens:</label>
+                    <input type="number" id="max-tokens" min="1" max="4096" value="2048">
+                </div>
             </div>
-        </div>
-        
-        <div class="chat-container" id="chat-container">
-            <div class="message assistant">
-                <div class="message-avatar">AI</div>
-                <div class="message-content">
-                    Hello! I'm your AI assistant powered by Ollama. How can I help you today?
+            
+            <div class="chat-container" id="chat-container">
+                <div class="message assistant">
+                    <div class="message-avatar">AI</div>
+                    <div class="message-content">
+                        Hello! I'm your AI assistant powered by Ollama. How can I help you today?
+                    </div>
                 </div>
             </div>
+            
+            <div class="typing-indicator" id="typing-indicator">
+                AI is thinking...
+            </div>
+            
+            <div class="input-container">
+                <form class="input-form" id="chat-form">
+                    <textarea 
+                        class="input-field" 
+                        id="message-input" 
+                        placeholder="Type your message here..."
+                        rows="1"
+                    ></textarea>
+                    <button type="submit" class="send-button" id="send-button">
+                        Send
+                    </button>
+                </form>
+            </div>
+            
+            <div class="status" id="status"></div>
         </div>
-        
-        <div class="typing-indicator" id="typing-indicator">
-            AI is thinking...
-        </div>
-        
-        <div class="input-container">
-            <form class="input-form" id="chat-form">
-                <textarea 
-                    class="input-field" 
-                    id="message-input" 
-                    placeholder="Type your message here..."
-                    rows="1"
-                ></textarea>
-                <button type="submit" class="send-button" id="send-button">
-                    Send
-                </button>
-            </form>
-        </div>
-        
-        <div class="status" id="status"></div>
     </div>
 
     <script type="module">
         import { Sandpack } from 'https://esm.sh/@codesandbox/sandpack-react@latest';
 
-        let conversationHistory = [];
+        let conversationHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
+        let currentConversationId = null;
         let currentMessageDiv = null;
         let currentCodeBlocks = [];
 
         document.addEventListener('DOMContentLoaded', function() {
             loadModels();
+            loadChatHistory();
             setupEventListeners();
             autoResizeTextarea();
         });
-        
+
         function toggleTheme() {
             document.body.classList.toggle('dark-mode');
             const themeToggle = document.getElementById('theme-toggle');
             themeToggle.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';
             localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
         }
-        
+
         function loadTheme() {
             if (localStorage.getItem('theme') === 'dark') {
                 document.body.classList.add('dark-mode');
                 document.getElementById('theme-toggle').textContent = '☀️';
             }
         }
-        
+
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('open');
+        }
+
         async function loadModels() {
             const modelSelect = document.getElementById('model-select');
             modelSelect.innerHTML = '<option value="">Loading models...</option>';
@@ -485,7 +638,51 @@ HTML_TEMPLATE = '''
                 showStatus('Failed to load models: ' + error.message, 'error');
             }
         }
-        
+
+        function loadChatHistory() {
+            const chatHistoryList = document.getElementById('chat-history');
+            chatHistoryList.innerHTML = '';
+            conversationHistory.forEach((conv, index) => {
+                const li = document.createElement('li');
+                li.className = 'chat-history-item';
+                li.textContent = `Chat ${index + 1} - ${new Date(conv.timestamp).toLocaleString()}`;
+                li.dataset.convId = index;
+                li.addEventListener('click', () => loadConversation(index));
+                chatHistoryList.appendChild(li);
+            });
+            if (conversationHistory.length > 0) {
+                loadConversation(conversationHistory.length - 1);
+            }
+        }
+
+        function loadConversation(convId) {
+            currentConversationId = convId;
+            const chatContainer = document.getElementById('chat-container');
+            chatContainer.innerHTML = '';
+            const conversation = conversationHistory[convId];
+            conversation.messages.forEach(msg => {
+                const messageDiv = addMessage(msg.content, msg.role, false, false);
+                if (msg.role === 'assistant') {
+                    processCodeBlocks(messageDiv, msg.content);
+                }
+            });
+            const historyItems = document.querySelectorAll('.chat-history-item');
+            historyItems.forEach(item => item.classList.remove('active'));
+            historyItems[convId].classList.add('active');
+        }
+
+        function saveConversation() {
+            if (currentConversationId === null) {
+                conversationHistory.push({
+                    timestamp: Date.now(),
+                    messages: []
+                });
+                currentConversationId = conversationHistory.length - 1;
+            }
+            localStorage.setItem('chatHistory', JSON.stringify(conversationHistory));
+            loadChatHistory();
+        }
+
         function setupEventListeners() {
             document.getElementById('chat-form').addEventListener('submit', handleSubmit);
             document.getElementById('temperature').addEventListener('input', function() {
@@ -493,13 +690,14 @@ HTML_TEMPLATE = '''
             });
             document.getElementById('message-input').addEventListener('input', autoResizeTextarea);
             document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
+            document.getElementById('sidebar-toggle').addEventListener('click', toggleSidebar);
             loadTheme();
         }
         
         function autoResizeTextarea() {
             const textarea = document.getElementById('message-input');
             textarea.style.height = 'auto';
-            textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+            textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
         }
         
         async function handleSubmit(e) {
@@ -520,6 +718,12 @@ HTML_TEMPLATE = '''
             }
             
             addMessage(message, 'user');
+            if (currentConversationId === null) {
+                saveConversation();
+            }
+            conversationHistory[currentConversationId].messages.push({ role: 'user', content: message });
+            localStorage.setItem('chatHistory', JSON.stringify(conversationHistory));
+            
             messageInput.value = '';
             autoResizeTextarea();
             showTypingIndicator(true);
@@ -566,11 +770,15 @@ HTML_TEMPLATE = '''
                 }
                 
                 processCodeBlocks(currentMessageDiv, accumulatedResponse);
+                conversationHistory[currentConversationId].messages.push({ role: 'assistant', content: accumulatedResponse });
+                localStorage.setItem('chatHistory', JSON.stringify(conversationHistory));
                 showStatus(`Response generated using ${model}`, 'success');
             } catch (error) {
                 showTypingIndicator(false);
                 if (currentMessageDiv) {
                     updateMessage(currentMessageDiv, 'Sorry, I encountered a network error.');
+                    conversationHistory[currentConversationId].messages.push({ role: 'assistant', content: 'Sorry, I encountered a network error.' });
+                    localStorage.setItem('chatHistory', JSON.stringify(conversationHistory));
                 } else {
                     addMessage('Sorry, I encountered a network error.', 'assistant');
                 }
@@ -578,7 +786,7 @@ HTML_TEMPLATE = '''
             }
         }
         
-        function addMessage(content, sender, isStreaming = false) {
+        function addMessage(content, sender, isStreaming = false, save = true) {
             const chatContainer = document.getElementById('chat-container');
             const messageDiv = document.createElement('div');
             messageDiv.className = `message ${sender}`;
@@ -596,8 +804,12 @@ HTML_TEMPLATE = '''
             chatContainer.appendChild(messageDiv);
             chatContainer.scrollTop = chatContainer.scrollHeight;
             
-            if (!isStreaming) {
-                conversationHistory.push({ role: sender, content: content });
+            if (!isStreaming && save) {
+                if (currentConversationId === null) {
+                    saveConversation();
+                }
+                conversationHistory[currentConversationId].messages.push({ role: sender, content: content });
+                localStorage.setItem('chatHistory', JSON.stringify(conversationHistory));
             }
             return messageDiv;
         }
@@ -621,23 +833,19 @@ HTML_TEMPLATE = '''
                 const code = match[2].trim();
                 const startIndex = match.index;
                 
-                // Add text before the code block
                 if (startIndex > lastIndex) {
                     fragments.push({ type: 'text', content: content.slice(lastIndex, startIndex) });
                 }
                 
-                // Add code block
                 fragments.push({ type: 'code', language, content: code });
                 currentCodeBlocks.push({ language, content: code });
                 lastIndex = codeBlockRegex.lastIndex;
             }
             
-            // Add remaining text
             if (lastIndex < content.length) {
                 fragments.push({ type: 'text', content: content.slice(lastIndex) });
             }
             
-            // Clear message content and rebuild with fragments
             messageContent.innerHTML = '';
             fragments.forEach((fragment, index) => {
                 if (fragment.type === 'text') {
@@ -681,7 +889,7 @@ HTML_TEMPLATE = '''
                     script.textContent = `
                         import { Sandpack } from '@codesandbox/sandpack-react';
                         import { createRoot } from 'react-dom';
-                        const root = createRoot(document.getElementById('sandpack-${index}'));
+                        const root = createRoot(document.getElementById('sandpack-${currentConversationId}-${index}'));
                         root.render(
                             React.createElement(Sandpack, {
                                 template: "${fragment.language === 'javascript' ? 'react' : fragment.language}",
@@ -699,14 +907,12 @@ HTML_TEMPLATE = '''
                     `;
                     
                     const sandboxDiv = document.createElement('div');
-                    sandboxDiv.id = `sandpack-${index}`;
+                    sandboxDiv.id = `sandpack-${currentConversationId}-${index}`;
                     codeContainer.appendChild(sandboxDiv);
                     codeContainer.appendChild(script);
                     messageContent.appendChild(codeContainer);
                 }
             });
-            
-            conversationHistory.push({ role: 'assistant', content: content });
         }
         
         function showTypingIndicator(show) {
@@ -743,6 +949,7 @@ def chat():
     try:
         data = request.get_json()
         if not data or 'prompt' not in data or 'model' not in data:
+            logging.warning("Chat request missing 'prompt' or 'model' field")
             return jsonify({"status": "error", "message": "Prompt and model are required"}), 400
         
         prompt = data['prompt']
@@ -755,10 +962,15 @@ def chat():
         
         if stream and isinstance(result, requests.Response):
             def generate_stream():
-                for chunk in result.iter_content(chunk_size=None):
-                    yield chunk
+                try:
+                    for chunk in result.iter_content(chunk_size=None):
+                        yield chunk
+                except Exception as e:
+                    logging.error(f"Streaming error: {e}")
+                    yield json.dumps({"status": "error", "message": str(e)}).encode()
             return Response(generate_stream(), content_type='application/json')
         else:
+            logging.info(f"Non-streaming chat response generated with model {model}")
             return jsonify(result), 200 if result["status"] == "success" else 500
     except Exception as e:
         logging.error(f"Chat endpoint error: {e}")
@@ -769,6 +981,7 @@ def get_models():
     """Get available models."""
     try:
         models = ollama_manager.list_models()
+        logging.info(f"Returning models: {models}")
         return jsonify({
             "status": "success",
             "models": models,
@@ -794,7 +1007,7 @@ def health_check():
             "status": "unhealthy",
             "error": str(e),
             "timestamp": time.time()
-        }), 500
+        }), 503
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860, debug=False)