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

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

@@ -0,0 +1,32 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        ({ widgetConfigId }: import("../widgets/TitledPromptCarouselWidget").TitledPromptCarouselWidgetProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    tags: string[];
+    args: {
+        widgetConfigId: string;
+    };
+    argTypes: {
+        widgetConfigId: {
+            control: "text";
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        widgetConfigId: string;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Light: Story;
+export declare const Dark: Story;

package/dist/src/stories/TitledPromptCarouselWidget.stories.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TitledPromptCarouselWidget } from '../widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget';
+const meta = {
+    title: 'Widgets V3/TitledPromptCarouselWidget',
+    component: TitledPromptCarouselWidget,
+    tags: ['autodocs'],
+    args: {
+        widgetConfigId: 'titled-prompt-carousel-test-light-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: 'TitledPromptCarouselWidget is a widget wrapper that combines a Title component with a PromptCarousel component. It includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget automatically fetches title label, title logo, and prompt button texts from hardcopy and widget config based on the widgetConfigId.',
+            },
+        },
+    },
+    decorators: [
+        Story => (_jsx("div", { style: {
+                padding: '1rem',
+                maxWidth: '100%',
+                overflow: 'hidden',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Light = {
+    args: {
+        widgetConfigId: 'titled-prompt-carousel-test-light-widget',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'TitledPromptCarouselWidget in light mode. The widget displays with light prompt buttons.',
+            },
+        },
+    },
+};
+export const Dark = {
+    args: {
+        widgetConfigId: 'titled-prompt-carousel-test-dark-widget',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'TitledPromptCarouselWidget in dark mode. The widget displays with dark prompt buttons.',
+            },
+        },
+    },
+};

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

@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        ({ widgetConfigId }: import("../widgets/TypingAnimationFlowWidget").TypingAnimationFlowWidgetProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    tags: string[];
+    args: {
+        widgetConfigId: string;
+    };
+    argTypes: {
+        widgetConfigId: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        widgetConfigId: string;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const LightButtons: Story;
+export declare const DarkButtons: Story;

package/dist/src/stories/TypingAnimationFlowWidget.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TypingAnimationFlowWidget } from '../widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget';
+const meta = {
+    title: 'Widgets V3/TypingAnimationFlowWidget',
+    component: TypingAnimationFlowWidget,
+    tags: ['autodocs'],
+    args: {
+        widgetConfigId: 'typing-animation-test-light-widget',
+    },
+    argTypes: {
+        widgetConfigId: {
+            control: 'select',
+            options: ['typing-animation-test-light-widget', 'typing-animation-test-dark-widget'],
+            description: 'Unique identifier for the widget configuration. The widget will fetch the widget config based on this ID.',
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: 'TypingAnimationFlowWidget is a widget wrapper around TypingAnimation, ChatPreviewLoading and ChatPreview that includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching. The widget automatically fetches typing animation content (title, headline, animated text sequence, prompt buttons) from hardcopy and widget config based on the widgetConfigId. It handles post-interaction actions by transitioning to ChatPreview widget when the user interacts.',
+            },
+        },
+    },
+    decorators: [
+        Story => (_jsx("div", { style: {
+                padding: '1rem',
+                maxWidth: '100%',
+                overflow: 'hidden',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Playground = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Experiment with different widgetConfigId values. The widget will fetch typing animation content (title, headline, animated text sequence, prompt buttons) from hardcopy content and widget config based on the widgetConfigId. After user interaction, it will transition to ChatPreview widget.',
+            },
+        },
+    },
+};
+export const LightButtons = {
+    args: {
+        widgetConfigId: 'typing-animation-test-light-widget',
+    },
+};
+export const DarkButtons = {
+    args: {
+        widgetConfigId: 'typing-animation-test-dark-widget',
+    },
+};

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

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

package/dist/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+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 { useAtomValue } from 'jotai';
+import { ChatElementDisplayLocationV3, VariantTypeEnum, } from '@envive-ai/react-hooks/application/models';
+import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { EnviveMetricsEventName } 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 { ChatPreviewComparison } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useCallback, useMemo } from 'react';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
+const ChatPreviewComparisonWidgetHandler = (props) => {
+    const { onSuggestionClicked } = useSalesAgent();
+    const { openChat } = useChatToggle();
+    const { trackWidgetInteraction } = useWidgetInteraction();
+    const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, } = usePromptCarouselAnalytics(WidgetInteractionComponent.POST_INTERACTION_COMPARISON, text => text);
+    const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+    const variantInfo = useAtomValue(variantInfoAtom);
+    const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
+    const { suggestions } = useAtomValue(chatAtom);
+    const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
+    const productImageUrls = useMemo(() => (lastAssistantMessage ? getRecentProductImageUrls(lastAssistantMessage, productId) : []), [lastAssistantMessage, productId]);
+    const images = useMemo(() => productImageUrls
+        ? productImageUrls.map((url, index) => ({ src: url, alt: `Product Image ${index + 1}` }))
+        : [], [productImageUrls]);
+    const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+    const chatPreviewComparisonWidgetConfig = widgetConfig;
+    const id = widgetConfig?.contentId;
+    const hardCopyContent = {
+        titleLabel: hardcopyContent?.values?.titleLabel,
+        headlineText: hardcopyContent?.values?.headlineText,
+        textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
+        messageText,
+    };
+    const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+    const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+    const handlePromptButtonClick = useCallback((suggestion) => {
+        onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
+        openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
+        onPromptClicked(suggestion.id);
+    }, [onSuggestionClicked, openChat]);
+    const handleTextFieldClick = useCallback(() => {
+        openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+                widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+            },
+        });
+    }, [openChat]);
+    const handleLinkClick = (url) => {
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+                widget_interaction: WidgetInteractionType.LINK_CLICKED,
+                widget_interaction_data: {
+                    link_clicked: {
+                        url,
+                    },
+                },
+            },
+        });
+    };
+    if (isLoading) {
+        return (_jsx(ChatPreviewLoadingWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ChatPreviewLoadingV3 }));
+    }
+    const widgetStyleProps = {
+        theme: Theme.GLOBAL_CUSTOM,
+        variant: chatPreviewComparisonWidgetConfig?.variant,
+        hideImage: images?.length === 0 || images === undefined
+            ? true
+            : chatPreviewComparisonWidgetConfig?.hideImage,
+        hideTextField: chatPreviewComparisonWidgetConfig?.hideTextField,
+        hideLogo,
+        hexCardColor: chatPreviewComparisonWidgetConfig?.hexCardColor,
+    };
+    const widgetContentProps = {
+        titleLabel: hardCopyContent?.titleLabel,
+        headlineText: hardCopyContent?.headlineText,
+        messageText: hardCopyContent?.messageText,
+        promptButtons: suggestions,
+        textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
+        images: images ?? [],
+        logoSrc: logoSrc ?? undefined,
+    };
+    const widgetEventProps = {
+        handlePromptButtonClick,
+        handlePromptButtonDrag: onDrag,
+        handlePromptButtonHover: onHover,
+        handlePromptButtonMouseDown: onMouseDown,
+        handlePromptButtonMouseUp: onMouseUp,
+        handlePromptButtonTouchStart: onTouchStart,
+        handlePromptButtonTouchEnd: onTouchEnd,
+        handleLinkClick,
+        handleTextFieldClick,
+    };
+    return (_jsx(ChatPreviewComparison, { baseProps: { id }, widgetStyleProps: widgetStyleProps, widgetContentProps: widgetContentProps, widgetEventProps: widgetEventProps }));
+};
+export const ChatPreviewComparisonWidgetWithBaseWidget = withBaseWidget(ChatPreviewComparisonWidgetHandler);
+export const ChatPreviewComparisonWidget = ({ widgetConfigId, }) => {
+    return (_jsx(ChatPreviewComparisonWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ChatPreviewComparisonV3 }));
+};
+ChatPreviewComparisonWidget.displayName = 'ChatPreviewComparisonWidget';

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

