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

package/dist/src/widgets/ProductCardWidget/__tests__/ProductCardWidget.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 { ProductCardWidget } from '../ProductCardWidget';
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+vi.mock('@envive-ai/react-toolkit-v3/ProductCard', () => ({
+    ProductCard: ({ prompts, onSelect }) => (_jsx("div", { "data-testid": "product-card-mock", children: prompts.map(text => (_jsx("button", { type: "button", onClick: () => onSelect(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('ProductCardWidget analytics', () => {
+    const defaultHardcopy = {
+        responseId: 'test-response-id',
+        language: 'en',
+        values: {
+            prompts: ['Prompt 1', 'Prompt 2', 'Prompt 3'],
+        },
+        rawValues: {
+            prompts: [
+                { id: 'id-1', value: 'Prompt 1' },
+                { id: 'id-2', value: 'Prompt 2' },
+            ],
+        },
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+    });
+    it('should track ChatComponentVisible when widget mounts', async () => {
+        render(_jsx(ProductCardWidget, { widgetConfigId: "test-config-1" }));
+        await waitFor(() => {
+            expect(mockTrackEvent).toHaveBeenCalledWith({
+                eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                eventProps: {
+                    widget_config_id: 'test-config-1',
+                    widget_type: WidgetTypeV3.ProductCardV3,
+                },
+            });
+        }, { timeout: 3000 });
+    }, 5000);
+    it('should track WidgetTextClicked when prompt is selected', async () => {
+        render(_jsx(ProductCardWidget, { widgetConfigId: "test-config-2" }));
+        await waitFor(() => {
+            expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+        }, { timeout: 3000 });
+        mockTrackEvent.mockClear();
+        screen.getByText('Prompt 1').click();
+        expect(mockTrackEvent).toHaveBeenCalledWith({
+            eventName: EnviveMetricsEventName.WidgetTextClicked,
+            eventProps: {
+                response_id: 'test-response-id',
+                string_id: 'id-1',
+                text: 'Prompt 1',
+            },
+        });
+    }, 5000);
+});

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

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

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

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

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

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

package/dist/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { WidgetTypeV3, } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { ChatElementDisplayLocationV3, VariantTypeEnum, } from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+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 { PromptButtonCarouselWithImage, } from '@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useAtomValue } from 'jotai';
+import { useCallback, useEffect, useMemo } from 'react';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { getRecentProductImageUrls, getStringIdForText } from '../utils/functions';
+const PromptButtonCarouselWithImageWidgetHandler = (props) => {
+    const { onTypedMessageSubmitted } = useSalesAgent();
+    const { openChat } = useChatToggle();
+    const { trackWidgetInteraction } = useWidgetInteraction();
+    const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, } = usePromptCarouselAnalytics(WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, text => text);
+    const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+    const promptButtonCarouselWithImageWidgetConfig = widgetConfig;
+    const id = widgetConfig?.contentId;
+    const hardCopyContent = {
+        title: hardcopyContent?.values?.titleLabel,
+        promptButtonsTexts: hardcopyContent?.values?.promptButtonsTexts,
+        textFieldPlaceholder: hardcopyContent?.values?.textFieldPlaceholderText,
+    };
+    const { trackEvent } = useAmplitude();
+    useEffect(() => {
+        trackEvent({
+            eventName: SpiffyMetricsEventName.ChatComponentVisible,
+            eventProps: {
+                widget_config_id: widgetConfigId,
+                widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
+            },
+        });
+    }, [trackEvent, widgetConfigId]);
+    const handlePromptButtonClick = 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.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON,
+        });
+        openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
+        onSuggestionClick(text);
+    }, [onTypedMessageSubmitted, openChat]);
+    const handleTextFieldClick = useCallback(() => {
+        openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+                widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+            },
+        });
+    }, [openChat]);
+    const variantInfo = useAtomValue(variantInfoAtom);
+    const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
+    const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+    const productImageUrls = useMemo(() => (lastAssistantMessage ? getRecentProductImageUrls(lastAssistantMessage, productId) : []), [lastAssistantMessage, productId]);
+    const productImageUrl = productImageUrls[1] ?? productImageUrls[0] ?? '';
+    const isDynamic = promptButtonCarouselWithImageWidgetConfig?.isDynamic ?? false;
+    const finalImageSrc = isDynamic
+        ? productImageUrl
+        : promptButtonCarouselWithImageWidgetConfig?.image?.src;
+    const finalImageAlt = isDynamic
+        ? 'Product Image From Page'
+        : promptButtonCarouselWithImageWidgetConfig?.image?.alt;
+    return (_jsx(PromptButtonCarouselWithImage, { id: id, theme: Theme.GLOBAL_CUSTOM, isLoading: isLoading, title: hardCopyContent?.title, promptButtonsTexts: hardCopyContent?.promptButtonsTexts, promptButtonType: promptButtonCarouselWithImageWidgetConfig?.promptButtonType, imageSrc: finalImageSrc, alt: finalImageAlt, textFieldPlaceholder: hardCopyContent?.textFieldPlaceholder, hideTextField: promptButtonCarouselWithImageWidgetConfig?.hideTextField, handlePromptButtonClick: handlePromptButtonClick, handlePromptButtonDrag: onDrag, handlePromptButtonHover: onHover, handlePromptButtonMouseDown: onMouseDown, handlePromptButtonMouseUp: onMouseUp, handlePromptButtonTouchStart: onTouchStart, handlePromptButtonTouchEnd: onTouchEnd, handleTextFieldClick: handleTextFieldClick }));
+};
+export const PromptButtonCarouselWithImageWidgetWithBaseWidget = withBaseWidget(PromptButtonCarouselWithImageWidgetHandler);
+export const PromptButtonCarouselWithImageWidget = ({ widgetConfigId, }) => {
+    return (_jsx(PromptButtonCarouselWithImageWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.PromptButtonCarouselWithImageV3 }));
+};
+PromptButtonCarouselWithImageWidget.displayName = 'PromptButtonCarouselWithImageWidget';

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

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

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

@@ -0,0 +1,132 @@
+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 { PromptButtonCarouselWithImageWidget } from '../PromptButtonCarouselWithImageWidget';
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+vi.mock('@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage', () => ({
+    PromptButtonCarouselWithImage: ({ promptButtonsTexts = [], handlePromptButtonClick, }) => (_jsx("div", { "data-testid": "prompt-button-carousel-mock", children: (promptButtonsTexts ?? []).map(text => (_jsx("button", { type: "button", onClick: () => handlePromptButtonClick(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(),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/atoms/chat', () => ({
+    lastAssistantMessageAtom: {},
+}));
+vi.mock('@envive-ai/react-hooks/atoms/app', () => ({
+    variantInfoAtom: {},
+}));
+vi.mock('jotai', async (importOriginal) => {
+    const actual = await importOriginal();
+    const variantInfo = {
+        variant: 'PageVisit',
+        productId: undefined,
+        plpId: undefined,
+        url: '',
+        pageVisitCategory: '',
+    };
+    const useAtomValueMock = vi.fn();
+    let callCount = 0;
+    useAtomValueMock.mockImplementation(() => {
+        callCount += 1;
+        return callCount % 2 === 0 ? [] : variantInfo;
+    });
+    return {
+        ...actual,
+        useAtomValue: useAtomValueMock,
+    };
+});
+describe('PromptButtonCarouselWithImageWidget analytics', () => {
+    const defaultHardcopy = {
+        responseId: 'test-response-id',
+        language: 'en',
+        values: {
+            promptButtonsTexts: ['Button 1', 'Button 2', 'Button 3'],
+        },
+        rawValues: {
+            promptButtonsTexts: [
+                { 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(PromptButtonCarouselWithImageWidget, { widgetConfigId: "test-config-1" }));
+        await waitFor(() => {
+            expect(mockTrackEvent).toHaveBeenCalledWith({
+                eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                eventProps: {
+                    widget_config_id: 'test-config-1',
+                    widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
+                },
+            });
+        }, { timeout: 3000 });
+    }, 5000);
+    it('should track WidgetTextClicked when button is clicked', async () => {
+        render(_jsx(PromptButtonCarouselWithImageWidget, { 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/PromptButtonCarouselWithImageWidget/index.d.ts

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

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

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

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

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

package/dist/src/widgets/PromptCarouselWidget/PromptCarouselWidget.js

@@ -0,0 +1,74 @@
+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 { PromptCarousel, usePromptCarouselAnalytics, } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { AnimationSpeed } from '@envive-ai/react-toolkit-v3/PromptCarousel/types/types';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+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 PromptCarouselWidgetHandler = (props) => {
+    const { onTypedMessageSubmitted } = useSalesAgent();
+    const { openChat } = useChatToggle();
+    const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+    const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, } = usePromptCarouselAnalytics(WidgetInteractionComponent.SUGGESTION_BAR, text => {
+        const rawValues = hardcopyContent?.rawValues;
+        return getStringIdForText(rawValues, text);
+    });
+    const promptButtonTexts = hardcopyContent?.values?.promptButtonTexts || [];
+    const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
+    const promptCarouselWidgetConfig = widgetConfig;
+    const id = promptCarouselWidgetConfig?.contentId;
+    const boldFirstButton = promptCarouselWidgetConfig?.boldFirstButton;
+    const promptButtonType = promptCarouselWidgetConfig?.promptButtonType;
+    const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
+    const animationSpeed = isLoading
+        ? AnimationSpeed.NONE
+        : promptCarouselWidgetConfig?.animationSpeed;
+    const { trackEvent } = useAmplitude();
+    useEffect(() => {
+        trackEvent({
+            eventName: SpiffyMetricsEventName.ChatComponentVisible,
+            eventProps: {
+                widget_config_id: widgetConfigId,
+                widget_type: WidgetTypeV3.PromptCarouselV3,
+            },
+        });
+    }, [trackEvent, widgetConfigId]);
+    const handleButtonClick = useCallback((text) => {
+        const rawValues = hardcopyContent?.rawValues;
+        const stringId = getStringIdForText(rawValues, text);
+        onSuggestionClick(stringId);
+        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);
+    }, [trackEvent, hardcopyContent, onTypedMessageSubmitted, openChat]);
+    return (_jsx(PromptCarousel, { ...props, id: id, theme: Theme.GLOBAL_CUSTOM, isLoading: isLoading, boldFirstButton: boldFirstButton, promptButtonType: promptButtonType, promptCarouselRows: promptCarouselRows, animationSpeed: animationSpeed, handleButtonClick: handleButtonClick, handleButtonHover: onHover, handleButtonDrag: onDrag, handleButtonMouseUp: onMouseUp, handleButtonMouseDown: onMouseDown, handleButtonTouchStart: onTouchStart, handleButtonTouchEnd: onTouchEnd, promptButtonTexts: buttonTexts }));
+};
+const PromptCarouselWidgetWithBaseWidget = withBaseWidget(PromptCarouselWidgetHandler);
+export const PromptCarouselWidget = ({ widgetConfigId }) => {
+    return (_jsx(PromptCarouselWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.PromptCarouselV3 }));
+};
+PromptCarouselWidget.displayName = 'PromptCarouselWidget';

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

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

package/dist/src/widgets/PromptCarouselWidget/__tests__/PromptCarouselWidget.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 { PromptCarouselWidget } from '../PromptCarouselWidget';
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+vi.mock('@envive-ai/react-toolkit-v3/PromptCarousel', () => ({
+    PromptCarousel: ({ promptButtonTexts, handleButtonClick, }) => (_jsx("div", { "data-testid": "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('PromptCarouselWidget 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(PromptCarouselWidget, { widgetConfigId: "test-config-1" }));
+        await waitFor(() => {
+            expect(mockTrackEvent).toHaveBeenCalledWith({
+                eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                eventProps: {
+                    widget_config_id: 'test-config-1',
+                    widget_type: WidgetTypeV3.PromptCarouselV3,
+                },
+            });
+        }, { timeout: 3000 });
+    }, 5000);
+    it('should track WidgetTextClicked when button is clicked', async () => {
+        render(_jsx(PromptCarouselWidget, { 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/PromptCarouselWidget/index.d.ts

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

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

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

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

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

package/dist/src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.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 { SocialProofWidgetWithBaseWidget } from '../SocialProofWidget/SocialProofWidget';
+import { ChatPreviewComparisonWidgetWithBaseWidget } from '../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget';
+import { ChatPreviewWidgetWithBaseWidget } from '../ChatPreviewWidget/ChatPreviewWidget';
+export const SocialProofFlowWidget = ({ 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(SocialProofWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.SocialProofV3 }));
+    }
+    return _jsx(ChatPreviewLoading, { fullIsLoading: true });
+};
+SocialProofFlowWidget.displayName = 'SocialProofFlowWidget';

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

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

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

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

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

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