@envive-ai/react-hooks 0.3.0 → 0.3.2

package/src/contexts/pageContext/pageContext.tsx

@@ -0,0 +1,78 @@
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { UserEvent } from '@spiffy-ai/commerce-api-client';
+import { UrlResolverResponse, 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';
+
+const PageContext = createContext<PageDetails | undefined>(undefined);
+
+export const PageProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  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);
+
+  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);
+  }, []);
+
+  const setVariantFromUrlResolver = useCallback(
+    (url: string, response: UrlResolverResponse) => {
+      const newVariantInfo = mapUrlResolverResponseToVariantInfo(url, response);
+      const newUserEvent = response.user_event ?? undefined;
+      setVariantInfo(newVariantInfo);
+      setUserEvent(newUserEvent);
+    },
+    [setVariantInfo],
+  );
+
+  useEffect(() => {
+    const resolvePageUrl = async () => {
+      try {
+        if (!pageUrl) {
+          return;
+        }
+        const cleansedUrl = pageUrl.toLowerCase().trim();
+        const response =
+          urlResolverResponse[cleansedUrl] ??
+          ((await CommerceApiClient.resolveUrl(cleansedUrl)) as UrlResolverResponse);
+        setVariantFromUrlResolver(cleansedUrl, response);
+      } catch (e) {
+        Logger.logError('Failed to resolve page URL', e, { pageUrl });
+      }
+    };
+    resolvePageUrl();
+  }, [pageUrl, urlResolverResponse, setUrlResolverResponse, setVariantFromUrlResolver]);
+
+  const value = useMemo(
+    () => ({
+      pageUrl,
+      variantInfo,
+      userEvent,
+    }),
+    [pageUrl, userEvent, variantInfo],
+  );
+
+  return <PageContext.Provider value={value}>{children}</PageContext.Provider>;
+};
+
+export const usePage = () => {
+  const context = useContext(PageContext);
+  if (!context) {
+    throw new Error('usePage must be used within a PageProvider');
+  }
+  return context;
+};

package/src/contexts/pageContext/types.ts

@@ -0,0 +1,27 @@
+import { UserEvent } from '@spiffy-ai/commerce-api-client';
+import { VariantTypeEnum } from 'src/application/models';
+
+export type PDPPageVariantInfo = {
+  variantType: VariantTypeEnum.Pdp;
+  productId: string;
+  url: string;
+};
+
+export type PLPPageVariantInfo = {
+  variantType: VariantTypeEnum.Plp;
+  plpId: string;
+  url: string;
+};
+
+export type VisitPageVariantInfo = {
+  variantType: VariantTypeEnum.PageVisit;
+  url: string;
+};
+
+export type PageVariantInfo = PDPPageVariantInfo | PLPPageVariantInfo | VisitPageVariantInfo;
+
+export interface PageDetails {
+  pageUrl: string | undefined;
+  variantInfo: PageVariantInfo | undefined;
+  userEvent: UserEvent | undefined;
+}

package/src/contexts/salesAgentContext/chatAPI.ts

