@envive-ai/react-hooks 0.3.3 → 0.3.5

package/src/contexts/pageContext/pageContext.tsx

@@ -7,63 +7,117 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { UserEvent } from '@spiffy-ai/commerce-api-client';
-import { UrlResolverResponse, urlResolverAtom } from 'src/atoms/app/variant';
+import {
+  UrlResolverResponse,
+  pageUserEventAtom,
+  pageVariantInfoAtom,
+  urlResolverAtom,
+} from 'src/atoms/app/variant';
 import { useAtom } from 'jotai';
-
 import CommerceApiClient from 'src/application/commerce-api';
 import Logger from 'src/application/logging/logger';
-import { mapUrlResolverResponseToVariantInfo } from './mapping';
-import { PageDetails, PageVariantInfo } from './types';
+import { PageVisitCategory, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { VariantTypeEnum } from 'src/application/models';
+import { mapApiUserEventToUserEvent, mapUrlResolverResponseToVariantInfo } from './mapping';
+import { PageDetails } from './types';
 
-const PageContext = createContext<PageDetails | undefined>(undefined);
+const PageContext = createContext<
+  (PageDetails & { isLoading: boolean; isSupported: boolean }) | undefined
+>(undefined);
 
-export const PageProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+export const PageProvider: React.FC<{
+  children: ReactNode;
+  previewMode: boolean;
+}> = ({ children, previewMode = false }) => {
   const [pageUrl, setPageUrl] = useState<string | undefined>(undefined);
-  const [variantInfo, setVariantInfo] = useState<PageVariantInfo | undefined>(undefined);
   const [urlResolverResponse, setUrlResolverResponse] = useAtom(urlResolverAtom);
-  const [userEvent, setUserEvent] = useState<UserEvent | undefined>(undefined);
-
+  const [isLoading, setIsLoading] = useState(false);
+  const [variantInfo, setVariantInfo] = useAtom(pageVariantInfoAtom);
+  const [userEvent, setUserEvent] = useAtom(pageUserEventAtom);
+  const [isSupported, setIsSupported] = useState(false);
   useEffect(() => {
     // TODO: Add support for SPA's and other changes to the URL to ensure that the pageUrl is set correctly
     setPageUrl(window.location.href);
   }, []);
 
+  // Auto-initialize atoms for preview mode
+  useEffect(() => {
+    if (previewMode && !userEvent && !variantInfo) {
+      const url = typeof window !== 'undefined' ? window.location.href : '';
+      setUserEvent({
+        event_id: 'preview-user-event',
+        created_at: new Date().toISOString(),
+        category: UserEventCategory.PageVisit,
+        attributes: {
+          page_visit_category: PageVisitCategory.Other,
+          url,
+        },
+      } as any);
+
+      setVariantInfo({
+        variantType: VariantTypeEnum.PageVisit,
+        url,
+      });
+    }
+  }, [previewMode, userEvent, variantInfo, setUserEvent, setVariantInfo]);
+
   const setVariantFromUrlResolver = useCallback(
     (url: string, response: UrlResolverResponse) => {
       const newVariantInfo = mapUrlResolverResponseToVariantInfo(url, response);
-      const newUserEvent = response.user_event ?? undefined;
+      const newUserEvent = mapApiUserEventToUserEvent(response.user_event ?? undefined);
       setVariantInfo(newVariantInfo);
       setUserEvent(newUserEvent);
     },
-    [setVariantInfo],
+    [setVariantInfo, setUserEvent],
   );
 
   useEffect(() => {
     const resolvePageUrl = async () => {
+      setIsLoading(true);
       try {
         if (!pageUrl) {
+          setIsLoading(false);
           return;
         }
+
+        // If in preview mode or atoms are already set (e.g., by storybook), skip API call
+        if (previewMode || userEvent || variantInfo) {
+          setIsLoading(false);
+          return;
+        }
+
         const cleansedUrl = pageUrl.toLowerCase().trim();
         const response =
           urlResolverResponse[cleansedUrl] ??
           ((await CommerceApiClient.resolveUrl(cleansedUrl)) as UrlResolverResponse);
         setVariantFromUrlResolver(cleansedUrl, response);
+        setIsLoading(false);
+        setIsSupported(response.ready);
       } catch (e) {
+        setIsLoading(false);
         Logger.logError('Failed to resolve page URL', e, { pageUrl });
       }
     };
     resolvePageUrl();
-  }, [pageUrl, urlResolverResponse, setUrlResolverResponse, setVariantFromUrlResolver]);
+  }, [
+    pageUrl,
+    urlResolverResponse,
+    setUrlResolverResponse,
+    setVariantFromUrlResolver,
+    userEvent,
+    variantInfo,
+    previewMode,
+  ]);
 
   const value = useMemo(
     () => ({
       pageUrl,
       variantInfo,
       userEvent,
+      isLoading,
+      isSupported,
     }),
-    [pageUrl, userEvent, variantInfo],
+    [pageUrl, userEvent, variantInfo, isLoading, isSupported],
   );
 
   return <PageContext.Provider value={value}>{children}</PageContext.Provider>;

package/src/contexts/pageContext/types.ts

