@meaningfully/ui 0.0.8 → 0.0.10

package/dist/App.svelte

@@ -64,20 +64,20 @@
 
   <main class="container mx-auto px-4 py-8">
     <Route path="">
-      <FrontPage validApiKeysSet={validApiKeysSet} api={api} />
+      <FrontPage validApiKeysSet={validApiKeysSet} api={api} basepath={basepath_app} />
     </Route>
     <Route path="configure-upload">
-      <DatabaseConfig validApiKeysSet={validApiKeysSet} api={api} />
+      <DatabaseConfig validApiKeysSet={validApiKeysSet} api={api} basepath={basepath_app} />
     </Route>
     <Route path="search/:id" let:params>
-      <SearchPage validApiKeysSet={validApiKeysSet} documentSetId={Number(params.id)} api={api} />
+      <SearchPage validApiKeysSet={validApiKeysSet} documentSetId={Number(params.id)} api={api} basepath={basepath_app} />
     </Route>
     <Route path="help">
       <HelpPage />
     </Route>
     <Route path="settings">
       {#if settings}
-        <ApiKeyPage settings={settings} settingsUpdated={() => getSettings() } api={api} />
+        <ApiKeyPage settings={settings} settingsUpdated={() => getSettings() } api={api} basepath={basepath_app} />
       {/if}
     </Route>
   </main>

package/dist/components/ApiKeyPage.svelte

@@ -6,9 +6,10 @@
         settings: Settings;
         settingsUpdated: () => void;
         api: MeaningfullyAPI;
+        basepath: string;
     }
 
-    let { settings, settingsUpdated, api }: Props = $props();
+    let { settings, settingsUpdated, api, basepath }: Props = $props();
     let openAIKey: string = $state(settings.openAIKey);
     let oLlamaBaseURL: string = $state(settings.oLlamaBaseURL);
     let azureOpenAIKey: string = $state(settings.azureOpenAIKey);
@@ -34,7 +35,7 @@
                 throw new Error('Failed to save settings');
             }
             settingsUpdated();
-            navigate("/");
+            navigate(basepath.replace(/\/+$/g, "") + "/");
         } catch (error) {
             console.error(error);
             alert('Error saving settings');

package/dist/components/ApiKeyPage.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     settings: Settings;
     settingsUpdated: () => void;
     api: MeaningfullyAPI;
+    basepath: string;
 }
 declare const ApiKeyPage: import("svelte").Component<Props, {}, "">;
 type ApiKeyPage = ReturnType<typeof ApiKeyPage>;

package/dist/components/CsvUpload.svelte

@@ -4,7 +4,8 @@
   import { fileDataStore } from '../stores/fileDataStore.js';
 
   let {
-    validApiKeysSet
+    validApiKeysSet,
+    basepath
   } = $props();
 
   let error = $state('');
@@ -57,7 +58,8 @@
             fileContent
           });
           // Navigate to configuration page
-          navigate('/configure-upload');
+          navigate(basepath.replace(/\/+$/g, "") + "/configure-upload");
+
         };
         reader.readAsDataURL(file);
       },

package/dist/components/CsvUpload.svelte.d.ts

@@ -1,5 +1,6 @@
 declare const CsvUpload: import("svelte").Component<{
     validApiKeysSet: any;
+    basepath: any;
 }, {}, "">;
 type CsvUpload = ReturnType<typeof CsvUpload>;
 export default CsvUpload;

package/dist/components/DatabaseConfig.svelte

@@ -13,7 +13,8 @@
 
   let {
     validApiKeysSet,
-    api
+    api,
+    basepath
   } = $props();
 
   let fileData: any = $state(null);
@@ -28,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");
@@ -49,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];
     }
   });
 
