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

package/dist/hocs/withBaseWidget/withBaseWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime9.JSX.Element;
+  (props: P): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/hocs/withBaseWidget/withBaseWidget.d.ts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/hocs/withBaseWidget/withBaseWidget.d.ts
 declare function withBaseWidget<P extends BaseWidgetProps>(Widget: React.ComponentType<P>, options?: WithBaseWidgetOptions): {
-  (props: P): react_jsx_runtime15.JSX.Element;
+  (props: P): react_jsx_runtime17.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.cts

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

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime12.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.cts

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime0.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.d.ts
 declare const ChatPreviewLoadingWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime5.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime6.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewLoadingWidgetProps {
@@ -11,6 +11,6 @@ interface ChatPreviewLoadingWidgetProps {
 }
 declare const ChatPreviewLoadingWidget: ({
   widgetConfigId
-}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime5.JSX.Element;
+}: ChatPreviewLoadingWidgetProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { ChatPreviewLoadingWidget, ChatPreviewLoadingWidgetProps, ChatPreviewLoadingWidgetWithBaseWidget };

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.d.cts

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

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.d.ts
 declare const ChatPreviewWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime13.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewWidgetProps {
 declare const ChatPreviewWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewWidgetProps): react_jsx_runtime13.JSX.Element;
+  }: ChatPreviewWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.cjs

@@ -15,15 +15,15 @@ let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/rea
 let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
-let __envive_ai_react_toolkit_v3_FloatingChat = require("@envive-ai/react-toolkit-v3/FloatingChat");
 let __envive_ai_react_toolkit_v3_FloatingButton = require("@envive-ai/react-toolkit-v3/FloatingButton");
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
+const FloatingChat = (0, react.lazy)(async () => ({ default: (await import("@envive-ai/react-toolkit-v3/FloatingChat")).FloatingChat }));
 const FloatingChatWidgetHandler = (props) => {
 	const { previewButtonOnly, previewChatAlwaysOpen } = props;
 	const salesAgentData = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
 	const { userHasInteractedValue } = require_useGetWidgetStatus.default();
-	const { uiConfig, isUiConfigLoading } = props;
+	const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 	const { isSwitchEnabled, toggle } = require_useUnifiedCXButton.useUnifiedCXButton({
 		provider: require_types.CustomerServiceType.unsupported,
 		enabled: false,
@@ -37,7 +37,7 @@ const FloatingChatWidgetHandler = (props) => {
 		userHasInteracted: userHasInteractedValue
 	});
 	const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
-	const buttonShouldRender = previewButtonOnly ? true : !isOpen && shouldShowFloatingButton;
+	const buttonShouldRender = previewButtonOnly ? true : !effectiveIsOpen && shouldShowFloatingButton;
 	const theme = (0, react.useMemo)(() => {
 		if (isUiConfigLoading || !uiConfig) return __envive_ai_react_toolkit_v3_Tokens.Theme.STANDARD;
 		return uiConfig?.lookAndFeel?.theme ?? __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM;
@@ -60,16 +60,17 @@ const FloatingChatWidgetHandler = (props) => {
 		isOpened: effectiveIsOpen,
 		onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
 		previewMode: !!previewChatAlwaysOpen,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingChat.FloatingChat, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingChat, {
 			theme,
 			salesAgentData,
+			hardcopyContent,
 			floatingChatConfig: uiConfig?.floatingChat ?? {},
 			lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
 			isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
 			isFloatingChatOpen: effectiveIsOpen,
 			onToggleCXButton: toggle,
 			onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
-		})
+		}) })
 	}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
 		id: require_constants.FLOATING_BUTTON_ID,
 		variant: floatingButton?.style,

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -9,7 +9,7 @@ declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
     previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime13.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime8.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.d.ts
 interface FloatingChatWidgetProps {
@@ -9,7 +9,7 @@ declare const FloatingChatWidget: {
   ({
     previewButtonOnly,
     previewChatAlwaysOpen
-  }?: FloatingChatWidgetProps): react_jsx_runtime7.JSX.Element;
+  }?: FloatingChatWidgetProps): react_jsx_runtime10.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.js

@@ -6,7 +6,7 @@ import { CustomerServiceType } from "../../CXIntegration/types.js";
 import { FLOATING_BUTTON_ID } from "./constants.js";
 import { useUnifiedCXButton } from "../../CXIntegration/hooks/useUnifiedCXButton.js";
 import { useFloatingButtonVisibility } from "./hooks/useFloatingButtonVisibility.js";
