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

package/dist/debug/chatEmbed.cjs

@@ -3,10 +3,10 @@ const require_MessageContent = require('./MessageContent.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let jotai = require("jotai");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
 let __envive_ai_react_toolkit_v3_PromptCarousel = require("@envive-ai/react-toolkit-v3/PromptCarousel");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 

package/dist/debug/chatEmbed.js

@@ -1,10 +1,10 @@
 import { MessageContent } from "./MessageContent.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { chatAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useAtomValue } from "jotai";
 import { MessageType } from "@envive-ai/react-hooks/application/models";
 import { PromptCarousel, PromptCarouselRows } from "@envive-ai/react-toolkit-v3/PromptCarousel";
+import { chatAtom } from "@envive-ai/react-hooks/atoms/chat";
 import classNames from "classnames";
 
 //#region src/debug/chatEmbed.tsx

package/dist/debug/reportIssue.cjs

@@ -5,9 +5,9 @@ const require_GenericSelect = require('./GenericSelect.cjs');
 const require_chatEmbed = require('./chatEmbed.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let jotai = require("jotai");
 let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+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 classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);

package/dist/debug/reportIssue.js

@@ -3,9 +3,9 @@ import { GenericSelect } from "./GenericSelect.js";
 import chatEmbed_default from "./chatEmbed.js";
 import { useCallback, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useAtomValue } from "jotai";
 import { MessageType } from "@envive-ai/react-hooks/application/models";
+import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { userIdAtom } from "@envive-ai/react-hooks/atoms/app";
 import { ReportSessionRequestReportPriorityEnum, ReportSessionRequestReportTypeEnum } from "@spiffy-ai/commerce-api-client";
 import classNames from "classnames";

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

@@ -1,5 +1,4 @@
 import { RefObject } from "react";
-import { SpiffyMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 import { OrgUIConfigV3, WidgetConfigV3, WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 
@@ -18,11 +17,6 @@ interface BaseWidgetProps {
   isUiConfigLoading?: boolean;
 }
 interface WithBaseWidgetOptions {
-  /**
-   * The Amplitude event name to track when the widget becomes visible.
-   * Defaults to a generic component visible event if not provided.
-   */
-  visibilityEventName?: SpiffyMetricsEventName;
   /**
    * Additional properties to include with the visibility event.
    */
@@ -32,6 +26,11 @@ interface WithBaseWidgetOptions {
    * Defaults to '0px'.
    */
   rootMargin?: string;
+  /**
+   * Whether to defer loading of the widget until it is visible.
+   * Defaults to true
+   */
+  deferLoading?: boolean;
 }
 //#endregion
 export { BaseWidgetProps, WithBaseWidgetOptions };

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

@@ -1,5 +1,4 @@
 import { RefObject } from "react";
-import { SpiffyMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 import { OrgUIConfigV3, WidgetConfigV3, WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 
@@ -18,11 +17,6 @@ interface BaseWidgetProps {
   isUiConfigLoading?: boolean;
 }
 interface WithBaseWidgetOptions {
-  /**
-   * The Amplitude event name to track when the widget becomes visible.
-   * Defaults to a generic component visible event if not provided.
-   */
-  visibilityEventName?: SpiffyMetricsEventName;
   /**
    * Additional properties to include with the visibility event.
    */
@@ -32,6 +26,11 @@ interface WithBaseWidgetOptions {
    * Defaults to '0px'.
    */
   rootMargin?: string;
+  /**
+   * Whether to defer loading of the widget until it is visible.
+   * Defaults to true
+   */
+  deferLoading?: boolean;
 }
 //#endregion
 export { BaseWidgetProps, WithBaseWidgetOptions };

package/dist/hocs/withBaseWidget/withBaseWidget.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 let react = require("react");
 let __envive_ai_react_hooks_contexts_amplitudeContext = require("@envive-ai/react-hooks/contexts/amplitudeContext");
+let __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent = require("@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent");
 let __envive_ai_react_hooks_contexts_hardcopyContext = require("@envive-ai/react-hooks/contexts/hardcopyContext");
 let __envive_ai_react_hooks_contexts_pageContext = require("@envive-ai/react-hooks/contexts/pageContext");
 let __envive_ai_react_hooks_contexts_widgetConfigContext = require("@envive-ai/react-hooks/contexts/widgetConfigContext");
@@ -12,9 +13,9 @@ function withBaseWidget(Widget, options) {
 	const WrappedWidget = (props) => {
 		const { widgetConfigId, widgetType } = props;
 		const widgetRef = (0, react.useRef)(null);
-		const hasTrackedEvent = (0, react.useRef)(false);
-		const { trackEvent, isReady } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+		const { isReady } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
 		const [hardcopyContent, setHardcopyContent] = (0, react.useState)(void 0);
+		const hardcopyFetchedRef = (0, react.useRef)(false);
 		const { getHardcopy, isLoading: isHardcopyLoading } = (0, __envive_ai_react_hooks_contexts_hardcopyContext.useHardcopy)();
 		const { userEvent, isLoading: isPageLoading } = (0, __envive_ai_react_hooks_contexts_pageContext.usePage)();
 		const [widgetConfig, setWidgetConfig] = (0, react.useState)(void 0);
@@ -22,75 +23,68 @@ function withBaseWidget(Widget, options) {
 		const [uiConfig, setUiConfig] = (0, react.useState)(void 0);
 		const { getUiConfig, isLoading: isUiConfigLoading } = (0, __envive_ai_react_hooks_contexts_uiConfigContext.useUiConfig)();
 		const isLoading = isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
-		(0, react.useEffect)(() => {
-			if (!isReady || hasTrackedEvent.current || !widgetRef.current) return;
-			const observer = new IntersectionObserver(([entry]) => {
-				if (entry.isIntersecting && !hasTrackedEvent.current) {
-					trackEvent({
-						eventName: options?.visibilityEventName || __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-						eventProps: {
-							widget_config_id: widgetConfigId,
-							widget_type: widgetType,
-							...options?.visibilityEventProps
-						}
-					});
-					hasTrackedEvent.current = true;
-					observer.disconnect();
-				}
-			}, { rootMargin: options?.rootMargin || "0px" });
-			observer.observe(widgetRef.current);
-			return () => {
-				observer.disconnect();
-			};
+		const { isVisible } = (0, __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent.useTrackComponentVisibleEvent)(widgetRef, {
+			widget_config_id: widgetConfigId,
+			widget_type: widgetType,
+			...options?.visibilityEventProps
+		}, options?.rootMargin || "0px", isReady);
+		const startLoading = (0, react.useMemo)(() => {
+			if (options?.deferLoading === false) return true;
+			return isVisible && !!widgetConfigId && !!widgetType;
 		}, [
-			isReady,
+			isVisible,
 			widgetConfigId,
-			widgetType,
-			trackEvent
+			widgetType
 		]);
 		(0, react.useEffect)(() => {
-			if (!widgetType || !userEvent) return;
+			if (!startLoading || hardcopyFetchedRef.current) return;
+			hardcopyFetchedRef.current = true;
 			getHardcopy({
 				widgetType,
 				userEvent
 			}).then(setHardcopyContent).catch(() => {});
 		}, [
-			widgetConfigId,
+			startLoading,
 			widgetType,
 			getHardcopy,
-			userEvent
+			userEvent,
+			widgetConfigId
 		]);
 		(0, react.useEffect)(() => {
+			if (!startLoading) return;
 			getUiConfig().then(setUiConfig).catch(() => {});
 		}, [
+			startLoading,
 			getUiConfig,
 			widgetConfigId,
 			widgetType
 		]);
 		(0, react.useEffect)(() => {
-			if (!widgetConfigId || !widgetType) return;
+			if (!startLoading) return;
 			getWidgetConfig({
 				widgetConfigId,
 				widgetType
-			}).then(setWidgetConfig).catch((e) => {
-				console.error("Error getting widget config", widgetConfigId, widgetType, e);
-			});
+			}).then(setWidgetConfig).catch(() => {});
 		}, [
+			startLoading,
 			widgetConfigId,
 			widgetType,
 			getWidgetConfig
 		]);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Widget, {
-			...props,
-			isLoading,
-			isHardcopyLoading,
-			isPageLoading,
-			isWidgetConfigLoading,
-			isUiConfigLoading,
-			uiConfig,
-			widgetConfig,
-			hardcopyContent,
-			observedWidget: widgetRef
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			ref: widgetRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Widget, {
+				...props,
+				isLoading,
+				isHardcopyLoading,
+				isPageLoading,
+				isWidgetConfigLoading,
+				isUiConfigLoading,
+				uiConfig,
+				widgetConfig,
+				hardcopyContent,
+				observedWidget: widgetRef
+			})
 		});
 	};
 	WrappedWidget.displayName = `withBaseWidget(${Widget.displayName || Widget.name || "Component"})`;

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps, WithBaseWidgetOptions } from "./types.cjs";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime18 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_runtime5.JSX.Element;
+  (props: P): react_jsx_runtime18.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_runtime18 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_runtime18.JSX.Element;
+  (props: P): react_jsx_runtime17.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/hocs/withBaseWidget/withBaseWidget.js

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState } from "react";
-import { SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useTrackComponentVisibleEvent } from "@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent";
 import { useHardcopy } from "@envive-ai/react-hooks/contexts/hardcopyContext";
 import { usePage } from "@envive-ai/react-hooks/contexts/pageContext";
 import { useWidgetConfig } from "@envive-ai/react-hooks/contexts/widgetConfigContext";
@@ -11,9 +12,9 @@ function withBaseWidget(Widget, options) {
 	const WrappedWidget = (props) => {
 		const { widgetConfigId, widgetType } = props;
 		const widgetRef = useRef(null);
-		const hasTrackedEvent = useRef(false);
-		const { trackEvent, isReady } = useAmplitude();
+		const { isReady } = useAmplitude();
 		const [hardcopyContent, setHardcopyContent] = useState(void 0);
+		const hardcopyFetchedRef = useRef(false);
 		const { getHardcopy, isLoading: isHardcopyLoading } = useHardcopy();
 		const { userEvent, isLoading: isPageLoading } = usePage();
 		const [widgetConfig, setWidgetConfig] = useState(void 0);
@@ -21,75 +22,68 @@ function withBaseWidget(Widget, options) {
 		const [uiConfig, setUiConfig] = useState(void 0);
 		const { getUiConfig, isLoading: isUiConfigLoading } = useUiConfig();
 		const isLoading = isHardcopyLoading || isPageLoading || isWidgetConfigLoading || isUiConfigLoading;
-		useEffect(() => {
-			if (!isReady || hasTrackedEvent.current || !widgetRef.current) return;
-			const observer = new IntersectionObserver(([entry]) => {
-				if (entry.isIntersecting && !hasTrackedEvent.current) {
-					trackEvent({
-						eventName: options?.visibilityEventName || SpiffyMetricsEventName.ChatComponentVisible,
-						eventProps: {
-							widget_config_id: widgetConfigId,
-							widget_type: widgetType,
-							...options?.visibilityEventProps
-						}
-					});
-					hasTrackedEvent.current = true;
-					observer.disconnect();
-				}
-			}, { rootMargin: options?.rootMargin || "0px" });
-			observer.observe(widgetRef.current);
-			return () => {
-				observer.disconnect();
-			};
+		const { isVisible } = useTrackComponentVisibleEvent(widgetRef, {
+			widget_config_id: widgetConfigId,
+			widget_type: widgetType,
+			...options?.visibilityEventProps
+		}, options?.rootMargin || "0px", isReady);
+		const startLoading = useMemo(() => {
+			if (options?.deferLoading === false) return true;
+			return isVisible && !!widgetConfigId && !!widgetType;
 		}, [
-			isReady,
+			isVisible,
 			widgetConfigId,
-			widgetType,
-			trackEvent
+			widgetType
 		]);
 		useEffect(() => {
-			if (!widgetType || !userEvent) return;
+			if (!startLoading || hardcopyFetchedRef.current) return;
+			hardcopyFetchedRef.current = true;
 			getHardcopy({
 				widgetType,
 				userEvent
 			}).then(setHardcopyContent).catch(() => {});
 		}, [
-			widgetConfigId,
+			startLoading,
 			widgetType,
 			getHardcopy,
-			userEvent
+			userEvent,
+			widgetConfigId
 		]);
 		useEffect(() => {
+			if (!startLoading) return;
 			getUiConfig().then(setUiConfig).catch(() => {});
 		}, [
+			startLoading,
 			getUiConfig,
 			widgetConfigId,
 			widgetType
 		]);
 		useEffect(() => {
-			if (!widgetConfigId || !widgetType) return;
+			if (!startLoading) return;
 			getWidgetConfig({
 				widgetConfigId,
 				widgetType
-			}).then(setWidgetConfig).catch((e) => {
-				console.error("Error getting widget config", widgetConfigId, widgetType, e);
-			});
+			}).then(setWidgetConfig).catch(() => {});
 		}, [
+			startLoading,
 			widgetConfigId,
 			widgetType,
 			getWidgetConfig
 		]);
-		return /* @__PURE__ */ jsx(Widget, {
-			...props,
-			isLoading,
-			isHardcopyLoading,
-			isPageLoading,
-			isWidgetConfigLoading,
-			isUiConfigLoading,
-			uiConfig,
-			widgetConfig,
-			hardcopyContent,
-			observedWidget: widgetRef
+		return /* @__PURE__ */ jsx("span", {
+			ref: widgetRef,
+			children: /* @__PURE__ */ jsx(Widget, {
+				...props,
+				isLoading,
+				isHardcopyLoading,
+				isPageLoading,
+				isWidgetConfigLoading,
+				isUiConfigLoading,
+				uiConfig,
+				widgetConfig,
+				hardcopyContent,
+				observedWidget: widgetRef
+			})
 		});
 	};
 	WrappedWidget.displayName = `withBaseWidget(${Widget.displayName || Widget.name || "Component"})`;

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

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

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 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_runtime2.JSX.Element;
+}: SearchZeroStateWidgetProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 
 //#endregion

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

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime2 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_runtime3.JSX.Element;
+}: Readonly<SuggestionBarProps>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#endregion
 export { SuggestionBar };

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.cjs

@@ -5,18 +5,19 @@ const require_ChatPreviewLoadingWidget = require('../ChatPreviewLoadingWidget/Ch
 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_ChatPreviewComparison = require("@envive-ai/react-toolkit-v3/ChatPreviewComparison");
 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_ChatPreviewComparison = require("@envive-ai/react-toolkit-v3/ChatPreviewComparison");
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx
 const ChatPreviewComparisonWidgetHandler = (props) => {
@@ -45,6 +46,9 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 	};
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+	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 handlePromptButtonClick = (0, react.useCallback)((suggestion) => {
 		onSuggestionClicked(suggestion, __envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
@@ -60,6 +64,25 @@ const ChatPreviewComparisonWidgetHandler = (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.POST_INTERACTION_COMPARISON,
+				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.POST_INTERACTION_COMPARISON,
+				widget_interaction: __envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	const handleLinkClick = (url) => {
 		trackWidgetInteraction({
 			eventName: __envive_ai_react_hooks_contexts_amplitudeContext.EnviveMetricsEventName.WidgetInteraction,
@@ -89,7 +112,8 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 		promptButtons: suggestions,
 		textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
 		images: images ?? [],
-		logoSrc: logoSrc ?? void 0
+		logoSrc: logoSrc ?? void 0,
+		voiceInputEnabled: isVoiceInputEnabled
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreviewComparison.ChatPreviewComparison, {
 		baseProps: { id },
@@ -104,7 +128,9 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 			handlePromptButtonTouchStart: onTouchStart,
 			handlePromptButtonTouchEnd: onTouchEnd,
 			handleLinkClick,
-			handleTextFieldClick
+			handleTextFieldClick,
+			onTranscriptionStarted: handleTranscriptionStarted,
+			onTranscriptionCompleted: handleTranscriptionCompleted
 		}
 	});
 };

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

@@ -1,9 +1,9 @@
 import { BaseWidgetProps } from "../../hocs/withBaseWidget/types.cjs";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime18.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime15.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime18.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime15.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_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.d.ts
 declare const ChatPreviewComparisonWidgetWithBaseWidget: {
-  (props: BaseWidgetProps): react_jsx_runtime16.JSX.Element;
+  (props: BaseWidgetProps): react_jsx_runtime8.JSX.Element;
   displayName: string;
 };
 interface ChatPreviewComparisonWidgetProps {
@@ -12,7 +12,7 @@ interface ChatPreviewComparisonWidgetProps {
 declare const ChatPreviewComparisonWidget: {
   ({
     widgetConfigId
-  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime16.JSX.Element;
+  }: ChatPreviewComparisonWidgetProps): react_jsx_runtime8.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.js

@@ -4,18 +4,19 @@ import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWid
 import { useCallback, useMemo } from "react";
 import { EnviveMetricsEventName } from "@envive-ai/react-hooks/contexts/amplitudeContext";
 import { jsx } from "react/jsx-runtime";
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
-import { useSalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
-import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 import { useAtomValue } from "jotai";
-import { ChatElementDisplayLocationV3, VariantTypeEnum } from "@envive-ai/react-hooks/application/models";
-import { variantInfoAtom } from "@envive-ai/react-hooks/atoms/app";
-import { 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 { ChatPreviewComparison } from "@envive-ai/react-toolkit-v3/ChatPreviewComparison";
 import { usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
 import { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
+import { chatAtom, 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 { ChatPreviewComparison } from "@envive-ai/react-toolkit-v3/ChatPreviewComparison";
 
 //#region src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx
 const ChatPreviewComparisonWidgetHandler = (props) => {
@@ -44,6 +45,9 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 	};
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+	const { featureFlagService } = useFeatureFlagService();
+	const isVoiceInputEnabled = featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
 	const handlePromptButtonClick = useCallback((suggestion) => {
 		onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
@@ -59,6 +63,25 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 			}
 		});
 	}, [openChat]);
+	const handleTranscriptionStarted = useCallback(() => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED
+			}
+		});
+	}, []);
+	const handleTranscriptionCompleted = useCallback((transcript) => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	const handleLinkClick = (url) => {
 		trackWidgetInteraction({
 			eventName: EnviveMetricsEventName.WidgetInteraction,
@@ -88,7 +111,8 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 		promptButtons: suggestions,
 		textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
 		images: images ?? [],
-		logoSrc: logoSrc ?? void 0
+		logoSrc: logoSrc ?? void 0,
+		voiceInputEnabled: isVoiceInputEnabled
 	};
 	return /* @__PURE__ */ jsx(ChatPreviewComparison, {
 		baseProps: { id },
@@ -103,7 +127,9 @@ const ChatPreviewComparisonWidgetHandler = (props) => {
 			handlePromptButtonTouchStart: onTouchStart,
 			handlePromptButtonTouchEnd: onTouchEnd,
 			handleLinkClick,
-			handleTextFieldClick
+			handleTextFieldClick,
+			onTranscriptionStarted: handleTranscriptionStarted,
+			onTranscriptionCompleted: handleTranscriptionCompleted
 		}
 	});
 };