@envive-ai/react-widgets-v3 0.3.14 → 0.3.15-alpha.1

package/dist/src/widgets/SocialProofWidget/SocialProofWidget.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from 'react';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { PageVariant, SocialProof, WidgetKind, } from '@envive-ai/react-toolkit-v3/SocialProof';
+import { ChatElementDisplayLocationV3, VariantTypeEnum, } from '@envive-ai/react-hooks/application/models';
+import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
+import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude, } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import { WidgetInteractionComponent, WidgetInteractionType, } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { useProductImageUrl } from '@envive-ai/react-hooks/hooks/ProductImageUrl';
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { getStringIdForText } from '../utils/functions';
+const SocialProofWidgetHandler = (props) => {
+    const setChatPreviewLoadingData = useSetAtom(chatPreviewLoadingDataAtom);
+    const { onTypedMessageSubmitted } = useSalesAgent();
+    const { openChat } = useChatToggle();
+    const variantInfo = useAtomValue(variantInfoAtom);
+    const { trackWidgetInteraction } = useWidgetInteraction();
+    const { onClick: onSuggestionClick, onHover, onDrag, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, } = usePromptCarouselAnalytics(WidgetInteractionComponent.SOCIAL_PROOF, text => text);
+    const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+    const socialProofWidgetConfig = widgetConfig;
+    const id = widgetConfig?.contentId;
+    const { pageVariant, countKey } = useMemo(() => {
+        if (variantInfo.variant === VariantTypeEnum.Pdp) {
+            return {
+                pageVariant: PageVariant.PDP,
+                countKey: variantInfo.productId,
+            };
+        }
+        if (variantInfo.variant === VariantTypeEnum.Plp) {
+            return {
+                pageVariant: PageVariant.PLP,
+                countKey: variantInfo.plpId,
+            };
+        }
+        return {
+            pageVariant: PageVariant.PageVisit,
+            countKey: variantInfo.url || variantInfo.pageVisitCategory,
+        };
+    }, [variantInfo]);
+    const hardCopyContent = {
+        titleLabel: hardcopyContent?.values?.titleLabel,
+        customerQueryText: hardcopyContent?.values?.customerQueryText,
+        primaryButtonText: hardcopyContent?.values?.primaryButtonText,
+        secondaryButtonTitleText: hardcopyContent?.values?.secondaryButtonTitleText,
+        secondaryButtonTexts: hardcopyContent?.values?.secondaryButtonTexts,
+        textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
+    };
+    const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+    const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+    const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
+    const dynamicImageUrl = useProductImageUrl(productId);
+    const images = socialProofWidgetConfig?.kind !== WidgetKind.DYNAMIC
+        ? socialProofWidgetConfig?.images
+        : [{ src: dynamicImageUrl, alt: 'Product Image' }];
+    const { trackEvent } = useAmplitude();
+    useEffect(() => {
+        trackEvent({
+            eventName: SpiffyMetricsEventName.ChatComponentVisible,
+            eventProps: {
+                widget_config_id: widgetConfigId,
+                widget_type: WidgetTypeV3.SocialProofV3,
+            },
+        });
+    }, [trackEvent, widgetConfigId]);
+    const handlePrimaryButtonClick = useCallback((text) => {
+        const rawValues = hardcopyContent?.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.SOCIAL_PROOF_PRIMARY_BUTTON,
+        });
+        openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_PRIMARY_BUTTON);
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.SOCIAL_PROOF,
+                widget_interaction: WidgetInteractionType.SUGGESTION_CLICKED,
+                widget_interaction_data: {
+                    suggestion_clicked: {
+                        suggestion_id: text,
+                    },
+                },
+            },
+        });
+    }, [onTypedMessageSubmitted, openChat]);
+    const handlePrimaryButtonHover = useCallback((text) => {
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.SOCIAL_PROOF,
+                widget_interaction: WidgetInteractionType.WIDGET_HOVERED,
+                widget_interaction_data: {
+                    suggestion_hovered: {
+                        suggestion_id: text,
+                    },
+                },
+            },
+        });
+    }, []);
+    const handleSecondaryButtonClick = useCallback((text) => {
+        const rawValues = hardcopyContent?.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.SOCIAL_PROOF_SECONDARY_BUTTON,
+        });
+        openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_SECONDARY_BUTTON);
+        onSuggestionClick(text);
+    }, [onTypedMessageSubmitted, openChat]);
+    const handleTextFieldClick = useCallback(() => {
+        openChat(ChatElementDisplayLocationV3.SOCIAL_PROOF_TEXT_FIELD);
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.SOCIAL_PROOF,
+                widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+            },
+        });
+    }, [openChat]);
+    if (isLoading) {
+        return _jsx(ChatPreviewLoading, { fullIsLoading: true });
+    }
+    setChatPreviewLoadingData({
+        widgetConfigId,
+        data: {
+            titleLabel: hardcopyContent?.values?.titleLabel,
+            textFieldPlaceholder: hardcopyContent?.values?.textFieldPlaceholderText,
+            logoSrc: logoSrc,
+            hideLogo: hideLogo ?? false,
+            variant: socialProofWidgetConfig?.variant,
+            hexCardColor: socialProofWidgetConfig?.hexCardColor,
+            hideTextField: socialProofWidgetConfig?.hideTextField ?? false,
+        },
+    });
+    const widgetStyleProps = {
+        theme: Theme.GLOBAL_CUSTOM,
+        variant: socialProofWidgetConfig?.variant,
+        kind: socialProofWidgetConfig?.kind,
+        primaryButtonVariant: socialProofWidgetConfig?.primaryButtonVariant,
+        secondaryButtonVariant: socialProofWidgetConfig?.secondaryButtonVariant,
+        promptCarouselRows: socialProofWidgetConfig?.promptCarouselRows,
+        imageGalleryLayout: socialProofWidgetConfig?.imageGalleryLayout,
+        hideImage: images?.length === 0 || images === undefined ? true : socialProofWidgetConfig?.hideImage,
+        hideTextField: socialProofWidgetConfig?.hideTextField,
+        hideLogo,
+        hexCardColor: socialProofWidgetConfig?.hexCardColor,
+        dynamicLayout: socialProofWidgetConfig?.dynamicLayout ?? undefined,
+    };
+    const widgetContentProps = {
+        titleLabel: hardCopyContent?.titleLabel,
+        customerQueryText: hardCopyContent?.customerQueryText,
+        primaryButtonText: hardCopyContent?.primaryButtonText,
+        secondaryButtonTitleText: hardCopyContent?.secondaryButtonTitleText,
+        secondaryButtonTexts: hardCopyContent?.secondaryButtonTexts,
+        textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
+        images: images ?? [],
+        logoSrc: logoSrc ?? undefined,
+    };
+    const widgetEventProps = {
+        handlePrimaryButtonClick,
+        handlePrimaryButtonHover,
+        handleSecondaryButtonClick,
+        handleSecondaryButtonHover: onHover,
+        handleSecondaryButtonDrag: onDrag,
+        handleSecondaryButtonMouseDown: onMouseDown,
+        handleSecondaryButtonMouseUp: onMouseUp,
+        handleSecondaryButtonTouchStart: onTouchStart,
+        handleSecondaryButtonTouchEnd: onTouchEnd,
+        handleTextFieldClick,
+    };
+    return (_jsx(SocialProof, { baseProps: { id, pageVariant, countKey }, widgetStyleProps: widgetStyleProps, widgetContentProps: widgetContentProps, widgetEventProps: widgetEventProps }));
+};
+export const SocialProofWidgetWithBaseWidget = withBaseWidget(SocialProofWidgetHandler);
+export const SocialProofWidget = ({ widgetConfigId }) => {
+    return (_jsx(SocialProofWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.SocialProofV3 }));
+};
+SocialProofWidget.displayName = 'SocialProofWidget';