-import { useEffect, useMemo, useRef } from "react";
+import { Suspense, lazy, useEffect, useMemo, useRef } from "react";
 import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
@@ -14,15 +14,15 @@ import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext
 import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
-import { FloatingChat } from "@envive-ai/react-toolkit-v3/FloatingChat";
 import { FloatingButton } from "@envive-ai/react-toolkit-v3/FloatingButton";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
+const FloatingChat = lazy(async () => ({ default: (await import("@envive-ai/react-toolkit-v3/FloatingChat")).FloatingChat }));
 const FloatingChatWidgetHandler = (props) => {
 	const { previewButtonOnly, previewChatAlwaysOpen } = props;
 	const salesAgentData = useSalesAgent();
 	const { userHasInteractedValue } = useGetWidgetStatus_default();
-	const { uiConfig, isUiConfigLoading } = props;
+	const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 	const { isSwitchEnabled, toggle } = useUnifiedCXButton({
 		provider: CustomerServiceType.unsupported,
 		enabled: false,
@@ -36,7 +36,7 @@ const FloatingChatWidgetHandler = (props) => {
 		userHasInteracted: userHasInteractedValue
 	});
 	const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
-	const buttonShouldRender = previewButtonOnly ? true : !isOpen && shouldShowFloatingButton;
+	const buttonShouldRender = previewButtonOnly ? true : !effectiveIsOpen && shouldShowFloatingButton;
 	const theme = useMemo(() => {
 		if (isUiConfigLoading || !uiConfig) return Theme.STANDARD;
 		return uiConfig?.lookAndFeel?.theme ?? Theme.GLOBAL_CUSTOM;
@@ -59,16 +59,17 @@ const FloatingChatWidgetHandler = (props) => {
 		isOpened: effectiveIsOpen,
 		onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY),
 		previewMode: !!previewChatAlwaysOpen,
-		children: /* @__PURE__ */ jsx(FloatingChat, {
+		children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(FloatingChat, {
 			theme,
 			salesAgentData,
+			hardcopyContent,
 			floatingChatConfig: uiConfig?.floatingChat ?? {},
 			lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
 			isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
 			isFloatingChatOpen: effectiveIsOpen,
 			onToggleCXButton: toggle,
 			onClose: previewChatAlwaysOpen ? () => {} : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
-		})
+		}) })
 	}), buttonShouldRender && /* @__PURE__ */ jsx(FloatingButton, {
 		id: FLOATING_BUTTON_ID,
 		variant: floatingButton?.style,

package/dist/widgets/ProductCardWidget/ProductCardWidget.cjs

@@ -0,0 +1,78 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget.cjs');
+require('../../hocs/withBaseWidget/index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
+let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
+let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
+let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
+let __envive_ai_react_toolkit_v3_ProductCard = require("@envive-ai/react-toolkit-v3/ProductCard");
+
+//#region src/widgets/ProductCardWidget/ProductCardWidget.tsx
+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) => {
+	const { onTypedMessageSubmitted } = (0, __envive_ai_react_hooks_contexts_salesAgentContext.useSalesAgent)();
+	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
+	const { hardcopyContent, widgetConfig, isLoading } = props;
+	const hardCopyHeadline = hardcopyContent?.values?.headline;
+	const headline = isLoading ? mockHeadline : hardCopyHeadline || "";
+	const hardCopyAnimatedText = hardcopyContent?.values?.animatedText || [];
+	const animatedText = isLoading ? mockAnimatedText : hardCopyAnimatedText;
+	const hardCopyPrompts = hardcopyContent?.values?.prompts || [];
+	const prompts = isLoading ? mockPrompts : hardCopyPrompts;
+	const placeholder = hardcopyContent?.values?.placeholder;
+	const productCardWidgetConfig = widgetConfig;
+	const carouselId = productCardWidgetConfig?.contentId || "";
+	const promptButtonType = productCardWidgetConfig?.promptButtonType || __envive_ai_react_toolkit_v3_PromptButton_types.PromptButtonVariant.LIGHT;
+	const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
+	const fallbackColor = productCardWidgetConfig?.fallbackColor;
+	const imageSrc = productCardWidgetConfig?.imageSrc || "";
+	const handleSelect = (0, react.useCallback)((prompt) => {
+		onTypedMessageSubmitted({
+			query: prompt,
+			userTyped: false
+		});
+		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+	}, [onTypedMessageSubmitted, openChat]);
+	const handleInputClick = (0, react.useCallback)(() => {
+		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+	}, [openChat]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ProductCard.ProductCard, {
+		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,
+		imageSrc,
+		fallbackColor,
+		headline,
+		italicizeHeadline,
+		animatedText,
+		prompts,
+		promptButtonType,
+		carouselId,
+		placeholder,
+		textTypingDuration: 800,
+		textTransition: 2e3,
+		onSelect: handleSelect,
+		onInputClick: handleInputClick
+	});
+};
+const ProductCardWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(ProductCardWidgetHandler);
+const ProductCardWidget = ({ widgetConfigId }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductCardWidgetWithBaseWidget, {
+		widgetConfigId,
+		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ProductCardV3
+	});
+};
+ProductCardWidget.displayName = "ProductCardWidget";
+
+//#endregion
+exports.ProductCardWidget = ProductCardWidget;

package/dist/widgets/ProductCardWidget/ProductCardWidget.d.cts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime17 from "react/jsx-runtime";
+
+//#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
+interface ProductCardWidgetProps {
+  widgetConfigId: string;
+}
+declare const ProductCardWidget: {
+  ({
+    widgetConfigId
+  }: ProductCardWidgetProps): react_jsx_runtime17.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ProductCardWidget, ProductCardWidgetProps };

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+
+//#region src/widgets/ProductCardWidget/ProductCardWidget.d.ts
+interface ProductCardWidgetProps {
+  widgetConfigId: string;
+}
+declare const ProductCardWidget: {
+  ({
+    widgetConfigId
+  }: ProductCardWidgetProps): react_jsx_runtime16.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { ProductCardWidget, ProductCardWidgetProps };

package/dist/widgets/ProductCardWidget/ProductCardWidget.js

@@ -0,0 +1,77 @@
+import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
+import "../../hocs/withBaseWidget/index.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
+import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
+import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
+import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
+import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
+import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
+import { ProductCard } from "@envive-ai/react-toolkit-v3/ProductCard";
+
+//#region src/widgets/ProductCardWidget/ProductCardWidget.tsx
+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) => {
+	const { onTypedMessageSubmitted } = useSalesAgent();
+	const { openChat } = useChatToggle();
+	const { hardcopyContent, widgetConfig, isLoading } = props;
+	const hardCopyHeadline = hardcopyContent?.values?.headline;
+	const headline = isLoading ? mockHeadline : hardCopyHeadline || "";
+	const hardCopyAnimatedText = hardcopyContent?.values?.animatedText || [];
+	const animatedText = isLoading ? mockAnimatedText : hardCopyAnimatedText;
+	const hardCopyPrompts = hardcopyContent?.values?.prompts || [];
+	const prompts = isLoading ? mockPrompts : hardCopyPrompts;
+	const placeholder = hardcopyContent?.values?.placeholder;
+	const productCardWidgetConfig = widgetConfig;
+	const carouselId = productCardWidgetConfig?.contentId || "";
+	const promptButtonType = productCardWidgetConfig?.promptButtonType || PromptButtonVariant.LIGHT;
+	const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
+	const fallbackColor = productCardWidgetConfig?.fallbackColor;
+	const imageSrc = productCardWidgetConfig?.imageSrc || "";
+	const handleSelect = useCallback((prompt) => {
+		onTypedMessageSubmitted({
+			query: prompt,
+			userTyped: false
+		});
+		openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_PROMPT_BUTTON);
+	}, [onTypedMessageSubmitted, openChat]);
+	const handleInputClick = useCallback(() => {
+		openChat(ChatElementDisplayLocationV3.PRODUCT_CARD_TEXT_FIELD);
+	}, [openChat]);
+	return /* @__PURE__ */ jsx(ProductCard, {
+		theme: Theme.GLOBAL_CUSTOM,
+		imageSrc,
+		fallbackColor,
+		headline,
+		italicizeHeadline,
+		animatedText,
+		prompts,
+		promptButtonType,
+		carouselId,
+		placeholder,
+		textTypingDuration: 800,
+		textTransition: 2e3,
+		onSelect: handleSelect,
+		onInputClick: handleInputClick
+	});
+};
+const ProductCardWidgetWithBaseWidget = withBaseWidget(ProductCardWidgetHandler);
+const ProductCardWidget = ({ widgetConfigId }) => {
+	return /* @__PURE__ */ jsx(ProductCardWidgetWithBaseWidget, {
+		widgetConfigId,
+		widgetType: WidgetTypeV3.ProductCardV3
+	});
+};
+ProductCardWidget.displayName = "ProductCardWidget";
+
+//#endregion
+export { ProductCardWidget };

