@meaningfully/ui 0.0.9 → 0.0.11

package/README.md

@@ -1,3 +1,10 @@
 # meaningfully-ui
 
-This is a library of UI components for [meaningfully](https://www.github.com/jeremybmerrill/meaningfully), which is an app (or collection of apps!) for semantic search over spreadsheets. See the main repo URL for more discussion.
+This is a library of UI components for [meaningfully](https://www.github.com/jeremybmerrill/meaningfully), which is an app (or collection of apps!) for semantic search over spreadsheets. See the main repo URL for more discussion.
+
+## 
+
+How to run:
+
+- `npm run build` to build
+- `npm run watch` to build continuously, rebuilding on file modification.

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

@@ -7,6 +7,9 @@
     textColumn: string;
     metadataColumns?: string[];
     loading?: boolean;
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    showMore?: () => void;
     originalDocumentClick?: (sourceNodeId: string) => void;
   }
 
@@ -15,18 +18,12 @@
     textColumn,
     metadataColumns = [],
     loading = false,
+    hasMore = false,
+    loadingMore = false,
+    showMore = () => {},
     originalDocumentClick = () => {},
   }: Props = $props();
 
-  // Initial number of results to display
-  const initialDisplayCount = 10;
-  let displayCount = $state(initialDisplayCount);
-
-  // Function to load more results
-  const showMore = () => {
-    displayCount += 10;
-  };
-
   // copied from https://github.com/run-llama/LlamaIndexTS/blob/main/packages/providers/storage/weaviate/src/sanitize.ts
   // weaviate requires property names (i.e. metadata column names) to start with a lowercase letter or underscore,
   // and only contain letters, numbers, and underscores.
@@ -95,12 +92,12 @@
     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
-  let visibleResults = $derived(results.slice(0, displayCount));
 </script>
 
 <div class="space-y-4">
@@ -111,6 +108,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>
@@ -131,7 +129,7 @@
   {:else}
     <div class="bg-white rounded-lg shadow text-black">
       <Table
-        data={visibleResults}
+        data={results}
         {textColumn}
         {metadataColumns}
         showSimilarity={true}
@@ -140,13 +138,14 @@
       />
     </div>
     
-    {#if displayCount < results.length}
+    {#if hasMore}
       <div class="flex justify-center mt-4">
         <button
           onclick={showMore}
+          disabled={loadingMore}
           class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
         >
-          Show More
+          {loadingMore ? 'Loading...' : 'Show More'}
         </button>
       </div>
     {/if}

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

@@ -3,6 +3,9 @@ interface Props {
     textColumn: string;
     metadataColumns?: string[];
     loading?: boolean;
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    showMore?: () => void;
     originalDocumentClick?: (sourceNodeId: string) => void;
 }
 declare const Results: import("svelte").Component<Props, {}, "">;

package/dist/components/SearchPage.svelte

@@ -17,7 +17,9 @@
   let metadataColumns: string[] = $state([]);
   let textColumn: string = $state('');
   let loading = $state(false);
+  let loadingMore = $state(false);
   let hasResults = $state(false);
+  let hasMore = $state(false);
   let showModal = $state(false);
   let modalContent: Record<string, any> | null = $state(null);
 
@@ -28,6 +30,8 @@
   let results: Array<Record<string, any>> = $state([]);
   let error: string | null = $state(null);
 
+  const pageSize = 10;
+
   api.getDocumentSet(documentSetId).then((receivedDocumentSet: DocumentSet) => {
     documentSet = receivedDocumentSet;
     documentSet.uploadDate = new Date(documentSet.uploadDate); // convert to Date object, if necessary (SQLite returns date obj, Postgres returns string)
@@ -50,36 +54,74 @@
   ];
   const placeholderQuery = placeholderQueries[Math.floor(Math.random() * placeholderQueries.length)];
 
+  const mapSearchResults = (searchResults: Array<Record<string, any>>) => {
+    return searchResults.map(result => ({ // TODO Factor this out if preview and search use the same data structure.
+      ...result.metadata, // flatten the metadata so that this object is the same shape as a CSV row.
+      similarity: result.score,
+      [textColumn]: result.text,
+      sourceNodeId: result.sourceNodeId
+    }));
+  };
+
   async function handleSearch() {
     if (!searchQuery.trim() || !documentSet) return;
     hasResults = true;
     loading = true;
+    hasMore = false;
     try {
-      const searchResults = await api.searchDocumentSet({
+      const searchResponse = await api.searchDocumentSet({
         documentSetId: documentSet.documentSetId,
         query: searchQuery,
-        n_results: 100,
+        n_results: pageSize,
+        offset: 0,
         filters: metadataFilters.map(filter => ({
           key: filter.key,
           operator: filter.operator,
           value: filter.value
         }))
       });
-      results = searchResults.map(result => ({ // TODO Factor this out if preview and search use the same data structure.
-        ...result.metadata, // flatten the metadata so that this object is the same shape as a CSV row.
-        similarity: result.score.toFixed(2),
-        [textColumn]: result.text,
-        sourceNodeId: result.sourceNodeId
-      })); 
+      results = mapSearchResults(searchResponse.results);
+      hasMore = searchResponse.hasMore;
       error = null; 
     } catch (error_: any) {
       console.error('Search failed:', error_);
-      error = error_;
+      error = error_ instanceof Error ? error_.message : String(error_);
+      results = [];
+      hasMore = false;
     } finally {
       loading = false;
     }
   }
 
+  async function handleLoadMore() {
+    if (!documentSet || loadingMore || loading || !hasMore) return;
+
+    loadingMore = true;
+    try {
+      const searchResponse = await api.searchDocumentSet({
+        documentSetId: documentSet.documentSetId,
+        query: searchQuery,
+        n_results: pageSize,
+        offset: results.length,
+        filters: metadataFilters.map(filter => ({
+          key: filter.key,
+          operator: filter.operator,
+          value: filter.value
+        }))
+      });
+
+      const nextRows = mapSearchResults(searchResponse.results);
+      results = [...results, ...nextRows];
+      hasMore = searchResponse.hasMore;
+      error = null;
+    } catch (error_: any) {
+      console.error('Loading more failed:', error_);
+      error = error_ instanceof Error ? error_.message : String(error_);
+    } finally {
+      loadingMore = false;
+    }
+  }
+
   function addFilter() {
     metadataFilters = [...metadataFilters, { key: '', operator: '==', value: '' }];
   }
@@ -220,6 +262,9 @@
         <Results
           {results}
           {loading}
+          {loadingMore}
+          {hasMore}
+          showMore={handleLoadMore}
           {textColumn}
           {metadataColumns}
           originalDocumentClick={handleOriginalDocumentClick}
@@ -254,7 +299,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

@@ -32,12 +32,16 @@ export interface MeaningfullyAPI {
         documentSetId: number;
         query: string;
         n_results: number;
+        offset?: number;
         filters?: {
             key: string;
             operator: "==" | "in" | ">" | "<" | "!=" | ">=" | "<=" | "nin" | "any" | "all" | "text_match" | "contains" | "is_empty";
             value: any;
         }[];
-    }) => Promise<SearchResult[]>;
+    }) => Promise<{
+        results: SearchResult[];
+        hasMore: boolean;
+    }>;
     getDocument: (params: {
         documentSetId: number;
         documentId: string;
@@ -57,4 +61,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.11",
 	"license": "MIT",
 	"description": "Svelte components for meaningfully semantic search",
 	"repo": "https://github.com/jeremybmerrill/meaningfully-ui",