@@ -77,11 +73,27 @@
     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) => {
+    const unsubscribe = fileDataStore.subscribe((data: any) => {
       if (!data) {
-        navigate('/'); // Redirect back to home if no file data
+        navigate(basepath.replace(/\/+$/g, "") + "/"); // Redirect back to home if no file data
         return;
       }
       fileData = data;
@@ -187,7 +199,8 @@
       });
 
       if (uploadResponse.success) {
-        navigate("/search/" + uploadResponse.documentSetId);
+        navigate(basepath.replace(/\/+$/g, "") + "/search/" + uploadResponse.documentSetId);
+
       } else {
         error = uploadResponse.message || 'Upload failed'; // fastify responses don't throw
       }
@@ -237,7 +250,7 @@
   });
 
   const goBack = () => {
-    navigate('/');
+    navigate(basepath.replace(/\/+$/g, "") + "/");
   };
 </script>
 
@@ -282,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>
       
@@ -299,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/DatabaseConfig.svelte.d.ts

@@ -1,6 +1,7 @@
 declare const DatabaseConfig: import("svelte").Component<{
     validApiKeysSet: any;
     api: any;
+    basepath: any;
 }, {}, "">;
 type DatabaseConfig = ReturnType<typeof DatabaseConfig>;
 export default DatabaseConfig;

package/dist/components/FrontPage.svelte

@@ -7,13 +7,14 @@
     interface Props {
       validApiKeysSet: boolean;
       api: MeaningfullyAPI;
+      basepath: string;
     }
 
-    let { validApiKeysSet, api }: Props = $props();
+    let { validApiKeysSet, api, basepath }: Props = $props();
 </script>
 
 <div class="container mx-auto px-4 space-y-8">
-    <CsvUpload validApiKeysSet={validApiKeysSet} />
+    <CsvUpload validApiKeysSet={validApiKeysSet} basepath={basepath} />
     <ExistingDatabases api={api} />
     <div class="max-w-2xl mx-auto text-left leading-tight space-y-2">
       Meaningfully is a semantic search tool for text data in spreadsheets. Search by the meaning of a sentence instead of keywords. <Link to="help" class="nav-link underline text-blue-600 hover:text-blue-800 visited:text-purple-600">Learn more</Link>.

package/dist/components/FrontPage.svelte.d.ts

@@ -2,6 +2,7 @@ import type { MeaningfullyAPI } from '../types';
 interface Props {
     validApiKeysSet: boolean;
     api: MeaningfullyAPI;
+    basepath: string;
 }
 declare const FrontPage: import("svelte").Component<Props, {}, "">;
 type FrontPage = ReturnType<typeof FrontPage>;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { navigate } from 'svelte-routing';
+  import { navigate, Link } from 'svelte-routing';
   import type { DocumentSet, MeaningfullyAPI } from '../types.js';
   import Results from './Results.svelte';
 
@@ -7,9 +7,10 @@
     validApiKeysSet: boolean;
     documentSetId: number;
     api: MeaningfullyAPI;
+    basepath: string;
   }
 
-  let { validApiKeysSet, documentSetId, api }: Props = $props();
+  let { validApiKeysSet, documentSetId, api, basepath }: Props = $props();
 
   let documentSet: DocumentSet | null = $state(null);
   let documentSetLoading = $state(true);
@@ -36,7 +37,7 @@
     documentSetLoading = false;
   }).catch(error => {
     console.error('Error fetching document set:', error);
-    navigate('/');
+    navigate(basepath.replace(/\/+$/g, "") + "/");
   });
 
   const placeholderQueries = [
@@ -105,15 +106,15 @@
 
 <div class="p-6 space-y-6">
   <div class="flex items-center space-x-4">
-    <button 
+    <Link 
       class="text-blue-500 hover:text-blue-600 flex items-center space-x-1"
-      onclick={() => navigate('/') }
+      to=""
     >
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
       </svg>
       <span>Back to Home</span>
-    </button>
+    </Link>
   </div>
 
   {#if documentSetLoading}
@@ -253,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/components/SearchPage.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     validApiKeysSet: boolean;
     documentSetId: number;
     api: MeaningfullyAPI;
+    basepath: string;
 }
 declare const SearchPage: import("svelte").Component<Props, {}, "">;
 type SearchPage = ReturnType<typeof SearchPage>;

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.8",
+	"version": "0.0.10",
 	"license": "MIT",
 	"description": "Svelte components for meaningfully semantic search",
 	"repo": "https://github.com/jeremybmerrill/meaningfully-ui",