@meaningfully/ui 0.0.9 → 0.0.10

package/dist/components/DatabaseConfig.svelte

@@ -29,14 +29,9 @@
   let chunkSize = $state(defaultChunkSize);
   let chunkOverlap = $state(defaultChunkOverlap);
   
-  // Model options grouped by provider
-  const modelOptions: Record<string, string[]> = {
-    "openai": ["text-embedding-3-small", "text-embedding-3-large"],
-    "azure": ["text-embedding-3-small", "text-embedding-3-large"],
-    "ollama": ["mxbai-embed-large", "nomic-embed-text"],
-    "mistral": ["mistral-embed"],
-    "gemini": ["gemini-embedding-001"]
-  };
+  // Model options grouped by provider - fetched from API
+  let availableModelOptions: Record<string, string[]> = $state({});
+  let allModelOptions: Record<string, string[]> = $state({});
   
   let modelProvider = $state("openai");
   let modelName = $state("text-embedding-3-small");
@@ -50,8 +45,8 @@
   
   // Update model name when provider changes
   $effect(() => {
-    if (modelProvider && modelOptions[modelProvider]) {
-      modelName = modelOptions[modelProvider][0];
+    if (modelProvider && availableModelOptions[modelProvider]) {
+      modelName = availableModelOptions[modelProvider][0];
     }
   });
 
@@ -78,7 +73,23 @@
     return result;
   };
 
-  onMount(() => {
+  onMount(async () => {
+    // Fetch available model options from API
+    try {
+      const modelOptionsData = await api.getAvailableModelOptions();
+      availableModelOptions = modelOptionsData.availableModelOptions;
+      allModelOptions = modelOptionsData.allModelOptions;
+      
+      // Set default provider to first available one
+      const availableProviders = Object.keys(availableModelOptions);
+      if (availableProviders.length > 0) {
+        modelProvider = availableProviders[0];
+        modelName = availableModelOptions[modelProvider][0];
+      }
+    } catch (e) {
+      console.error('Error fetching available model options:', e);
+    }
+
     // Subscribe to the file data store
     const unsubscribe = fileDataStore.subscribe((data: any) => {
       if (!data) {
@@ -284,15 +295,15 @@
           <select
             bind:value={modelProvider}
             class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500">
-            <option value="openai">OpenAI</option>
-            <option value="azure">Azure OpenAI</option>
-            <option value="ollama">Ollama</option>
-            <option value="mistral">Mistral AI</option>
-            <option value="gemini">Google Gemini</option>
+            <option value="openai" disabled={!availableModelOptions.openai}>OpenAI</option>
+            <option value="azure" disabled={!availableModelOptions.azure}>Azure OpenAI</option>
+            <option value="ollama" disabled={!availableModelOptions.ollama}>Ollama</option>
+            <option value="mistral" disabled={!availableModelOptions.mistral}>Mistral AI</option>
+            <option value="gemini" disabled={!availableModelOptions.gemini}>Google Gemini</option>
           </select>
         </label>  
         <p class="text-xs text-gray-500">
-          The provider for the embedding model.
+          The provider for the embedding model. {Object.keys(availableModelOptions).length === 0 ? 'No providers are configured yet. Please set up API keys in the settings.' : ''}
         </p>
       </div>
       
@@ -301,8 +312,9 @@
           What embedding model should we use?
           <select
             bind:value={modelName}
-            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500">
-            {#each modelOptions[modelProvider] as modelNameChoice}
+            disabled={!availableModelOptions[modelProvider]}
+            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 disabled:opacity-50 disabled:cursor-not-allowed">
+            {#each (availableModelOptions[modelProvider] || allModelOptions[modelProvider] || []) as modelNameChoice}
               <option value={modelNameChoice}>{modelNameChoice}</option>
             {/each}
           </select>

package/dist/components/Results.svelte

@@ -95,8 +95,10 @@
     link.setAttribute('download', 'results.csv');
     document.body.appendChild(link);
     link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
+    setTimeout(() => {
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }, 5000);
   };
 
   // Computed property for visible results
@@ -111,6 +113,7 @@
         onclick={downloadCSV}
         class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors flex items-center gap-2"
         title="Download results as CSV"
+        data-testid="download-csv"
       >
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>

package/dist/components/SearchPage.svelte

@@ -254,7 +254,7 @@
           {/each}
         </tbody>
       </table>
-      <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" onclick={closeModal}>Close</button>
+      <button data-testid="modal-close-button" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" onclick={closeModal}>Close</button>
     </div>
   </div>
 {/if}

package/dist/types.d.ts

@@ -57,4 +57,8 @@ export interface MeaningfullyAPI {
         elapsedTimeMs: number;
         estimatedTimeRemainingMs: number | null;
     }>;
+    getAvailableModelOptions: () => Promise<{
+        availableModelOptions: Record<string, string[]>;
+        allModelOptions: Record<string, string[]>;
+    }>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@meaningfully/ui",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"license": "MIT",
 	"description": "Svelte components for meaningfully semantic search",
 	"repo": "https://github.com/jeremybmerrill/meaningfully-ui",