cleanup: allow user to opt out of autocomplete search mode

clients/search-component/example/src/routes/index.lazy.tsx

@@ -116,6 +116,10 @@ export default function Home() {
               allowSwitchingModes={true}
               useGroupSearch={false}
               responsive={false}
+              searchOptions={{
+                use_autocomplete: false,
+                search_type: "fulltext",
+              }}
             />
 
             <div className="mt-8 text-sm rounded overflow-hidden max-w-[100vw]">

clients/search-component/package.json

@@ -7,7 +7,7 @@
     "dist/*",
     "dist/**/*"
   ],
-  "version": "0.0.51",
+  "version": "0.0.54",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

clients/search-component/src/utils/hooks/modal-context.tsx

@@ -7,8 +7,8 @@ import React, {
 } from "react";
 import { Chunk, ChunkWithHighlights, GroupChunk } from "../types";
 import {
-  AutocompleteReqPayload,
   CountChunkQueryResponseBody,
+  SearchChunksReqPayload,
   TrieveSDK,
 } from "trieve-ts-sdk";
 import {
@@ -19,17 +19,22 @@ import {
 
 export const ALL_TAG = { tag: "all", label: "All", icon: null };
 
+type simpleSearchReqPayload = Omit<
+  SearchChunksReqPayload,
+  "query" | "highlight_options"
+>;
+type customAutoCompleteAddOn = {
+  use_autocomplete?: boolean;
+};
+
 type currencyPosition = "before" | "after";
 type ModalTypes = "ecommerce" | "docs";
 type SearchModes = "chat" | "search";
-type searchOptions = Omit<
-  Omit<AutocompleteReqPayload, "query">,
-  "highlight_options"
->;
+type searchOptions = simpleSearchReqPayload & customAutoCompleteAddOn;
 export type ModalProps = {
   datasetId: string;
   apiKey: string;
-  baseUrl: string;
+  baseUrl?: string;
   onResultClick?: (chunk: Chunk) => void;
   theme?: "light" | "dark";
   searchOptions?: searchOptions;
@@ -69,7 +74,10 @@ const defaultProps = {
   placeholder: "Search...",
   theme: "light" as "light" | "dark",
   searchOptions: {
-    search_type: "fulltext",
+    use_autocomplete: true,
+    typo_options: {
+      correct_typos: true,
+    },
   } as searchOptions,
   analytics: true,
   chat: true,
@@ -143,7 +151,7 @@ function ModalProvider({
   });
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<ChunkWithHighlights[] | GroupChunk[]>(
-    [],
+    []
   );
   const [requestID, setRequestID] = useState("");
   const [loadingResults, setLoadingResults] = useState(false);
@@ -153,7 +161,7 @@ function ModalProvider({
   const modalRef = useRef<HTMLDivElement>(null);
   const [tagCounts, setTagCounts] = useState<CountChunkQueryResponseBody[]>([]);
   const [currentTag, setCurrentTag] = useState(
-    props.tags?.find((t) => t.selected)?.tag || "all",
+    props.tags?.find((t) => t.selected)?.tag || "all"
   );
 
   const trieve = new TrieveSDK({
@@ -239,8 +247,8 @@ function ModalProvider({
               trieve: trieve,
               abortController,
               ...(tag.tag !== "all" && { tag: tag.tag }),
-            }),
-          ),
+            })
+          )
         );
         setTagCounts(numberOfRecords);
       } catch (e) {
@@ -296,7 +304,8 @@ function ModalProvider({
         currentTag,
         setCurrentTag,
         tagCounts,
-      }}>
+      }}
+    >
       {children}
     </ModalContext.Provider>
   );

clients/search-component/src/utils/trieve.ts

