add that for custom models too - Follow Up Deployment

index.html

@@ -665,12 +665,33 @@
                 }));
                 
                 let response;
+                // Create assistant message element for streaming
+                const messageElement = document.createElement('div');
+                messageElement.className = 'flex gap-4 justify-start';
+                messageElement.innerHTML = `
+                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary-500 text-white flex items-center justify-center">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <div class="max-w-[80%] bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm relative group">
+                        <div class="prose dark:prose-invert" id="streaming-content"></div>
+                    </div>
+                `;
+                chatArea.appendChild(messageElement);
+                const contentElement = messageElement.querySelector('#streaming-content');
+                
+                let response = '';
+                const onStream = (content) => {
+                    response = content;
+                    contentElement.innerHTML = marked.parse(response);
+                    chatArea.scrollTop = chatArea.scrollHeight;
+                };
+
                 if (model.type === 'default') {
                     // Call OpenAI API
-                    response = await callOpenAIAPI(messages, model.id);
+                    response = await callOpenAIAPI(messages, model.id, null, onStream);
                 } else {
                     // Call custom model API
-                    response = await callCustomModelAPI(messages, model);
+                    response = await callCustomModelAPI(messages, model, onStream);
                 }
                 
                 // Remove loading indicator
@@ -684,7 +705,6 @@
                 
                 currentChat.messages.push(assistantMessage);
                 saveChats();
-                renderMessages(chat.messages);
                 
                 // Update chat list
                 renderChatList();
@@ -710,17 +730,20 @@
         }
 
         // Call OpenAI API
-        async function callOpenAIAPI(messages, model, apiKey) {
+        async function callOpenAIAPI(messages, model, apiKey, onStream) {
+            const isStreaming = model.streaming || false;
+            
             const response = await fetch('https://api.openai.com/v1/chat/completions', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${apiKey}`
+                    'Authorization': `Bearer ${apiKey || localStorage.getItem('openaiApiKey')}`
                 },
                 body: JSON.stringify({
                     model: model === 'gpt-3.5' ? 'gpt-3.5-turbo' : 'gpt-4',
                     messages,
-                    temperature: 0.7
+                    temperature: 0.7,
+                    stream: isStreaming
                 })
             });
             
@@ -729,8 +752,39 @@
                 throw new Error(errorData.error?.message || 'Failed to call OpenAI API');
             }
             
-            const data = await response.json();
-            return data.choices[0]?.message?.content || 'No response from model';
+            if (isStreaming && onStream) {
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let result = '';
+                
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n').filter(line => line.trim() !== '');
+                    
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            const data = line.substring(6);
+                            if (data === '[DONE]') continue;
+                            
+                            try {
+                                const parsed = JSON.parse(data);
+                                const content = parsed.choices?.[0]?.delta?.content || '';
+                                result += content;
+                                onStream(result);
+                            } catch (e) {
+                                console.error('Error parsing stream data:', e);
+                            }
+                        }
+                    }
+                }
+                return result;
+            } else {
+                const data = await response.json();
+                return data.choices[0]?.message?.content || 'No response from model';
+            }
         }
         
         // Call custom model API
@@ -1078,6 +1132,25 @@
             e.preventDefault();
             sendMessage();
         });
+
+        messageInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                // Check for Ctrl+Enter or Command+Enter (Mac)
+                if (e.ctrlKey || e.metaKey) {
+                    // Insert new line
+                    const start = messageInput.selectionStart;
+                    const end = messageInput.selectionEnd;
+                    messageInput.value = messageInput.value.substring(0, start) + '\n' + messageInput.value.substring(end);
+                    messageInput.selectionStart = messageInput.selectionEnd = start + 1;
+                    // Prevent default to avoid submitting
+                    e.preventDefault();
+                } else if (!e.shiftKey) {
+                    // Regular Enter - submit form
+                    e.preventDefault();
+                    sendMessage();
+                }
+            }
+        });
         
         // Auto-resize textarea
         messageInput.addEventListener('input', () => {