@envive-ai/react-hooks 0.3.7 → 0.3.8

package/src/contexts/salesAgentContext/formSubmittedUtils.ts

@@ -0,0 +1,57 @@
+import { Message, MessageRole, MessageType } from 'src/application/models/message';
+import { UserEvent } from 'src/application/models';
+
+/**
+ * Searches the chat history for the form message by form response ID and builds the display string for the form.
+ */
+export const buildFormSubmittedDisplayContent = (
+  messages: Message[][],
+  formResponseId: string,
+  filledSchema: Record<string, unknown>,
+): string => {
+  let formFields: { key: string; title: string }[] = [];
+  // Find the form message in the chat history
+  for (const turn of messages) {
+    for (const msg of turn) {
+      if (
+        msg.type === MessageType.Form &&
+        msg.id === formResponseId &&
+        msg.metadata &&
+        'fields' in msg.metadata &&
+        Array.isArray(msg.metadata.fields)
+      ) {
+        formFields = msg.metadata.fields.map((field: { key: string; title: string }) => ({
+          key: field.key,
+          title: field.title,
+        }));
+        break;
+      }
+    }
+    if (formFields.length > 0) break;
+  }
+  // Build the display string for the form
+  const formStringContent =
+    formFields.length > 0
+      ? formFields.map(({ key, title }) => `${title}: ${filledSchema[key] ?? ''}`).join('\n')
+      : Object.entries(filledSchema)
+          .map(([key, value]) => `${key}: ${value}`)
+          .join('\n');
+  return formStringContent;
+};
+
+/**
+ * Creates a user message representing a submitted form for display in the chat.
+ */
+export const createFormSubmittedUserMessage = (
+  userEvent: UserEvent,
+  formSubmittedContent: string,
+): Message => {
+  const newMessage: Message = {
+    id: userEvent.eventId,
+    role: MessageRole.User,
+    type: MessageType.QueryTyped,
+    createdAt: userEvent.createdAt,
+    metadata: { content: formSubmittedContent },
+  };
+  return newMessage;
+};

package/src/contexts/salesAgentContext/salesAgentContext.tsx

@@ -17,6 +17,10 @@ import {
   userQueueEventCountAtom,
 } from 'src/atoms/chat/messageQueue';
 import { useSystemSettingsContext } from 'src/hooks/SystemSettingsContext';
+import {
+  buildFormSubmittedDisplayContent,
+  createFormSubmittedUserMessage,
+} from './formSubmittedUtils';
 import { SalesAgentChatAPI, useSalesAgentChatAPI } from './chatAPI';
 import { useSalesAgentService } from './salesAgentService';
 
@@ -35,19 +39,48 @@ export interface SalesAgent extends SalesAgentChatAPI {
   isInitialized: boolean;
 }
 
+export interface MockSalesAgentData {
+  messages?: Message[][];
+  suggestions?: Suggestion[];
+}
+
 const SalesAgentContext = createContext<SalesAgent | undefined>(undefined);
 