@@ -0,0 +1,75 @@
+// This component will interact with the backend API to get the responses from the sales agent.
+
+import { PageVisitCategory, UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { Suggestion, UserEvent } from 'src/application/models';
+import { useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+import { v4 as uuid } from 'uuid';
+import { queueUserEventAtom } from 'src/atoms/chat/messageQueue';
+
+export interface SalesAgentChatAPI {
+  logPageVisit: ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => void;
+  onSuggestionClicked: (suggestion: Suggestion) => void;
+  onTypedMessageSubmitted: ({ query }: { query: string }) => void;
+  onFormResponseSubmitted: (formResponse: any) => void; // TODO: Figure out the right type
+}
+
+export const useSalesAgentChatAPI = () => {
+  // TODO: Each of these functions will trigger both the necessary amplitude events and initiate the
+  // necessary actions to trigger the backend API
+  const queueUserEvent = useSetAtom(queueUserEventAtom);
+
+  const logPageVisit = useCallback(
+    ({ pageVisitCategory }: { pageVisitCategory: PageVisitCategory }) => {
+      const event: UserEvent = {
+        eventId: uuid(),
+        category: UserEventCategory.PageVisit,
+        createdAt: new Date().toISOString(),
+        attributes: {
+          url: window.location.href,
+          pageVisitCategory,
+        },
+      };
+      queueUserEvent(event);
+    },
+    [queueUserEvent],
+  );
+  const onSuggestionClicked = useCallback(
+    (suggestion: Suggestion) => {
+      const event: UserEvent = {
+        eventId: uuid(),
+        category: UserEventCategory.SuggestionClicked,
+        createdAt: new Date().toISOString(),
+        attributes: {
+          suggestionId: suggestion.id,
+        },
+      };
+      queueUserEvent(event);
+    },
+    [queueUserEvent],
+  );
+  const onTypedMessageSubmitted = useCallback(
+    ({ query }: { query: string }) => {
+      const event: UserEvent = {
+        eventId: uuid(),
+        category: UserEventCategory.QueryTyped,
+        createdAt: new Date().toISOString(),
+        attributes: {
+          query,
+        },
+      };
+      queueUserEvent(event);
+    },
+    [queueUserEvent],
+  );
+  const onFormResponseSubmitted = useCallback(() => {
+    // TODO: Implement the form response submitted
+  }, []);
+
+  return {
+    logPageVisit,
+    onSuggestionClicked,
+    onTypedMessageSubmitted,
+    onFormResponseSubmitted,
+  };
+};

package/src/contexts/salesAgentContext/index.ts

@@ -0,0 +1,3 @@
+export * from './salesAgentContext';
+export * from './chatAPI';
+export { PageVisitCategory, SuggestionCategory } from '@spiffy-ai/commerce-api-client';

package/src/contexts/salesAgentContext/salesAgentContext.tsx

@@ -0,0 +1,128 @@
+import { 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 {
+  processUserEventAtom,
+  userEventQueueAtom,
+  userQueueEventCountAtom,
+} from 'src/atoms/chat/messageQueue';
+import { useSystemSettingsContext } from 'src/hooks/SystemSettingsContext';
+import { SalesAgentChatAPI, useSalesAgentChatAPI } from './chatAPI';
+import { useSalesAgentService } from './salesAgentService';
+
+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.
+  pendingMessages: UserEvent[];
+  // Suggestions are the list of suggestions that the user can click on in response to the most recent message from the backend
+  suggestions: Suggestion[];
+  // True while the response is streaming from the backend
+  isResponseStreaming: boolean;
+  // True while the response is pending from the backend
+  isPendingResponse: boolean;
+  // True when the sales agent is initialized
+  isInitialized: boolean;
+}
+
+const SalesAgentContext = createContext<SalesAgent | undefined>(undefined);
+
+export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const userEvents = useAtomValue(userEventQueueAtom);
+  const userQueueEventCount = useAtomValue(userQueueEventCountAtom);
+  const markUserEventsProcessed = useSetAtom(processUserEventAtom);
+  const settingsContext = useSystemSettingsContext();
+
+  const { getStreamingResponses, createResponsePayload } = 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);
+
+      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('userQueueEventCount', userQueueEventCount);
+  console.log('userEvents', userEvents);
+
+  // This is the primary event loop for communicating with the backend API
+  // 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(() => {
+    if (userQueueEventCount > 0) {
+      sendMessagesToBackend();
+    }
+    // TODO: Add a suggestion retrieval here (don't get suggestions unless the event queue is empty)
+    console.log('SalesAgentProvider useEffect');
+  }, [sendMessagesToBackend, userQueueEventCount]);
+
+  return <SalesAgentContext.Provider value={undefined}>{children}</SalesAgentContext.Provider>;
+};
+
+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 salesAgent: SalesAgent = useMemo(() => {
+    return {
+      messages,
+      suggestions,
+      pendingMessages,
+      isResponseStreaming,
+      isPendingResponse,
+      isInitialized,
+      logPageVisit,
+      onSuggestionClicked,
+      onTypedMessageSubmitted,
+      onFormResponseSubmitted,
+    };
+  }, [
+    messages,
+    suggestions,
+    pendingMessages,
+    isResponseStreaming,
+    isPendingResponse,
+    isInitialized,
+    logPageVisit,
+    onSuggestionClicked,
+    onTypedMessageSubmitted,
+    onFormResponseSubmitted,
+  ]);
+  return salesAgent;
+};