@@ -0,0 +1,3 @@
+import { ChatPreviewComparisonWidget, ChatPreviewComparisonWidgetWithBaseWidget } from './ChatPreviewComparisonWidget';
+export { ChatPreviewComparisonWidget, ChatPreviewComparisonWidgetWithBaseWidget };
+export type { ChatPreviewComparisonWidgetProps } from './ChatPreviewComparisonWidget';

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

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

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

@@ -0,0 +1,9 @@
+import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
+export declare const ChatPreviewLoadingWidgetWithBaseWidget: {
+    (props: BaseWidgetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ChatPreviewLoadingWidgetProps {
+    widgetConfigId: string;
+}
+export declare const ChatPreviewLoadingWidget: ({ widgetConfigId }: ChatPreviewLoadingWidgetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WidgetTypeV3, } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useAtomValue } from 'jotai';
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
+import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { PromptCarouselWidget } from '../PromptCarouselWidget/PromptCarouselWidget';
+const ChatPreviewLoadingWidgetHandler = (props) => {
+    const { widgetConfig, isLoading, widgetConfigId, hardcopyContent, uiConfig } = props;
+    const chatPreviewLoadingWidgetConfig = widgetConfig;
+    const id = widgetConfig?.contentId;
+    const chatPreviewLoadingDataMap = useAtomValue(chatPreviewLoadingDataAtom);
+    const chatPreviewLoadingData = chatPreviewLoadingDataMap[widgetConfigId] ?? undefined;
+    const isCacheEmpty = !chatPreviewLoadingData ||
+        Object.values(chatPreviewLoadingData).every(value => value === undefined) ||
+        Object.keys(chatPreviewLoadingData).length === 0;
+    if (isLoading && isCacheEmpty) {
+        return _jsx(ChatPreviewLoading, { fullIsLoading: true });
+    }
+    const titleLabel = hardcopyContent?.values?.titleLabel ?? chatPreviewLoadingData?.titleLabel;
+    const textFieldPlaceholder = hardcopyContent?.values?.textFieldPlaceholderText ??
+        chatPreviewLoadingData?.textFieldPlaceholder;
+    const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo ?? chatPreviewLoadingData?.hideLogo;
+    const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc ?? chatPreviewLoadingData?.logoSrc;
+    const variant = chatPreviewLoadingWidgetConfig?.variant ?? chatPreviewLoadingData?.variant;
+    const hexCardColor = chatPreviewLoadingWidgetConfig?.hexCardColor ?? chatPreviewLoadingData?.hexCardColor;
+    const hideTextField = chatPreviewLoadingWidgetConfig?.hideTextField ?? chatPreviewLoadingData?.hideTextField;
+    return (_jsx(ChatPreviewLoading, { id: id, variant: variant, hexCardColor: hexCardColor, hideTextField: hideTextField, textFieldPlaceholder: textFieldPlaceholder, hideLogo: hideLogo, logoSrc: logoSrc, titleLabel: titleLabel }));
+};
+export const ChatPreviewLoadingWidgetWithBaseWidget = withBaseWidget(ChatPreviewLoadingWidgetHandler);
+export const ChatPreviewLoadingWidget = ({ widgetConfigId }) => {
+    return (_jsx(ChatPreviewLoadingWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ChatPreviewLoadingV3 }));
+};
+PromptCarouselWidget.displayName = 'PromptCarouselWidget';

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

