can you add suppport for streaming? and then add a tailwind modern tick box in custom model setting called Streaming to toggle if the model supports streaming - Follow Up Deployment

index.html

@@ -214,6 +214,11 @@
                     <label for="modelKey" class="block text-sm font-medium mb-1">API Key (optional)</label>
                     <input type="password" id="modelKey" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 focus:ring-primary-500 focus:border-primary-500" placeholder="sk-...">
                 </div>
+
+                <div class="mb-4 flex items-center">
+                    <input type="checkbox" id="modelStreaming" class="w-4 h-4 text-primary-600 rounded border-gray-300 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700">
+                    <label for="modelStreaming" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Supports Streaming</label>
+                </div>
                 <input type="hidden" id="editModelId" value="">
                 
                 <div class="flex justify-end gap-2">
@@ -677,37 +682,106 @@
         
         // Call custom model API
         async function callCustomModelAPI(messages, model) {
-            const response = await fetch(model.endpoint, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...(model.key ? { 'Authorization': `Bearer ${model.key}` } : {})
-                },
-                body: JSON.stringify({
-                    messages,
-                    temperature: 0.7,
-                    // Include other parameters as needed by your custom model
-                })
-            });
-            
-            if (!response.ok) {
-                try {
-                    const errorData = await response.json();
-                    throw new Error(errorData.error?.message || 'Failed to call custom model API');
-                } catch (e) {
-                    // If JSON parsing fails, try to get the raw error text
+            if (model.streaming) {
+                // Handle streaming response
+                const response = await fetch(model.endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        ...(model.key ? { 'Authorization': `Bearer ${model.key}` } : {})
+                    },
+                    body: JSON.stringify({
+                        messages,
+                        temperature: 0.7,
+                        stream: true
+                    })
+                });
+
+                if (!response.ok) {
                     const errorText = await response.text();
                     throw new Error(errorText || 'Failed to call custom model API');
                 }
-            }
-            
-            try {
-                const data = await response.json();
-                return data.choices[0]?.message?.content || data.response || 'No response from model';
-            } catch (e) {
-                // If JSON parsing fails, try to return the raw text
-                const text = await response.text();
-                return text || 'No response from model';
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let result = '';
+
+                // Create 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');
+
+                try {
+                    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;
+                                    contentElement.innerHTML = result;
+                                    chatArea.scrollTop = chatArea.scrollHeight;
+                                } catch (e) {
+                                    console.error('Error parsing stream data:', e);
+                                }
+                            }
+                        }
+                    }
+                } catch (e) {
+                    console.error('Stream error:', e);
+                    throw e;
+                }
+
+                return result;
+            } else {
+                // Handle regular response
+                const response = await fetch(model.endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        ...(model.key ? { 'Authorization': `Bearer ${model.key}` } : {})
+                    },
+                    body: JSON.stringify({
+                        messages,
+                        temperature: 0.7,
+                    })
+                });
+                
+                if (!response.ok) {
+                    try {
+                        const errorData = await response.json();
+                        throw new Error(errorData.error?.message || 'Failed to call custom model API');
+                    } catch (e) {
+                        const errorText = await response.text();
+                        throw new Error(errorText || 'Failed to call custom model API');
+                    }
+                }
+                
+                try {
+                    const data = await response.json();
+                    return data.choices[0]?.message?.content || data.response || 'No response from model';
+                } catch (e) {
+                    const text = await response.text();
+                    return text || 'No response from model';
+                }
             }
         }
 
@@ -734,12 +808,13 @@
         }
 
         // Add custom model
-        function addCustomModel(name, endpoint, key) {
+        function addCustomModel(name, endpoint, key, streaming) {
             const newModel = {
                 id: `custom-${Date.now()}`,
                 name,
                 endpoint,
                 key,
+                streaming: streaming || false,
                 type: 'custom'
             };
             
@@ -755,7 +830,7 @@
         }
 
         // Edit custom model
-        function editCustomModel(modelId, name, endpoint, key) {
+        function editCustomModel(modelId, name, endpoint, key, streaming) {
             const modelIndex = customModels.findIndex(m => m.id === modelId);
             if (modelIndex === -1) return;
             
@@ -763,7 +838,8 @@
                 ...customModels[modelIndex],
                 name,
                 endpoint,
-                key
+                key,
+                streaming: streaming || false
             };
             
             // Update in models array
@@ -839,6 +915,7 @@
             document.getElementById('modelName').value = model.name;
             document.getElementById('modelEndpoint').value = model.endpoint;
             document.getElementById('modelKey').value = model.key || '';
+            document.getElementById('modelStreaming').checked = model.streaming || false;
             document.getElementById('editModelId').value = model.id;
             
             // Change modal title and submit button text
@@ -983,10 +1060,11 @@
             const name = document.getElementById('modelName').value;
             const endpoint = document.getElementById('modelEndpoint').value;
             const key = document.getElementById('modelKey').value;
+            const streaming = document.getElementById('modelStreaming').checked;
             const editModelId = document.getElementById('editModelId').value;
             
             if (editModelId) {
-                editCustomModel(editModelId, name, endpoint, key);
+                editCustomModel(editModelId, name, endpoint, key, streaming);
             } else {
                 addCustomModel(name, endpoint, key);
             }