cleanup: remove lodash from search-component

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

@@ -38,14 +38,14 @@ export default function Home() {
             </h2>
 
             <TrieveModalSearch
-              defaultSearchMode="chat"
-              apiKey="tr-UPjrAOp35kGrJWM1IvODj4zVWTdGgQxI"
-              datasetId="4650e231-7857-45aa-beb1-cb52006a2460"
+              defaultSearchMode="search"
+              apiKey="tr-zpPVGUq18FxOCmXgLfqGbmDOY4UMW00r"
+              datasetId="4538ad9f-47cf-44d4-8a14-7c111f9558a9"
               theme={theme}
               tags={[
                 {
-                  tag: "userguide",
-                  label: "User Guides",
+                  tag: "openapi-route",
+                  label: "API Routes",
                   icon: () => (
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -69,8 +69,8 @@ export default function Home() {
                   ),
                 },
                 {
-                  tag: "docker",
-                  label: "Docker",
+                  tag: "blog",
+                  label: "Blog",
                   icon: () => (
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -99,19 +99,19 @@ export default function Home() {
                 },
               ]}
               defaultSearchQueries={[
-                "App Service Diagnostic Settings EventHub",
-                "Logstash to SigNoz configuration tutorial",
-                "EventHub and App Service logging integration",
+                "How to create a chunk?",
+                "Does Trieve use a re-ranker?",
+                "Sending click events",
               ]}
               defaultAiQuestions={[
-                "What is SigNoz?",
-                "How to change retention period?",
-                "How do I install SigNoz?",
+                "What is Trieve?",
+                "How to perform autocomplete search?",
+                "How do I install the TS SDK?",
               ]}
-              brandLogoImgSrcUrl="https://avatars.githubusercontent.com/u/76905799?s=200&v=4"
-              brandName="SigNoz"
-              brandColor="#E75536"
-              allowSwitchingModes={false}
+              brandLogoImgSrcUrl="https://cdn.trieve.ai/trieve-logo.png"
+              brandName="Trieve"
+              brandColor="#b557c5"
+              allowSwitchingModes={true}
             />
 
             <div className="mt-8 text-sm rounded overflow-hidden max-w-[100vw]">
@@ -126,8 +126,8 @@ export default function Home() {
               Search Results Component
             </h2>
             <TrieveSearch
-              apiKey="tr-UPjrAOp35kGrJWM1IvODj4zVWTdGgQxI"
-              datasetId="4650e231-7857-45aa-beb1-cb52006a2460"
+              apiKey="tr-zpPVGUq18FxOCmXgLfqGbmDOY4UMW00r"
+              datasetId="4538ad9f-47cf-44d4-8a14-7c111f9558a9"
               theme={theme}
             />
           </>

clients/search-component/package.json

@@ -7,7 +7,7 @@
     "dist/*",
     "dist/**/*"
   ],
-  "version": "0.0.20",
+  "version": "0.0.28",
   "license": "MIT",
   "scripts": {
     "dev": "run-p watch:css watch:js",

clients/search-component/src/TrieveSearch/Item.tsx

@@ -1,4 +1,3 @@
-import { omit } from "lodash";
 import { Chunk, ChunkWithHighlights } from "../utils/types";
 import React from "react";
 
@@ -13,6 +12,14 @@ type Props = {
   onResultClick?: (chunk: Chunk, requestID: string) => void;
 };
 
+export const omit = (obj: object | null | undefined, keys: string[]) => {
+  if (!obj) return obj;
+
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !keys.includes(key))
+  );
+};
+
 export const Item = ({
   item,
   index,

clients/search-component/src/TrieveSearch/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from "react";
 import { useCombobox } from "downshift";
 import { Item } from "./Item";
 import { Chunk, ChunkWithHighlights, Props } from "../utils/types";
-import { throttle } from "lodash-es";
 import r2wc from "@r2wc/react-to-web-component";
 import { searchWithTrieve } from "../utils/trieve";
 import { TrieveSDK } from "trieve-ts-sdk";
@@ -24,10 +23,7 @@ export const TrieveSearch = ({
   const { isOpen, getLabelProps, getMenuProps, getInputProps, getItemProps } =
     useCombobox({
       items: results,
-      onInputValueChange: throttle(
-        ({ inputValue }) => search(inputValue),
-        1000
-      ),
+      onInputValueChange: ({ inputValue }) => search(inputValue),
       stateReducer: (state, actionAndChanges) => {
         const { type, changes } = actionAndChanges;
         switch (type) {

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

@@ -140,8 +140,8 @@ function ModalProvider({
   );
 
   const trieve = new TrieveSDK({
-    apiKey: "tr-UPjrAOp35kGrJWM1IvODj4zVWTdGgQxI",
-    datasetId: "4650e231-7857-45aa-beb1-cb52006a2460",
+    apiKey: props.apiKey,
+    datasetId: props.datasetId,
   });
 
   useEffect(() => {

clients/search-component/src/utils/hooks/useSuggestedQueries.ts

@@ -1,4 +1,3 @@
-import { throttle } from "lodash";
 import { useEffect, useRef, useState } from "react";
 import { SuggestedQueriesResponse } from "trieve-ts-sdk";
 import { getSuggestedQueries } from "../trieve";
@@ -12,7 +11,7 @@ export const useSuggestedQueries = () => {
     SuggestedQueriesResponse["queries"]
   >([]);
 
-  const getQueries = throttle(async () => {
+  const getQueries = async () => {
     if (isFetching.current) {
       return;
     }
@@ -25,7 +24,7 @@ export const useSuggestedQueries = () => {
     setSuggestedQueries(queries.queries.splice(0, 3));
     isFetching.current = false;
     setIsLoading(false);
-  }, 1000);
+  };
 
   const refetchSuggestedQueries = () => {
     getQueries();
@@ -45,7 +44,29 @@ export const useSuggestedQueries = () => {
       return;
     }
 
-    getQueries();
+    const abortController = new AbortController();
+
+    if (isFetching.current) {
+      return;
+    }
+    isFetching.current = true;
+    setIsLoading(true);
+
+    const timeoutId = setTimeout(async () => {
+      const queries = await getSuggestedQueries({
+        trieve: trieveSDK,
+        query,
+        abortController,
+      });
+      setSuggestedQueries(queries.queries.splice(0, 3));
+      isFetching.current = false;
+      setIsLoading(false);
+    }, 500);
+
+    return () => {
+      clearTimeout(timeoutId);
+      abortController.abort();
+    };
   }, [query]);
 
   return {

clients/search-component/src/utils/hooks/useSuggestedQuestions.ts

@@ -1,4 +1,3 @@
-import { throttle } from "lodash";
 import { useEffect, useRef, useState } from "react";
 import { SuggestedQueriesResponse } from "trieve-ts-sdk";
 import { getSuggestedQuestions } from "../trieve";
@@ -12,7 +11,7 @@ export const useSuggestedQuestions = () => {
     SuggestedQueriesResponse["queries"]
   >([]);
 
-  const getQuestions = throttle(async () => {
+  const getQuestions = async () => {
     isFetching.current = true;
     setIsLoading(true);
     const queries = await getSuggestedQuestions({
@@ -21,7 +20,7 @@ export const useSuggestedQuestions = () => {
     setSuggestedQuestions(queries.queries.splice(0, 3));
     isFetching.current = false;
     setIsLoading(false);
-  }, 1000);
+  };
 
   const refetchSuggestedQuestion = () => {
     getQuestions();
@@ -33,7 +32,24 @@ export const useSuggestedQuestions = () => {
       return;
     }
 
-    refetchSuggestedQuestion();
+    setIsLoading(true);
+    isFetching.current = true;
+    const abortController = new AbortController();
+
+    const timeoutId = setTimeout(async () => {
+      const queries = await getSuggestedQuestions({
+        trieve: trieveSDK,
+        abortController,
+      });
+      setSuggestedQuestions(queries.queries.splice(0, 3));
+      isFetching.current = false;
+      setIsLoading(false);
+    });
+
+    return () => {
+      clearTimeout(timeoutId);
+      abortController.abort();
+    };
   }, []);
 
   return {

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

@@ -48,7 +48,10 @@ export const searchWithTrieve = async ({
     };
   });
 
-  return {chunks: resultsWithHighlight, requestID: results.id} as unknown as SearchResults;
+  return {
+    chunks: resultsWithHighlight,
+    requestID: results.id,
+  } as unknown as SearchResults;
 };
 
 export const countChunks = async ({
@@ -102,34 +105,40 @@ export const sendCtrData = async ({
 export const getSuggestedQueries = async ({
   trieve,
   query,
+  abortController,
 }: {
   query: string;
   trieve: TrieveSDK;
+  abortController?: AbortController;
 }) => {
-  return trieve.suggestedQueries({
-    ...(query && { query }),
-    suggestion_type: "keyword",
-    search_type: "semantic",
-    context: "You are a user searching through a docs website",
-  });
+  return trieve.suggestedQueries(
+    {
+      ...(query && { query }),
+      suggestion_type: "keyword",
+      search_type: "semantic",
+      context: "You are a user searching through a docs website",
+    },
+    abortController?.signal
+  );
 };
 
 export const getSuggestedQuestions = async ({
   trieve,
+  abortController,
 }: {
   trieve: TrieveSDK;
+  abortController?: AbortController;
 }) => {
-  return trieve.suggestedQueries({
-    suggestion_type: "question",
-    search_type: "semantic",
-    context: "You are a user searching through a docs website",
-  });
+  return trieve.suggestedQueries(
+    {
+      suggestion_type: "question",
+      search_type: "semantic",
+      context: "You are a user searching through a docs website",
+    },
+    abortController?.signal
+  );
 };
 
-export const sendFeedBack = async ({
-  trieve,
-}: {
-  trieve: TrieveSDK;
-}) => {
+export const sendFeedBack = async ({ trieve }: { trieve: TrieveSDK }) => {
   return trieve;
 };

yarn.lock

@@ -1339,9 +1339,9 @@
     "@types/lodash" "*"
 
 "@types/lodash@*":
-  version "4.17.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.7.tgz#2f776bcb53adc9e13b2c0dfd493dfcbd7de43612"
-  integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.10.tgz#64f3edf656af2fe59e7278b73d3e62404144a6e6"
+  integrity sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==
 
 "@types/mdast@^3.0.0":
   version "3.0.15"
@@ -3293,19 +3293,12 @@ eslint-utils@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
   integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
-  dependencies:
-    eslint-visitor-keys "^2.0.0"
 
 eslint-visitor-keys@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
 eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"