@envive-ai/react-widgets-v3 0.3.21 → 0.3.23

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.cjs

@@ -3,19 +3,25 @@ const require_withBaseWidget = require('../../hocs/withBaseWidget/withBaseWidget
 require('../../hocs/withBaseWidget/index.cjs');
 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_featureFlagServiceContext = require("@envive-ai/react-hooks/contexts/featureFlagServiceContext");
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_toolkit_v3_FullPageSalesAgent = require("@envive-ai/react-toolkit-v3/FullPageSalesAgent");
 
 //#region src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.tsx
 const FullPageSalesAgentHandler = ({ uiConfig, hardcopyContent, widgetConfig }) => {
 	const { headerContainer, autoHeight } = widgetConfig || {};
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+	const { featureFlagService } = (0, __envive_ai_react_hooks_contexts_featureFlagServiceContext.useFeatureFlagService)();
+	const isVoiceInputEnabled = featureFlagService?.isFeatureGateEnabled(__envive_ai_react_hooks_application_models.FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FullPageSalesAgent.FullPageSalesAgent, {
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.STANDARD,
 		floatingChatConfig: uiConfig?.floatingChat ?? {},
 		lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
 		hardcopyContent,
 		headerContainer,
-		autoHeight
+		autoHeight,
+		voiceInputEnabled: isVoiceInputEnabled
 	});
 };
 const FullPageSalesAgentBaseWidget = require_withBaseWidget.withBaseWidget(FullPageSalesAgentHandler);

package/dist/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.js

@@ -2,19 +2,25 @@ import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
+import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
+import { FeatureGates } from "@envive-ai/react-hooks/application/models";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
 import { FullPageSalesAgent } from "@envive-ai/react-toolkit-v3/FullPageSalesAgent";
 
 //#region src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.tsx
 const FullPageSalesAgentHandler = ({ uiConfig, hardcopyContent, widgetConfig }) => {
 	const { headerContainer, autoHeight } = widgetConfig || {};
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+	const { featureFlagService } = useFeatureFlagService();
+	const isVoiceInputEnabled = featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 	return /* @__PURE__ */ jsx(FullPageSalesAgent, {
 		theme: Theme.STANDARD,
 		floatingChatConfig: uiConfig?.floatingChat ?? {},
 		lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
 		hardcopyContent,
 		headerContainer,
-		autoHeight
+		autoHeight,
+		voiceInputEnabled: isVoiceInputEnabled
 	});
 };
 const FullPageSalesAgentBaseWidget = withBaseWidget(FullPageSalesAgentHandler);

package/dist/widgets/ProductCardWidget/ProductCardWidget.cjs

@@ -5,14 +5,15 @@ const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
-let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
+let __envive_ai_react_hooks_contexts_featureFlagServiceContext = require("@envive-ai/react-hooks/contexts/featureFlagServiceContext");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
-let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
+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_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
+let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
 let __envive_ai_react_toolkit_v3_ProductCard = require("@envive-ai/react-toolkit-v3/ProductCard");
 let __envive_ai_react_toolkit_v3_PromptButton_types = require("@envive-ai/react-toolkit-v3/PromptButton/types");
 
@@ -29,7 +30,7 @@ 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 { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 	const hardCopyHeadline = hardcopyContent?.values?.headline;
 	const headline = isLoading ? mockHeadline : hardCopyHeadline || "";
 	const hardCopyAnimatedText = hardcopyContent?.values?.animatedText || [];
@@ -43,22 +44,15 @@ const ProductCardWidgetHandler = (props) => {
 	const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
 	const fallbackColor = productCardWidgetConfig?.fallbackColor;
 	const imageSrc = productCardWidgetConfig?.imageSrc || "";
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+	const { featureFlagService } = (0, __envive_ai_react_hooks_contexts_featureFlagServiceContext.useFeatureFlagService)();
+	const isVoiceInputEnabled = featureFlagService?.isFeatureGateEnabled(__envive_ai_react_hooks_application_models.FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
 	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
 	const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = (0, __envive_ai_react_toolkit_v3_PromptCarousel.usePromptCarouselAnalytics)(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.IMAGE_PROMPT_CARD, (text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		return require_functions.getStringIdForText(rawValues, text);
 	});
-	const { widgetConfigId } = props;
-	(0, react.useEffect)(() => {
-		trackEvent({
-			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.ProductCardV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handleSelect = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = require_functions.getStringIdForText(rawValues, text);
@@ -93,6 +87,25 @@ const ProductCardWidgetHandler = (props) => {
 			}
 		});
 	}, [openChat]);
+	const handleTranscriptionStarted = (0, react.useCallback)(() => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED
+			}
+		});
+	}, []);
+	const handleTranscriptionCompleted = (0, react.useCallback)((transcript) => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	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,
@@ -104,6 +117,7 @@ const ProductCardWidgetHandler = (props) => {
 		promptButtonType,
 		carouselId,
 		placeholder,
+		voiceInputEnabled: isVoiceInputEnabled,
 		textTypingDuration: 800,
 		textTransition: 2e3,
 		onSelect: handleSelect,
@@ -113,7 +127,9 @@ const ProductCardWidgetHandler = (props) => {
 		onMouseUp,
 		onTouchStart,
 		onTouchEnd,
-		onInputClick: handleInputClick
+		onInputClick: handleInputClick,
+		onTranscriptionStarted: handleTranscriptionStarted,
+		onTranscriptionCompleted: handleTranscriptionCompleted
 	});
 };
 const ProductCardWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(ProductCardWidgetHandler);

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

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

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

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