package/dist/src/widgets/SocialProofWidget/__tests__/SocialProofWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/widgets/SocialProofWidget/__tests__/SocialProofWidget.test.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { EnviveMetricsEventName, SpiffyMetricsEventName, } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { SocialProofWidget } from '../SocialProofWidget';
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+vi.mock('@envive-ai/react-toolkit-v3/SocialProof', async (importOriginal) => {
+    const actual = await importOriginal();
+    const MockSocialProof = ({ widgetContentProps, widgetEventProps, }) => (_jsx("div", { "data-testid": "social-proof-mock", children: _jsx("button", { type: "button", onClick: () => widgetEventProps.handlePrimaryButtonClick(widgetContentProps.primaryButtonText || 'Primary'), children: widgetContentProps.primaryButtonText || 'Primary' }) }));
+    return {
+        ...actual,
+        SocialProof: MockSocialProof,
+    };
+});
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+    useAmplitude: () => ({
+        trackEvent: mockTrackEvent,
+        isReady: true,
+    }),
+    SpiffyMetricsEventName: {
+        ChatComponentVisible: 'Chat Component Visible',
+        SearchComponentVisible: 'Search Component Visible',
+    },
+    EnviveMetricsEventName: {
+        WidgetTextClicked: 'Widget Text Clicked',
+    },
+}));
+vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
+    useHardcopy: () => ({
+        getHardcopy: mockGetHardcopy,
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
+    usePage: () => ({
+        userEvent: {
+            id: 'test-user-event-id',
+            category: UserEventCategory.PageVisit,
+            created_at: '2025-01-01T00:00:00Z',
+            event_id: 'test-event-id',
+        },
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/widgetConfigContext', () => ({
+    useWidgetConfig: () => ({
+        getWidgetConfig: vi.fn().mockResolvedValue({}),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/uiConfigContext', () => ({
+    useUiConfig: () => ({
+        getUiConfig: vi.fn().mockResolvedValue({}),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
+    useSalesAgent: () => ({
+        onTypedMessageSubmitted: vi.fn(),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+    useChatToggle: () => ({
+        openChat: vi.fn(),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/atoms/chat', () => ({
+    lastAssistantMessageAtom: {},
+}));
+vi.mock('@envive-ai/react-hooks/atoms/app', () => ({
+    variantInfoAtom: {},
+}));
+vi.mock('@envive-ai/react-hooks/atoms/widget', () => ({
+    chatPreviewLoadingDataAtom: {},
+}));
+vi.mock('jotai', async (importOriginal) => {
+    const actual = await importOriginal();
+    const variantInfo = {
+        variant: 'PageVisit',
+        productId: undefined,
+        plpId: undefined,
+        url: '',
+        pageVisitCategory: '',
+    };
+    const useAtomValueMock = vi.fn();
+    useAtomValueMock.mockReturnValueOnce([]).mockReturnValueOnce(variantInfo).mockReturnValue([]);
+    return {
+        ...actual,
+        useAtomValue: useAtomValueMock,
+        useSetAtom: vi.fn(() => vi.fn()),
+    };
+});
+describe('SocialProofWidget analytics', () => {
+    const defaultHardcopy = {
+        responseId: 'test-response-id',
+        language: 'en',
+        values: {
+            primaryButtonText: 'Primary Button',
+            titleLabel: 'Title',
+        },
+        rawValues: {
+            primaryButtonText: { id: 'id-1', value: 'Primary Button' },
+        },
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+    });
+    it('should track ChatComponentVisible when widget mounts', async () => {
+        render(_jsx(SocialProofWidget, { widgetConfigId: "test-config-1" }));
+        await waitFor(() => {
+            expect(mockTrackEvent).toHaveBeenCalledWith({
+                eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                eventProps: {
+                    widget_config_id: 'test-config-1',
+                    widget_type: WidgetTypeV3.SocialProofV3,
+                },
+            });
+        }, { timeout: 3000 });
+    }, 5000);
+    it('should track WidgetTextClicked when primary button is clicked', async () => {
+        render(_jsx(SocialProofWidget, { widgetConfigId: "test-config-2" }));
+        await waitFor(() => {
+            expect(screen.getByText('Primary Button')).toBeInTheDocument();
+        }, { timeout: 3000 });
+        mockTrackEvent.mockClear();
+        screen.getByText('Primary Button').click();
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+            eventName: EnviveMetricsEventName.WidgetTextClicked,
+            eventProps: {
+                response_id: 'test-response-id',
+                string_id: 'id-1',
+                text: 'Primary Button',
+            },
+        });
+    }, 5000);
+});

package/dist/src/widgets/SocialProofWidget/index.d.ts

@@ -0,0 +1,2 @@
+export { SocialProofWidget, SocialProofWidgetWithBaseWidget } from './SocialProofWidget';
+export type { SocialProofWidgetProps } from './SocialProofWidget';

package/dist/src/widgets/SocialProofWidget/index.js

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

package/dist/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts

@@ -0,0 +1,7 @@
+export interface TitledPromptCarouselWidgetProps {
+    widgetConfigId: string;
+}
+export declare const TitledPromptCarouselWidget: {
+    ({ widgetConfigId }: TitledPromptCarouselWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude, } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { WidgetTypeV3, } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useCallback, useEffect } from 'react';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { WidgetInteractionComponent } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { AnimationSpeed, usePromptCarouselAnalytics, } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { TitledPromptCarousel } from '@envive-ai/react-toolkit-v3/TitledPromptCarousel';
+import { withBaseWidget } from '../../hocs/withBaseWidget';
+import { getStringIdForText } from '../utils/functions';
+const mockButtonTexts = [
+    'Loading button 1',
+    'Loading button 2',
+    'Loading button 3',
+    'Loading button 4',
+    'Loading button 5',
+];
+const mockTitleLabel = 'Loading...';
+const TitledPromptCarouselWidgetHandler = (props) => {
+    const { onTypedMessageSubmitted } = useSalesAgent();
+    const { openChat } = useChatToggle();
+    const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+    const { onClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.EMBEDDED_WIDGET, text => text);
+    const hardCopyTitleLabel = hardcopyContent?.values?.titleLabel;
+    const titleLabel = isLoading ? mockTitleLabel : hardCopyTitleLabel;
+    const titleAriaLabel = hardcopyContent?.values?.titleAriaLabel;
+    const promptCarouselAriaLabel = hardcopyContent?.values?.promptCarouselAriaLabel;
+    const promptButtonTexts = hardcopyContent?.values?.promptButtonTexts || [];
+    const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
+    const titledPromptCarouselWidgetConfig = widgetConfig;
+    const id = titledPromptCarouselWidgetConfig?.contentId;
+    const boldFirstButton = titledPromptCarouselWidgetConfig?.boldFirstButton;
+    const promptButtonType = titledPromptCarouselWidgetConfig?.promptButtonType;
+    const promptCarouselRows = titledPromptCarouselWidgetConfig?.promptCarouselRows;
+    const animationSpeed = isLoading
+        ? AnimationSpeed.NONE
+        : titledPromptCarouselWidgetConfig?.animationSpeed;
+    const { trackEvent } = useAmplitude();
+    useEffect(() => {
+        trackEvent({
+            eventName: SpiffyMetricsEventName.ChatComponentVisible,
+            eventProps: {
+                widget_config_id: widgetConfigId,
+                widget_type: WidgetTypeV3.TitledPromptCarouselV3,
+            },
+        });
+    }, [trackEvent, widgetConfigId]);
+    const handleButtonClick = useCallback((text) => {
+        const rawValues = hardcopyContent?.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.TITLED_PROMPT_CAROUSEL,
+        });
+        openChat(ChatElementDisplayLocationV3.TITLED_PROMPT_CAROUSEL);
+        onClick(text);
+    }, [onTypedMessageSubmitted, openChat]);
+    return (_jsx(TitledPromptCarousel, { id: id, titleLabel: titleLabel, titleAriaLabel: titleAriaLabel, isLoading: isLoading, boldFirstButton: boldFirstButton, promptButtonType: promptButtonType, promptCarouselRows: promptCarouselRows, animationSpeed: animationSpeed, handleButtonClick: handleButtonClick, handleButtonDrag: onDrag, handleButtonHover: onHover, handleButtonMouseDown: onMouseDown, handleButtonMouseUp: onMouseUp, handleButtonTouchStart: onTouchStart, handleButtonTouchEnd: onTouchEnd, promptButtonTexts: buttonTexts, promptCarouselAriaLabel: promptCarouselAriaLabel }));
+};
+const TitledPromptCarouselWidgetWithBaseWidget = withBaseWidget(TitledPromptCarouselWidgetHandler);
+export const TitledPromptCarouselWidget = ({ widgetConfigId }) => {
+    return (_jsx(TitledPromptCarouselWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.TitledPromptCarouselV3 }));
+};
+TitledPromptCarouselWidget.displayName = 'TitledPromptCarouselWidget';

package/dist/src/widgets/TitledPromptCarouselWidget/__tests__/TitledPromptCarouselWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/widgets/TitledPromptCarouselWidget/__tests__/TitledPromptCarouselWidget.test.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { EnviveMetricsEventName, SpiffyMetricsEventName, } from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { UserEventCategory } from '@spiffy-ai/commerce-api-client';
+import { TitledPromptCarouselWidget } from '../TitledPromptCarouselWidget';
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+vi.mock('@envive-ai/react-toolkit-v3/TitledPromptCarousel', () => ({
+    TitledPromptCarousel: ({ promptButtonTexts, handleButtonClick, }) => (_jsx("div", { "data-testid": "titled-prompt-carousel-mock", children: promptButtonTexts.map(text => (_jsx("button", { type: "button", onClick: () => handleButtonClick(text), children: text }, text))) })),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+    useAmplitude: () => ({
+        trackEvent: mockTrackEvent,
+        isReady: true,
+    }),
+    SpiffyMetricsEventName: {
+        ChatComponentVisible: 'Chat Component Visible',
+        SearchComponentVisible: 'Search Component Visible',
+    },
+    EnviveMetricsEventName: {
+        WidgetTextClicked: 'Widget Text Clicked',
+    },
+}));
+vi.mock('@envive-ai/react-hooks/contexts/hardcopyContext', () => ({
+    useHardcopy: () => ({
+        getHardcopy: mockGetHardcopy,
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/pageContext', () => ({
+    usePage: () => ({
+        userEvent: {
+            id: 'test-user-event-id',
+            category: UserEventCategory.PageVisit,
+            created_at: '2025-01-01T00:00:00Z',
+            event_id: 'test-event-id',
+        },
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/widgetConfigContext', () => ({
+    useWidgetConfig: () => ({
+        getWidgetConfig: vi.fn().mockResolvedValue({}),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/uiConfigContext', () => ({
+    useUiConfig: () => ({
+        getUiConfig: vi.fn().mockResolvedValue({}),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/salesAgentContext', () => ({
+    useSalesAgent: () => ({
+        onTypedMessageSubmitted: vi.fn(),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+    useChatToggle: () => ({
+        openChat: vi.fn(),
+    }),
+}));
+describe('TitledPromptCarouselWidget analytics', () => {
+    const defaultHardcopy = {
+        responseId: 'test-response-id',
+        language: 'en',
+        values: {
+            promptButtonTexts: ['Button 1', 'Button 2', 'Button 3'],
+        },
+        rawValues: {
+            promptButtonTexts: [
+                { id: 'id-1', value: 'Button 1' },
+                { id: 'id-2', value: 'Button 2' },
+            ],
+        },
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+    });
+    it('should track ChatComponentVisible when widget mounts', async () => {
+        render(_jsx(TitledPromptCarouselWidget, { widgetConfigId: "test-config-1" }));
+        await waitFor(() => {
+            expect(mockTrackEvent).toHaveBeenCalledWith({
+                eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                eventProps: {
+                    widget_config_id: 'test-config-1',
+                    widget_type: WidgetTypeV3.TitledPromptCarouselV3,
+                },
+            });
+        }, { timeout: 3000 });
+    }, 5000);
+    it('should track WidgetTextClicked when button is clicked', async () => {
+        render(_jsx(TitledPromptCarouselWidget, { widgetConfigId: "test-config-2" }));
+        await waitFor(() => {
+            expect(screen.getByText('Button 1')).toBeInTheDocument();
+        }, { timeout: 3000 });
+        mockTrackEvent.mockClear();
+        screen.getByText('Button 1').click();
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+            eventName: EnviveMetricsEventName.WidgetTextClicked,
+            eventProps: {
+                response_id: 'test-response-id',
+                string_id: 'id-1',
+                text: 'Button 1',
+            },
+        });
+    }, 5000);
+});

package/dist/src/widgets/TitledPromptCarouselWidget/index.d.ts

@@ -0,0 +1,2 @@
+export { TitledPromptCarouselWidget } from './TitledPromptCarouselWidget';
+export type { TitledPromptCarouselWidgetProps } from './TitledPromptCarouselWidget';

package/dist/src/widgets/TitledPromptCarouselWidget/index.js

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

package/dist/src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts

@@ -0,0 +1,7 @@
+export interface TypingAnimationFlowWidgetProps {
+    widgetConfigId: string;
+}
+export declare const TypingAnimationFlowWidget: {
+    ({ widgetConfigId }: TypingAnimationFlowWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
+import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { TypingAnimationWithBaseWidget } from '../TypingAnimationWidget/TypingAnimationWidget';
+import { ChatPreviewComparisonWidgetWithBaseWidget } from '../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget';
+import { ChatPreviewWidgetWithBaseWidget } from '../ChatPreviewWidget/ChatPreviewWidget';
+export const TypingAnimationFlowWidget = ({ widgetConfigId }) => {
+    const { userHasInteractedValue, userHasNotInteractedValue, isLoadingValue, isProductComparisonValue, } = useGetWidgetStatus();
+    if (userHasInteractedValue && isLoadingValue) {
+        return (_jsx(ChatPreviewLoadingWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ChatPreviewLoadingV3 }));
+    }
+    if (userHasInteractedValue && isProductComparisonValue) {
+        return (_jsx(ChatPreviewComparisonWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ChatPreviewComparisonV3 }));
+    }
+    if (userHasInteractedValue) {
+        return (_jsx(ChatPreviewWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ChatPreviewV3 }));
+    }
+    if (userHasNotInteractedValue) {
+        return (_jsx(TypingAnimationWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.TypingAnimationV3 }));
+    }
+    return _jsx(ChatPreviewLoading, { fullIsLoading: true });
+};
+TypingAnimationFlowWidget.displayName = 'TypingAnimationFlowWidget';

package/dist/src/widgets/TypingAnimationFlowWidget/index.d.ts

@@ -0,0 +1,3 @@
+import { TypingAnimationFlowWidget } from './TypingAnimationFlowWidget';
+export { TypingAnimationFlowWidget };
+export type { TypingAnimationFlowWidgetProps } from './TypingAnimationFlowWidget';

package/dist/src/widgets/TypingAnimationFlowWidget/index.js

@@ -0,0 +1,2 @@
+import { TypingAnimationFlowWidget } from './TypingAnimationFlowWidget';
+export { TypingAnimationFlowWidget };

package/dist/src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts

@@ -0,0 +1,12 @@
+import { BaseWidgetProps } from '../../hocs/withBaseWidget';
+export declare const TypingAnimationWithBaseWidget: {
+    (props: BaseWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface TypingAnimationWidgetProps {
+    widgetConfigId: string;
+}
+export declare const TypingAnimationWidget: {
+    ({ widgetConfigId }: TypingAnimationWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};