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

package/dist/widgets/TypingAnimationWidget/TypingAnimationWidget.js

@@ -4,13 +4,14 @@ import { getStringIdForText } from "../utils/functions.js";
 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 { useSetAtom } from "jotai";
-import { ChatElementDisplayLocationV3 } from "@envive-ai/react-hooks/application/models";
-import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
+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 { WidgetInteractionComponent, WidgetInteractionType } from "@envive-ai/react-hooks/hooks/WidgetInteraction/types";
 import { PromptCarouselRows, usePromptCarouselAnalytics } from "@envive-ai/react-toolkit-v3/PromptCarousel";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { chatOnToggleAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 import { PromptButtonVariant } from "@envive-ai/react-toolkit-v3/PromptButton/types";
 import { TypingAnimation } from "@envive-ai/react-toolkit-v3/TypingAnimation";
@@ -30,7 +31,7 @@ const mockHintText = "Ask me anything";
 const TypingAnimationWidgetHandler = (props) => {
 	const { onTypedMessageSubmitted } = useSalesAgent();
 	const onToggle = useSetAtom(chatOnToggleAtom);
-	const { hardcopyContent, widgetConfig, uiConfig, isLoading, widgetConfigId } = props;
+	const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 	const titleLabel = hardcopyContent?.values?.titleLabel || "";
 	const headlineText = hardcopyContent?.values?.headlineText || "";
 	const animatedTextSequence = hardcopyContent?.values?.animatedTextSequence || [];
@@ -47,6 +48,9 @@ const TypingAnimationWidgetHandler = (props) => {
 	const showTextField = typingAnimationWidgetConfig?.showTextField !== false;
 	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 { trackEvent } = useAmplitude();
 	const { trackWidgetInteraction } = useWidgetInteraction();
 	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.EMBEDDED_WIDGET, (text) => {
@@ -87,6 +91,25 @@ const TypingAnimationWidgetHandler = (props) => {
 			}
 		});
 	}, [onToggle]);