package/dist/widgets/ProductCardWidget/ProductCardWidget.js

@@ -1,17 +1,18 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import "../../hocs/withBaseWidget/index.js";
 import { getStringIdForText } from "../utils/functions.js";
-import { useCallback, useEffect } from "react";
-import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useCallback } from "react";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
+import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
+import { ChatElementDisplayLocationV3, FeatureGates } 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 { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
-import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { ProductCard } from "@envive-ai/react-toolkit-v3/ProductCard";
 import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
 
@@ -28,7 +29,7 @@ const mockAnimatedText = ["Loading..."];
 const ProductCardWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = useSalesAgent();
 	const { openChat } = useChatToggle();
-	const { hardcopyContent, widgetConfig, isLoading } = props;
+	const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 	const hardCopyHeadline = hardcopyContent?.values?.headline;
 	const headline = isLoading ? mockHeadline : hardCopyHeadline || "";
 	const hardCopyAnimatedText = hardcopyContent?.values?.animatedText || [];
@@ -42,22 +43,15 @@ const ProductCardWidgetHandler = (props) => {
 	const italicizeHeadline = productCardWidgetConfig?.italicizeHeadline;
 	const fallbackColor = productCardWidgetConfig?.fallbackColor;
 	const imageSrc = productCardWidgetConfig?.imageSrc || "";
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+	const { featureFlagService } = useFeatureFlagService();
+	const isVoiceInputEnabled = featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 	const { trackEvent } = useAmplitude();
 	const { trackWidgetInteraction } = useWidgetInteraction();
 	const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.IMAGE_PROMPT_CARD, (text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		return getStringIdForText(rawValues, text);
 	});
-	const { widgetConfigId } = props;
-	useEffect(() => {
-		trackEvent({
-			eventName: SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: WidgetTypeV3.ProductCardV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handleSelect = useCallback((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = getStringIdForText(rawValues, text);
@@ -92,6 +86,25 @@ const ProductCardWidgetHandler = (props) => {
 			}
 		});
 	}, [openChat]);
+	const handleTranscriptionStarted = useCallback(() => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED
+			}
+		});
+	}, []);
+	const handleTranscriptionCompleted = useCallback((transcript) => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	return /* @__PURE__ */ jsx(ProductCard, {
 		theme: Theme.GLOBAL_CUSTOM,
 		imageSrc,
@@ -103,6 +116,7 @@ const ProductCardWidgetHandler = (props) => {
 		promptButtonType,
 		carouselId,
 		placeholder,
+		voiceInputEnabled: isVoiceInputEnabled,
 		textTypingDuration: 800,
 		textTransition: 2e3,
 		onSelect: handleSelect,
@@ -112,7 +126,9 @@ const ProductCardWidgetHandler = (props) => {
 		onMouseUp,
 		onTouchStart,
 		onTouchEnd,
-		onInputClick: handleInputClick
+		onInputClick: handleInputClick,
+		onTranscriptionStarted: handleTranscriptionStarted,
+		onTranscriptionCompleted: handleTranscriptionCompleted
 	});
 };
 const ProductCardWidgetWithBaseWidget = withBaseWidget(ProductCardWidgetHandler);

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.cjs

@@ -4,17 +4,18 @@ const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
-let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
-let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 let jotai = require("jotai");
+let __envive_ai_react_hooks_contexts_featureFlagServiceContext = require("@envive-ai/react-hooks/contexts/featureFlagServiceContext");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
-let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
-let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
+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_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
 let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
+let __envive_ai_react_hooks_atoms_app = require("@envive-ai/react-hooks/atoms/app");
+let __envive_ai_react_hooks_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
 let __envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage = require("@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage");
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx
@@ -23,7 +24,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 	const { openChat } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
 	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
 	const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = (0, __envive_ai_react_toolkit_v3_PromptCarousel.usePromptCarouselAnalytics)(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, (text) => text);
-	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+	const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 	const promptButtonCarouselWithImageWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
 	const hardCopyContent = {
@@ -32,15 +33,6 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		textFieldPlaceholder: hardcopyContent?.values?.textFieldPlaceholderText
 	};
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	(0, react.useEffect)(() => {
-		trackEvent({
-			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.PromptButtonCarouselWithImageV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handlePromptButtonClick = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = require_functions.getStringIdForText(rawValues, text);
@@ -70,6 +62,25 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 			}
 		});
 	}, [openChat]);
+	const handleTranscriptionStarted = (0, react.useCallback)(() => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED
+			}
+		});
+	}, []);
+	const handleTranscriptionCompleted = (0, react.useCallback)((transcript) => {
+		trackWidgetInteraction({
+			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	const variantInfo = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_app.variantInfoAtom);
 	const productId = variantInfo.variant === __envive_ai_react_hooks_application_models.VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
 	const lastAssistantMessage = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_chat.lastAssistantMessageAtom);
@@ -78,6 +89,9 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 	const isDynamic = promptButtonCarouselWithImageWidgetConfig?.isDynamic ?? false;
 	const finalImageSrc = isDynamic ? productImageUrl : promptButtonCarouselWithImageWidgetConfig?.image?.src;
 	const finalImageAlt = isDynamic ? "Product Image From Page" : promptButtonCarouselWithImageWidgetConfig?.image?.alt;
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+	const { featureFlagService } = (0, __envive_ai_react_hooks_contexts_featureFlagServiceContext.useFeatureFlagService)();
+	const isVoiceInputEnabled = featureFlagService?.isFeatureGateEnabled(__envive_ai_react_hooks_application_models.FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_PromptButtonCarouselWithImage.PromptButtonCarouselWithImage, {
 		id,
 		theme: __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM,
@@ -89,6 +103,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		alt: finalImageAlt,
 		textFieldPlaceholder: hardCopyContent?.textFieldPlaceholder,
 		hideTextField: promptButtonCarouselWithImageWidgetConfig?.hideTextField,
+		voiceInputEnabled: isVoiceInputEnabled,
 		handlePromptButtonClick,
 		handlePromptButtonDrag: onDrag,
 		handlePromptButtonHover: onHover,
@@ -96,7 +111,9 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		handlePromptButtonMouseUp: onMouseUp,
 		handlePromptButtonTouchStart: onTouchStart,
 		handlePromptButtonTouchEnd: onTouchEnd,
-		handleTextFieldClick
+		handleTextFieldClick,
+		onTranscriptionStarted: handleTranscriptionStarted,
+		onTranscriptionCompleted: handleTranscriptionCompleted
 	});
 };
 const PromptButtonCarouselWithImageWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(PromptButtonCarouselWithImageWidgetHandler);

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.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/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.d.ts
 declare const PromptButtonCarouselWithImageWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime11.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
 };
 interface PromptButtonCarouselWithImageWidgetProps {
@@ -12,7 +12,7 @@ interface PromptButtonCarouselWithImageWidgetProps {
 declare const PromptButtonCarouselWithImageWidget: {
   ({
     widgetConfigId
-  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime11.JSX.Element;
+  }: PromptButtonCarouselWithImageWidgetProps): react_jsx_runtime1.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_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime18 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_runtime18.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_runtime18.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.js

@@ -1,19 +1,20 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import { getRecentProductImageUrls, getStringIdForText } from "../utils/functions.js";
-import { useCallback, useEffect, useMemo } from "react";
-import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useCallback, useMemo } from "react";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { 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 { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
+import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
+import { ChatElementDisplayLocationV3, FeatureGates, VariantTypeEnum } 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 { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
+import { lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
+import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { PromptButtonCarouselWithImage } from "@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage";
 
 //#region src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx
@@ -22,7 +23,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 	const { openChat } = useChatToggle();
 	const { trackWidgetInteraction } = useWidgetInteraction();
 	const { onClick: onSuggestionClick, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, (text) => text);
-	const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+	const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 	const promptButtonCarouselWithImageWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
 	const hardCopyContent = {
@@ -31,15 +32,6 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		textFieldPlaceholder: hardcopyContent?.values?.textFieldPlaceholderText
 	};
 	const { trackEvent } = useAmplitude();
-	useEffect(() => {
-		trackEvent({
-			eventName: SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handlePromptButtonClick = useCallback((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = getStringIdForText(rawValues, text);
@@ -69,6 +61,25 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 			}
 		});
 	}, [openChat]);
+	const handleTranscriptionStarted = useCallback(() => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED
+			}
+		});
+	}, []);
+	const handleTranscriptionCompleted = useCallback((transcript) => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	const variantInfo = useAtomValue(variantInfoAtom);
 	const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : void 0;
 	const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
@@ -77,6 +88,9 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 	const isDynamic = promptButtonCarouselWithImageWidgetConfig?.isDynamic ?? false;
 	const finalImageSrc = isDynamic ? productImageUrl : promptButtonCarouselWithImageWidgetConfig?.image?.src;
 	const finalImageAlt = isDynamic ? "Product Image From Page" : promptButtonCarouselWithImageWidgetConfig?.image?.alt;
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+	const { featureFlagService } = useFeatureFlagService();
+	const isVoiceInputEnabled = featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 	return /* @__PURE__ */ jsx(PromptButtonCarouselWithImage, {
 		id,
 		theme: Theme.GLOBAL_CUSTOM,
@@ -88,6 +102,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		alt: finalImageAlt,
 		textFieldPlaceholder: hardCopyContent?.textFieldPlaceholder,
 		hideTextField: promptButtonCarouselWithImageWidgetConfig?.hideTextField,
+		voiceInputEnabled: isVoiceInputEnabled,
 		handlePromptButtonClick,
 		handlePromptButtonDrag: onDrag,
 		handlePromptButtonHover: onHover,
@@ -95,7 +110,9 @@ const PromptButtonCarouselWithImageWidgetHandler = (props) => {
 		handlePromptButtonMouseUp: onMouseUp,
 		handlePromptButtonTouchStart: onTouchStart,
 		handlePromptButtonTouchEnd: onTouchEnd,
-		handleTextFieldClick
+		handleTextFieldClick,
+		onTranscriptionStarted: handleTranscriptionStarted,
+		onTranscriptionCompleted: handleTranscriptionCompleted
 	});
 };
 const PromptButtonCarouselWithImageWidgetWithBaseWidget = withBaseWidget(PromptButtonCarouselWithImageWidgetHandler);

package/dist/widgets/PromptCarouselWidget/PromptCarouselWidget.cjs

@@ -5,14 +5,14 @@ const require_functions = require('../utils/functions.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_contexts_salesAgentContext = require("@envive-ai/react-hooks/contexts/salesAgentContext");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
-let __envive_ai_react_hooks_hooks_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+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_hooks_hooks_WidgetInteraction_types = require("@envive-ai/react-hooks/hooks/WidgetInteraction/types");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
-let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 let __envive_ai_react_toolkit_v3_PromptCarousel_types_types = require("@envive-ai/react-toolkit-v3/PromptCarousel/types/types");
+let __envive_ai_react_toolkit_v3_Tokens = require("@envive-ai/react-toolkit-v3/Tokens");
 
 //#region src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx
 const mockButtonTexts = [
@@ -39,15 +39,6 @@ const PromptCarouselWidgetHandler = (props) => {
 	const promptCarouselRows = promptCarouselWidgetConfig?.promptCarouselRows;
 	const animationSpeed = isLoading ? __envive_ai_react_toolkit_v3_PromptCarousel_types_types.AnimationSpeed.NONE : promptCarouselWidgetConfig?.animationSpeed;
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	(0, react.useEffect)(() => {
-		trackEvent({
-			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.PromptCarouselV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	const handleButtonClick = (0, react.useCallback)((text) => {
 		const rawValues = hardcopyContent?.rawValues;
 		const stringId = require_functions.getStringIdForText(rawValues, text);

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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_runtime8.JSX.Element;
   displayName: string;
 };
 //#endregion

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime14 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_runtime9.JSX.Element;
+  }: PromptCarouselWidgetProps): react_jsx_runtime14.JSX.Element;
   displayName: string;
 };
 //#endregion