package/dist/widgets/ProductCardWidget/index.cjs

@@ -0,0 +1,3 @@
+const require_ProductCardWidget = require('./ProductCardWidget.cjs');
+
+exports.ProductCardWidget = require_ProductCardWidget.ProductCardWidget;

package/dist/widgets/ProductCardWidget/index.d.cts

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

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

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

package/dist/widgets/ProductCardWidget/index.js

@@ -0,0 +1,3 @@
+import { ProductCardWidget } from "./ProductCardWidget.js";
+
+export { ProductCardWidget };

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.cts

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

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

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

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts
 interface PromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface PromptCarouselWidgetProps {
 declare const PromptCarouselWidget: {
   ({
     widgetConfigId
-  }: PromptCarouselWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: PromptCarouselWidgetProps): react_jsx_runtime13.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.d.ts
 interface PromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface PromptCarouselWidgetProps {
 declare const PromptCarouselWidget: {
   ({
     widgetConfigId
-  }: PromptCarouselWidgetProps): react_jsx_runtime8.JSX.Element;
+  }: PromptCarouselWidgetProps): react_jsx_runtime4.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts
 interface SocialProofFlowWidgetProps {
@@ -7,7 +7,7 @@ interface SocialProofFlowWidgetProps {
 declare const SocialProofFlowWidget: {
   ({
     widgetConfigId
-  }: SocialProofFlowWidgetProps): react_jsx_runtime16.JSX.Element;
+  }: SocialProofFlowWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/widgets/SocialProofFlowWidget/SocialProofFlowWidget.d.ts
 interface SocialProofFlowWidgetProps {
@@ -7,7 +7,7 @@ interface SocialProofFlowWidgetProps {
 declare const SocialProofFlowWidget: {
   ({
     widgetConfigId
-  }: SocialProofFlowWidgetProps): react_jsx_runtime16.JSX.Element;
+  }: SocialProofFlowWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/SocialProofWidget/SocialProofWidget.cjs

@@ -51,7 +51,7 @@ const SocialProofWidgetHandler = (props) => {
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	const dynamicImageUrl = require_functions.getProductImageUrl(lastAssistantMessage);
-	const images = socialProofWidgetConfig?.kind !== __envive_ai_react_hooks_contexts_typesV3.SocialProofWidgetKind.DYNAMIC ? socialProofWidgetConfig?.images : [{
+	const images = socialProofWidgetConfig?.kind !== __envive_ai_react_toolkit_v3_SocialProof.WidgetKind.DYNAMIC ? socialProofWidgetConfig?.images : [{
 		src: dynamicImageUrl,
 		alt: "Product Image"
 	}];
@@ -98,6 +98,7 @@ const SocialProofWidgetHandler = (props) => {
 	const widgetStyleProps = {
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,
 		variant: socialProofWidgetConfig?.variant,
+		kind: socialProofWidgetConfig?.kind,
 		primaryButtonVariant: socialProofWidgetConfig?.primaryButtonVariant,
 		secondaryButtonVariant: socialProofWidgetConfig?.secondaryButtonVariant,
 		promptCarouselRows: socialProofWidgetConfig?.promptCarouselRows,

package/dist/widgets/SocialProofWidget/SocialProofWidget.d.cts

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

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

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

package/dist/widgets/SocialProofWidget/SocialProofWidget.js

@@ -3,7 +3,7 @@ import { getProductImageUrl } from "../utils/functions.js";
 import { useCallback, useEffect, useMemo } from "react";
 import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { SocialProofWidgetKind, WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
+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";
@@ -13,7 +13,7 @@ import { ChatElementDisplayLocationV3, VariantTypeEnum } from "@envive-ai/react-
 import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
 import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoading";
 import { chatPreviewLoadingDataAtom } from "@envive-ai/react-hooks/atoms/widget";
-import { PageVariant, SocialProof } from "@envive-ai/react-toolkit-v3/SocialProof";
+import { PageVariant, SocialProof, WidgetKind } from "@envive-ai/react-toolkit-v3/SocialProof";
 
 //#region src/widgets/SocialProofWidget/SocialProofWidget.tsx
 const SocialProofWidgetHandler = (props) => {
@@ -50,7 +50,7 @@ const SocialProofWidgetHandler = (props) => {
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 	const dynamicImageUrl = getProductImageUrl(lastAssistantMessage);
-	const images = socialProofWidgetConfig?.kind !== SocialProofWidgetKind.DYNAMIC ? socialProofWidgetConfig?.images : [{
+	const images = socialProofWidgetConfig?.kind !== WidgetKind.DYNAMIC ? socialProofWidgetConfig?.images : [{
 		src: dynamicImageUrl,
 		alt: "Product Image"
 	}];
@@ -97,6 +97,7 @@ const SocialProofWidgetHandler = (props) => {
 	const widgetStyleProps = {
 		theme: Theme.GLOBAL_CUSTOM,
 		variant: socialProofWidgetConfig?.variant,
+		kind: socialProofWidgetConfig?.kind,
 		primaryButtonVariant: socialProofWidgetConfig?.primaryButtonVariant,
 		secondaryButtonVariant: socialProofWidgetConfig?.secondaryButtonVariant,
 		promptCarouselRows: socialProofWidgetConfig?.promptCarouselRows,

package/dist/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts
 interface TitledPromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface TitledPromptCarouselWidgetProps {
 declare const TitledPromptCarouselWidget: {
   ({
     widgetConfigId
-  }: TitledPromptCarouselWidgetProps): react_jsx_runtime2.JSX.Element;
+  }: TitledPromptCarouselWidgetProps): react_jsx_runtime3.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/widgets/TitledPromptCarouselWidget/TitledPromptCarouselWidget.d.ts
 interface TitledPromptCarouselWidgetProps {
@@ -7,7 +7,7 @@ interface TitledPromptCarouselWidgetProps {
 declare const TitledPromptCarouselWidget: {
   ({
     widgetConfigId
-  }: TitledPromptCarouselWidgetProps): react_jsx_runtime2.JSX.Element;
+  }: TitledPromptCarouselWidgetProps): react_jsx_runtime5.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime10.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime0.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationFlowWidget/TypingAnimationFlowWidget.d.ts
 interface TypingAnimationFlowWidgetProps {
@@ -7,7 +7,7 @@ interface TypingAnimationFlowWidgetProps {
 declare const TypingAnimationFlowWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationFlowWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: TypingAnimationFlowWidgetProps): react_jsx_runtime11.JSX.Element;
   displayName: string;
 };
 //#endregion

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_runtime15 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_runtime15.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_runtime15.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/widgets/TypingAnimationWidget/TypingAnimationWidget.d.ts
 declare const TypingAnimationWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime0.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
 };
 interface TypingAnimationWidgetProps {
@@ -12,7 +12,7 @@ interface TypingAnimationWidgetProps {
 declare const TypingAnimationWidget: {
   ({
     widgetConfigId
-  }: TypingAnimationWidgetProps): react_jsx_runtime0.JSX.Element;
+  }: TypingAnimationWidgetProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
 };
 //#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.8",
   "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/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,3 +1,4 @@
+import { FormType } from '@spiffy-ai/commerce-api-client';
 import {
   PageVisitCategory,
   SuggestionCategory,
@@ -75,7 +76,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>

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,95 @@
+import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
+import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
+import { useCallback } from 'react';
+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 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';

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -1,8 +1,4 @@
-import {
-  SocialProofWidgetKind,
-  SocialProofWidgetV3Config,
-  WidgetTypeV3,
-} from '@envive-ai/react-hooks/contexts/typesV3';
+import { SocialProofWidgetV3Config, 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';
@@ -12,6 +8,7 @@ import {
   PageVariant,
   SocialProof,
   SocialProofProps,
+  WidgetKind,
 } from '@envive-ai/react-toolkit-v3/SocialProof';
 
 import {
@@ -87,7 +84,7 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
   const dynamicImageUrl = getProductImageUrl(lastAssistantMessage);
 
   const images =
-    socialProofWidgetConfig?.kind !== SocialProofWidgetKind.DYNAMIC
+    socialProofWidgetConfig?.kind !== WidgetKind.DYNAMIC
       ? socialProofWidgetConfig?.images
       : [{ src: dynamicImageUrl, alt: 'Product Image' }];
 
@@ -143,6 +140,7 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
   const widgetStyleProps: SocialProofProps['widgetStyleProps'] = {
     theme: Theme.GLOBAL_CUSTOM,
     variant: socialProofWidgetConfig?.variant,
+    kind: socialProofWidgetConfig?.kind as WidgetKind,
     primaryButtonVariant: socialProofWidgetConfig?.primaryButtonVariant,
     secondaryButtonVariant: socialProofWidgetConfig?.secondaryButtonVariant,
     promptCarouselRows: socialProofWidgetConfig?.promptCarouselRows,