+	const handleTranscriptionStarted = useCallback(() => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED
+			}
+		});
+	}, []);
+	const handleTranscriptionCompleted = useCallback((transcript) => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	return /* @__PURE__ */ jsx(TypingAnimation, {
 		baseProps: { id },
 		widgetContentProps: {
@@ -97,7 +120,8 @@ const TypingAnimationWidgetHandler = (props) => {
 			hintText: isLoading ? mockHintText : hintText,
 			textFieldAriaLabel,
 			logoSrc: logoSrc ?? void 0,
-			hideLogo: hideLogo ?? false
+			hideLogo: hideLogo ?? false,
+			voiceInputEnabled: isVoiceInputEnabled
 		},
 		widgetStyleProps: {
 			widgetVariant,
@@ -115,7 +139,9 @@ const TypingAnimationWidgetHandler = (props) => {
 			handleButtonMouseUp: onMouseUp,
 			handleButtonTouchStart: onTouchStart,
 			handleButtonTouchEnd: onTouchEnd,
-			handleTextFieldClick
+			handleTextFieldClick,
+			onTranscriptionStarted: handleTranscriptionStarted,
+			onTranscriptionCompleted: handleTranscriptionCompleted
 		}
 	});
 };

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

@@ -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/widgets/dist/SearchZeroState/SearchZeroStateWidget.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 ../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/widgets/dist/SuggestionBar/SuggestionBar.d.cts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.cjs";
-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/hooks/useGetWidgetStatus.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_functions = require('../utils/functions.cjs');
 let react = require("react");
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let jotai = require("jotai");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 let __envive_ai_react_hooks_atoms_chat_chatState = require("@envive-ai/react-hooks/atoms/chat/chatState");
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/dist/widgets/hooks/useGetWidgetStatus.js

@@ -1,7 +1,7 @@
 import { isLoading, isProductComparison, userHasInteracted, userHasNotInteracted } from "../utils/functions.js";
 import { useMemo } from "react";
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { useAtomValue } from "jotai";
+import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { responseStreamingAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/dist/widgets/utils/functions.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
 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_atomStore = require("@envive-ai/react-hooks/atoms/atomStore");
 
 //#region src/widgets/utils/functions.ts

package/dist/widgets/utils/functions.js

@@ -1,5 +1,5 @@
-import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
+import { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
 import { getAtomStore } from "@envive-ai/react-hooks/atoms/atomStore";
 
 //#region src/widgets/utils/functions.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets-v3",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "description": "React widget library v3 for Envive services.",
   "keywords": [
     "react",

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -6,9 +6,11 @@ import {
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useAtomValue } from 'jotai';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   Suggestion,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
@@ -89,6 +91,11 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
 
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   const handlePromptButtonClick = useCallback(
     (suggestion: Suggestion) => {
       onSuggestionClicked(
@@ -112,6 +119,29 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.POST_INTERACTION_COMPARISON,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   const handleLinkClick = (url: string) => {
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
@@ -156,6 +186,7 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     images: images ?? [],
     logoSrc: logoSrc ?? undefined,
+    voiceInputEnabled: isVoiceInputEnabled,
   };
 
   const widgetEventProps: ChatPreviewComparisonProps['widgetEventProps'] = {
@@ -168,6 +199,8 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
     handlePromptButtonTouchEnd: onTouchEnd,
     handleLinkClick,
     handleTextFieldClick,
+    onTranscriptionStarted: handleTranscriptionStarted,
+    onTranscriptionCompleted: handleTranscriptionCompleted,
   };
 
   return (

package/src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.tsx

@@ -3,9 +3,11 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useAtomValue } from 'jotai';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
+import { FeatureGates } from '@envive-ai/react-hooks/application/models';
 
-import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
 import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
+import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 import { PromptCarouselWidget } from '../PromptCarouselWidget/PromptCarouselWidget';
@@ -19,6 +21,7 @@ const ChatPreviewLoadingWidgetHandler = (props: BaseWidgetProps) => {
 
   const chatPreviewLoadingDataMap = useAtomValue(chatPreviewLoadingDataAtom);
   const chatPreviewLoadingData = chatPreviewLoadingDataMap[widgetConfigId] ?? undefined;
+  const { featureFlagService } = useFeatureFlagService();
 
   const isCacheEmpty =
     !chatPreviewLoadingData ||
@@ -48,6 +51,10 @@ const ChatPreviewLoadingWidgetHandler = (props: BaseWidgetProps) => {
   const hideTextField =
     chatPreviewLoadingWidgetConfig?.hideTextField ?? chatPreviewLoadingData?.hideTextField;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   return (
     <ChatPreviewLoading
       id={id}
@@ -58,6 +65,7 @@ const ChatPreviewLoadingWidgetHandler = (props: BaseWidgetProps) => {
       hideLogo={hideLogo}
       logoSrc={logoSrc}
       titleLabel={titleLabel}
+      voiceInputEnabled={isVoiceInputEnabled}
     />
   );
 };

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -3,11 +3,13 @@ import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext
 import { ChatPreviewWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useAtomValue } from 'jotai';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   Suggestion,
 } from '@envive-ai/react-hooks/application/models';
 import {
@@ -70,6 +72,11 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
 
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   const handlePromptButtonClick = useCallback(
     (suggestion: Suggestion) => {
       onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
@@ -90,6 +97,29 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.CHAT_PREVIEW,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   const handleLinkClick = (url: string) => {
     trackWidgetInteraction({
       eventName: EnviveMetricsEventName.WidgetInteraction,
@@ -128,6 +158,7 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     promptButtons: hardCopyContent?.promptButtons,
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     logoSrc: logoSrc ?? undefined,
+    voiceInputEnabled: isVoiceInputEnabled,
   };
 
   const widgetEventProps: ChatPreviewProps['widgetEventProps'] = {
@@ -140,6 +171,8 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     handlePromptButtonTouchEnd: onTouchEnd,
     handleLinkClick,
     handleTextFieldClick,
+    onTranscriptionStarted: handleTranscriptionStarted,
+    onTranscriptionCompleted: handleTranscriptionCompleted,
   };
 
   return (

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,4 +1,7 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
   useAmplitude,
@@ -12,6 +15,7 @@ import {
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useTrackComponentVisibleEvent } from '@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 import {
   Collapse,
   WidgetInteractionComponent,
@@ -92,6 +96,20 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
     (customerServiceIntegration?.provider as CustomerServiceType) ??
     CustomerServiceType.unsupported;
 
+  const { featureFlagService } = useFeatureFlagService();
+  const originalVoiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) ||
+    originalVoiceInputEnabled;
+
+  const modifiedLookAndFeelConfig = useMemo(
+    () => ({
+      ...uiConfig?.lookAndFeel,
+      voiceInputEnabled: isVoiceInputEnabled,
+    }),
+    [uiConfig?.lookAndFeel, isVoiceInputEnabled],
+  );
+
   // TODO: Get hardcopy content
   const { isOpen, openChat, closeChat, onHover } = useChatToggle();
 
@@ -186,7 +204,7 @@ const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
                   salesAgentData={salesAgentData}
                   hardcopyContent={hardcopyContent}
                   floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
-                  lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+                  lookAndFeelConfig={modifiedLookAndFeelConfig ?? ({} as LookAndFeelConfig)}
                   isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
                   isFloatingChatOpen={effectiveIsOpen}
                   onToggleCXButton={toggle}

package/src/widgets/FullPageSalesAgentWidget/FullPageSalesAgentWidget.tsx

@@ -7,6 +7,8 @@ import {
 import { FullPageSalesAgent } from '@envive-ai/react-toolkit-v3/FullPageSalesAgent';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { BaseWidgetProps, withBaseWidget } from 'src/hocs/withBaseWidget';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
+import { FeatureGates } from '@envive-ai/react-hooks/application/models';
 
 const FullPageSalesAgentHandler = ({
   uiConfig,
@@ -15,6 +17,11 @@ const FullPageSalesAgentHandler = ({
 }: BaseWidgetProps) => {
   const { headerContainer, autoHeight } = (widgetConfig as FullPageSalesAgentWidgetV3Config) || {};
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   return (
     <FullPageSalesAgent
       theme={Theme.STANDARD}
@@ -23,6 +30,7 @@ const FullPageSalesAgentHandler = ({
       hardcopyContent={hardcopyContent}
       headerContainer={headerContainer}
       autoHeight={autoHeight}
+      voiceInputEnabled={isVoiceInputEnabled}
     />
   );
 };

package/src/widgets/ProductCardWidget/ProductCardWidget.tsx

@@ -1,4 +1,7 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import {
   EnviveMetricsEventName,
   useAmplitude,
@@ -7,6 +10,7 @@ import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext
 import { ProductCardWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 import {
   WidgetInteractionComponent,
   WidgetInteractionType,
@@ -33,7 +37,7 @@ const mockAnimatedText = ['Loading...'];
 const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
-  const { hardcopyContent, widgetConfig, isLoading } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
   const hardCopyHeadline = hardcopyContent?.values?.headline as string | undefined;
   const headline = isLoading ? mockHeadline : hardCopyHeadline || '';
@@ -55,6 +59,10 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
   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();
@@ -105,6 +113,29 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.IMAGE_PROMPT_CARD,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   return (
     <ProductCard
       theme={Theme.GLOBAL_CUSTOM}
@@ -117,6 +148,7 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       promptButtonType={promptButtonType}
       carouselId={carouselId}
       placeholder={placeholder}
+      voiceInputEnabled={isVoiceInputEnabled}
       textTypingDuration={800}
       textTransition={2000}
       onSelect={handleSelect}
@@ -127,6 +159,8 @@ const ProductCardWidgetHandler = (props: BaseWidgetProps) => {
       onTouchStart={onTouchStart}
       onTouchEnd={onTouchEnd}
       onInputClick={handleInputClick}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 };

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -4,9 +4,11 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
 import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
@@ -46,7 +48,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     onTouchEnd,
   } = usePromptCarouselAnalytics(WidgetInteractionComponent.SINGLE_IMAGE_PROMPT, text => text);
 
-  const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
+  const { hardcopyContent, widgetConfig, uiConfig, isLoading } = props;
 
   const promptButtonCarouselWithImageWidgetConfig =
     widgetConfig as PromptButtonCarouselWithImageWidgetV3Config;
@@ -99,6 +101,29 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SINGLE_IMAGE_PROMPT,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    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 : undefined;
 
@@ -120,6 +145,11 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     ? 'Product Image From Page'
     : promptButtonCarouselWithImageWidgetConfig?.image?.alt;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   return (
     <PromptButtonCarouselWithImage
       id={id}
@@ -132,6 +162,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       alt={finalImageAlt}
       textFieldPlaceholder={hardCopyContent?.textFieldPlaceholder}
       hideTextField={promptButtonCarouselWithImageWidgetConfig?.hideTextField}
+      voiceInputEnabled={isVoiceInputEnabled}
       handlePromptButtonClick={handlePromptButtonClick}
       handlePromptButtonDrag={onDrag}
       handlePromptButtonHover={onHover}
@@ -140,6 +171,8 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
       handlePromptButtonTouchStart={onTouchStart}
       handlePromptButtonTouchEnd={onTouchEnd}
       handleTextFieldClick={handleTextFieldClick}
+      onTranscriptionStarted={handleTranscriptionStarted}
+      onTranscriptionCompleted={handleTranscriptionCompleted}
     />
   );
 };

package/src/widgets/SocialProofWidget/SocialProofWidget.tsx

@@ -13,6 +13,7 @@ import {
 
 import {
   ChatElementDisplayLocationV3,
+  FeatureGates,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
 import { chatPreviewLoadingDataAtom } from '@envive-ai/react-hooks/atoms/widget';
@@ -29,6 +30,7 @@ import { useProductImageUrl } from '@envive-ai/react-hooks/hooks/ProductImageUrl
 import { ChatPreviewLoading } from '@envive-ai/react-toolkit-v3/ChatPreviewLoading';
 import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
@@ -97,6 +99,11 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
 
   const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo;
 
+  const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+  const { featureFlagService } = useFeatureFlagService();
+  const isVoiceInputEnabled =
+    featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled;
+
   const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
   const dynamicImageUrl = useProductImageUrl(productId);
 
@@ -191,6 +198,29 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [openChat]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.SOCIAL_PROOF,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   if (isLoading) {
     return <ChatPreviewLoading fullIsLoading />;
   }
@@ -233,6 +263,7 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
     images: images ?? [],
     logoSrc: logoSrc ?? undefined,
+    voiceInputEnabled: isVoiceInputEnabled,
   };
 
   const widgetEventProps: SocialProofProps['widgetEventProps'] = {
@@ -246,6 +277,8 @@ const SocialProofWidgetHandler = (props: BaseWidgetProps) => {
     handleSecondaryButtonTouchStart: onTouchStart,
     handleSecondaryButtonTouchEnd: onTouchEnd,
     handleTextFieldClick,
+    onTranscriptionStarted: handleTranscriptionStarted,
+    onTranscriptionCompleted: handleTranscriptionCompleted,
   };
 
   return (