Restore to commit 74e578279624c6045ca440a3459ebfa1f8d54191

2026-02-07 20:32:41 +00:00
commit ed67b7741b
252 changed files with 99814 additions and 0 deletions
--- a/chat/public/test-dropdown.html
+++ b/chat/public/test-dropdown.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Model Dropdown Test</title>
+  <style>
+    body { font-family: Arial, sans-serif; padding: 20px; }
+    .test-container { max-width: 600px; margin: 0 auto; }
+    .model-select { 
+      position: relative; 
+      display: inline-flex; 
+      padding: 10px; 
+      border: 1px solid #ccc; 
+      border-radius: 8px; 
+      cursor: pointer; 
+      background: white;
+    }
+    .model-select-dropdown {
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      background: white;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      padding: 8px;
+      display: none;
+      min-width: 280px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    .model-option {
+      padding: 10px;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .model-option:hover {
+      background: #f0f0f0;
+    }
+    .model-option.selected {
+      background: #e0f0ff;
+    }
+    .model-icon { width: 20px; height: 20px; }
+    .model-text { flex: 1; }
+    .status { margin-top: 20px; padding: 10px; background: #f0f0f0; border-radius: 4px; }
+  </style>
+</head>
+<body>
+  <div class="test-container">
+    <h1>Model Dropdown Test</h1>
+    <p>Testing the model selector dropdown functionality</p>
+    
+    <div style="position: relative;">
+      <div id="model-select-btn" class="model-select">
+        <span id="model-select-text">Select model</span>
+        <span style="margin-left: 8px;">▼</span>
+      </div>
+      
+      <div id="model-select-dropdown" class="model-select-dropdown">
+        <div id="model-select-options"></div>
+      </div>
+    </div>
+    
+    <div class="status">
+      <strong>Status:</strong> <span id="status">Loading models...</span>
+    </div>
+    
+    <div class="status">
+      <strong>Selected:</strong> <span id="selected">None</span>
+    </div>
+  </div>
+
+  <script>
+    const btn = document.getElementById('model-select-btn');
+    const dropdown = document.getElementById('model-select-dropdown');
+    const options = document.getElementById('model-select-options');
+    const textSpan = document.getElementById('model-select-text');
+    const status = document.getElementById('status');
+    const selected = document.getElementById('selected');
+    
+    let isOpen = false;
+    
+    // Toggle dropdown
+    btn.addEventListener('click', () => {
+      isOpen = !isOpen;
+      dropdown.style.display = isOpen ? 'block' : 'none';
+    });
+    
+    // Close when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
+        isOpen = false;
+        dropdown.style.display = 'none';
+      }
+    });
+    
+    // Fetch models from API
+    fetch('http://localhost:4000/api/models')
+      .then(res => res.json())
+      .then(data => {
+        if (data.models && data.models.length > 0) {
+          status.textContent = `Loaded ${data.models.length} models`;
+          
+          // Render options
+          data.models.forEach(model => {
+            const option = document.createElement('div');
+            option.className = 'model-option';
+            option.innerHTML = `
+              <span class="model-text">${model.label || model.name}</span>
+              <span style="color: #666; font-size: 12px;">${model.multiplier || 1}x</span>
+            `;
+            
+            option.addEventListener('click', () => {
+              textSpan.textContent = model.label || model.name;
+              selected.textContent = model.name;
+              isOpen = false;
+              dropdown.style.display = 'none';
+              
+              // Mark as selected
+              options.querySelectorAll('.model-option').forEach(opt => {
+                opt.classList.remove('selected');
+              });
+              option.classList.add('selected');
+            });
+            
+            options.appendChild(option);
+          });
+        } else {
+          status.textContent = 'No models configured';
+          const placeholder = document.createElement('div');
+          placeholder.className = 'model-option';
+          placeholder.style.cursor = 'default';
+          placeholder.textContent = 'No models available';
+          options.appendChild(placeholder);
+        }
+      })
+      .catch(err => {
+        status.textContent = `Error: ${err.message}`;
+      });
+  </script>
+</body>
+</html>