-export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+export interface SalesAgentProviderProps {
+  children: ReactNode;
+  previewMode?: boolean;
+  mockData?: MockSalesAgentData;
+}
+
+export const SalesAgentProvider: React.FC<SalesAgentProviderProps> = ({
+  children,
+  previewMode = false,
+  mockData,
+}) => {
   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 setSuggestions = useSetAtom(suggestionsAtom);
 
   const { getStreamingResponses, createResponsePayload, getSuggestions, hydrateMessages } =
     useSalesAgentService();
 
+  // Initialize with mock data in preview mode
+  useEffect(() => {
+    if (previewMode && mockData) {
+      if (mockData.messages) {
+        setMessages(mockData.messages);
+      }
+      if (mockData.suggestions) {
+        setSuggestions(mockData.suggestions);
+      }
+      setIsInitialized(true);
+    }
+  }, [previewMode, mockData, setMessages, setSuggestions, setIsInitialized]);
+
   // TODO: Ensure that amplitude events are being emitted
 
   // TODO: Add support for the streaming responses to function
@@ -72,6 +105,11 @@ 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(() => {
+    // Skip backend communication in preview mode
+    if (previewMode) {
+      return;
+    }
+
     if (userQueueEventCount > 0) {
       const payloadEvents = userEvents.slice(0, userQueueEventCount);
 
@@ -100,6 +138,23 @@ export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children
           };
           setMessages(current => [...current, [newMessage]]);
         }
+        if (userEvent && userEvent.category === UserEventCategory.FormSubmitted) {
+          const { formResponseId, filledSchema } = userEvent.attributes;
+          setMessages(prevMessagesState => {
+            const formSubmittedContent = buildFormSubmittedDisplayContent(
+              prevMessagesState,
+              formResponseId,
+              filledSchema,
+            );
+            const newUserMessage = createFormSubmittedUserMessage(userEvent, formSubmittedContent);
+            const turnsWithoutForm = prevMessagesState
+              .map(turn =>
+                turn.filter(msg => !(msg.type === MessageType.Form && msg.id === formResponseId)),
+              )
+              .filter(turn => turn.length > 0);
+            return [...turnsWithoutForm, [newUserMessage]];
+          });
+        }
       });
 
       sendMessagesToBackend(
@@ -125,14 +180,20 @@ export const SalesAgentProvider: React.FC<{ children: ReactNode }> = ({ children
     settingsContext.generationParams,
     userEvents,
     userQueueEventCount,
+    previewMode,
   ]);
 
   useEffect(() => {
+    // Skip hydration in preview mode
+    if (previewMode) {
+      return;
+    }
+
     if (isInitialized) {
       // Rehydrate any messages from the backend
       hydrateMessages();
     }
-  }, [isInitialized, hydrateMessages]);
+  }, [isInitialized, hydrateMessages, previewMode]);
 
   return <SalesAgentContext.Provider value={undefined}>{children}</SalesAgentContext.Provider>;
 };

package/src/contexts/salesAgentContext/salesAgentService.ts