package/src/contexts/salesAgentContext/salesAgentService.ts

@@ -0,0 +1,197 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+import { v4 as uuid } from 'uuid';
+import CommerceApiClient from 'src/application/commerce-api';
+import { appDetailsAtom } from 'src/atoms/app';
+import Logger from 'src/application/logging/logger';
+import {
+  GenerationParams,
+  Message,
+  MessageType,
+  NextMessageRequest,
+  Response,
+  UserEvent,
+} from 'src/application/models';
+import { messageFromResponse } from 'src/application/utils';
+import { messagesAtom, requestFailureAtom } from 'src/atoms/chat/chatState';
+import { useMessageInterceptor } from 'src/interceptors/useMessageInterceptor';
+import { useFeatureFlagService } from '../featureFlagServiceContext';
+
+interface SalesAgentService {
+  createResponsePayload: (payload: {
+    userEvents: UserEvent[];
+    generationParams?: GenerationParams;
+  }) => NextMessageRequest;
+  getStreamingResponses: (payload: NextMessageRequest) => Promise<void>;
+}
+
+export const getQueryParam = (key: string): string | null => {
+  const urlObj = new URL(window.location.href);
+  return urlObj.searchParams.get(key);
+};
+
+const updateMessageState = (
+  message: Message,
+  lastMessage: Message,
+  setMessages: (updater: (prev: Message[][]) => Message[][]) => void,
+): Message => {
+  if (lastMessage == null) {
+    setMessages(prev => [...prev, [message]]);
+    return message;
+  }
+  if (lastMessage.type === MessageType.Text && message.type === MessageType.Text) {
+    const newMessage = {
+      ...lastMessage,
+      metadata: {
+        ...lastMessage.metadata,
+        content: lastMessage.metadata.content + message.metadata.content,
+      },
+    };
+    setMessages(prev => {
+      const lastTurn = prev[prev.length - 1];
+      return [
+        ...prev.slice(0, prev.length - 1),
+        [...lastTurn.slice(0, lastTurn.length - 1), newMessage],
+      ];
+    });
+    return newMessage;
+  }
+  setMessages(prev => [...prev.slice(0, prev.length - 1), [...prev[prev.length - 1], message]]);
+  return message;
+};
+
+const processStreamingResponse = async (
+  stream: AsyncIterable<Response>,
+  messageInterceptor: { intercept: (response?: Response) => boolean | undefined },
+  setMessages: (updater: (prev: Message[][]) => Message[][]) => void,
+): Promise<void> => {
+  let lastMessage: Message | undefined;
+
+  for await (const response of stream) {
+    try {
+      if (messageInterceptor.intercept(response)) {
+        return;
+      }
+
+      if (!response) {
+        throw new Error('No response from stream');
+      }
+      const message = messageFromResponse(response);
+      if (!message) {
+        throw new Error('Failed to transform API response to client message');
+      }
+
+      // No support for ChatSearch messages at the current time.
+      // Perhaps we add support back in the future
+      // if (message.type === MessageType.ProductSearch) {
+      //   handleSearchResults(message);
+      //   hasSearchResults = true;
+      //   setSearchIsLoading(false); // Update search loading immediately when results are detected
+      // }
+
+      lastMessage = updateMessageState(message, lastMessage!, setMessages);
+    } catch (error: unknown) {
+      Logger.logWarn(`[spiffy-ai] Failed to generate responses from stream`, error, {
+        lastResponse: lastMessage,
+        response,
+      });
+    }
+  }
+};
+
+export const useSalesAgentService: () => SalesAgentService = () => {
+  const setRequestFailure = useSetAtom(requestFailureAtom);
+  const setMessages = useSetAtom(messagesAtom);
+  const messageInterceptor = useMessageInterceptor();
+
+  const featureFlagService = useFeatureFlagService();
+  const context = useAtomValue(appDetailsAtom);
+
+  const createResponsePayload = useCallback(
+    ({
+      userEvents,
+      generationParams,
+    }: {
+      userEvents: UserEvent[];
+      generationParams?: GenerationParams;
+    }): NextMessageRequest => {
+      const featureFlags = featureFlagService?.featureFlagService?.getFeatureFlags() || {};
+
+      const overrideConfigVersion =
+        getQueryParam('spiffy_config_version') ||
+        getQueryParam('envive_config_version') ||
+        undefined;
+      const overrideModelDatetime = getQueryParam('override_model_datetime') || undefined;
+      return {
+        id: uuid(),
+        context,
+        userEvents,
+        featureFlags,
+        generationParams,
+        overrideConfigVersion,
+        overrideModelDatetime,
+      };
+    },
+    [context, featureFlagService?.featureFlagService],
+  );
+
+  const getStreamingResponses = useCallback(
+    async (payload: NextMessageRequest): Promise<void> => {
+      // logPerfMetric(PerfMetricsEvents.FirstResponseStarted);
+      // const startTime = Date.now();
+      console.log('getStreamingResponses payload', JSON.stringify(payload, null, 2));
+      const stream = CommerceApiClient.getNextResponseStreaming(payload);
+
+      try {
+        setRequestFailure(false);
+
+        await processStreamingResponse(stream, messageInterceptor, setMessages);
+
+        // TODO: Add support for the Chrome Extension communication
+        // Log successful next_responses call
+        // const responseTime = Date.now() - startTime;
+        // await logBundleEvent({
+        //   level: 'info',
+        //   event: 'NEXT_RESPONSE_SUCCESS',
+        //   context: {
+        //     type: 'next_responses',
+        //     endpoint: '/v1/next_responses',
+        //     statusCode: 200,
+        //     responseTime,
+        //   },
+        // });
+      } catch (e) {
+        console.error('error getting streaming responses', e);
+        // Log failed next_responses call
+        // const responseTime = Date.now() - startTime;
+        // await logBundleEvent({
+        //   level: 'error',
+        //   event: 'NEXT_RESPONSE_FAILED',
+        //   message: `Failed to get streaming response: ${e}`,
+        //   context: {
+        //     type: 'next_responses',
+        //     endpoint: '/v1/next_responses',
+        //     responseTime,
+        //     error: e instanceof Error ? e.message : String(e),
+        //   },
+        // });
+
+        // handleStreamingError(e, setRequestFailure, setMessages);
+        throw e;
+        // } finally {
+        // logPerfMetric(PerfMetricsEvents.FirstResponseCompleted);
+      }
+    },
+    [
+      // logPerfMetric,
+      setRequestFailure,
+      messageInterceptor,
+      setMessages,
+    ],
+  );
+
+  return {
+    createResponsePayload,
+    getStreamingResponses,
+  };
+};

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