@@ -17,25 +17,53 @@ export const searchWithTrieve = async ({
   abortController?: AbortController;
   tag?: string;
 }) => {
-  const results = (await trieve.autocomplete(
-    {
-      query,
-      highlight_options: {
-        ...highlightOptions,
-        highlight_delimiters: ["?", ",", ".", "!", "\n"],
+  let results;
+  if (searchOptions.use_autocomplete === true) {
+    results = (await trieve.autocomplete(
+      {
+        query,
+        highlight_options: {
+          ...highlightOptions,
+          highlight_delimiters: ["?", ",", ".", "!", "\n"],
+        },
+        extend_results: true,
+        score_threshold: 2,
+        page_size: 20,
+        ...(tag && {
+          filters: {
+            must: [{ field: "tag_set", match_any: [tag] }],
+          },
+        }),
+        typo_options: {
+          correct_typos: true,
+        },
+        ...searchOptions,
       },
-      extend_results: true,
-      score_threshold: 2,
-      page_size: 20,
-      ...(tag && {
-        filters: {
-          must: [{ field: "tag_set", match_any: [tag] }],
+      abortController?.signal
+    )) as SearchResponseBody;
+  } else {
+    results = (await trieve.search(
+      {
+        query,
+        highlight_options: {
+          ...highlightOptions,
+          highlight_delimiters: ["?", ",", ".", "!", "\n"],
         },
-      }),
-      ...searchOptions,
-    },
-    abortController?.signal,
-  )) as SearchResponseBody;
+        score_threshold: 2,
+        page_size: 20,
+        ...(tag && {
+          filters: {
+            must: [{ field: "tag_set", match_any: [tag] }],
+          },
+        }),
+        typo_options: {
+          correct_typos: true,
+        },
+        ...searchOptions,
+      },
+      abortController?.signal
+    )) as SearchResponseBody;
+  }
 
   const resultsWithHighlight = results.chunks.map((chunk) => {
     const c = chunk.chunk as unknown as Chunk;
@@ -86,7 +114,7 @@ export const groupSearchWithTrieve = async ({
       group_size: 3,
       ...searchOptions,
     },
-    abortController?.signal,
+    abortController?.signal
   );
 
   const resultsWithHighlight = results.results.map((group) => {
@@ -113,7 +141,7 @@ export const omit = (obj: object | null | undefined, keys: string[]) => {
   if (!obj) return obj;
 
   return Object.fromEntries(
-    Object.entries(obj).filter(([key]) => !keys.includes(key)),
+    Object.entries(obj).filter(([key]) => !keys.includes(key))
   );
 };
 
@@ -143,7 +171,7 @@ export const countChunks = async ({
       search_type: "fulltext",
       ...omit(searchOptions, ["search_type"]),
     },
-    abortController?.signal,
+    abortController?.signal
   );
   return results;
 };
@@ -185,7 +213,7 @@ export const getSuggestedQueries = async ({
       search_type: "semantic",
       context: "You are a user searching through a docs website",
     },
-    abortController?.signal,
+    abortController?.signal
   );
 };
 
@@ -202,7 +230,7 @@ export const getSuggestedQuestions = async ({
       search_type: "semantic",
       context: "You are a user searching through a docs website",
     },
-    abortController?.signal,
+    abortController?.signal
   );
 };
 

clients/search-component/src/utils/types.ts

@@ -31,13 +31,13 @@ export type GroupSearchResults = {
 };
 
 export function isChunksWithHighlights(
-  result: ChunkWithHighlights | GroupChunk,
+  result: ChunkWithHighlights | GroupChunk
 ): result is ChunkWithHighlights {
   return (result as ChunkWithHighlights).highlights !== undefined;
 }
 
 export function isGroupChunk(
-  result: ChunkWithHighlights | GroupChunk,
+  result: ChunkWithHighlights | GroupChunk
 ): result is GroupChunk {
   return (result as GroupChunk).group !== undefined;
 }
@@ -48,8 +48,10 @@ export type Props = {
   onResultClick?: (chunk: Chunk, requestID: string) => void;
   theme?: "light" | "dark";
   searchOptions?: Omit<
-    Omit<SearchChunksReqPayload, "query">,
-    "highlight_options"
-  >;
+    SearchChunksReqPayload,
+    "query" | "highlight_options"
+  > & {
+    use_autocomplete?: boolean;
+  };
   placeholder?: string;
 };

clients/ts-sdk/package.json

@@ -6,7 +6,7 @@
   "files": [
     "dist"
   ],
-  "version": "0.0.13",
+  "version": "0.0.14",
   "license": "MIT",
   "scripts": {
     "lint": "eslint 'src/**/*.ts'",