@@ -44,12 +44,14 @@ const inputPropsToTrackingProps = (
   const [userEvent] = payload.userEvents || [];
   if (userEvent.category === UserEventCategory.SuggestionClicked) {
     return {
+      message_id: userEvent.eventId,
       user_event_type: 'suggestion_clicked',
       user_query: userEvent.attributes.content,
     };
   }
   if (userEvent.category === UserEventCategory.QueryTyped) {
     return {
+      message_id: userEvent.eventId,
       user_event_type: 'query_typed',
       user_query: userEvent.attributes.query,
     };
@@ -216,6 +218,7 @@ export const useSalesAgentService: () => SalesAgentService = () => {
   const getStreamingResponses = useCallback(
     async (payload: NextMessageRequest): Promise<void> => {
       const startTime = Date.now();
+      let successfulResponse: boolean | undefined;
       setPendingResponse(true);
       const stream = CommerceApiClient.getNextResponseStreaming(payload);
 
@@ -228,16 +231,8 @@ export const useSalesAgentService: () => SalesAgentService = () => {
           setMessages,
           setResponseStreaming,
         );
+        successfulResponse = true;
 
-        // Log successful next_responses call
-        const responseTime = Date.now() - startTime;
-        trackEvent({
-          eventName: SpiffyMetricsEventName.ChatAssistantResponse,
-          eventProps: {
-            responseTimeMs: responseTime.toString(),
-            ...inputPropsToTrackingProps(payload),
-          },
-        });
         // TODO: Add support for the Chrome Extension communication
         // await logBundleEvent({
         //   level: 'info',
@@ -251,6 +246,7 @@ export const useSalesAgentService: () => SalesAgentService = () => {
         // });
       } catch (e) {
         console.error('error getting streaming responses', e);
+        successfulResponse = false;
         // Log failed next_responses call
         // const responseTime = Date.now() - startTime;
         // await logBundleEvent({
@@ -268,6 +264,16 @@ export const useSalesAgentService: () => SalesAgentService = () => {
         handleStreamingError(e, setRequestFailure, setMessages);
         throw e;
       } finally {
+        // Log next_responses call
+        const responseTime = Date.now() - startTime;
+        trackEvent({
+          eventName: SpiffyMetricsEventName.ChatAssistantResponse,
+          eventProps: {
+            responseTimeMs: responseTime.toString(),
+            successful_response: successfulResponse,
+            ...inputPropsToTrackingProps(payload),
+          },
+        });
         setPendingResponse(false);
         setResponseStreaming(false);
         // logPerfMetric(PerfMetricsEvents.FirstResponseCompleted);

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

@@ -21,6 +21,7 @@ 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 { UserIdentityService } from 'src/services/userIdentityService';
 import { SearchProvider, useSearchService } from '../searchContext';
 
 // Mock the commerce-api-client
@@ -61,6 +62,7 @@ vi.mock('@spiffy-ai/commerce-api-client', () => {
 
 // FeatureFlagService
 const testFeatureFlagService = new FeatureFlagService([]);
+const testUserIdService = new UserIdentityService({ apiKey: '' });
 
 // Mock useAppDetails
 vi.mock('src/hooks/AppDetails/useAppDetails', () => ({
@@ -197,7 +199,7 @@ const TestWrapper: React.FC<{
       >
         <LocalStorageProvider>
           <GraphQLProvider>
-            <UserIdentityProvider>
+            <UserIdentityProvider userIdService={testUserIdService}>
               <FeatureFlagServiceProvider featureFlagService={testFeatureFlagService}>
                 <SearchProvider>{children}</SearchProvider>
               </FeatureFlagServiceProvider>

package/src/contexts/typesV3.ts

@@ -3,7 +3,7 @@ import { ImageGalleryImage, ImageGalleryLayout } from '@envive-ai/react-toolkit-
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton';
 import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { DynamicLayout } from '@envive-ai/react-toolkit-v3/SocialProof';
+import { DynamicLayout, WidgetKind } from '@envive-ai/react-toolkit-v3/SocialProof';
 import { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
 import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
 import { ColorNames } from '../application/models/colorsConfigV3';
@@ -240,6 +240,7 @@ export enum WidgetTypeV3 {
   SingleImagePromptV3 = 'SingleImagePromptV3',
   FloatingChatV3 = 'FloatingChatV3',
   FloatingButtonV3 = 'FloatingButtonV3',
+  ProductCardV3 = 'ProductCardV3',
 }
 
 interface BaseWidgetConfig<T extends WidgetTypeV3> {
@@ -261,13 +262,8 @@ interface TitledPromptCarouselWidgetV3Config extends BaseWidgetConfig<WidgetType
   promptCarouselRows?: PromptCarouselRows;
   animationSpeed?: AnimationSpeed;
 }
-
-enum SocialProofWidgetKind {
-  STATIC = 'static',
-  DYNAMIC = 'dynamic',
-}
 interface SocialProofWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.SocialProofV3> {
-  kind: SocialProofWidgetKind;
+  kind: WidgetKind;
   variant: WidgetWrapperVariant;
   hexCardColor?: string;
   promptCarouselRows: PromptCarouselRows;
@@ -315,6 +311,13 @@ interface PromptButtonCarouselWithImageWidgetV3Config extends BaseWidgetConfig<W
 
 interface FloatingChatWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.FloatingChatV3> {}
 
+interface ProductCardWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.ProductCardV3> {
+  promptButtonType?: PromptButtonVariant;
+  italicizeHeadline?: boolean;
+  fallbackColor?: string;
+  imageSrc?: string;
+}
+
 type WidgetConfigV3 =
   | PromptCarouselWidgetV3Config
   | SocialProofWidgetV3Config
@@ -324,7 +327,8 @@ type WidgetConfigV3 =
   | TypingAnimationWidgetV3Config
   | ChatPreviewWidgetV3Config
   | PromptButtonCarouselWithImageWidgetV3Config
-  | FloatingChatWidgetV3Config;
+  | FloatingChatWidgetV3Config
+  | ProductCardWidgetV3Config;
 
 export type {
   OrgUIConfigV3,
@@ -339,9 +343,8 @@ export type {
   TypingAnimationWidgetV3Config,
   PromptButtonCarouselWithImageWidgetV3Config,
   FloatingChatWidgetV3Config,
+  ProductCardWidgetV3Config,
   FloatingChatConfig,
   FloatingButtonConfig,
   CustomerServiceIntegration,
 };
-
-export { SocialProofWidgetKind };

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

@@ -5,6 +5,7 @@ import { userIdAtom } from 'src/atoms/app';
 import { LocalStorageProvider } from 'src/contexts/localStorageContext';
 import Logger from 'src/application/logging/logger';
 import CommerceApiClient from 'src/application/commerce-api';
+import { UserIdentityService } from 'src/services/userIdentityService';
 import { UserIdentityProvider, useUserIdentity } from '../userIdentityContext';
 
 // Mock the Logger to avoid console output in tests
@@ -24,20 +25,32 @@ vi.mock('uuid', () => ({
   v4: vi.fn(() => 'test-uuid-12345'),
 }));
 
+// Mock userIdService
+const mockGetUserId = vi.fn().mockResolvedValue('spiffy-user-id-test-user-id');
+const mockInitializeUser = vi.fn().mockResolvedValue(undefined);
+
+const testUserIdService = {
+  getUserIdOrDefault: mockGetUserId,
+  initializeUser: mockInitializeUser,
+  getUserIdOverrideFromLocalStorage: vi.fn().mockReturnValue(undefined),
+} as unknown as UserIdentityService;
+
 // Component that uses the useUserIdentity hook
 const MockComponent: React.FC = () => {
   const context = useUserIdentity();
+  const [userId, setUserId] = React.useState<string>('');
+
+  React.useEffect(() => {
+    context.getUserIdOrDefault().then(setUserId);
+  }, [context]);
 
   return (
     <div data-testid="mock-component">
-      <div data-testid="user-id">{context.getUserIdOrDefault()}</div>
+      <div data-testid="user-id">{userId}</div>
       <div data-testid="is-ready">{context.isReady.toString()}</div>
       <div data-testid="user-id-override">
         {context.getUserIdOverrideFromLocalStorage() || 'none'}
       </div>
-      <div data-testid="user-id-default">
-        {context.getUserIdDefaultFromLocalStorage() || 'none'}
-      </div>
     </div>
   );
 };
@@ -122,7 +135,7 @@ describe('UserIdentityProvider', () => {
     return render(
       <Provider>
         <LocalStorageProvider>
-          <UserIdentityProvider>{children}</UserIdentityProvider>
+          <UserIdentityProvider userIdService={testUserIdService}>{children}</UserIdentityProvider>
         </LocalStorageProvider>
       </Provider>,
     );
@@ -220,50 +233,6 @@ describe('UserIdentityProvider', () => {
 
       consoleSpy.mockRestore();
     });
-
-    it('should set userIdAtom correctly when multiple components use useUserIdentity', async () => {
-      // Component that sets override - the atom will be set by useUserIdentity
-      const ComponentWithActions: React.FC = () => {
-        const context = useUserIdentity();
-
-        React.useEffect(() => {
-          // Set override on mount
-          context.setUserIdOverrideInLocalStorage('multi-component-override');
-        }, [context]);
-
-        // Get userId from context instead of atom directly
-        const userId = context.getUserIdOrDefault();
-
-        return (
-          <div>
-            <div data-testid="current-user-id">{userId}</div>
-          </div>
-        );
-      };
-
-      renderWithProviders(
-        <>
-          <ComponentWithActions />
-          <AtomReaderComponent />
-        </>,
-      );
-
-      // Wait for the atom to be set
-      await waitFor(() => {
-        const atomValue = screen.getByTestId('atom-reader').textContent;
-        expect(atomValue).not.toBe('not-set');
-      });
-
-      // Both components should see the same atom value
-      // Note: The atom is set by useUserIdentity's useEffect, which runs after
-      // the override is set in localStorage, so it should reflect the override
-      await waitFor(() => {
-        const atomValue = screen.getByTestId('atom-reader').textContent;
-        // The atom should be set to the override value since it was set before
-        // the component mounted, or it will be the generated default
-        expect(atomValue).toBeTruthy();
-      });
-    });
   });
 
   describe('getUserIdOrDefault', () => {
@@ -276,40 +245,6 @@ describe('UserIdentityProvider', () => {
         expect(screen.getByTestId('user-id').textContent).toBe('override-123');
       });
     });
-
-    it('should return default userId if override does not exist', async () => {
-      localStorage.setItem('v1-spiffy-user-id-default', 'default-456');
-
-      renderWithProviders(<MockComponent />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId('user-id').textContent).toBe('default-456');
-      });
-    });
-
-    it('should generate and store new userId if neither exists', async () => {
-      renderWithProviders(<MockComponent />);
-
-      await waitFor(() => {
-        const userId = screen.getByTestId('user-id').textContent;
-        expect(userId).toContain('spiffy-user-id-');
-        expect(userId).toContain('test-uuid-12345');
-      });
-
-      // Verify it was stored in localStorage
-      expect(localStorage.getItem('v1-spiffy-user-id-default')).toContain('spiffy-user-id-');
-    });
-
-    it('should prioritize override over default', async () => {
-      localStorage.setItem('v1-spiffy-user-id-override', 'override-789');
-      localStorage.setItem('v1-spiffy-user-id-default', 'default-012');
-
-      renderWithProviders(<MockComponent />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId('user-id').textContent).toBe('override-789');
-      });
-    });
   });
 
   describe('LocalStorage Operations', () => {
@@ -323,33 +258,6 @@ describe('UserIdentityProvider', () => {
       });
     });
 
-    it('should get userId default from localStorage', async () => {
-      localStorage.setItem('v1-spiffy-user-id-default', 'test-default');
-
-      renderWithProviders(<MockComponent />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId('user-id-default').textContent).toBe('test-default');
-      });
-    });
-
-    it('should set userId default in localStorage', async () => {
-      const ComponentWithSet: React.FC = () => {
-        const context = useUserIdentity();
-        React.useEffect(() => {
-          context.setUserIdDefaultInLocalStorage('new-default-id');
-        }, [context]);
-
-        return <div data-testid="set-component">Set</div>;
-      };
-
-      renderWithProviders(<ComponentWithSet />);
-
-      await waitFor(() => {
-        expect(localStorage.getItem('v1-spiffy-user-id-default')).toBe('new-default-id');
-      });
-    });
-
     it('should set userId override in localStorage', async () => {
       const ComponentWithSet: React.FC = () => {
         const context = useUserIdentity();
@@ -386,27 +294,6 @@ describe('UserIdentityProvider', () => {
       });
     });
 
-    it('should log info when setting userId default', async () => {
-      const logSpy = vi.spyOn(Logger, 'logInfo');
-
-      const ComponentWithSet: React.FC = () => {
-        const context = useUserIdentity();
-        React.useEffect(() => {
-          context.setUserIdDefaultInLocalStorage('logged-default-id');
-        }, [context]);
-
-        return <div>Set</div>;
-      };
-
-      renderWithProviders(<ComponentWithSet />);
-
-      await waitFor(() => {
-        expect(logSpy).toHaveBeenCalledWith(
-          'setUserIdDefaultInLocalStorage - Setting user_id=logged-default-id',
-        );
-      });
-    });
-
     it('should log info when setting userId override', async () => {
       const logSpy = vi.spyOn(Logger, 'logInfo');