feature: add not filter settings to shopify extension

Author: vid277

clients/trieve-shopify-extension/app/components/settings/LLMSettings.tsx

@@ -24,6 +24,7 @@ import {
   PriceToolCallOptions,
   RelevanceToolCallOptions,
   SearchToolCallOptions,
+  NotFilterToolCallOptions,
 } from "trieve-ts-sdk";
 
 export const defaultRelevanceToolCallOptions: RelevanceToolCallOptions = {
@@ -54,20 +55,28 @@ export const defaultSearchToolCallOptions: SearchToolCallOptions = {
     "Call this tool anytime it seems like we need to skip the search step. This tool tells our system that the user is asking about what they were previously shown.",
 };
 
+export const defaultNotFilterToolCallOptions: NotFilterToolCallOptions = {
+  userMessageTextPrefix: "Here is the user query:",
+  toolDescription:
+    "Set to true if the query is not interested in the products they were shown previously or would like to see something different. Ensure that this is only set to true when the user wants to see something different from the previously returned results or is not interested in those previously returned results.",
+};
+
 interface LLMSettingsProps {
   shopDataset: Dataset;
   existingPdpPrompt: string;
   existingRelevanceToolCallOptions: RelevanceToolCallOptions | null;
   existingPriceToolCallOptions: PriceToolCallOptions | null;
   existingSearchToolCallOptions: SearchToolCallOptions | null;
+  existingNotFilterToolCallOptions: NotFilterToolCallOptions | null;
 }
 
 export function LLMSettings({
   shopDataset,
   existingPdpPrompt,
   existingRelevanceToolCallOptions,
   existingPriceToolCallOptions,
-  existingSearchToolCallOptions
+  existingSearchToolCallOptions,
+  existingNotFilterToolCallOptions,
 }: LLMSettingsProps) {
   const shopify = useAppBridge();
   const submit = useSubmit();
@@ -92,6 +101,10 @@ export function LLMSettings({
     existingSearchToolCallOptions ?? defaultSearchToolCallOptions,
   );
 
+  const [notFilterToolCallOptions, setNotFilterToolCallOptions] = useState(
+    existingNotFilterToolCallOptions ?? defaultNotFilterToolCallOptions,
+  );
+
   const onLLMSettingsSave = async () => {
     submit(
       {
@@ -114,6 +127,7 @@ export function LLMSettings({
         relevance_tool_call_options: JSON.stringify(relevanceToolCallOptions),
         price_tool_call_options: JSON.stringify(priceToolCallOptions),
         search_tool_call_options: JSON.stringify(searchToolCallOptions),
+        not_filter_tool_call_options: JSON.stringify(notFilterToolCallOptions),
         dataset_id: shopDataset.id,
         type: "tool_call_options",
       },
@@ -518,9 +532,51 @@ export function LLMSettings({
                 <Button onClick={saveToolCallOptions}>Save</Button>
               </InlineStack>
             </Card>
+            <Card roundedAbove="sm">
+              <BlockStack gap="400">
+                <FormLayout>
+                  <Text as="h1" variant="headingMd">
+                    Not Filter Tool Configuration
+                  </Text>
+                  <BlockStack gap="400">
+                    <TextField
+                      label="Tool Description"
+                      helpText="The description of the tool"
+                      value={notFilterToolCallOptions.toolDescription ?? ""}
+                      onChange={(e) =>
+                        setNotFilterToolCallOptions({
+                          ...notFilterToolCallOptions,
+                          toolDescription: e,
+                        })
+                      }
+                      multiline={3}
+                      autoComplete="off"
+                    />
+                    <TextField
+                      label="User Message Text Prefix"
+                      helpText="The prefix to use before showing the the users message"
+                      value={
+                        notFilterToolCallOptions.userMessageTextPrefix ?? ""
+                      }
+                      onChange={(e) =>
+                        setNotFilterToolCallOptions({
+                          ...notFilterToolCallOptions,
+                          userMessageTextPrefix: e,
+                        })
+                      }
+                      multiline={3}
+                      autoComplete="off"
+                    />
+                  </BlockStack>
+                </FormLayout>
+              </BlockStack>
+              <InlineStack align="end" gap="200">
+                <Button onClick={saveToolCallOptions}>Save</Button>
+              </InlineStack>
+            </Card>
           </BlockStack>
         </InlineGrid>
       </BlockStack>
     </Box>
   );
-}
+}

clients/trieve-shopify-extension/app/routes/app._dashboard.settings.tsx

@@ -17,10 +17,11 @@ import {
   PriceToolCallOptions,
   type Dataset,
   SearchToolCallOptions,
+  NotFilterToolCallOptions,
 } from "trieve-ts-sdk";
 import { createWebPixel, isWebPixelInstalled } from "app/queries/webPixel";
 import { getAppMetafields, setAppMetafields } from "app/queries/metafield";
-import { useState, useCallback, ReactNode, useEffect } from "react";
+import { useState, useCallback, ReactNode } from "react";
 import { LLMSettings } from "app/components/settings/LLMSettings";
 import {
   PresetQuestion,
@@ -41,6 +42,7 @@ export const loader = async ({
   relevanceToolCallOptions: RelevanceToolCallOptions | null;
   searchToolCallOptions: SearchToolCallOptions | null;
   priceToolCallOptions: PriceToolCallOptions | null;
+  notFilterToolCallOptions: NotFilterToolCallOptions | null;
 }> => {
   const { session } = await authenticate.admin(request);
   const key = await validateTrieveAuth(request);
@@ -95,6 +97,11 @@ export const loader = async ({
     fetcher,
     "price_tool_call_options",
   );
+  const notFilterToolCallOptions =
+    await getAppMetafields<NotFilterToolCallOptions>(
+      fetcher,
+      "not_filter_tool_call_options",
+    );
 
   return {
     crawlSettings: crawlSettings?.crawlSettings,
@@ -105,6 +112,7 @@ export const loader = async ({
     relevanceToolCallOptions,
     searchToolCallOptions,
     priceToolCallOptions,
+    notFilterToolCallOptions,
   };
 };
 
@@ -213,6 +221,9 @@ export const action = async ({ request }: ActionFunctionArgs) => {
       );
       const priceToolCallOptions = formData.get("price_tool_call_options");
       const searchToolCallOptions = formData.get("search_tool_call_options");
+      const notFilterToolCallOptions = formData.get(
+        "not_filter_tool_call_options",
+      );
       await setAppMetafields(fetcher, [
         {
           key: "relevance_tool_call_options",
@@ -229,6 +240,11 @@ export const action = async ({ request }: ActionFunctionArgs) => {
           value: searchToolCallOptions as string,
           type: "json",
         },
+        {
+          key: "not_filter_tool_call_options",
+          value: notFilterToolCallOptions as string,
+          type: "json",
+        },
       ]);
       return { success: true };
     }
@@ -283,27 +299,14 @@ export default function Dataset() {
     relevanceToolCallOptions,
     searchToolCallOptions,
     priceToolCallOptions,
+    notFilterToolCallOptions,
   } = useLoaderData<typeof loader>();
   const [selectedTab, setSelectedTab] = useState(0);
 
-  const handleTabChange = useCallback((selectedTabIndex: number) => {
-    const params = new URLSearchParams(window.location.search);
-    params.set("tab", tabs[selectedTabIndex].id);
-    window.history.pushState(
-      {},
-      "",
-      `${window.location.pathname}?${params.toString()}`,
-    );
-    setSelectedTab(selectedTabIndex);
-  }, []);
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const tab = params.get("tab");
-    if (tab) {
-      setSelectedTab(tabs.findIndex((t) => t.id === tab));
-    }
-  }, []);
+  const handleTabChange = useCallback(
+    (selectedTabIndex: number) => setSelectedTab(selectedTabIndex),
+    [],
+  );
 
   const tabs = [
     {
@@ -362,14 +365,13 @@ export default function Dataset() {
         existingRelevanceToolCallOptions={relevanceToolCallOptions}
         existingSearchToolCallOptions={searchToolCallOptions}
         existingPriceToolCallOptions={priceToolCallOptions}
+        existingNotFilterToolCallOptions={notFilterToolCallOptions}
       />
     ),
     "preset-questions": <PresetQuestions initialQuestions={presetQuestions} />,
     "filter-settings": <FilterSettings />,
     "integrations-settings": <IntegrationsSettings />,
-    "extra-information": (
-      <PolicySettings shopDataset={shopDataset as Dataset} />
-    ),
+    "extra-information": <PolicySettings shopDataset={shopDataset as Dataset} />,
   };
 
   return (
@@ -381,4 +383,4 @@ export default function Dataset() {
       </Card>
     </Box>
   );
-}
+}