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

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.js

@@ -1,7 +1,7 @@
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js";
 import { ChatPreviewComparisonWidgetWithBaseWidget } from "../ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js";
-import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import useGetWidgetStatus_default from "../hooks/useGetWidgetStatus.js";
+import { ChatPreviewWidgetWithBaseWidget } from "../ChatPreviewWidget/ChatPreviewWidget.js";
 import { TypingAnimationWithBaseWidget } from "../TypingAnimationWidget/TypingAnimationWidget.js";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime14.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime14.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchResults/SearchResultsWidget.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchResults/SearchResultsWidget.d.ts
 //#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
+declare const SearchResultsWidget: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime3.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region ../widgets/dist/SearchZeroState/SearchZeroStateWidget.d.ts
 //#region src/SearchZeroState/SearchZeroStateWidget.d.ts
@@ -11,7 +11,7 @@ declare const SearchZeroStateWidget: ({
   initialIsOpen,
   widgetConfigId,
   entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime3.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 
 //#endregion

package/dist/widgets/dist/SuggestionBar/SuggestionBar.d.cts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.cjs";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime2.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/dist/SuggestionBar/SuggestionBar.d.ts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { SuggestionButtonVariant } from "@envive-ai/react-hooks/contexts/types";
 import { Message } from "postcss";
 
@@ -30,7 +30,7 @@ declare function SuggestionBar({
   buttonBorderRadius,
   handleReply,
   dataTestId
-}: Readonly<SuggestionBarProps>): react_jsx_runtime2.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",
@@ -120,6 +120,10 @@
       "import": "./dist/widgets/FloatingChatWidget/index.js",
       "require": "./dist/widgets/FloatingChatWidget/index.cjs"
     },
+    "./widgets/ProductCardWidget": {
+      "import": "./dist/widgets/ProductCardWidget/index.js",
+      "require": "./dist/widgets/ProductCardWidget/index.cjs"
+    },
     "./widgets/PromptButtonCarouselWithImageWidget": {
       "import": "./dist/widgets/PromptButtonCarouselWithImageWidget/index.js",
       "require": "./dist/widgets/PromptButtonCarouselWithImageWidget/index.cjs"

package/src/CXIntegration/hooks/useUnifiedCXButton.ts

@@ -1,6 +1,7 @@
 import { useAtomValue } from 'jotai';
 
-import { hasParsedVariantInfoAtom, supportedEventAtom } from '@envive-ai/react-hooks/atoms/app';
+import { hasParsedVariantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
+import { usePage } from '@envive-ai/react-hooks/contexts/pageContext';
 import { findCustomerServiceImpl } from '../utils/functions';
 import { CustomerServiceType, UnifiedCXButton } from '../types';
 
@@ -17,7 +18,7 @@ export const useUnifiedCXButton = ({
   suppressMerchantButton = false,
   onSwitchToAgent,
 }: UseUnifiedCXButtonProps): UnifiedCXButton | undefined => {
-  const supportedEvent = useAtomValue(supportedEventAtom);
+  const { isSupported } = usePage();
   const hasParsedVariantInfo = useAtomValue(hasParsedVariantInfoAtom);
 
   const customerService = findCustomerServiceImpl(provider);
@@ -30,7 +31,7 @@ export const useUnifiedCXButton = ({
   if (!enabled) return undefined;
 
   if (suppressMerchantButton) {
-    const showUnifiedButton = hasParsedVariantInfo && supportedEvent?.supported;
+    const showUnifiedButton = hasParsedVariantInfo && isSupported;
     if (!showUnifiedButton) return undefined;
   }
 

package/src/stories/ProductCardWidget.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ProductCardWidget } from '../widgets/ProductCardWidget/ProductCardWidget';
+
+const meta = {
+  title: 'Widgets V3/ProductCardWidget',
+  component: ProductCardWidget,
+  tags: ['autodocs'],
+  args: {
+    widgetConfigId: 'product-card-test-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:
+          'ProductCardWidget is a widget wrapper that displays a product card with an image, headline, animated text, prompt carousel, and text input field. It includes base widget functionality such as visibility tracking, widget config fetching and hardcopy content fetching based on the widgetConfigId.',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          maxWidth: '350px',
+          height: '500px',
+          display: 'flex',
+          margin: '1rem',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ProductCardWidget>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    widgetConfigId: 'product-card-test-widget',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'ProductCardWidget with default configuration. The widget displays a product card with image, headline, animated text, prompt carousel, and text input field.',
+      },
+    },
+  },
+};

package/src/stories/SalesAgentTest/SalesAgentTest.tsx

@@ -1,9 +1,11 @@
+import { FormType } from '@spiffy-ai/commerce-api-client';
 import {
   PageVisitCategory,
   SuggestionCategory,
   useSalesAgent,
 } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useState } from 'react';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 
 export const SalesAgentTest = () => {
   const {
@@ -38,12 +40,15 @@ export const SalesAgentTest = () => {
         <button
           type="button"
           onClick={() =>
-            onSuggestionClicked({
-              id: '1',
-              category: SuggestionCategory.ProductBased,
-              content: 'test',
-              createdAt: new Date().toISOString(),
-            })
+            onSuggestionClicked(
+              {
+                id: '1',
+                category: SuggestionCategory.ProductBased,
+                content: 'test',
+                createdAt: new Date().toISOString(),
+              },
+              ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON,
+            )
           }
         >
           On Suggestion Clicked
@@ -75,7 +80,13 @@ export const SalesAgentTest = () => {
       <div>
         <button
           type="button"
-          onClick={onFormResponseSubmitted}
+          onClick={() =>
+            onFormResponseSubmitted({
+              filledSchema: { order_number: '123456', email: 'test@email.com' },
+              formResponseId: 'test-form-response-id',
+              formType: FormType.OrderLookup,
+            })
+          }
         >
           On Form Response Submitted
         </button>
@@ -100,7 +111,12 @@ export const SalesAgentTest = () => {
             }}
             type="button"
             key={suggestion.id}
-            onClick={() => onSuggestionClicked(suggestion)}
+            onClick={() =>
+              onSuggestionClicked(
+                suggestion,
+                ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON,
+              )
+            }
           >
             {suggestion.content}
           </button>

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -11,6 +11,7 @@ import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useCallback, useMemo } from 'react';
 import {
   ChatElementDisplayLocationV3,
+  Suggestion,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
 import { ChatPreviewComparison } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison';
@@ -22,7 +23,7 @@ import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
 
 const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
-  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { onSuggestionClicked } = useSalesAgent();
   const { openChat } = useChatToggle();
 
   const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
@@ -32,10 +33,6 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
 
   const { suggestions } = useAtomValue(chatAtom);
 
-  const promptButtonTexts = useMemo(() => {
-    return suggestions.map(suggestion => suggestion.content);
-  }, [suggestions]);
-
   const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
 
   const productImageUrls = useMemo(
@@ -62,10 +59,9 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     headlineText: hardcopyContent?.values?.headlineText,
     textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
     messageText,
-    promptButtonTexts,
   } as Pick<
     ChatPreviewComparisonProps['widgetContentProps'],
-    'headlineText' | 'messageText' | 'promptButtonTexts' | 'textFieldPlaceholderText' | 'titleLabel'
+    'headlineText' | 'messageText' | 'textFieldPlaceholderText' | 'titleLabel'
   >;
 
   const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
@@ -73,11 +69,14 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
   const handlePromptButtonClick = useCallback(
-    (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+    (suggestion: Suggestion) => {
+      onSuggestionClicked(
+        suggestion,
+        ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON,
+      );
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
     },
-    [onTypedMessageSubmitted, openChat],
+    [onSuggestionClicked, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
@@ -109,7 +108,7 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     titleLabel: hardCopyContent?.titleLabel,
     headlineText: hardCopyContent?.headlineText,
     messageText: hardCopyContent?.messageText,
-    promptButtonTexts: hardCopyContent?.promptButtonTexts,
+    promptButtons: suggestions,
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     images: images ?? [],
     logoSrc: logoSrc ?? undefined,

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -6,7 +6,10 @@ import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  Suggestion,
+} from '@envive-ai/react-hooks/application/models';
 import { useCallback, useEffect, useMemo } from 'react';
 import {
   SpiffyMetricsEventName,
@@ -20,17 +23,13 @@ import { getMessageText } from '../utils/functions';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
 
 const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
-  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { onSuggestionClicked } = useSalesAgent();
   const { openChat } = useChatToggle();
 
   const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
 
   const { suggestions } = useAtomValue(chatAtom);
 
-  const promptButtonTexts = useMemo(() => {
-    return suggestions.map(suggestion => suggestion.content);
-  }, [suggestions]);
-
   const messageText = useMemo(() => getMessageText(lastAssistantMessage), [lastAssistantMessage]);
 
   const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
@@ -42,11 +41,11 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const hardCopyContent = {
     titleLabel: hardcopyContent?.values?.titleLabel,
     textFieldPlaceholderText: hardcopyContent?.values?.textFieldPlaceholderText,
+    promptButtons: suggestions,
     messageText,
-    promptButtonTexts,
   } as Pick<
     ChatPreviewProps['widgetContentProps'],
-    'messageText' | 'promptButtonTexts' | 'textFieldPlaceholderText' | 'titleLabel'
+    'messageText' | 'promptButtons' | 'textFieldPlaceholderText' | 'titleLabel'
   >;
 
   const { trackEvent } = useAmplitude();
@@ -66,11 +65,11 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
   const handlePromptButtonClick = useCallback(
-    (text: string) => {
-      onTypedMessageSubmitted({ query: text, userTyped: false });
+    (suggestion: Suggestion) => {
+      onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
     },
-    [onTypedMessageSubmitted, openChat],
+    [onSuggestionClicked, openChat],
   );
 
   const handleTextFieldClick = useCallback(() => {
@@ -97,7 +96,7 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
   const widgetContentProps: ChatPreviewProps['widgetContentProps'] = {
     titleLabel: hardCopyContent?.titleLabel,
     messageText: hardCopyContent?.messageText,
-    promptButtonTexts: hardCopyContent?.promptButtonTexts,
+    promptButtons: hardCopyContent?.promptButtons,
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     logoSrc: logoSrc ?? undefined,
   };

package/src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx

@@ -21,7 +21,6 @@ export const FloatingChatOverlay = ({
   previewMode = false,
 }: FloatingChatOverlayProps) => {
   const overlayClasses = classNames(
-    'envive-floating-chat-overlay',
     previewMode ? 'envive-tw-absolute' : 'envive-tw-fixed',
     'envive-tw-top-0',
     'envive-tw-left-0',
@@ -32,7 +31,6 @@ export const FloatingChatOverlay = ({
   );
 
   const backdropClasses = classNames(
-    'envive-floating-chat-backdrop',
     'envive-tw-absolute',
     'envive-tw-top-0',
     'envive-tw-left-0',
@@ -45,7 +43,6 @@ export const FloatingChatOverlay = ({
   );
 
   const overlayContentClasses = classNames(
-    'envive-floating-chat-overlay-content',
     'envive-tw-relative',
     'envive-tw-flex',
     'envive-tw-justify-end',
@@ -63,6 +60,7 @@ export const FloatingChatOverlay = ({
         <motion.div
           key="floating-chat-overlay"
           className={overlayClasses}
+          style={{ top: '0px' }}
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -81,6 +79,7 @@ export const FloatingChatOverlay = ({
           )}
           <div
             className={overlayContentClasses}
+            style={{ top: '0px' }}
             onClick={onClose}
             onKeyDown={e => {
               if (e.key === 'Escape') {

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { Suspense, lazy, useEffect, useMemo, useRef } from 'react';
 import {
   FloatingChatConfig,
   LookAndFeelConfig,
@@ -8,7 +8,6 @@ import {
   SpiffyMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
-import { FloatingChat } from '@envive-ai/react-toolkit-v3/FloatingChat';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import {
@@ -29,6 +28,10 @@ import { FLOATING_BUTTON_ID } from './constants';
 import { CustomerServiceType } from '../../CXIntegration/types';
 import { useFloatingButtonVisibility } from './hooks/useFloatingButtonVisibility';
 
+const FloatingChat = lazy(async () => ({
+  default: (await import('@envive-ai/react-toolkit-v3/FloatingChat')).FloatingChat,
+}));
+
 interface FloatingChatWidgetHandlerProps extends BaseWidgetProps {
   previewButtonOnly?: boolean;
   previewChatAlwaysOpen?: boolean;
@@ -41,7 +44,7 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
   const { userHasInteractedValue } = useGetWidgetStatus();
 
   // TODO: Get hardcopy
-  const { uiConfig, isUiConfigLoading } = props;
+  const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 
   // TODO: Figure out the issue and reenable this functionality
   // const { customerServiceIntegration } = uiConfig ?? {};
@@ -71,7 +74,7 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
 
   // Override isOpen for preview modes
   const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
-  const effectiveShouldRenderFloatingButton = !isOpen && shouldShowFloatingButton;
+  const effectiveShouldRenderFloatingButton = !effectiveIsOpen && shouldShowFloatingButton;
   const buttonShouldRender = previewButtonOnly ? true : effectiveShouldRenderFloatingButton;
 
   const theme = useMemo(() => {
@@ -111,20 +114,23 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
           }
           previewMode={!!previewChatAlwaysOpen}
         >
-          <FloatingChat
-            theme={theme}
-            salesAgentData={salesAgentData}
-            floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
-            lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
-            isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
-            isFloatingChatOpen={effectiveIsOpen}
-            onToggleCXButton={toggle}
-            onClose={
-              previewChatAlwaysOpen
-                ? () => {}
-                : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
-            }
-          />
+          <Suspense>
+            <FloatingChat
+              theme={theme}
+              salesAgentData={salesAgentData}
+              hardcopyContent={hardcopyContent}
+              floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
+              lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+              isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
+              isFloatingChatOpen={effectiveIsOpen}
+              onToggleCXButton={toggle}
+              onClose={
+                previewChatAlwaysOpen
+                  ? () => {}
+                  : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+              }
+            />
+          </Suspense>
         </FloatingChatOverlay>
       )}
 

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -0,0 +1,112 @@
+import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { useCallback, useEffect } from 'react';
+import {
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { ProductCard } from '@envive-ai/react-toolkit-v3/ProductCard';
+import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { BaseWidgetProps, withBaseWidget } from '../../hocs/withBaseWidget';
+
+const mockPrompts = [
+  'Loading prompt 1',
+  'Loading prompt 2',
+  'Loading prompt 3',
+  'Loading prompt 4',
+  'Loading prompt 5',
+];
+
+const mockHeadline = 'Loading...';
+const mockAnimatedText = ['Loading...'];
+
+const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
+  const { onTypedMessageSubmitted } = useSalesAgent();
+  const { openChat } = useChatToggle();
+  const { hardcopyContent, widgetConfig, isLoading } = props;
+
+  const hardCopyHeadline = hardcopyContent?.values?.headline as string | undefined;
+  const headline = isLoading ? mockHeadline : hardCopyHeadline || '';
+
+  const hardCopyAnimatedText = (hardcopyContent?.values?.animatedText as string[]) || [];
+  const animatedText = isLoading ? mockAnimatedText : hardCopyAnimatedText;
+
+  const hardCopyPrompts = (hardcopyContent?.values?.prompts as string[]) || [];
+  const prompts = isLoading ? mockPrompts : hardCopyPrompts;
+
+  const hardCopyPlaceholder = hardcopyContent?.values?.placeholder as string | undefined;
+  const placeholder = hardCopyPlaceholder;
+
+  const productCardWidgetConfig = widgetConfig as ProductCardWidgetV3Config;
+
+  const carouselId = productCardWidgetConfig?.contentId || '';
+  const promptButtonType =
+    (productCardWidgetConfig?.promptButtonType as PromptButtonVariant) || PromptButtonVariant.LIGHT;
+  const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
+  const fallbackColor = productCardWidgetConfig?.fallbackColor;
+  const imageSrc = productCardWidgetConfig?.imageSrc || '';
+
+  const { trackEvent } = useAmplitude();
+
+  const { widgetConfigId } = props;
+  useEffect(() => {
+    trackEvent({
+      eventName: SpiffyMetricsEventName.ChatComponentVisible,
+      eventProps: {
+        widget_config_id: widgetConfigId,
+        widget_type: WidgetTypeV3.ProductCardV3,
+      },
+    });
+  }, [trackEvent, widgetConfigId]);
+
+  const handleSelect = useCallback(
+    (prompt: string) => {
+      onTypedMessageSubmitted({ query: prompt, userTyped: false });
+      openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+    },
+    [onTypedMessageSubmitted, openChat],
+  );
+
+  const handleInputClick = useCallback(() => {
+    openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+  }, [openChat]);
+
+  return (
+    <ProductCard
+      theme={Theme.GLOBAL_CUSTOM}
+      imageSrc={imageSrc}
+      fallbackColor={fallbackColor}
+      headline={headline}
+      italicizeHeadline={italicizeHeadline}
+      animatedText={animatedText}
+      prompts={prompts}
+      promptButtonType={promptButtonType}
+      carouselId={carouselId}
+      placeholder={placeholder}
+      textTypingDuration={800}
+      textTransition={2000}
+      onSelect={handleSelect}
+      onInputClick={handleInputClick}
+    />
+  );
+};
+
+const ProductCardWidgetWithBaseWidget = withBaseWidget<BaseWidgetProps>(ProductCardWidgetHandler);
+
+export interface ProductCardWidgetProps {
+  widgetConfigId: string;
+}
+
+export const ProductCardWidget = ({ widgetConfigId }: ProductCardWidgetProps) => {
+  return (
+    <ProductCardWidgetWithBaseWidget
+      widgetConfigId={widgetConfigId}
+      widgetType={WidgetTypeV3.ProductCardV3}
+    />
+  );
+};
+
+ProductCardWidget.displayName = 'ProductCardWidget';

package/src/widgets/ProductCardWidget/index.ts

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