@envive-ai/react-hooks 0.3.3 → 0.3.4

package/src/contexts/salesAgentContext/salesAgentContext.tsx

@@ -1,8 +1,15 @@
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { ReactNode, createContext, useCallback, useEffect, useMemo } from 'react';
-import { Message } from 'src/application/models/message';
-import { Suggestion, UserEvent } from 'src/application/models';
-import { messagesAtom, suggestionsAtom } from 'src/atoms/chat/chatState';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { Message, MessageRole, MessageType } from 'src/application/models/message';
+import { NextMessageRequest, Suggestion, UserEvent } from 'src/application/models';
+import {
+  initializedAtom,
+  messagesAtom,
+  pendingResponseAtom,
+  responseStreamingAtom,
+  suggestionsAtom,
+} from 'src/atoms/chat/chatState';
 import {
   processUserEventAtom,
   userEventQueueAtom,
@@ -33,43 +40,33 @@ export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children
   const userEvents = useAtomValue(userEventQueueAtom);
   const userQueueEventCount = useAtomValue(userQueueEventCountAtom);
   const markUserEventsProcessed = useSetAtom(processUserEventAtom);
+  const [isInitialized, setIsInitialized] = useAtom(initializedAtom);
   const settingsContext = useSystemSettingsContext();
+  const setMessages = useSetAtom(messagesAtom);
 
-  const { getStreamingResponses, createResponsePayload } = useSalesAgentService();
+  const { getStreamingResponses, createResponsePayload, getSuggestions, hydrateMessages } =
+    useSalesAgentService();
 
   // TODO: Ensure that amplitude events are being emitted
 
   // TODO: Add support for the streaming responses to function
 
   // TODO: Add support for the hydration of the messages from the backend on initialization
-  const sendMessagesToBackend = useCallback(async () => {
-    // Fast exit if there are no pending messages
-    if (userEvents.length === 0) {
-      return;
-    }
-    // TODO: Support sending multiple messages to the backend in one request
-    const [pendingMessage] = userEvents.slice(0, userQueueEventCount);
-    try {
-      const requestPayload = createResponsePayload({
-        userEvents: [pendingMessage],
-        generationParams: settingsContext.generationParams,
-      });
-      const response = await getStreamingResponses(requestPayload);
+  const sendMessagesToBackend = useCallback(
+    async (requestPayload: NextMessageRequest) => {
+      try {
+        const response = await getStreamingResponses(requestPayload);
+        setIsInitialized(true);
 
-      console.log('response', response);
-      // Remove the pending message from the user events
-      markUserEventsProcessed([pendingMessage.eventId]);
-    } catch (error) {
-      console.error('error sending message');
-    }
-  }, [
-    userEvents,
-    userQueueEventCount,
-    createResponsePayload,
-    settingsContext.generationParams,
-    getStreamingResponses,
-    markUserEventsProcessed,
-  ]);
+        console.log('response', response);
+        // Remove the pending message from the user events
+        requestPayload.userEvents?.map(userEvent => markUserEventsProcessed([userEvent.eventId]));
+      } catch (error) {
+        console.error('error sending message');
+      }
+    },
+    [getStreamingResponses, setIsInitialized, markUserEventsProcessed],
+  );
 
   console.log('userQueueEventCount', userQueueEventCount);
   console.log('userEvents', userEvents);
@@ -78,12 +75,68 @@ export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children
   // It will be triggered when there are pending messages to be sent to the backend
   // It will be responsible for sending the messages to the backend and receiving the responses
   useEffect(() => {
+    console.log('SalesAgentProvider useEffect', userQueueEventCount, isInitialized, userEvents);
     if (userQueueEventCount > 0) {
-      sendMessagesToBackend();
+      const payloadEvents = userEvents.slice(0, userQueueEventCount);
+
+      payloadEvents.forEach(userEvent => {
+        if (userEvent && userEvent.category === UserEventCategory.QueryTyped) {
+          const newMessage: Message = {
+            id: userEvent.eventId,
+            role: MessageRole.User,
+            type: MessageType.QueryTyped,
+            createdAt: userEvent.createdAt,
+            metadata: {
+              content: userEvent.attributes.query,
+            },
+          };
+          setMessages(current => [...current, [newMessage]]);
+        }
+        if (userEvent && userEvent.category === UserEventCategory.SuggestionClicked) {
+          const newMessage: Message = {
+            id: userEvent.eventId,
+            role: MessageRole.User,
+            type: MessageType.QueryTyped,
+            createdAt: userEvent.createdAt,
+            metadata: {
+              content: userEvent.attributes.content ?? '',
+            },
+          };
+          setMessages(current => [...current, [newMessage]]);
+        }
+      });
+
+      sendMessagesToBackend(
+        createResponsePayload({
+          userEvents: payloadEvents,
+          generationParams: settingsContext.generationParams,
+        }),
+      );
+    } else if (isInitialized) {
+      getSuggestions(
+        createResponsePayload({
+          userEvents: [],
+          generationParams: settingsContext.generationParams,
+        }),
+      );
+    }
+  }, [
+    createResponsePayload,
+    getSuggestions,
+    isInitialized,
+    setMessages,
+    sendMessagesToBackend,
+    settingsContext.generationParams,
+    userEvents,
+    userQueueEventCount,
+  ]);
+
+  useEffect(() => {
+    if (isInitialized) {
+      // Rehydrate any messages from the backend
+      hydrateMessages();
     }
-    // TODO: Add a suggestion retrieval here (don't get suggestions unless the event queue is empty)
-    console.log('SalesAgentProvider useEffect');
-  }, [sendMessagesToBackend, userQueueEventCount]);
+  }, [isInitialized, hydrateMessages]);
 
   return <SalesAgentContext.Provider value={undefined}>{children}</SalesAgentContext.Provider>;
 };