@@ -1,23 +1,24 @@
 import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import { Provider } from 'jotai';
-import { useAtomValue } from 'jotai';
-import { SearchProvider, useSearchService } from '../searchContext';
-import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { Provider, useAtomValue } from 'jotai';
+import {
+  EnviveConfigProvider,
+  useEnviveConfig,
+} from 'src/contexts/enviveConfigContext/enviveConfigContext';
 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 { baseUrlAtom } from 'src/atoms/envive/enviveConfig';
 import {
-  setSearchServiceFunction,
   clearSearchServiceFunction,
-  getSearchServiceFunction,
+  setSearchServiceFunction,
 } from 'src/atoms/search/searchServiceAdapter';
-import { SearchParams, SearchResult } from 'src/application/models/api/search';
-import { SessionRestartRequired } from 'src/types/exceptions/sessionExceptions';
-import { UnsupportedProductException } from 'src/types/exceptions/unsupportedProductExceptions';
-import { ResponseCategory } from '@spiffy-ai/commerce-api-client';
+import { SearchResult } from 'src/application/models/api/search';
+
+import { useAppDetails } from 'src/hooks/AppDetails/useAppDetails';
+import * as commerceApiClient from '@spiffy-ai/commerce-api-client';
+import { SearchProvider, useSearchService } from '../searchContext';
 
 // Mock the commerce-api-client
 const mockV1SearchQueryGet = vi.fn();
