fix: accept string and default search query object for starter questions

Author: vid277

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

@@ -1,15 +1,18 @@
 import React from "react";
+import React from "react";
 import { useSuggestedQuestions } from "../../utils/hooks/useSuggestedQuestions";
 import { useChatState } from "../../utils/hooks/chat-context";
 import {
   AiQuestion,
   isAiQuestion,
+  isDefaultSearchQuery,
   useModalState,
 } from "../../utils/hooks/modal-context";
 import { cn } from "../../utils/styles";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { ArrowRotateRightIcon, SparklesIcon } from "../icons";
 import { AIInitialMessage } from "./AIInitalMessage";
+import { DefaultSearchQuery } from "trieve-ts-sdk";
 
 export const SuggestedQuestions = ({
   onMessageSend,
@@ -20,21 +23,37 @@ 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) {
     return null;
   }
 
-  const handleSuggestedQuestion = async (q: string | AiQuestion) => {
-    setCurrentQuestion(isAiQuestion(q) ? q.questionText : q);
-    askQuestion(
-      isAiQuestion(q) ? q.questionText : q,
-      undefined,
-      isAiQuestion(q) ? (q.products?.map((p) => p.groupId) ?? []) : undefined,
-      isAiQuestion(q) && q.promptForAI !== "" ? q.promptForAI : undefined,
-    );
+  const handleSuggestedQuestion = async (
+    q: AiQuestion | DefaultSearchQuery | string,
+  ) => {
+    console.log("q", q);
+    setCurrentQuestion(isAiQuestion(q) ? q.questionText : isDefaultSearchQuery(q) ? q.query ?? "" : q);
+
+    if (!isDefaultSearchQuery(q)) {
+      askQuestion(
+        isAiQuestion(q) ? q.questionText : q,
+        undefined,
+        isAiQuestion(q) ? (q.products?.map((p) => p.groupId) ?? []) : undefined,
+        isAiQuestion(q) && q.promptForAI !== "" ? q.promptForAI : undefined,
+      );
+    } else {
+      askQuestion(
+        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,
+        undefined,
+        q.imageUrl ?? "",
+      );
+    }
 
     const requestId =
       messages[messages.length - 1]?.queryId ??
@@ -46,7 +65,7 @@ export const SuggestedQuestions = ({
       user_id: fingerprint,
       location: window.location.href,
       metadata: {
-        followup_query: q,
+        followup_query: isAiQuestion(q) ? q.questionText : isDefaultSearchQuery(q) ? q.query ?? "" : q,
         component_props: props,
         ab_treatment: abTreatment,
       },
@@ -100,17 +119,17 @@ export const SuggestedQuestions = ({
               onClick={() => {
                 handleSuggestedQuestion(q);
               }}
-              key={isAiQuestion(q) ? q.questionText : 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 : q}
+              {isAiQuestion(q) ? q.questionText : isDefaultSearchQuery(q) ? q.query ?? "": q}
             </button>
           ))}
         </div>
       </div>
     </div>
   );
-};
+};

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

@@ -1,14 +1,14 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { cn } from "../../utils/styles";
-import { useModalState } from "../../utils/hooks/modal-context";
-import { SuggestedQueriesResponse } from "trieve-ts-sdk";
+import { useModalState, isDefaultSearchQuery } from "../../utils/hooks/modal-context";
+import { DefaultSearchQuery } from "trieve-ts-sdk";
 import { getSuggestedQueries } from "../../utils/trieve";
 
 export const SuggestedQueries = () => {
   const { props, query, setQuery, imageUrl, trieveSDK } = useModalState();
   const [isLoading, setIsLoading] = useState(false);
   const [suggestedQueries, setSuggestedQueries] = useState<
-    SuggestedQueriesResponse["queries"]
+    (DefaultSearchQuery | string)[]
   >([]);
 
   const getQueries = useCallback(
@@ -27,11 +27,25 @@ export const SuggestedQueries = () => {
     [query],
   );
 
+  const handleSendSuggestedQuery = (q: DefaultSearchQuery | string) => {
+    if (isDefaultSearchQuery(q)) {
+      setQuery(q.query ?? "");
+
+      if (q.imageUrl) {
+        setImageUrl(q.imageUrl);
+      }
+    } else {
+      setQuery(q);
+    }
+  };
+
   useEffect(() => {
     const defaultQueries =
-      props.defaultSearchQueries?.filter((q) => q !== "") ?? [];
+      props.defaultSearchQueries && props.defaultSearchQueries.length > 0 && isDefaultSearchQuery(props.defaultSearchQueries[0])
+        ? props.defaultSearchQueries
+        : props.defaultSearchQueries?.filter((q) => q !== "") ?? [];
 
-    if (defaultQueries.length) {
+    if (props.defaultSearchQueries?.length) {
       setSuggestedQueries(defaultQueries);
       return;
     }
@@ -64,8 +78,8 @@ export const SuggestedQueries = () => {
         <div className="suggested-query loading">Loading...</div>
       ) : (
         suggestedQueries.map((q) => {
-          q = q.replace(/^-|\*$/g, "");
-          q = q.trim();
+          let query = isDefaultSearchQuery(q)  ? q.query?.replace(/^-|\*$/g, "") : q;
+          query = query?.trim();
           return (
             <button
               onClick={() => setQuery(q)}

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

@@ -163,8 +163,8 @@ export type ModalProps = {
   allowRefreshSuggestedQueries?: boolean;
   followupQuestions?: boolean;
   numberOfSuggestions?: number;
-  defaultSearchQueries?: string[];
-  defaultAiQuestions?: string[] | AiQuestion[];
+  defaultSearchQueries?: DefaultSearchQuery[] | string[];
+  defaultAiQuestions?: AiQuestion[] | DefaultSearchQuery[] | string[];
   brandLogoImgSrcUrl?: string;
   brandName?: string;
   problemLink?: string;

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { getSuggestedQuestions } from "../trieve";
-import { useModalState } from "./modal-context";
+import { isDefaultSearchQuery, useModalState } from "./modal-context";
 import { useChatState } from "./chat-context";
 
 export const useFollowupQuestions = () => {
@@ -48,7 +48,7 @@ export const useFollowupQuestions = () => {
     setSuggestedQuestions((prev) => ({
       ...prev,
       [prevMessage.text]: queries.queries.map((q) => {
-        return q.replace(/^[\d.-]+\s*/, "").trim();
+        return isDefaultSearchQuery(q) ? q.query?.replace(/^[\d.-]+\s*/, "").trim() ?? "" : q;
       }),
     }));
     setIsLoadingSuggestedQueries(false);