@@ -0,0 +1,3 @@
+import { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetWithBaseWidget } from './ChatPreviewLoadingWidget';
+export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetWithBaseWidget };
+export type { ChatPreviewLoadingWidgetProps } from './ChatPreviewLoadingWidget';

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

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

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

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

package/dist/src/widgets/ChatPreviewWidget/ChatPreviewWidget.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
+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 { useAtomValue } from 'jotai';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { ChatElementDisplayLocationV3, } from '@envive-ai/react-hooks/application/models';
+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 { ChatPreview } from '@envive-ai/react-toolkit-v3/ChatPreview';
+import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { useCallback, useEffect, useMemo } from 'react';
+import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
+import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
+import { getMessageText } from '../utils/functions';
+const ChatPreviewWidgetHandler = (props) => {
+    const { onSuggestionClicked } = useSalesAgent();
+    const { openChat } = useChatToggle();
+    const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
+    const { suggestions } = useAtomValue(chatAtom);
+    const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
+    const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+    const chatPreviewWidgetConfig = widgetConfig;
+    const id = widgetConfig?.contentId;
+    const hardCopyContent = {
+        titleLabel: hardcopyContent?.values?.titleLabel,
+        textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
+        promptButtons: suggestions,
+        messageText,
+    };
+    const { trackEvent } = useAmplitude();
+    const { trackWidgetInteraction } = useWidgetInteraction();
+    const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd, } = usePromptCarouselAnalytics(WidgetInteractionComponent.CHAT_PREVIEW, text => text);
+    useEffect(() => {
+        // TODO: -Add Widget Interaction here
+        trackEvent({
+            eventName: SpiffyMetricsEventName.ChatComponentVisible,
+            eventProps: {
+                widget_config_id: widgetConfigId,
+                widget_type: WidgetTypeV3.ChatPreviewV3,
+            },
+        });
+    }, [trackEvent, widgetConfigId]);
+    const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
+    const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+    const handlePromptButtonClick = useCallback((suggestion) => {
+        onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
+        openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
+        onPromptClicked(suggestion.id);
+    }, [onSuggestionClicked, openChat]);
+    const handleTextFieldClick = useCallback(() => {
+        openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.CHAT_PREVIEW,
+                widget_interaction: WidgetInteractionType.QUERY_INPUT_CLICKED,
+            },
+        });
+    }, [openChat]);
+    const handleLinkClick = (url) => {
+        trackWidgetInteraction({
+            eventName: EnviveMetricsEventName.WidgetInteraction,
+            trigger: {
+                widget: WidgetInteractionComponent.CHAT_PREVIEW,
+                widget_interaction: WidgetInteractionType.LINK_CLICKED,
+                widget_interaction_data: {
+                    link_clicked: {
+                        url,
+                    },
+                },
+            },
+        });
+    };
+    if (isLoading) {
+        return (_jsx(ChatPreviewLoadingWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ChatPreviewLoadingV3 }));
+    }
+    const widgetStyleProps = {
+        theme: Theme.GLOBAL_CUSTOM,
+        variant: chatPreviewWidgetConfig?.variant,
+        hideTextField: chatPreviewWidgetConfig?.hideTextField,
+        hideLogo,
+        hexCardColor: chatPreviewWidgetConfig?.hexCardColor,
+    };
+    const widgetContentProps = {
+        titleLabel: hardCopyContent?.titleLabel,
+        messageText: hardCopyContent?.messageText,
+        promptButtons: hardCopyContent?.promptButtons,
+        textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
+        logoSrc: logoSrc ?? undefined,
+    };
+    const widgetEventProps = {
+        handlePromptButtonClick,
+        handlePromptButtonDrag: onDrag,
+        handlePromptButtonHover: onHover,
+        handlePromptButtonMouseDown: onMouseDown,
+        handlePromptButtonMouseUp: onMouseUp,
+        handlePromptButtonTouchStart: onTouchStart,
+        handlePromptButtonTouchEnd: onTouchEnd,
+        handleLinkClick,
+        handleTextFieldClick,
+    };
+    return (_jsx(ChatPreview, { baseProps: { id }, widgetStyleProps: widgetStyleProps, widgetContentProps: widgetContentProps, widgetEventProps: widgetEventProps }));
+};
+export const ChatPreviewWidgetWithBaseWidget = withBaseWidget(ChatPreviewWidgetHandler);
+export const ChatPreviewWidget = ({ widgetConfigId }) => {
+    return (_jsx(ChatPreviewWidgetWithBaseWidget, { widgetConfigId: widgetConfigId, widgetType: WidgetTypeV3.ChatPreviewV3 }));
+};
+ChatPreviewWidget.displayName = 'ChatPreviewWidget';

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

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

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, waitFor } from '@testing-library/react';
+import { 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 { ChatPreviewWidget } from '../ChatPreviewWidget';
+const mockTrackEvent = vi.fn();
+const mockGetHardcopy = vi.fn();
+vi.mock('@envive-ai/react-toolkit-v3/ChatPreview', () => ({
+    ChatPreview: () => _jsx("div", { "data-testid": "chat-preview-mock", children: "Chat Preview" }),
+}));
+vi.mock('@envive-ai/react-hooks/contexts/amplitudeContext', () => ({
+    useAmplitude: () => ({
+        trackEvent: mockTrackEvent,
+        isReady: true,
+    }),
+    SpiffyMetricsEventName: {
+        ChatComponentVisible: 'Chat Component Visible',
+        SearchComponentVisible: 'Search Component Visible',
+    },
+}));
+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: () => ({
+        onSuggestionClicked: vi.fn(),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/hooks/ChatToggle', () => ({
+    useChatToggle: () => ({
+        openChat: vi.fn(),
+    }),
+}));
+vi.mock('@envive-ai/react-hooks/atoms/chat', () => ({
+    chatAtom: {},
+    lastAssistantMessageAtom: {},
+}));
+vi.mock('jotai', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useAtomValue: vi
+            .fn()
+            .mockReturnValueOnce([])
+            .mockReturnValueOnce({ messages: [], suggestions: [] })
+            .mockReturnValue([]),
+    };
+});
+describe('ChatPreviewWidget analytics', () => {
+    const defaultHardcopy = {
+        responseId: 'test-response-id',
+        language: 'en',
+        values: {
+            titleLabel: 'Chat Preview',
+            textFieldPlaceholderText: 'Type here',
+        },
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockGetHardcopy.mockResolvedValue(defaultHardcopy);
+    });
+    it('should track ChatComponentVisible when widget mounts', async () => {
+        render(_jsx(ChatPreviewWidget, { widgetConfigId: "test-config-1" }));
+        await waitFor(() => {
+            expect(mockTrackEvent).toHaveBeenCalledWith({
+                eventName: SpiffyMetricsEventName.ChatComponentVisible,
+                eventProps: {
+                    widget_config_id: 'test-config-1',
+                    widget_type: WidgetTypeV3.ChatPreviewV3,
+                },
+            });
+        }, { timeout: 3000 });
+    }, 5000);
+});

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

@@ -0,0 +1,3 @@
+import { ChatPreviewWidget, ChatPreviewWidgetWithBaseWidget } from './ChatPreviewWidget';
+export { ChatPreviewWidget, ChatPreviewWidgetWithBaseWidget };
+export type { ChatPreviewWidgetProps } from './ChatPreviewWidget';

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

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

package/dist/src/widgets/FloatingChatWidget/FloatingChatOverlay.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface FloatingChatOverlayProps {
+    children?: ReactNode;
+    isOpened: boolean;
+    onClose: () => void;
+    className?: string;
+    dataTestId?: string;
+    previewMode?: boolean;
+    isResultsModalOpen?: boolean;
+}
+export declare const FloatingChatOverlay: {
+    ({ children, isOpened, onClose, className, dataTestId, previewMode, isResultsModalOpen, }: FloatingChatOverlayProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};