@@ -1,15 +1,18 @@
-import { UserEvent } from '@spiffy-ai/commerce-api-client';
-import { VariantTypeEnum } from 'src/application/models';
+import { UserEvent, VariantTypeEnum } from 'src/application/models';
 
 export type PDPPageVariantInfo = {
   variantType: VariantTypeEnum.Pdp;
   productId: string;
+  collections: string[];
+  numberOfReviews: number;
+  merchantTags: string[];
   url: string;
 };
 
 export type PLPPageVariantInfo = {
   variantType: VariantTypeEnum.Plp;
   plpId: string;
+  topCategory: string;
   url: string;
 };
 

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -9,6 +9,7 @@ import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
 
 export interface SalesAgentChatAPI {
   logPageVisit: ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => void;
+  logUserEvent: (event: UserEvent) => void;
   onSuggestionClicked: (suggestion: Suggestion) => void;
   onTypedMessageSubmitted: ({ query }: { query: string }) => void;
   onFormResponseSubmitted: (formResponse: any) => void; // TODO: Figure out the right type
@@ -34,6 +35,13 @@ export const useSalesAgentChatAPI = () => {
     },
     [queueUserEvent],
   );
+
+  const logUserEvent = useCallback(
+    (event: UserEvent) => {
+      queueUserEvent(event);
+    },
+    [queueUserEvent],
+  );
   const onSuggestionClicked = useCallback(
     (suggestion: Suggestion) => {
       const event: UserEvent = {
@@ -42,6 +50,7 @@ export const useSalesAgentChatAPI = () => {
         createdAt: new Date().toISOString(),
         attributes: {
           suggestionId: suggestion.id,
+          content: suggestion.content,
         },
       };
       queueUserEvent(event);
@@ -68,6 +77,7 @@ export const useSalesAgentChatAPI = () => {
 
   return {
     logPageVisit,
+    logUserEvent,
     onSuggestionClicked,
     onTypedMessageSubmitted,
     onFormResponseSubmitted,

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,
@@ -12,7 +19,7 @@ import { useSystemSettingsContext } from 'src/hooks/SystemSettingsContext';
 import { SalesAgentChatAPI, useSalesAgentChatAPI } from './chatAPI';
 import { useSalesAgentService } from './salesAgentService';
 
-interface SalesAgent extends SalesAgentChatAPI {
+export interface SalesAgent extends SalesAgentChatAPI {
   // Messages are the full list of all turns
   messages: Message[][];
   // Pending messages are messages that the user has clicked/typed but have not yet been sent to the backend.
@@ -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,22 +145,27 @@ 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 { logPageVisit, onSuggestionClicked, onTypedMessageSubmitted, onFormResponseSubmitted } =
-    useSalesAgentChatAPI();
+  const isResponseStreaming = useAtomValue(responseStreamingAtom);
+  const isPendingResponse = useAtomValue(pendingResponseAtom);
+  const isInitialized = useAtomValue(initializedAtom);
+  const {
+    logPageVisit,
+    logUserEvent,
+    onSuggestionClicked,
+    onTypedMessageSubmitted,
+    onFormResponseSubmitted,
+  } = useSalesAgentChatAPI();
 
   const salesAgent: SalesAgent = useMemo(() => {
     return {
       messages,
       suggestions,
       pendingMessages,
+      isInitialized,
       isResponseStreaming,
       isPendingResponse,
-      isInitialized,
       logPageVisit,
+      logUserEvent,
       onSuggestionClicked,
       onTypedMessageSubmitted,
       onFormResponseSubmitted,
@@ -116,10 +174,11 @@ export const useSalesAgent = (): SalesAgent => {
     messages,
     suggestions,
     pendingMessages,
+    isInitialized,
     isResponseStreaming,
     isPendingResponse,
-    isInitialized,
     logPageVisit,
+    logUserEvent,
     onSuggestionClicked,
     onTypedMessageSubmitted,
     onFormResponseSubmitted,

package/src/contexts/salesAgentContext/salesAgentService.ts

@@ -7,15 +7,23 @@ 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,
+  responseStreamingAtom,
+  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 +31,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 +40,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,
@@ -64,6 +112,7 @@ const processStreamingResponse = async (
   stream: AsyncIterable<Response>,
   messageInterceptor: { intercept: (response?: Response) => boolean | undefined },
   setMessages: (updater: (prev: Message[][]) => Message[][]) => void,
+  setResponseStreaming: (responseStreaming: boolean) => void,
 ): Promise<void> => {
   let lastMessage: Message | undefined;
 
@@ -76,6 +125,9 @@ const processStreamingResponse = async (
       if (!response) {
         throw new Error('No response from stream');
       }
+
+      setResponseStreaming(true);
+
       const message = messageFromResponse(response);
       if (!message) {
         throw new Error('Failed to transform API response to client message');
@@ -102,6 +154,9 @@ const processStreamingResponse = async (
 export const useSalesAgentService: () => SalesAgentService = () => {
   const setRequestFailure = useSetAtom(requestFailureAtom);
   const setMessages = useSetAtom(messagesAtom);
+  const setSuggestions = useSetAtom(suggestionsAtom);
+  const setPendingResponse = useSetAtom(pendingResponseAtom);
+  const setResponseStreaming = useSetAtom(responseStreamingAtom);
   const messageInterceptor = useMessageInterceptor();
 
   const featureFlagService = useFeatureFlagService();
@@ -139,13 +194,19 @@ 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);
 
       try {
         setRequestFailure(false);
 
-        await processStreamingResponse(stream, messageInterceptor, setMessages);
+        await processStreamingResponse(
+          stream,
+          messageInterceptor,
+          setMessages,
+          setResponseStreaming,
+        );
 
         // TODO: Add support for the Chrome Extension communication
         // Log successful next_responses call
@@ -176,9 +237,11 @@ export const useSalesAgentService: () => SalesAgentService = () => {
         //   },
         // });
 
-        // handleStreamingError(e, setRequestFailure, setMessages);
+        handleStreamingError(e, setRequestFailure, setMessages);
         throw e;
-        // } finally {
+      } finally {
+        setPendingResponse(false);
+        setResponseStreaming(false);
         // logPerfMetric(PerfMetricsEvents.FirstResponseCompleted);
       }
     },
@@ -187,11 +250,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>