@@ -92,10 +145,9 @@ export const useSalesAgent = (): SalesAgent => {
   const messages = useAtomValue(messagesAtom);
   const suggestions = useAtomValue(suggestionsAtom);
   const pendingMessages = useAtomValue(userEventQueueAtom);
-  const isResponseStreaming = false; // useAtomValue(isResponseStreamingAtom);
-  const isPendingResponse = false; // useAtomValue(isPendingResponseAtom);
-  const isInitialized = false; // useAtomValue(isInitializedAtom);
-
+  const isResponseStreaming = useAtomValue(responseStreamingAtom);
+  const isPendingResponse = useAtomValue(pendingResponseAtom);
+  const isInitialized = useAtomValue(initializedAtom);
   const { logPageVisit, onSuggestionClicked, onTypedMessageSubmitted, onFormResponseSubmitted } =
     useSalesAgentChatAPI();
 
@@ -104,9 +156,9 @@ export const useSalesAgent = (): SalesAgent => {
       messages,
       suggestions,
       pendingMessages,
+      isInitialized,
       isResponseStreaming,
       isPendingResponse,
-      isInitialized,
       logPageVisit,
       onSuggestionClicked,
       onTypedMessageSubmitted,
@@ -116,9 +168,9 @@ export const useSalesAgent = (): SalesAgent => {
     messages,
     suggestions,
     pendingMessages,
+    isInitialized,
     isResponseStreaming,
     isPendingResponse,
-    isInitialized,
     logPageVisit,
     onSuggestionClicked,
     onTypedMessageSubmitted,

package/src/contexts/salesAgentContext/salesAgentService.ts

@@ -7,15 +7,22 @@ import Logger from 'src/application/logging/logger';
 import {
   GenerationParams,
   Message,
+  MessageRole,
   MessageType,
   NextMessageRequest,
   Response,
   UserEvent,
 } from 'src/application/models';
 import { messageFromResponse } from 'src/application/utils';
-import { messagesAtom, requestFailureAtom } from 'src/atoms/chat/chatState';
+import {
+  messagesAtom,
+  pendingResponseAtom,
+  requestFailureAtom,
+  suggestionsAtom,
+} from 'src/atoms/chat/chatState';
 import { useMessageInterceptor } from 'src/interceptors/useMessageInterceptor';
 import { useFeatureFlagService } from '../featureFlagServiceContext';
+import { StatusCodeError } from './statusCodeError';
 
 interface SalesAgentService {
   createResponsePayload: (payload: {
@@ -23,6 +30,8 @@ interface SalesAgentService {
     generationParams?: GenerationParams;
   }) => NextMessageRequest;
   getStreamingResponses: (payload: NextMessageRequest) => Promise<void>;
+  getSuggestions: (payload: NextMessageRequest) => Promise<void>;
+  hydrateMessages: () => Promise<void>;
 }
 
 export const getQueryParam = (key: string): string | null => {
@@ -30,6 +39,44 @@ export const getQueryParam = (key: string): string | null => {
   return urlObj.searchParams.get(key);
 };
 
+const getErrorMessage = (_error: unknown): string => {
+  if (_error instanceof StatusCodeError) {
+    if (_error.statusCode === 423) {
+      return 'Due to violation of terms and services, this session has been terminated.';
+    }
+    // Keeping the 429 error messages as the generic error message for now.
+    // if (_error.statusCode === 429) {
+    //   return "I'm sorry! The system is busy right now. Please try again in a few minutes.";
+    // }
+  }
+
+  return "I'm sorry! I'm having trouble right now. Please refresh the page or try again in a moment.";
+};
+
+const handleStreamingError = (
+  _error: unknown,
+  setRequestFailure: (failed: boolean) => void,
+  setMessages: (updater: (prev: Message[][]) => Message[][]) => void,
+) => {
+  setRequestFailure(true);
+
+  const errorMessage = getErrorMessage(_error);
+  setMessages(prev => [
+    ...prev,
+    [
+      {
+        id: uuid(),
+        role: MessageRole.Assistant,
+        type: MessageType.Text,
+        createdAt: new Date().toISOString(),
+        metadata: {
+          content: errorMessage,
+        },
+      },
+    ],
+  ]);
+};
+
 const updateMessageState = (
   message: Message,
   lastMessage: Message,
@@ -102,6 +149,8 @@ const processStreamingResponse = async (
 export const useSalesAgentService: () => SalesAgentService = () => {
   const setRequestFailure = useSetAtom(requestFailureAtom);
   const setMessages = useSetAtom(messagesAtom);
+  const setSuggestions = useSetAtom(suggestionsAtom);
+  const setPendingResponse = useSetAtom(pendingResponseAtom);
   const messageInterceptor = useMessageInterceptor();
 
   const featureFlagService = useFeatureFlagService();
@@ -139,6 +188,7 @@ export const useSalesAgentService: () => SalesAgentService = () => {
     async (payload: NextMessageRequest): Promise<void> => {
       // logPerfMetric(PerfMetricsEvents.FirstResponseStarted);
       // const startTime = Date.now();
+      setPendingResponse(true);
       console.log('getStreamingResponses payload', JSON.stringify(payload, null, 2));
       const stream = CommerceApiClient.getNextResponseStreaming(payload);
 
@@ -176,9 +226,10 @@ export const useSalesAgentService: () => SalesAgentService = () => {
         //   },
         // });
 
-        // handleStreamingError(e, setRequestFailure, setMessages);
+        handleStreamingError(e, setRequestFailure, setMessages);
         throw e;
-        // } finally {
+      } finally {
+        setPendingResponse(false);
         // logPerfMetric(PerfMetricsEvents.FirstResponseCompleted);
       }
     },
@@ -187,11 +238,35 @@ export const useSalesAgentService: () => SalesAgentService = () => {
       setRequestFailure,
       messageInterceptor,
       setMessages,
+      setPendingResponse,
     ],
   );
 
+  const getSuggestions = useCallback(
+    async (payload: NextMessageRequest): Promise<void> => {
+      const newSuggestions = await CommerceApiClient.getNextSuggestions(payload);
+      setSuggestions(newSuggestions);
+    },
+    [setSuggestions],
+  );
+
+  const hydrateMessages = useCallback(async () => {
+    const { orgId, chatId, userId } = context;
+    console.log('hydrateMessages', orgId, chatId, userId, context);
+    const { messages: existingMessages, userEvents } = await CommerceApiClient.getResponses(
+      orgId,
+      chatId,
+      userId,
+    );
+    console.log('existingMessages', existingMessages);
+    console.log('userEvents', userEvents);
+    setMessages([...existingMessages]);
+  }, [context, setMessages]);
+
   return {
     createResponsePayload,
     getStreamingResponses,
+    getSuggestions,
+    hydrateMessages,
   };
 };

package/src/contexts/salesAgentContext/statusCodeError.ts

@@ -0,0 +1,10 @@
+import { ResponseError } from '@spiffy-ai/commerce-api-client/dist/runtime';
+
+export class StatusCodeError extends ResponseError {
+  public readonly statusCode: number;
+
+  constructor(message: string, statusCode: number, response: Response) {
+    super(response, message);
+    this.statusCode = statusCode;
+  }
+}

package/src/contexts/searchContext/__tests__/searchContext.test.tsx

@@ -8,7 +8,10 @@ import {
 import { LocalStorageProvider } from 'src/contexts/localStorageContext/localStorageContext';
 import { GraphQLProvider } from 'src/contexts/graphqlContext/graphqlContext';
 import { UserIdentityProvider } from 'src/contexts/userIdentityContext/userIdentityContext';
-import { FeatureFlagServiceProvider } from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
+import {
+  FeatureFlagService,
+  FeatureFlagServiceProvider,
+} from 'src/contexts/featureFlagServiceContext/featureFlagServiceContext';
 import { baseUrlAtom } from 'src/atoms/envive/enviveConfig';
 import {
   clearSearchServiceFunction,
@@ -56,6 +59,9 @@ vi.mock('@spiffy-ai/commerce-api-client', () => {
   };
 });
 
+// FeatureFlagService
+const testFeatureFlagService = new FeatureFlagService([]);
+
 // Mock useAppDetails
 vi.mock('src/hooks/AppDetails/useAppDetails', () => ({
   useAppDetails: vi.fn(),
@@ -192,7 +198,7 @@ const TestWrapper: React.FC<{
         <LocalStorageProvider>
           <GraphQLProvider>
             <UserIdentityProvider>
-              <FeatureFlagServiceProvider featureGates={[]}>
+              <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
                 <SearchProvider>{children}</SearchProvider>
               </FeatureFlagServiceProvider>
             </UserIdentityProvider>

package/src/contexts/types.ts

@@ -13,6 +13,7 @@ import { ChatState } from 'src/types/custservice-types';
 import { SuggestionBarLocationForMetrics } from 'src/types/suggestionBarV2-types';
 import { TestProps } from 'src/types/test-types';
 import { OrgConfigFeatureGate } from 'src/application/models/api/orgConfigResults';
+import { WidgetConfigV3 } from './typesV3';
 
 type ShowFloatingButtonOptions =
   | 'always'
@@ -389,7 +390,10 @@ interface SearchConfig {
   recommendedProductsHeading?: string;
 }
 
+type ConfigVersion = 'v3' | 'deprecated' | undefined;
+
 type OrgUIConfig = {
+  version?: ConfigVersion;
   shortName: string;
   id?: string;
   floatingEntrypointConfig?: FloatingEntryPointConfig;
@@ -475,8 +479,6 @@ type WrappingElement = {
 };
 
 enum PageVariantTestType {
-  ShopifyPLP = 'ShopifyPLP',
-  ShopifyPDP = 'ShopifyPDP',
   PageCategory = 'PageCategory',
   CatalogCategory = 'CatalogCategory',
   TopCatalogCategory = 'TopCatalogCategory',
@@ -493,6 +495,7 @@ enum PageVariantTestType {
   isProductComparison = 'isProductComparison',
   Fallback = 'Fallback',
   UrlResolver = 'UrlResolver',
+  isScreenWidthSmaller = 'isScreenWidthSmaller',
   Null = 'null',
 }
 
@@ -522,10 +525,6 @@ interface HasMerchantTagTest extends BasePageVariantTest<PageVariantTestType.Has
   merchantTags: string[];
 }
 
-interface ShopifyPLPURLTest extends BasePageVariantTest<PageVariantTestType.ShopifyPLP> {}
-
-interface ShopifyPDPURLTest extends BasePageVariantTest<PageVariantTestType.ShopifyPDP> {}
-
 interface PageCategoryTest extends BasePageVariantTest<PageVariantTestType.PageCategory> {
   extractor: CategoryExtractor;
 }
@@ -560,10 +559,12 @@ interface PageFallbackTest extends BasePageVariantTest<PageVariantTestType.Fallb
 
 interface UrlResolverTest extends BasePageVariantTest<PageVariantTestType.UrlResolver> {}
 
+interface IsScreenWidthSmallerTest extends BasePageVariantTest<PageVariantTestType.isScreenWidthSmaller> {
+  breakpoint: number;
+}
+
 export type PageVariantTest =
   | PageCategoryTest
-  | ShopifyPLPURLTest
-  | ShopifyPDPURLTest
   | CatalogCategoryTest
   | TopCatalogCategory
   | HasReviewsTest
@@ -578,7 +579,8 @@ export type PageVariantTest =
   | IsLoadingTest
   | IsProductComparison
   | PageFallbackTest
-  | UrlResolverTest;
+  | UrlResolverTest
+  | IsScreenWidthSmallerTest;
 
 /**
  * Configuration for the social proof embedded widget
@@ -660,15 +662,6 @@ enum WidgetType {
   NoOp = 'NoOp',
 }
 
-export enum WidgetTypeV3 {
-  SuggestionBarV3 = 'SuggestionBarV3',
-  ChatPreviewV3 = 'ChatPreviewV3',
-  SocialProofV3 = 'SocialProofV3',
-  ImagePromptCardV3 = 'ImagePromptCardV3',
-  ImageBannerV3 = 'ImageBannerV3',
-  SingleImagePromptV3 = 'SingleImagePromptV3',
-}
-
 type WidgetConfig =
   | ChatPreviewWidgetConfig
   | SocialProofV2WidgetConfig
@@ -911,7 +904,7 @@ export type OrgPageConfig = {
   // pageVariants is a list of page variants that we support.
   pageVariants: PageVariantConfig[];
   // widgetConfigs is a named set of widget configs
-  widgetConfigs: Record<string, WidgetConfig>;
+  widgetConfigs: Record<string, WidgetConfigV3>;
   mountingConfigs: Record<string, WidgetMountingConfig>;
 };
 
@@ -929,6 +922,7 @@ export interface EnviveConfig {
   contextSource?: string;
   orgLevelApiKey?: string;
   orgShortName?: string;
+  orgId?: string;
   identifyingPrefix?: string;
   featureOverrides?: Record<string, boolean>;
   variantUrlOverride?: string;
@@ -963,6 +957,8 @@ export type {
   ImagePromptWidgetConfig,
   InsertionPoint,
   MultiImageConfig,
+  MerchantVariantSettings,
+  SearchConfig,
   OrgUIConfig,
   PageCardConfig,
   PageCardVariant,