@meaningfully/ui 0.0.7 → 0.0.9

package/dist/App.svelte

@@ -11,14 +11,14 @@
 
   interface Props {
     api: MeaningfullyAPI;
-    basePath_prop: string;
+    basepath: string;
   }
-  let { api, basePath_prop }: Props = $props();
+  let { api, basepath }: Props = $props();
   
   // basepath must not be blank;
   // unclear if it needs a trailing slash when using a subpath.
-  let basepath = $state(basePath_prop || '/');
-  console.log(`basepath App "${basepath}" (prop: "${basePath_prop}")`);
+  let basepath_app = $state(basepath || '/');
+  console.log(`basepath App "${basepath_app}" (prop: "${basepath}")`);
   let url = $state('');
   // Ensure $state returns Settings | null
   let settings = $state<Settings | null>(null);
@@ -47,7 +47,7 @@
 
 <!-- <img alt="logo" class="logo" src={electronLogo} /> -->
 
-<Router url={url} basepath={basepath}>
+<Router url={url} basepath={basepath_app}>
   <Link to="/">
     <h1 class="text-2xl font-bold">
       Meaningfully
@@ -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/App.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { MeaningfullyAPI } from './types.js';
 interface Props {
     api: MeaningfullyAPI;
-    basePath_prop: string;
+    basepath: string;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

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);
       },
@@ -69,8 +71,10 @@
 </script>
 
 <div class="bg-white p-6 rounded-lg shadow space-y-6 text-black mb-10" data-testid="upload-a-spreadsheet">
-  <h2 class="text-xl font-semibold">Upload A Spreadsheet</h2>
+  <h2 class="text-xl font-semibold mb-[2px]">Upload a Spreadsheet</h2>
   
+  <p class="text-gray-700 text-[10px]">CSVs up to 10,000 rows work great. Those with more than 10,000 rows may be slow or could fail. Modify the CSV beforehand to ensure the CSV has exactly one header row.</p>
+
   <label class="block">
     <span class="sr-only">Choose CSV file</span>
     <input

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);
@@ -79,9 +80,9 @@
 
   onMount(() => {
     // 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 +188,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 +239,7 @@
   });
 
   const goBack = () => {
-    navigate('/');
+    navigate(basepath.replace(/\/+$/g, "") + "/");
   };
 </script>
 

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/ExistingDatabases.svelte

@@ -35,7 +35,7 @@
       totalDocuments = result.total;
       totalPages = Math.ceil(totalDocuments / pageSize);
     } catch (e) {
-      error = e instanceof Error ? e.message : 'Failed to load document sets';
+      error = e instanceof Error ? e.message : 'Failed to load list of spreadsheets';
     } finally {
       loading = false;
     }
@@ -48,7 +48,7 @@
         await api.deleteDocumentSet(documentSetId);
         await loadDocumentSets(currentPage);
       } catch (e) {
-        error = e instanceof Error ? e.message : 'Failed to delete document set';
+        error = e instanceof Error ? e.message : 'Failed to delete spreadsheet';
       }
     }
   }
@@ -87,7 +87,7 @@
   <div class="my-10 bg-white p-6 rounded-lg shadow space-y-6 text-black" data-testid="existing-spreadsheets">
     <h2 class="text-2xl font-bold">Existing Spreadsheets</h2>
     {#if documentSets.length === 0}
-      <p class="text-gray-500">No spreadsheets found. Upload one to get started.</p>
+      <p class="text-gray-500">No spreadsheets found. Upload a CSV to get started.</p>
     {:else}
       <div class="overflow-x-auto">
         <table class="min-w-full table-auto">
@@ -96,7 +96,7 @@
               <th class="px-4 py-2 text-left">Name</th>
               <th class="px-4 py-2 text-left">Upload Date</th>
               <th class="px-4 py-2 text-left">Documents</th>
-              <th class="px-4 py-2 text-left">Parameters</th>
+              <th class="px-4 py-2 text-left">Details and Settings</th>
               <th class="px-4 py-2 text-left"><span class="sr-only">Actions</span></th>
             </tr>
           </thead>
@@ -121,7 +121,7 @@
                 <td class="px-4 py-2">
                   {#if Object.keys(set.parameters).length > 0}
                     <details>
-                      <summary class="cursor-pointer text-sm text-blue-600">View Parameters</summary>
+                      <summary class="cursor-pointer text-sm text-blue-600">See Details</summary>
                       <pre class="mt-2 p-2 bg-gray-50 rounded text-sm">{JSON.stringify(set.parameters, null, 2)}</pre>
                     </details>
                   {:else}

package/dist/components/FrontPage.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
     import ExistingDatabases from './ExistingDatabases.svelte'
     import CsvUpload from './CsvUpload.svelte'
-  import type { MeaningfullyAPI } from '../types';
+    import type { MeaningfullyAPI } from '../types';
+    import { Link } from 'svelte-routing';
 
     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>.
+    </div>
 </div>
-  

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/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 Document Sets</span>
-    </button>
+      <span>Back to Home</span>
+    </Link>
   </div>
 
   {#if documentSetLoading}
@@ -131,19 +132,15 @@
     <div class="space-y-4 max-w-3xl">
       <!-- Search Input -->
       <div class="space-y-2">
-        <label for="search" class="block text-sm font-medium text-gray-700">
+        <label for="search" class="block text-sm font-medium text-gray-300">
           Semantic Search
         </label>
-        <p class="text-xs text-gray-500">
-          Imagine the perfect document that you hope might exist in your spreadsheet. Type it here. Meaningfully will find the real documents that mean 
-          about the same thing -- even if they have no keywords in common.
-        </p>
         <div class="flex space-x-4">
           <input
             id="search"
             type="text"
             bind:value={searchQuery}
-            placeholder={placeholderQuery}
+            placeholder={"... " + placeholderQuery}
             data-testid="search-bar"
             class="flex-1 px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 placeholder-gray-400"
           />
@@ -156,13 +153,17 @@
             {loading ? 'Searching...' : 'Search'}
           </button>
         </div>
+        <p class="text-xs text-gray-500">
+          Need a hint? Imagine the perfect document that you hope might exist in your spreadsheet. Type it here. Meaningfully will find the real documents that mean 
+          about the same thing -- even if they have no keywords in common.
+        </p>
       </div>
 
       <!-- Metadata Filters -->
       {#if metadataColumns.length > 0}  
       <div class="space-y-2">
-        <p class="block text-sm font-medium text-gray-700">
-          Search only records that match...
+        <p class="block text-sm font-medium text-gray-300">
+          Use filters to search a subset of rows in your spreadsheet.
         </p>
         <div class="space-y-4">
           {#each metadataFilters as filter, index}
@@ -224,6 +225,8 @@
           originalDocumentClick={handleOriginalDocumentClick}
           />
       </div>
+    {:else}
+      <div class="text-gray-500">You won't find any results unless you search</div>
     {/if}
   {/if}
 </div>

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/package.json

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