add the ability to edit custom models - Follow Up Deployment

index.html

@@ -214,6 +214,7 @@
                     <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>
+                <input type="hidden" id="editModelId" value="">
                 
                 <div class="flex justify-end gap-2">
                     <button type="button" id="cancelAddModel" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-all">
@@ -413,9 +414,14 @@
                 
                 modelElement.innerHTML = `
                     <span>${model.name}</span>
-                    <button class="delete-model text-gray-400 hover:text-red-500 transition-all p-1">
-                        <i class="fas fa-trash text-xs"></i>
-                    </button>
+                    <div class="flex gap-1">
+                        <button class="edit-model text-gray-400 hover:text-blue-500 transition-all p-1">
+                            <i class="fas fa-edit text-xs"></i>
+                        </button>
+                        <button class="delete-model text-gray-400 hover:text-red-500 transition-all p-1">
+                            <i class="fas fa-trash text-xs"></i>
+                        </button>
+                    </div>
                 `;
                 
                 modelElement.addEventListener('click', (e) => {
@@ -429,6 +435,12 @@
                     e.stopPropagation();
                     deleteCustomModel(model.id);
                 });
+
+                const editBtn = modelElement.querySelector('.edit-model');
+                editBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    showEditModelModal(model);
+                });
                 
                 customModelsList.appendChild(modelElement);
             });
@@ -708,6 +720,37 @@
             hideAddModelModal();
         }
 
+        // Edit custom model
+        function editCustomModel(modelId, name, endpoint, key) {
+            const modelIndex = customModels.findIndex(m => m.id === modelId);
+            if (modelIndex === -1) return;
+            
+            customModels[modelIndex] = {
+                ...customModels[modelIndex],
+                name,
+                endpoint,
+                key
+            };
+            
+            // Update in models array
+            const globalModelIndex = models.findIndex(m => m.id === modelId);
+            if (globalModelIndex !== -1) {
+                models[globalModelIndex] = {
+                    ...models[globalModelIndex],
+                    name,
+                    endpoint,
+                    key
+                };
+            }
+            
+            // Save to localStorage
+            localStorage.setItem('customModels', JSON.stringify(customModels));
+            
+            // Update UI
+            renderCustomModels();
+            hideAddModelModal();
+        }
+
         // Delete custom model
         function deleteCustomModel(modelId) {
             customModels = customModels.filter(m => m.id !== modelId);
@@ -757,10 +800,28 @@
             addModelModal.classList.remove('hidden');
         }
 
+        // Show edit model modal
+        function showEditModelModal(model) {
+            document.getElementById('modelName').value = model.name;
+            document.getElementById('modelEndpoint').value = model.endpoint;
+            document.getElementById('modelKey').value = model.key || '';
+            document.getElementById('editModelId').value = model.id;
+            
+            // Change modal title and submit button text
+            document.querySelector('#addModelModal h3').textContent = 'Edit Custom Model';
+            document.querySelector('#addModelForm button[type="submit"]').textContent = 'Save Changes';
+            
+            showAddModelModal();
+        }
+
         // Hide add model modal
         function hideAddModelModal() {
             addModelModal.classList.add('hidden');
             addModelForm.reset();
+            
+            // Reset modal title and submit button text
+            document.querySelector('#addModelModal h3').textContent = 'Add Custom Model';
+            document.querySelector('#addModelForm button[type="submit"]').textContent = 'Add Model';
         }
 
         // Save chats to localStorage
@@ -888,7 +949,13 @@
             const name = document.getElementById('modelName').value;
             const endpoint = document.getElementById('modelEndpoint').value;
             const key = document.getElementById('modelKey').value;
-            addCustomModel(name, endpoint, key);
+            const editModelId = document.getElementById('editModelId').value;
+            
+            if (editModelId) {
+                editCustomModel(editModelId, name, endpoint, key);
+            } else {
+                addCustomModel(name, endpoint, key);
+            }
         });
         
         // Delete chat