@envive-ai/react-widgets-v3 0.3.9 → 0.3.11

package/src/stories/FullPageSalesAgentWidget.stories.tsx

@@ -0,0 +1,68 @@
+import {
+  PageVisitCategory,
+  useSalesAgent,
+} from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { FullPageSalesAgentWidget } from '../widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget';
+
+const meta = {
+  title: 'Widgets V3/FullPageSalesAgentWidget',
+  component: FullPageSalesAgentWidget,
+  tags: ['autodocs'],
+  args: {
+    widgetConfigId: 'full-page-sales-agent-widget',
+  },
+  argTypes: {
+    widgetConfigId: {
+      control: 'text',
+      description:
+        'Unique identifier for the widget configuration. The widget will fetch the widget config and hardcopy content based on this ID.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'FullPageSalesAgentWidget is a widget wrapper around the FullPageSalesAgent component that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget renders a full-page sales agent experience.',
+      },
+    },
+  },
+  decorators: [
+    Story => {
+      const { logPageVisit, logUserEvent } = useSalesAgent();
+
+      useEffect(() => {
+        logUserEvent({
+          eventId: uuid(),
+          category: UserEventCategory.AppLoaded,
+          createdAt: new Date().toISOString(),
+        });
+        logPageVisit({ pageVisitCategory: PageVisitCategory.Homepage });
+      }, []);
+
+      return (
+        <div style={{ height: '100vh' }}>
+          <Story />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<typeof FullPageSalesAgentWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Experiment with different widgetConfigId values. The widget will fetch configuration from the widget config based on the widgetConfigId.',
+      },
+    },
+  },
+};

package/src/stories/SalesAgentTest/SalesAgentTest.tsx

