@meaningfully/ui 0.0.1

package/dist/components/FrontPage.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import ExistingDatabases from './ExistingDatabases.svelte'
+    import CsvUpload from './CsvUpload.svelte'
+  import type { MeaningfullyAPI } from '../types';
+
+    interface Props {
+      validApiKeysSet: boolean;
+      api: MeaningfullyAPI;
+    }
+
+    let { validApiKeysSet, api }: Props = $props();
+</script>
+
+<div class="container mx-auto px-4 space-y-8">
+    <CsvUpload validApiKeysSet={validApiKeysSet} />
+    <ExistingDatabases api={api} />
+</div>
+  

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

@@ -0,0 +1,8 @@
+import type { MeaningfullyAPI } from '../types';
+interface Props {
+    validApiKeysSet: boolean;
+    api: MeaningfullyAPI;
+}
+declare const FrontPage: import("svelte").Component<Props, {}, "">;
+type FrontPage = ReturnType<typeof FrontPage>;
+export default FrontPage;

package/dist/components/HelpPage.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+</script>
+
+
+<div class="container mx-auto px-4 space-y-8">
+    <h1>Help</h1>
+    <section>
+        <h2>What is Semantic Search?</h2>
+        <p>
+            Keyword search has been the only kind of search for decades. Sometimes it fails:
+        </p>
+
+            <ul>
+                <li>Ambiguity and synonyms (people getting fired and things catching on fire, cars and automobiles)</li>
+                <li>Circumlocutions and legalese</li>
+                <li>Documents written by laypeople describing complex situations in widely-varied language</li>
+                <li>Typos</li>
+                <li>Multilingual documents</li>
+            </ul>
+        <p>
+            Semantic search works better in these situations, by finding results that <i>mean</i> something
+            similar to the query. Even if the words are completely different, semantic search can still
+            surface the results you need.
+        </p>
+    </section>
+    <section>
+        <h2> a CSV</h2>
+        <p>
+            You can select a CSV from your computer to "upload" it to Meaningfully. Then, select one column
+            from the CSV to search semantically, and any number of other columns to be shown alongside it in results.
+        </p>
+        <p>
+            Once you upload the CSV, each entry in the chosen column will be embedded, with the results stored on your
+            computer. If you choose a remote embedding API -- like OpenAI's text-embedding-small or text-embedding-large --
+            then the entries in your column will be sent
+            to that service; if you choose a local one, then the data will not leave your computer.
+        </p>
+        <p>
+            Meaningfully provides additional options:
+        </p>
+        <ul>
+            <li>Split long text into sentences. When a single row contains many ideas, splitting it by sentence helps the search surface 
+                results that match a single idea.
+            </li>
+            <li>Combine short sentences into chunks. You can adjust how large the chunks are and how much overlap exists between chunks.</li>
+        </ul>
+        <p>
+            Embedding can take a while, especially for large CSVs with 10,000 or more rows. Once it finishes, you'll
+            be able to search your CSV.
+        </p>
+    </section>
+    <section>
+        <h2>How should I write my search query?</h2>
+        <p>
+            <strong>Do: </strong> Imagine the perfect version of what you're looking for, that you wish exists in your spreadsheet. <span class="block whitespace-pre overflow-x-scroll">My car caught on fire as I was driving on the highway.</span>
+        </p>
+        <p>
+            <strong>Don't: </strong> Just write keywords. <span class="block whitespace-pre overflow-x-scroll">crash OR fire OR aflame</span>
+        </p>
+        <p>
+            <strong>Don't: </strong> Ask a question, like you would to a chatbot. <span class="block whitespace-pre overflow-x-scroll">Please find me examples about cars catching on fire.</span>
+        </p>
+
+    </section>
+    <section>
+        <h2>How much does it cost?</h2>
+        <p>
+            Generally less than a dollar per document set, but you're paying OpenAI, not me, and you're responsible for all costs, no matter what.
+        </p>
+        <p>
+            Eventually, some Meaningfully features may require payment.
+        </p>
+    </section>
+    <section>
+        <h2>How can I support development of Meaningfully??</h2>
+        <p>
+            You can <a href="https://buymeacoffee.com/jeremybmerrill">Buy Me A Coffee</a>.
+        </p>
+
+    </section>
+</div>
+  
+<style>
+    .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    h1 {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    p {
+        margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
+    }
+
+    /* ol {
+        margin-left: 20px;
+    }       
+    ol li {
+        list-style-type: decimal;
+        list-style-position: inside;
+        padding-left: 0.5rem;
+    } */
+    ul li {
+        list-style-type: disc;
+        list-style-position: inside;
+        padding-left: 0.5rem;
+    }
+</style>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const HelpPage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HelpPage = InstanceType<typeof HelpPage>;
+export default HelpPage;

package/dist/components/Preview.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import Table from './Table.svelte';
+  
+  interface Props {
+    previewData?: Array<Record<string, any>>;
+    textColumn: string;
+    metadataColumns?: string[];
+    loading?: boolean;
+  }
+
+  let {
+    previewData = [],
+    textColumn,
+    metadataColumns = [],
+    loading = false
+  }: Props = $props();
+</script>
+
+<div data-testid="preview" >
+  {#if loading}
+    <div class="flex justify-center items-center h-full">
+      <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-violet-500"></div>
+    </div>
+  { :else }
+    <div class="space-y-4">
+      <h2 class="text-xl font-semibold">Preview</h2>
+      <div class="bg-white rounded-lg shadow text-black">
+        <Table
+          data={previewData}
+          {textColumn}
+          {metadataColumns}
+          showSimilarity={false}
+        />
+      </div>
+    </div> 
+  {/if} 
+</div>

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

@@ -0,0 +1,9 @@
+interface Props {
+    previewData?: Array<Record<string, any>>;
+    textColumn: string;
+    metadataColumns?: string[];
+    loading?: boolean;
+}
+declare const Preview: import("svelte").Component<Props, {}, "">;
+type Preview = ReturnType<typeof Preview>;
+export default Preview;

package/dist/components/Results.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import Table from './Table.svelte';
+  import Papa from 'papaparse';
+  
+  interface Props {
+    results?: Array<Record<string, any>>;
+    textColumn: string;
+    metadataColumns?: string[];
+    loading?: boolean;
+    originalDocumentClick?: (sourceNodeId: string) => void;
+  }
+
+  let {
+    results = [],
+    textColumn,
+    metadataColumns = [],
+    loading = false,
+    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;
+  };
+
+  // Function to download results as CSV
+  const downloadCSV = () => {
+    if (results.length === 0) return;
+    
+    // Prepare data for Papa Parse
+    const csvData = results.map(row => {
+      const csvRow: Record<string, any> = {};
+      
+      // Add text column
+      csvRow[textColumn] = row[textColumn] || '';
+      
+      // Add metadata columns
+      metadataColumns.forEach(column => {
+        csvRow[column] = row[column] || '';
+      });
+      
+      // Add similarity column, formatted as percentage
+      if (row.similarity !== undefined) {
+        csvRow.similarity = (row.similarity * 100).toFixed(1) + '%';
+      }
+      
+      return csvRow;
+    });
+    
+    // Generate CSV using Papa Parse
+    const csvContent = Papa.unparse(csvData);
+    
+    // Create blob and download
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', 'results.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  // Computed property for visible results
+  let visibleResults = $derived(results.slice(0, displayCount));
+</script>
+
+<div class="space-y-4">
+  <div class="flex justify-between items-center">
+    <h2 class="text-xl font-semibold">Search Results</h2>
+    {#if results.length > 0 && !loading}
+      <button
+        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"
+      >
+        <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>
+        </svg>
+        Download CSV
+      </button>
+    {/if}
+  </div>
+  
+  {#if loading}
+  <div class="flex justify-center items-center h-full">
+    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-violet-500"></div>
+  </div>
+  {:else if results.length === 0}
+    <div class="bg-white rounded-lg shadow text-black">
+      <p>No results found. Is it possible there is no data in the dataset?</p>
+    </div>
+  {:else}
+    <div class="bg-white rounded-lg shadow text-black">
+      <Table
+        data={visibleResults}
+        {textColumn}
+        {metadataColumns}
+        showSimilarity={true}
+        showShowOriginal={true}
+        originalDocumentClick={originalDocumentClick}
+      />
+    </div>
+    
+    {#if displayCount < results.length}
+      <div class="flex justify-center mt-4">
+        <button
+          onclick={showMore}
+          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+        >
+          Show More
+        </button>
+      </div>
+    {/if}
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+interface Props {
+    results?: Array<Record<string, any>>;
+    textColumn: string;
+    metadataColumns?: string[];
+    loading?: boolean;
+    originalDocumentClick?: (sourceNodeId: string) => void;
+}
+declare const Results: import("svelte").Component<Props, {}, "">;
+type Results = ReturnType<typeof Results>;
+export default Results;

package/dist/components/SearchPage.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+  import { navigate } from 'svelte-routing';
+  import type { DocumentSet, MeaningfullyAPI } from '../types';
+  import Results from './Results.svelte';
+
+  interface Props {
+    validApiKeysSet: boolean;
+    documentSetId: number;
+    api: MeaningfullyAPI;
+  }
+
+  let { validApiKeysSet, documentSetId, api }: Props = $props();
+
+  let documentSet: DocumentSet | null = $state(null);
+  let documentSetLoading = $state(true);
+  let metadataColumns: string[] = $state([]);
+  let textColumn: string = $state('');
+  let loading = $state(false);
+  let hasResults = $state(false);
+  let showModal = $state(false);
+  let modalContent: Record<string, any> | null = $state(null);
+
+  const blankSearchQuery = '';
+  let searchQuery = $state(blankSearchQuery);
+  let metadataFilters: Array<{ key: string, operator: "==" | "in" | ">" | "<" | "!=" | ">=" | "<=" | "nin" | "any" | "all" | "text_match" | "contains" | "is_empty", value: any }> = $state([]);
+
+  let results: Array<Record<string, any>> = $state([]);
+  let error: string | null = $state(null);
+
+  api.getDocumentSet(documentSetId).then((receivedDocumentSet: DocumentSet) => {
+    documentSet = receivedDocumentSet;
+    metadataColumns = (documentSet.parameters.metadataColumns ?? []) as string[];
+    // @ts-ignore
+    textColumn = documentSet.parameters.textColumns[0] as string;
+    documentSetLoading = false;
+  }).catch(error => {
+    console.error('Error fetching document set:', error);
+    navigate('/');
+  });
+
+  const placeholderQueries = [
+    "The CEO got fired",
+    "My car caught on fire as I was driving on the highway",
+    "I surprised my closest friends by starting a business selling handmade candles",
+    "Our company's stock price could plummet if we don't address the recent scandal involving our CEO",
+    "Don't tell anyone that I was the one who leaked the confidential information about our competitor's new product launch",
+    "I can't believe I got fired for accidentally sending a company-wide email with a meme instead of the quarterly report",
+  ];
+  const placeholderQuery = placeholderQueries[Math.floor(Math.random() * placeholderQueries.length)];
+
+  async function handleSearch() {
+    if (!searchQuery.trim() || !documentSet) return;
+    hasResults = true;
+    loading = true;
+    try {
+      const searchResults = await api.searchDocumentSet({
+        documentSetId: documentSet.documentSetId,
+        query: searchQuery,
+        n_results: 100,
+        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
+      })); 
+      error = null; 
+    } catch (error_: any) {
+      console.error('Search failed:', error_);
+      error = error_;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function addFilter() {
+    metadataFilters = [...metadataFilters, { key: '', operator: '==', value: '' }];
+  }
+
+  function removeFilter(index: number) {
+    metadataFilters = metadataFilters.filter((_, i) => i !== index);
+  }
+
+  async function handleOriginalDocumentClick( documentId: string) {
+    try {
+      const documentData = await api.getDocument({ documentSetId, documentId });
+      modalContent = documentData;
+      showModal = true;
+    } catch (error) {
+      console.error('Error fetching document:', error);
+    }
+  }
+
+  function closeModal() {
+    showModal = false;
+    modalContent = null;
+  }
+</script>
+
+<div class="p-6 space-y-6">
+  <div class="flex items-center space-x-4">
+    <button 
+      class="text-blue-500 hover:text-blue-600 flex items-center space-x-1"
+      onclick={() => navigate('/') }
+    >
+      <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>
+  </div>
+
+  {#if documentSetLoading}
+    <p>Loading document set...</p>
+  {:else if !documentSet}
+    <p>Document set not found. {documentSetId}</p>
+  {:else}
+    <div class="space-y-2">
+      <h1 class="text-2xl font-bold" data-testid="document-set-name">{documentSet.name}</h1>
+      <p class="text-gray-600">
+        {documentSet.totalDocuments.toLocaleString()} documents • Uploaded {documentSet.uploadDate.toLocaleDateString()}
+      </p>
+    </div>
+
+    <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">
+          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}
+            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"
+          />
+          <button
+            onclick={handleSearch}
+            disabled={loading || !validApiKeysSet}
+            data-testid="search-button"
+            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {loading ? 'Searching...' : 'Search'}
+          </button>
+        </div>
+      </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>
+        <div class="space-y-4">
+          {#each metadataFilters as filter, index}
+            <div class="flex space-x-2 items-center">
+              <select bind:value={filter.key} class="px-2 py-1 border border-gray-300 rounded-md">
+                <option value="" disabled>Select column</option>
+                {#each metadataColumns as column}
+                  <option value={column}>{column}</option>
+                {/each}
+              </select>
+              <select bind:value={filter.operator} class="px-2 py-1 border border-gray-300 rounded-md">
+                <option value="==">==</option>
+                <option value="in">in</option>
+                <option value=">">&gt;</option>
+                <option value="<">&lt;</option>
+                <option value="!=">!=</option>
+                <option value=">=">&gt;=</option>
+                <option value="<=">&lt;=</option>
+                <option value="nin">not in</option>
+                <option value="any">any</option>
+                <option value="all">all</option>
+                <option value="text_match">text matches</option>
+                <option value="contains">contains</option>
+                <option value="is_empty">is empty</option>
+              </select>
+              <input
+                type="text"
+                bind:value={filter.value}
+                placeholder="Value"
+                class="flex-1 px-2 py-1 border border-gray-300 rounded-md"
+              />
+              <button onclick={() => removeFilter(index)} class="text-red-500 hover:text-red-600">
+                Remove
+              </button>
+            </div>
+          {/each}
+          <button onclick={addFilter} class="text-blue-500 hover:text-blue-600">
+            Add Filter
+          </button>
+        </div>
+      </div>
+      {/if}
+    </div>
+
+    <!-- Results -->
+    {#if error}
+      <div class="my-10 p-4 bg-red-100 text-red-700 rounded-md">
+        {error}
+      </div>
+    {/if}
+    {#if (searchQuery != blankSearchQuery || metadataFilters.length > 0) && hasResults}
+      <!-- Wrap Results component for easier selection -->
+      <div data-testid="results">
+        <Results
+          {results}
+          {loading}
+          {textColumn}
+          {metadataColumns}
+          originalDocumentClick={handleOriginalDocumentClick}
+          />
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<!-- modal for showing a whole document -->
+{#if showModal && modalContent}
+  <div data-testid="details" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+    <div class="bg-white text-black p-6 rounded-lg shadow-lg max-w-xl w-full max-h-screen overflow-y-auto">
+      <h2 class="text-xl font-semibold mb-4">Original Document</h2>
+      <table>
+        <thead>
+          <tr>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="px-4 py-2 text-left border-b text-black">Original text</td>
+            <td class="px-4 py-2 border-b text-black">{modalContent.text}</td>
+          </tr>
+          {#each metadataColumns as key}
+            <tr>
+              <td class="px-4 py-2 text-left border-b text-black">{key}</td>
+              <td class="px-4 py-2 border-b text-black">{modalContent.metadata[key]}</td>
+            </tr>
+          {/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>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { MeaningfullyAPI } from '../types';
+interface Props {
+    validApiKeysSet: boolean;
+    documentSetId: number;
+    api: MeaningfullyAPI;
+}
+declare const SearchPage: import("svelte").Component<Props, {}, "">;
+type SearchPage = ReturnType<typeof SearchPage>;
+export default SearchPage;