@envive-ai/react-hooks 0.3.9 → 0.3.11

package/src/contexts/salesAgentContext/salesAgentService.ts

@@ -25,6 +25,8 @@ import { useMessageInterceptor } from 'src/interceptors/useMessageInterceptor';
 import { SpiffyMetricsEventName, useAmplitude } from 'src/contexts/amplitudeContext';
 import { useFeatureFlagService } from 'src/contexts/featureFlagServiceContext';
 import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { EnviveMetricsEventName } from 'src/services/amplitudeService/amplitudeService';
+import { analyticsContextAtom } from 'src/atoms/app/variant';
 
 import { StatusCodeError } from './statusCodeError';
 
@@ -59,6 +61,41 @@ const inputPropsToTrackingProps = (
   return {};
 };
 
+const inputPropsToEnviveTrackingProps = (
+  payload: NextMessageRequest,
+): Record<string, unknown> | undefined => {
+  const [userEvent] = payload.userEvents || [];
+  if (userEvent.category === UserEventCategory.SuggestionClicked) {
+    return {
+      'chat.request_type': 'suggestion',
+      'chat.request_id': userEvent.eventId,
+      'chat.request_text': userEvent.attributes.content,
+      'chat.suggestion_id': userEvent.attributes.suggestionId,
+      'chat.user_typed': false,
+    };
+  }
+  if (userEvent.category === UserEventCategory.QueryTyped) {
+    return {
+      'chat.request_type': 'text',
+      'chat.request_id': userEvent.eventId,
+      'chat.request_text': userEvent.attributes.query,
+      'chat.user_typed': userEvent.attributes.userTyped,
+    };
+  }
+  if (
+    userEvent.category === UserEventCategory.PageVisit ||
+    userEvent.category === UserEventCategory.PdpVisit ||
+    userEvent.category === UserEventCategory.PlpVisit
+  ) {
+    return {
+      'chat.request_id': userEvent.eventId,
+      'chat.request_type': 'page_visit',
+    };
+  }
+
+  return {};
+};
+
 export const getQueryParam = (key: string): string | null => {
   const urlObj = new URL(window.location.href);
   return urlObj.searchParams.get(key);
@@ -137,14 +174,15 @@ const processStreamingResponse = async (
   messageInterceptor: { intercept: (response?: Response) => boolean | undefined },
   setMessages: (updater: (prev: Message[][]) => Message[][]) => void,
   setResponseStreaming: (responseStreaming: boolean) => void,
-): Promise<void> => {
+): Promise<Record<string, number>> => {
   let lastMessage: Message | undefined;
   setResponseStreaming(true);
+  const responseAnalytics: Record<string, number> = {};
 
   for await (const response of stream) {
     try {
       if (messageInterceptor.intercept(response)) {
-        return;
+        return {};
       }
 
       if (!response) {
@@ -155,6 +193,14 @@ const processStreamingResponse = async (
       if (!message) {
         throw new Error('Failed to transform API response to client message');
       }
+      if (message.type === MessageType.Product) {
+        responseAnalytics['chat.product_cards_returned'] =
+          (responseAnalytics['chat.product_cards_returned'] || 0) + 1;
+      }
+      if (message.type === MessageType.Review) {
+        responseAnalytics['chat.review_cards_returned'] =
+          (responseAnalytics['chat.review_cards_returned'] || 0) + 1;
+      }
 
       // No support for ChatSearch messages at the current time.
       // Perhaps we add support back in the future
@@ -173,6 +219,7 @@ const processStreamingResponse = async (
     }
     setResponseStreaming(false);
   }
+  return responseAnalytics;
 };
 
 export const useSalesAgentService: () => SalesAgentService = () => {
@@ -181,6 +228,7 @@ export const useSalesAgentService: () => SalesAgentService = () => {
   const setSuggestions = useSetAtom(suggestionsAtom);
   const setPendingResponse = useSetAtom(pendingResponseAtom);
   const setResponseStreaming = useSetAtom(responseStreamingAtom);
+  const analyticsContext = useAtomValue(analyticsContextAtom);
   const messageInterceptor = useMessageInterceptor();
   const { trackEvent } = useAmplitude();
 
@@ -220,12 +268,13 @@ export const useSalesAgentService: () => SalesAgentService = () => {
       const startTime = Date.now();
       let successfulResponse: boolean | undefined;
       setPendingResponse(true);
+      setSuggestions([]);
       const stream = CommerceApiClient.getNextResponseStreaming(payload);
-
+      let responseAnalytics: Record<string, unknown> | undefined;
       try {
         setRequestFailure(false);
 
-        await processStreamingResponse(
+        responseAnalytics = await processStreamingResponse(
           stream,
           messageInterceptor,
           setMessages,
@@ -274,14 +323,27 @@ export const useSalesAgentService: () => SalesAgentService = () => {
             ...inputPropsToTrackingProps(payload),
           },
         });
+        trackEvent({
+          eventName: EnviveMetricsEventName.ChatResponse,
+          eventProps: {
+            ...analyticsContext,
+            'chat.response_time_ms': responseTime.toString(),
+            ...inputPropsToEnviveTrackingProps(payload),
+            ...responseAnalytics,
+          },
+        });
         setPendingResponse(false);
         setResponseStreaming(false);
         // logPerfMetric(PerfMetricsEvents.FirstResponseCompleted);
       }
     },
     [
+      analyticsContext,
+      trackEvent,
+      setResponseStreaming,
       // logPerfMetric,
       setRequestFailure,
+      setSuggestions,
       messageInterceptor,
       setMessages,
       setPendingResponse,

package/src/contexts/types.ts

@@ -863,6 +863,7 @@ type PageVariantBase = {
   variantId: string;
   widgetMounting: WidgetMounting[];
   variantTests: PageVariantTest[];
+  floatingButtonOverride?: ShowFloatingButtonOptions;
 };
 
 type PLPPageVariant = PageVariantBase & {
@@ -892,13 +893,18 @@ type SearchPageVariant = PageVariantBase & {
   variantType: 'search';
 };
 
+type FullPageSalesAgentVariant = PageVariantBase & {
+  variantType: 'full_page';
+};
+
 export type PageVariantConfig =
   | PLPPageVariant
   | PDPPageVariant
   | VisitPageVariant
   | OtherPageVariant
   | HomePageVariant
-  | SearchPageVariant;
+  | SearchPageVariant
+  | FullPageSalesAgentVariant;
 
 export type OrgPageConfig = {
   // pageVariants is a list of page variants that we support.
@@ -928,6 +934,7 @@ export interface EnviveConfig {
   variantUrlOverride?: string;
   variantInfoOverride?: any;
   show?: boolean;
+  enviveOn?: boolean;
   publicKey?: string;
   featureGates?: OrgConfigFeatureGate[];
 }

package/src/contexts/typesV3.ts

@@ -1,11 +1,11 @@
-import { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
 import { ImageGalleryImage, ImageGalleryLayout } from '@envive-ai/react-toolkit-v3/ImageGallery';
 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 { AnimationSpeed, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { DynamicLayout, WidgetKind } from '@envive-ai/react-toolkit-v3/SocialProof';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { SparkleIconColor } from '@envive-ai/react-toolkit-v3/WelcomeMessage';
-import { FloatingButtonLocation } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import { WidgetWrapperVariant } from '@envive-ai/react-toolkit-v3/WidgetWrapper';
 import { ColorNames } from '../application/models/colorsConfigV3';
 import { CustomerServiceType } from '../types/customerService';
 import type { SearchConfig } from './types';
@@ -246,6 +246,7 @@ export enum WidgetTypeV3 {
   FloatingChatV3 = 'FloatingChatV3',
   FloatingButtonV3 = 'FloatingButtonV3',
   ProductCardV3 = 'ProductCardV3',
+  FullPageSalesAgentV3 = 'FullPageSalesAgentV3',
 }
 
 interface BaseWidgetConfig<T extends WidgetTypeV3> {
@@ -324,6 +325,11 @@ interface ProductCardWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.Produc
   imageSrc?: string;
 }
 
+interface FullPageSalesAgentWidgetV3Config extends BaseWidgetConfig<WidgetTypeV3.FullPageSalesAgentV3> {
+  headerContainer?: string;
+  autoHeight?: boolean;
+}
+
 type WidgetConfigV3 =
   | PromptCarouselWidgetV3Config
   | SocialProofWidgetV3Config
@@ -334,24 +340,26 @@ type WidgetConfigV3 =
   | ChatPreviewWidgetV3Config
   | PromptButtonCarouselWithImageWidgetV3Config
   | FloatingChatWidgetV3Config
-  | ProductCardWidgetV3Config;
+  | ProductCardWidgetV3Config
+  | FullPageSalesAgentWidgetV3Config;
 
 export type {
-  OrgUIConfigV3,
-  WidgetConfigV3,
-  LookAndFeelConfig,
-  SocialProofWidgetV3Config,
-  PromptCarouselWidgetV3Config,
   ChatPreviewComparisonWidgetV3Config,
   ChatPreviewLoadingWidgetV3Config,
   ChatPreviewWidgetV3Config,
-  TitledPromptCarouselWidgetV3Config,
-  TypingAnimationWidgetV3Config,
-  PromptButtonCarouselWithImageWidgetV3Config,
+  CustomerServiceIntegration,
+  FloatingButtonConfig,
+  FloatingChatConfig,
   FloatingChatWidgetV3Config,
+  FullPageSalesAgentWidgetV3Config,
+  LookAndFeelConfig,
+  OrgUIConfigV3,
   ProductCardWidgetV3Config,
-  FloatingChatConfig,
-  FloatingButtonConfig,
-  CustomerServiceIntegration,
+  PromptButtonCarouselWithImageWidgetV3Config,
+  PromptCarouselWidgetV3Config,
+  SocialProofWidgetV3Config,
   SPASettings,
+  TitledPromptCarouselWidgetV3Config,
+  TypingAnimationWidgetV3Config,
+  WidgetConfigV3,
 };

package/src/services/amplitudeService/__tests__/amplitudeService.test.ts

@@ -66,6 +66,23 @@ describe('AmplitudeService', () => {
     mockAdd.mockClear();
     mockDigest.mockResolvedValue(new Uint8Array(32).fill(0));
     mockDispatch.mockClear();
+
+    // Mock window.location for tests that need it
+    Object.defineProperty(global, 'window', {
+      value: {
+        location: {
+          href: 'https://test.example.com',
+        },
+        localStorage: {
+          getItem: vi.fn(),
+        },
+        performance: {
+          now: vi.fn(() => Date.now()),
+        },
+      },
+      writable: true,
+      configurable: true,
+    });
   });
 
   const createService = (overrides?: Partial<AmplitudeServiceConfig>) => {
@@ -76,6 +93,7 @@ describe('AmplitudeService', () => {
       env: 'test',
       orgId: 'test-org-id',
       show: true,
+      enviveOn: true,
       contextSource: 'app',
       orgShortName: 'test-org',
       featureFlagService,
@@ -108,6 +126,7 @@ describe('AmplitudeService', () => {
         env: 'test',
         orgId: 'test-org-id',
         show: true,
+        enviveOn: true,
         getLocalStorageItem: mockGetLocalStorageItem,
         contextSource: 'app',
         orgShortName: 'test-org',
@@ -125,6 +144,7 @@ describe('AmplitudeService', () => {
         env: 'test',
         orgId: 'test-org-id',
         show: true,
+        enviveOn: true,
         getLocalStorageItem: mockGetLocalStorageItem,
         contextSource: 'app',
         orgShortName: 'test-org',
@@ -142,6 +162,7 @@ describe('AmplitudeService', () => {
         env: 'test',
         orgId: 'test-org-id',
         show: true,
+        enviveOn: true,
         getLocalStorageItem: mockGetLocalStorageItem,
         contextSource: 'app',
         orgShortName: 'test-org',
@@ -209,6 +230,7 @@ describe('AmplitudeService', () => {
         eventProps: { message: 'test', count: 5 },
       });
 
+      expect(mockTrack).toHaveBeenCalled();
       const callArgs = mockTrack.mock.calls[0];
       const eventProps = callArgs[1];
 
@@ -238,6 +260,7 @@ describe('AmplitudeService', () => {
         eventGroups: { group1: 'value1', group2: 'value2' },
       });
 
+      expect(mockTrack).toHaveBeenCalled();
       const callArgs = mockTrack.mock.calls[0];
       expect(callArgs[2]).toHaveProperty('group1', 'value1');
       expect(callArgs[2]).toHaveProperty('group2', 'value2');
@@ -251,6 +274,7 @@ describe('AmplitudeService', () => {
         env: 'test',
         orgId: 'test-org-id',
         show: true,
+        enviveOn: true,
         getLocalStorageItem: mockGetLocalStorageItem,
         contextSource: 'app',
         orgShortName: 'test-org',
@@ -304,6 +328,15 @@ describe('AmplitudeService', () => {
       const dataLayer: any[] = [];
       Object.defineProperty(global, 'window', {
         value: {
+          location: {
+            href: 'https://test.example.com',
+          },
+          localStorage: {
+            getItem: vi.fn(),
+          },
+          performance: {
+            now: vi.fn(() => Date.now()),
+          },
           dataLayer,
         },
         writable: true,
@@ -391,6 +424,7 @@ describe('AmplitudeService', () => {
         env: 'test',
         orgId: 'test-org-id',
         show: true,
+        enviveOn: true,
         getLocalStorageItem: null,
         contextSource: 'app',
         orgShortName: 'test-org',
@@ -408,7 +442,13 @@ describe('AmplitudeService', () => {
       };
       Object.defineProperty(global, 'window', {
         value: {
+          location: {
+            href: 'https://test.example.com',
+          },
           localStorage: mockLocalStorage,
+          performance: {
+            now: vi.fn(() => Date.now()),
+          },
         },
         writable: true,
         configurable: true,
@@ -418,7 +458,9 @@ describe('AmplitudeService', () => {
         eventName: SpiffyMetricsEventName.ChatUserMessageInput,
       });
 
+      // Check that getItem was called with ChatId (may be called with other keys too)
       expect(mockLocalStorage.getItem).toHaveBeenCalledWith(LocalStorageKeys.ChatId);
+      expect(mockTrack).toHaveBeenCalled();
       const callArgs = mockTrack.mock.calls[0];
       expect(callArgs[1]).toHaveProperty('chat_id', 'window-chat-id');
     });
@@ -448,6 +490,7 @@ describe('AmplitudeService', () => {
         eventName: SpiffyMetricsEventName.ChatUserMessageInput,
       });
 
+      expect(mockTrack).toHaveBeenCalled();
       const callArgs = mockTrack.mock.calls[0];
       const eventProps = callArgs[1];
       expect(eventProps).toHaveProperty('test', 'value');
@@ -456,6 +499,23 @@ describe('AmplitudeService', () => {
 
   describe('Event enrichment', () => {
     it('should enrich Page Viewed events', async () => {
+      // Ensure window.location is properly mocked
+      Object.defineProperty(global, 'window', {
+        value: {
+          location: {
+            href: 'https://test.example.com',
+          },
+          localStorage: {
+            getItem: vi.fn(),
+          },
+          performance: {
+            now: vi.fn(() => Date.now()),
+          },
+        },
+        writable: true,
+        configurable: true,
+      });
+
       createService({
         show: true,
       });
@@ -487,6 +547,23 @@ describe('AmplitudeService', () => {
     });
 
     it('should enrich Bundle Loaded events', async () => {
+      // Ensure window.location is properly mocked
+      Object.defineProperty(global, 'window', {
+        value: {
+          location: {
+            href: 'https://test.example.com',
+          },
+          localStorage: {
+            getItem: vi.fn(),
+          },
+          performance: {
+            now: vi.fn(() => Date.now()),
+          },
+        },
+        writable: true,
+        configurable: true,
+      });
+
       createService();
 
       const enrichmentCall = mockAdd.mock.calls[0];
@@ -541,6 +618,9 @@ describe('AmplitudeService', () => {
     it('should track multiple events with correct userId', async () => {
       const service = createService();
 
+      // Ensure the service is ready
+      expect(service.isReady).toBe(true);
+
       await service.trackEvent({
         eventName: SpiffyMetricsEventName.ChatUserMessageInput,
         eventProps: { event1: true },

package/src/services/amplitudeService/amplitudeService.ts

@@ -46,8 +46,20 @@ export enum SpiffyMetricsEventName {
   SearchSortClicked = 'Search Sort Clicked',
 }
 
+export enum EnviveMetricsEventName {
+  WidgetRendered = 'Widget Rendered',
+  WidgetInteraction = 'Widget Interaction',
+  ChatRequest = 'Chat Request',
+  ChatResponse = 'Chat Response',
+  EnviveInitialized = 'Envive Initialized',
+  PageViewed = 'Page Viewed', // Will this be useful?
+  WidgetTextRequest = 'Widget Text Request',
+  WidgetTextResponse = 'Widget Text Response',
+  WidgetTextClicked = 'Widget Text Clicked',
+}
+
 export interface TrackEventParams {
-  eventName: SpiffyMetricsEventName;
+  eventName: SpiffyMetricsEventName | EnviveMetricsEventName;
   eventProps?: Record<string, unknown>;
   eventGroups?: Record<string, unknown>;
   alsoSendToGoogleAnalytics?: boolean;
@@ -64,6 +76,7 @@ export interface AmplitudeServiceConfig {
   featureFlagService: FeatureFlagService;
   orgGaConfig?: unknown;
   show: boolean;
+  enviveOn: boolean;
   enabledFeatures?: Record<string, boolean>;
   getLocalStorageItem: null | ((key: string) => string | null);
 }
@@ -101,7 +114,9 @@ export class AmplitudeService {
     return null;
   }
 
-  private getDefaultTrackingProps(): Record<string, unknown> {
+  private getDefaultTrackingProps(
+    eventName: SpiffyMetricsEventName | EnviveMetricsEventName,
+  ): Record<string, unknown> {
     const featureGates = Object.entries(this.config.featureFlagService.getFeatureFlags());
     const gatesProps =
       featureGates.length > 0
@@ -114,16 +129,32 @@ export class AmplitudeService {
         : {};
     const experimentProps = {}; // No direct equivalent for experiments in EnviveConfig yet
 
-    const orgLevelAmplitudeTrackingProps = {
-      ...gatesProps,
-      ...experimentProps,
+    const environmentProps = {
+      'environment.execution_context': 'bundle',
+      'environment.page_url': window.location.href,
+      'environment.envive_user_id': this.config.userId,
+      'environment.execution_environment': this.config.env || 'unknown',
+      'environment.context_source': this.config.contextSource,
+      'environment.sales_agent_enabled': this.config.enabledFeatures?.salesAgent ?? false,
+      'environment.search_enabled': this.config.enabledFeatures?.searchAgent ?? false,
+      'environment.envive_on_query_param': this.config.enviveOn,
+      'environment.window_show': this.config.show,
+      'environment.envive_enabled': this.config.enabledFeatures?.envive,
     };
 
+    const orgLevelAmplitudeTrackingProps = AmplitudeService.isEnviveEvent(eventName)
+      ? {
+          ...this.config.featureFlagService.getFullFlagValues(),
+          ...experimentProps,
+          ...environmentProps,
+        }
+      : {
+          ...gatesProps,
+          ...experimentProps,
+        };
     return {
       ...orgLevelAmplitudeTrackingProps,
       ...this.supplementalDefaultProps,
-      // TODO: org_id is not directly available in EnviveConfig. Need to find a new source or derive it.
-      // org_id: orgConfig?.org?.org?.id,
       app_id: 'commerce-chat-react-component',
       chat_id: this.getLocalStorageItem(LocalStorageKeys.ChatId),
       env: this.config.env || 'unknown',
@@ -143,7 +174,7 @@ export class AmplitudeService {
 
   // eslint-disable-next-line class-methods-use-this
   private eventPropsToPrefixedEventProps(
-    eventName: SpiffyMetricsEventName,
+    eventName: SpiffyMetricsEventName | EnviveMetricsEventName,
     eventProps: Record<string, unknown>,
   ): Record<string, unknown> {
     const prefix = eventName.toLowerCase().replace(/\s+/g, '_');
@@ -200,7 +231,9 @@ export class AmplitudeService {
             ...event,
             event_properties: {
               ...event.event_properties,
-              ...this.getDefaultTrackingProps(),
+              ...this.getDefaultTrackingProps(
+                event.event_type as SpiffyMetricsEventName | EnviveMetricsEventName,
+              ),
               ...globalProperties,
               ...enabledFeaturesProperties,
               ...timingProperties,
@@ -342,6 +375,17 @@ export class AmplitudeService {
     return eventProps ?? {};
   }
 
+  static isEnviveEvent(eventName: SpiffyMetricsEventName | EnviveMetricsEventName): boolean {
+    return Object.values(EnviveMetricsEventName).includes(eventName as EnviveMetricsEventName);
+  }
+
+  static decorateEventName(eventName: SpiffyMetricsEventName | EnviveMetricsEventName): string {
+    if (AmplitudeService.isEnviveEvent(eventName)) {
+      return `[Envive] ${eventName}`;
+    }
+    return `[Spiffy] ${eventName}`;
+  }
+
   async trackEvent({
     eventName,
     eventProps,
@@ -350,7 +394,7 @@ export class AmplitudeService {
   }: TrackEventParams): Promise<void> {
     Logger.logDebug('Submitting event', eventName);
     try {
-      const decoratedEventName = `[Spiffy] ${eventName}`;
+      const decoratedEventName = AmplitudeService.decorateEventName(eventName);
 
       if (!this.amplitudeClient) {
         Logger.logWarn('amplitude client undefined', undefined, {
@@ -382,7 +426,7 @@ export class AmplitudeService {
       this.amplitudeClient.track(
         decoratedEventName,
         {
-          ...this.getDefaultTrackingProps(),
+          ...this.getDefaultTrackingProps(eventName),
           ...mappedEventProps,
           ...(mappedEventProps
             ? this.eventPropsToPrefixedEventProps(eventName, mappedEventProps)