feature: add pagefind to search component

clients/search-component/example/.env.dist

@@ -4,4 +4,6 @@ VITE_API_KEY="tr-zpPVGUq18FxOCmXgLfqGbmDOY4UMW00r"
 VITE_BRAND_LOGO_SRC_URL="https://cdn.trieve.ai/trieve-logo.png"
 VITE_BRAND_NAME="Trieve"
 VITE_BRAND_COLOR="#CB53EB"
-VITE_PROBLEM_LINK="mailto:[email protected]?subject="
+VITE_PROBLEM_LINK="mailto:[email protected]?subject="
+VITE_USE_PAGEFIND="false"
+VITE_PAGEFIND_URL="https://pagefind-testing-index.trieve.ai/pagfind-index-west/pagefind"

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

@@ -16,6 +16,8 @@ export default function Home() {
   const brandColor = import.meta.env.VITE_ACCENT_COLOR;
   const problemLink = import.meta.env.VITE_PROBLEM_LINK;
   const useGroupSearch = import.meta.env.VITE_USE_GROUP_SEARCH == "true";
+  const usePagefind = import.meta.env.VITE_USE_PAGEFIND == "true";
+  const pagefindUrl = import.meta.env.VITE_PAGEFIND_URL;
   const defaultSearchQueries: string[] = (
     import.meta.env.VITE_DEFAULT_SEARCH_QUERIES ?? ""
   ).split(",");
@@ -120,6 +122,10 @@ export default function Home() {
                 },
               ]}
               useGroupSearch={useGroupSearch}
+              pagefindOptions={{
+                usePagefind: usePagefind,
+                cdnBaseUrl: pagefindUrl,
+              }}
               defaultAiQuestions={[
                 "What is Trieve?",
                 "How to perform autocomplete search?",

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

@@ -15,6 +15,7 @@ import {
 import {
   countChunks,
   groupSearchWithTrieve,
+  searchWithPagefind,
   searchWithTrieve,
 } from "../trieve";
 
@@ -38,6 +39,11 @@ export type ModalTypes = "ecommerce" | "docs";
 export type SearchModes = "chat" | "search";
 export type searchOptions = simpleSearchReqPayload & customAutoCompleteAddOn;
 
+export interface PagefindOptions {
+  usePagefind: boolean;
+  cdnBaseUrl?: string;
+}
+
 export type ModalProps = {
   datasetId: string;
   apiKey: string;
@@ -65,6 +71,7 @@ export type ModalProps = {
     icon?: () => JSX.Element;
   }[];
   defaultSearchMode?: SearchModes;
+  pagefindOptions?: PagefindOptions;
   type?: ModalTypes;
   useGroupSearch?: boolean;
   allowSwitchingModes?: boolean;
@@ -220,6 +227,9 @@ const ModalProvider = ({
 
         setResults(Array.from(groupMap.values()));
         setRequestID(results.requestID);
+      } else if (props.pagefindOptions?.usePagefind) {
+        const results = await searchWithPagefind(query, props.pagefindOptions, props.datasetId);
+        setResults(results);
       } else {
         const results = await searchWithTrieve({
           query: query,

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

@@ -6,7 +6,7 @@ import {
 } from "trieve-ts-sdk";
 import { Chunk, GroupSearchResults, Props, SearchResults } from "./types";
 import { defaultHighlightOptions, highlightText } from "./highlight";
-import { ModalTypes } from "./hooks/modal-context";
+import { ModalTypes, PagefindOptions } from "./hooks/modal-context";
 
 export const omit = (obj: object | null | undefined, keys: string[]) => {
   if (!obj) return obj;
@@ -300,3 +300,44 @@ export const getAllChunksForGroup = async (
   }
   return chunks;
 };
+
+export const searchWithPagefind = async (
+  query: string,
+  pagefindOptions: PagefindOptions,
+  datasetId: string,
+) => {
+  const pagefind_base_url = `${pagefindOptions.cdnBaseUrl}/${datasetId}`;
+
+  const pagefind = await import(`${pagefind_base_url}/pagefind.js`);
+  const response = await pagefind.search(query);
+
+  const results = await Promise.all(response.results.map(async (result: any) => {
+    return await result.data();
+  }));
+
+  // Set pagesize to 20
+  const pagefindResultsMappedToTrieve = results.slice(0, 20).map((result, i) => {
+    return {
+      chunk: {
+        chunk_html: result.content,
+        link: result.url,
+        metadata: result.meta,
+        created_at: "",
+        dataset_id: datasetId,
+        id: i.toString(),
+        image_urls: null,
+        location: null,
+        num_value: null,
+        tag_set: null,
+        time_stamp: null,
+        tracking_id: null,
+        updated_at: "",
+        weight: 0
+
+      },
+      highlights: []
+    }
+  })
+
+  return pagefindResultsMappedToTrieve;
+};