refactor: cleanup chat-context to work with agentic search

Author: vid277

clients/search-component/example/src/routes/ecommerce.tsx

@@ -25,7 +25,7 @@ export default function ECommerce() {
     import.meta.env.VITE_SHOW_FLOATING_SEARCH_ICON == "true";
   const showFloatingInput = import.meta.env.VITE_SHOW_FLOATING_INPUT == "true";
   const usePagefind = import.meta.env.VITE_USE_PAGEFIND == "true";
-  const defaultSearchQueries: any= (
+  const defaultSearchQueries: any = (
     import.meta.env.VITE_DEFAULT_SEARCH_QUERIES ?? ""
   ).split(",");
   const defaultTags: any[] = JSON.parse(

clients/search-component/src/TrieveModal/Chat/SuggestedQuestions.tsx

@@ -22,8 +22,7 @@ export const SuggestedQuestions = ({
   const { suggestedQuestions, isLoadingSuggestedQueries, getQuestions } =
     useSuggestedQuestions();
 
-  const { props, trieveSDK, fingerprint, abTreatment } =
-    useModalState();
+  const { props, trieveSDK, fingerprint, abTreatment } = useModalState();
   const [parent] = useAutoAnimate({ duration: 100 });
 
   if (messages.length) {
@@ -33,7 +32,13 @@ export const SuggestedQuestions = ({
   const handleSuggestedQuestion = async (
     q: AiQuestion | DefaultSearchQuery | string,
   ) => {
-    setCurrentQuestion(isAiQuestion(q) ? q.questionText : isDefaultSearchQuery(q) ? q.query ?? "" : q);
+    setCurrentQuestion(
+      isAiQuestion(q)
+        ? q.questionText
+        : isDefaultSearchQuery(q)
+          ? (q.query ?? "")
+          : q,
+    );
 
     if (!isDefaultSearchQuery(q)) {
       askQuestion(
@@ -44,7 +49,11 @@ export const SuggestedQuestions = ({
       );
     } else {
       askQuestion(
-        isAiQuestion(q) ? q.questionText : isDefaultSearchQuery(q) ? q.query ?? "" : q,
+        isAiQuestion(q)
+          ? q.questionText
+          : isDefaultSearchQuery(q)
+            ? (q.query ?? "")
+            : q,
         undefined,
         isAiQuestion(q) ? (q.products?.map((p) => p.groupId) ?? []) : undefined,
         isAiQuestion(q) && q.promptForAI !== "" ? q.promptForAI : undefined,
@@ -63,7 +72,11 @@ export const SuggestedQuestions = ({
       user_id: fingerprint,
       location: window.location.href,
       metadata: {
-        followup_query: isAiQuestion(q) ? q.questionText : isDefaultSearchQuery(q) ? q.query ?? "" : q,
+        followup_query: isAiQuestion(q)
+          ? q.questionText
+          : isDefaultSearchQuery(q)
+            ? (q.query ?? "")
+            : q,
         component_props: props,
         ab_treatment: abTreatment,
       },
@@ -117,17 +130,27 @@ export const SuggestedQuestions = ({
               onClick={() => {
                 handleSuggestedQuestion(q);
               }}
-              key={isAiQuestion(q) ? q.questionText : isDefaultSearchQuery(q) ? q.query ?? "": q}
+              key={
+                isAiQuestion(q)
+                  ? q.questionText
+                  : isDefaultSearchQuery(q)
+                    ? (q.query ?? "")
+                    : q
+              }
               className={`suggested-question tv-flex tv-gap-1 tv-items-center${
                 isLoadingSuggestedQueries ? " loading" : ""
               }`}
             >
               <SparklesIcon fill="none" width={15} height={15} />
-              {isAiQuestion(q) ? q.questionText : isDefaultSearchQuery(q) ? q.query ?? "": q}
+              {isAiQuestion(q)
+                ? q.questionText
+                : isDefaultSearchQuery(q)
+                  ? (q.query ?? "")
+                  : q}
             </button>
           ))}
         </div>
       </div>
     </div>
   );
-};
+};

clients/search-component/src/TrieveModal/Search/SuggestedQueries.tsx

@@ -1,6 +1,9 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { cn } from "../../utils/styles";
-import { useModalState, isDefaultSearchQuery } from "../../utils/hooks/modal-context";
+import {
+  useModalState,
+  isDefaultSearchQuery,
+} from "../../utils/hooks/modal-context";
 import { DefaultSearchQuery } from "trieve-ts-sdk";
 import { getSuggestedQueries } from "../../utils/trieve";
 
@@ -42,9 +45,11 @@ export const SuggestedQueries = () => {
 
   useEffect(() => {
     const defaultQueries =
-      props.defaultSearchQueries && props.defaultSearchQueries.length > 0 && isDefaultSearchQuery(props.defaultSearchQueries[0])
+      props.defaultSearchQueries &&
+      props.defaultSearchQueries.length > 0 &&
+      isDefaultSearchQuery(props.defaultSearchQueries[0])
         ? props.defaultSearchQueries
-        : props.defaultSearchQueries?.filter((q) => q !== "") ?? [];
+        : (props.defaultSearchQueries?.filter((q) => q !== "") ?? []);
 
     if (props.defaultSearchQueries?.length) {
       setSuggestedQueries(defaultQueries);
@@ -79,7 +84,9 @@ export const SuggestedQueries = () => {
         <div className="suggested-query loading">Loading...</div>
       ) : (
         suggestedQueries.map((q) => {
-          let query = isDefaultSearchQuery(q)  ? q.query?.replace(/^-|\*$/g, "") : q.replace(/^-|\*$/g, "");
+          let query = isDefaultSearchQuery(q)
+            ? q.query?.replace(/^-|\*$/g, "")
+            : q.replace(/^-|\*$/g, "");
           query = query?.trim();
           return (
             <button

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

@@ -185,7 +185,14 @@ const Modal = () => {
         setMode("chat");
         cancelGroupChat();
         setOpen(true);
-        askQuestion(customEvent.detail.text, undefined, undefined, "", true, customEvent.detail.imageUrl);
+        askQuestion(
+          customEvent.detail.text,
+          undefined,
+          undefined,
+          "",
+          true,
+          customEvent.detail.imageUrl,
+        );
       } else {
         setOpen(true);
         setMode("search");