bugfix(shoify): cannot export from components, move export to utils

Author: skeptrunedev

clients/trieve-shopify-extension/app/auth.ts

@@ -6,11 +6,7 @@ import { getTrieveBaseUrlEnv } from "./env.server";
 import { buildAdminApiFetcherForServer } from "./loaders/serverLoader";
 import { AdminApiCaller } from "./loaders";
 import { AppInstallData } from "./routes/app.setup";
-import {
-  DEFAULT_RAG_PROMPT,
-  DEFAULT_SYSTEM_PROMPT,
-} from "./components/onboarding/SetPromptsOnboarding";
-import { k } from "node_modules/vite/dist/node/types.d-aGj9QkWt";
+import { DEFAULT_RAG_PROMPT, DEFAULT_SYSTEM_PROMPT } from "./utils/onboarding";
 
 export const validateTrieveAuth = async <S extends boolean = true>(
   request: LoaderFunctionArgs["request"],

clients/trieve-shopify-extension/app/components/onboarding/SetPromptsOnboarding.tsx

@@ -6,18 +6,12 @@ import {
 } from "@tanstack/react-query";
 import { useTrieve } from "app/context/trieveContext";
 import { shopDatasetQuery } from "app/queries/shopDataset";
-import { OnboardingBody } from "app/utils/onboarding";
+import { DEFAULT_RAG_PROMPT, DEFAULT_SYSTEM_PROMPT, OnboardingBody } from "app/utils/onboarding";
 import { FormEvent, useEffect, useMemo, useState } from "react";
 import { DatasetConfig } from "../DatasetSettings";
 import { withSuspense } from "app/utils/suspense";
 import { trackCustomerEvent } from "app/processors/shopifyTrackers";
 
-export const DEFAULT_SYSTEM_PROMPT =
-  "[[personality]]\nYou are a friendly, helpful, and knowledgeable ecommerce sales associate. Your communication style is warm, patient, and enthusiastic without being pushy. You're approachable and conversational while maintaining professionalism. You balance being personable with being efficient, understanding that customers value both connection and their time. You're solution-oriented and genuinely interested in helping customers find the right products for their needs.\n\n[[goal]]\nYour primary goal is to help customers find products that genuinely meet their needs while providing an exceptional shopping experience. You aim to:\n1. Understand customer requirements through thoughtful questions\n2. Provide relevant product recommendations based on customer preferences\n3. Offer detailed, accurate information about products\n4. Address customer concerns and objections respectfully\n5. Guide customers through the purchasing process\n6. Encourage sales without being pushy or manipulative\n7. Create a positive impression that builds long-term customer loyalty\n\n[[response structure]]\n1. Begin with a warm greeting and acknowledgment of the customer's query or concern\n2. Ask clarifying questions if needed to better understand their requirements\n3. Provide concise, relevant information that directly addresses their needs\n4. Include specific product recommendations when appropriate, with brief explanations of why they might be suitable\n5. Address any potential concerns proactively\n6. Close with a helpful next step or question that moves the conversation forward\n7. Keep responses conversational yet efficient, balancing thoroughness with respect for the customer's time.\n";
-
-export const DEFAULT_RAG_PROMPT =
-  "You may use the retrieved context to help you respond. When discussing products, prioritize information from the provided product data while using your general knowledge to create helpful, natural responses. If a customer asks about products or specifications not mentioned in the context, acknowledge the limitation and offer to check for more information rather than inventing details.";
-
 export const SetPromptsOnboarding: OnboardingBody = withSuspense(
   ({ broadcastCompletion, goToNextStep }) => {
     const { trieve, organization, trieveKey } = useTrieve();

clients/trieve-shopify-extension/app/queries/onboarding.ts

@@ -143,15 +143,14 @@ export const lastStepIdQuery = (fetcher: AdminApiCaller) => {
     queryKey: ["last_step_id"],
     queryFn: async () => {
       const result = await getMetafield(fetcher, ONBOARD_STEP_META_FIELD);
-      if (!result || result.error || !result.data) {
+      if (
+        !result ||
+        result.error ||
+        !result.data ||
+        !onboardingSteps.some((s) => s.id === result.data)
+      ) {
         return onboardingSteps[0].id;
       }
-      if (!onboardingSteps.some((s) => s.id === result.data)) {
-        return onboardingSteps[0].id;
-      }
-      if (result.data === "null") {
-        return null;
-      }
       return result.data;
     },
   };

clients/trieve-shopify-extension/app/utils/onboarding.tsx

@@ -15,6 +15,12 @@ import {
 } from "app/queries/onboarding";
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
+export const DEFAULT_SYSTEM_PROMPT =
+  "[[personality]]\nYou are a friendly, helpful, and knowledgeable ecommerce sales associate. Your communication style is warm, patient, and enthusiastic without being pushy. You're approachable and conversational while maintaining professionalism. You balance being personable with being efficient, understanding that customers value both connection and their time. You're solution-oriented and genuinely interested in helping customers find the right products for their needs.\n\n[[goal]]\nYour primary goal is to help customers find products that genuinely meet their needs while providing an exceptional shopping experience. You aim to:\n1. Understand customer requirements through thoughtful questions\n2. Provide relevant product recommendations based on customer preferences\n3. Offer detailed, accurate information about products\n4. Address customer concerns and objections respectfully\n5. Guide customers through the purchasing process\n6. Encourage sales without being pushy or manipulative\n7. Create a positive impression that builds long-term customer loyalty\n\n[[response structure]]\n1. Begin with a warm greeting and acknowledgment of the customer's query or concern\n2. Ask clarifying questions if needed to better understand their requirements\n3. Provide concise, relevant information that directly addresses their needs\n4. Include specific product recommendations when appropriate, with brief explanations of why they might be suitable\n5. Address any potential concerns proactively\n6. Close with a helpful next step or question that moves the conversation forward\n7. Keep responses conversational yet efficient, balancing thoroughness with respect for the customer's time.\n";
+
+export const DEFAULT_RAG_PROMPT =
+  "You may use the retrieved context to help you respond. When discussing products, prioritize information from the provided product data while using your general knowledge to create helpful, natural responses. If a customer asks about products or specifications not mentioned in the context, acknowledge the limitation and offer to check for more information rather than inventing details.";
+
 export type OnboardingBody = FC<{
   goToNextStep: () => void;
   goToPreviousStep: () => void;
@@ -34,7 +40,7 @@ type OnboardingStep = {
 
 export const onboardingSteps: OnboardingStep[] = [
   {
-    id: "set-chat-messages",
+    id: "set-ai-prompts",
     title: "Customize AI Prompts",
     defaultComplete: false,
     body: SetPromptsOnboarding,
@@ -50,7 +56,6 @@ export const onboardingSteps: OnboardingStep[] = [
     },
   },
   {
-    // Name in a way that changing the step + adding more will not require id rename
     id: "after-welcome",
     title: "Add the widgets to your site",
     body: AddComponentOnboarding,
@@ -81,7 +86,7 @@ export const useOnboarding = () => {
   >(
     onboardingSteps.reduce(
       (acc, step) => {
-        acc[step.id] = step.defaultComplete || false;
+        acc[step.id] = step.defaultComplete ?? false;
         return acc;
       },
       {} as Record<string, boolean>,