@@ -61,7 +61,11 @@ export const SalesAgentTest = () => {
           onChange={e => setQuery(e.target.value)}
           onKeyDown={e => {
             if (e.key === 'Enter') {
-              onTypedMessageSubmitted({ query, userTyped: true });
+              onTypedMessageSubmitted({
+                query,
+                userTyped: true,
+                displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT,
+              });
               setQuery('');
             }
           }}
@@ -70,7 +74,11 @@ export const SalesAgentTest = () => {
         <button
           type="button"
           onClick={() => {
-            onTypedMessageSubmitted({ query, userTyped: true });
+            onTypedMessageSubmitted({
+              query,
+              userTyped: true,
+              displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT,
+            });
             setQuery('');
           }}
         >

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -20,6 +20,7 @@ import {
 } from '@envive-ai/react-toolkit-v3/FloatingButton';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { DebugBar } from 'src/debug/debugBar';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 import { FloatingChatOverlay } from './FloatingChatOverlay';
 import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
@@ -124,6 +125,7 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
               isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
               isFloatingChatOpen={effectiveIsOpen}
               onToggleCXButton={toggle}
+              debugBar={<DebugBar />}
               onClose={
                 previewChatAlwaysOpen
                   ? () => {}

package/src/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.ts

@@ -1,8 +1,9 @@
-import { useMemo } from 'react';
-import { useAtomValue } from 'jotai';
-import { featureFlagServiceAtom } from '@envive-ai/react-hooks/atoms/org';
 import { FeatureGates } from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { featureFlagServiceAtom } from '@envive-ai/react-hooks/atoms/org';
 import { FloatingButtonShow } from '@envive-ai/react-toolkit-v3/FloatingButton';
+import { useAtom, useAtomValue } from 'jotai';
+import { useMemo } from 'react';
 
 export interface UseFloatingButtonVisibilityProps {
   floatingButtonShowConfig?: FloatingButtonShow;
@@ -21,6 +22,10 @@ export const useFloatingButtonVisibility = ({
   userHasInteracted,
 }: UseFloatingButtonVisibilityProps): UseFloatingButtonVisibilityReturn => {
   const featureFlagService = useAtomValue(featureFlagServiceAtom);
+  const [variantInfo] = useAtom(variantInfoAtom);
+
+  const internalfloatingButtonShowConfig =
+    variantInfo.floatingButtonOverride ?? floatingButtonShowConfig;
 
   const isSalesAgentEnabled = useMemo(
     () =>
@@ -33,8 +38,9 @@ export const useFloatingButtonVisibility = ({
   const shouldShowFloatingButton =
     (isSalesAgentEnabled || isSalesAgentEnabled === undefined) &&
     !isChatOpen &&
-    (floatingButtonShowConfig === FloatingButtonShow.ALWAYS ||
-      (floatingButtonShowConfig === FloatingButtonShow.POST_INTERACTION && userHasInteracted));
+    (internalfloatingButtonShowConfig === FloatingButtonShow.ALWAYS ||
+      (internalfloatingButtonShowConfig === FloatingButtonShow.POST_INTERACTION &&
+        userHasInteracted));
 
   return {
     shouldShowFloatingButton,

package/src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.tsx

@@ -0,0 +1,46 @@
+import {
+  FloatingChatConfig,
+  FullPageSalesAgentWidgetV3Config,
+  LookAndFeelConfig,
+  WidgetTypeV3,
+} from '@envive-ai/react-hooks/contexts/typesV3';
+import { FullPageSalesAgent } from '@envive-ai/react-toolkit-v3/FullPageSalesAgent';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { BaseWidgetProps, withBaseWidget } from 'src/hocs/withBaseWidget';
+
+const FullPageSalesAgentHandler = ({
+  uiConfig,
+  hardcopyContent,
+  widgetConfig,
+}: BaseWidgetProps) => {
+  const { headerContainer, autoHeight } = (widgetConfig as FullPageSalesAgentWidgetV3Config) || {};
+
+  return (
+    <FullPageSalesAgent
+      theme={Theme.STANDARD}
+      floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
+      lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+      hardcopyContent={hardcopyContent}
+      headerContainer={headerContainer}
+      autoHeight={autoHeight}
+    />
+  );
+};
+
+export const FullPageSalesAgentBaseWidget =
+  withBaseWidget<BaseWidgetProps>(FullPageSalesAgentHandler);
+
+export interface FullPageSalesAgentBaseWidgetProps {
+  widgetConfigId: string;
+}
+
+export const FullPageSalesAgentWidget = ({ widgetConfigId }: FullPageSalesAgentBaseWidgetProps) => {
+  return (
+    <FullPageSalesAgentBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.FullPageSalesAgentV3}
+    />
+  );
+};
+
+FullPageSalesAgentWidget.displayName = 'FullPageSalesAgentWidget';

package/src/widgets/FullPageSalesAgentWidget/index.ts

@@ -0,0 +1 @@
+export { FullPageSalesAgentWidget } from './FullPageSalesAgentWidget';

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -64,7 +64,11 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleSelect = useCallback(
     (prompt: string) => {
-      onTypedMessageSubmitted({ query: prompt, userTyped: false });
+      onTypedMessageSubmitted({
+        query: prompt,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON,
+      });
       openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
     },
     [onTypedMessageSubmitted, openChat],

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -60,7 +60,12 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
 
   const handlePromptButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation:
+          ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON,
+      });
       openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
     },
     [onTypedMessageSubmitted, openChat],

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -7,6 +7,7 @@ import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useCallback, useEffect } from 'react';
 import {
+  EnviveMetricsEventName,
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
@@ -17,6 +18,20 @@ import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { PromptCarousel } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
 
+type RawWidgetString = { id: string; value: string };
+type RawValues = Record<string, RawWidgetString | RawWidgetString[]>;
+
+/** Finds the string_id (id) from raw widget text values for the given display text */
+function getStringIdForText(rawValues: RawValues | undefined, text: string): string | undefined {
+  if (!rawValues) return undefined;
+  for (const raw of Object.values(rawValues)) {
+    const list = Array.isArray(raw) ? raw : [raw];
+    const found = list.find((s: RawWidgetString) => s.value === text);
+    if (found) return found.id;
+  }
+  return undefined;
+}
+
 const mockButtonTexts = [
   'Loading button 1',
   'Loading button 2',
@@ -58,10 +73,24 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      const rawValues = (hardcopyContent as { rawValues?: RawValues } | undefined)?.rawValues;
+      const stringId = getStringIdForText(rawValues, text);
+      trackEvent({
+        eventName: EnviveMetricsEventName.WidgetTextClicked,
+        eventProps: {
+          response_id: hardcopyContent?.responseId,
+          string_id: stringId,
+          text,
+        },
+      });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.PROMPT_CAROUSEL,
+      });
       openChat(ChatElementDisplayLocationV3.PROMPT_CAROUSEL);
     },
-    [onTypedMessageSubmitted, openChat],
+    [trackEvent, hardcopyContent, onTypedMessageSubmitted, openChat],
   );
 
   return (

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -102,7 +102,11 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const handlePrimaryButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON,
+      });
       openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
     },
     [onTypedMessageSubmitted, openChat],
@@ -110,7 +114,11 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleSecondaryButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON,
+      });
       openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
     },
     [onTypedMessageSubmitted, openChat],

package/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.tsx

@@ -67,7 +67,11 @@ const TitledPromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL,
+      });
       openChat(ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
     },
     [onTypedMessageSubmitted, openChat],

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -72,7 +72,11 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
 
   const handleButtonClick = useCallback(
     (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+      onTypedMessageSubmitted({
+        query: text,
+        userTyped: false,
+        displayLocation: ChatElementDisplayLocationV3.TYPING_ANIMATION,
+      });
       onToggle(ChatElementDisplayLocationV3.TYPING_ANIMATION);
     },
     [onTypedMessageSubmitted, onToggle],