@@ -41,6 +42,7 @@ vi.mock('@spiffy-ai/commerce-api-client', () => {
     },
     ResponseError: class ResponseError extends Error {
       response: any;
+
       constructor(message: string, response?: any) {
         super(message);
         this.response = response;
@@ -85,10 +87,6 @@ vi.mock('src/atoms/search/searchServiceAdapter', () => ({
   getSearchServiceFunction: vi.fn(),
 }));
 
-import { useAppDetails } from 'src/hooks/AppDetails/useAppDetails';
-import { useEnviveConfig } from 'src/contexts/enviveConfigContext/enviveConfigContext';
-import * as commerceApiClient from '@spiffy-ai/commerce-api-client';
-
 // Get mocked functions
 const getMocks = () => {
   return (commerceApiClient as any).__getMocks();
@@ -129,6 +127,7 @@ const MockSearchComponent: React.FC = () => {
       <button
         data-testid="search-btn"
         onClick={handleSearch}
+        type="button"
       >
         Search
       </button>

package/src/contexts/searchContext/searchContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useCallback, useMemo, useEffect } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import {
   Configuration,

package/src/contexts/sessionStorageContext/sessionStorageContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useCallback, useMemo, useEffect } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
 import Logger from '../../application/logging/logger';
 
 interface SessionStorageContextType {

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import { Provider } from 'jotai';
-import { useAtomValue } from 'jotai';
-import { SystemSettingsContextProvider, defaultGenerationParams } from '../systemSettingsContext';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { Provider, useAtomValue } from 'jotai';
 import { useSystemSettingsContext } from 'src/hooks/SystemSettingsContext/useSystemSettingsContext';
 import { EnviveConfigProvider } from 'src/contexts/enviveConfigContext/enviveConfigContext';
 import { baseUrlAtom } from 'src/atoms/envive/enviveConfig';
 import { GenerationParams } from 'src/application/models';
+import { SystemSettingsContextProvider, defaultGenerationParams } from '../systemSettingsContext';
 
 // Component that uses the useSystemSettingsContext hook
 const MockSystemSettingsComponent: React.FC = () => {
@@ -38,6 +37,7 @@ const MockSystemSettingsComponent: React.FC = () => {
       <button
         data-testid="update-params-btn"
         onClick={handleUpdate}
+        type="button"
       >
         Update Params
       </button>
@@ -212,7 +212,7 @@ describe('SystemSettingsContextProvider', () => {
   describe('showDebugBar Prop', () => {
     it('should pass showDebugBar prop to context', async () => {
       render(
-        <TestWrapper showDebugBar={true}>
+        <TestWrapper showDebugBar>
           <MockSystemSettingsComponent />
         </TestWrapper>,
       );
@@ -346,6 +346,7 @@ describe('SystemSettingsContextProvider', () => {
             <button
               data-testid="partial-update-btn"
               onClick={handlePartialUpdate}
+              type="button"
             >
               Partial Update
             </button>
@@ -449,7 +450,7 @@ describe('SystemSettingsContextProvider', () => {
       const firstShowDebugBar = contextValue1.showDebugBar;
 
       rerender(
-        <TestWrapper showDebugBar={true}>
+        <TestWrapper showDebugBar>
           <Component1 />
           <Component2 />
         </TestWrapper>,