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

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.cjs

@@ -4,8 +4,10 @@ const require_PromptCarouselWidget = require('../PromptCarouselWidget/PromptCaro
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_contexts_typesV3 = require("@envive-ai/react-hooks/contexts/typesV3");
 let jotai = require("jotai");
-let __envive_ai_react_toolkit_v3_ChatPreviewLoading = require("@envive-ai/react-toolkit-v3/ChatPreviewLoading");
+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_widget = require("@envive-ai/react-hooks/atoms/widget");
+let __envive_ai_react_toolkit_v3_ChatPreviewLoading = require("@envive-ai/react-toolkit-v3/ChatPreviewLoading");
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.tsx
 const ChatPreviewLoadingWidgetHandler = (props) => {
@@ -13,21 +15,27 @@ const ChatPreviewLoadingWidgetHandler = (props) => {
 	const chatPreviewLoadingWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
 	const chatPreviewLoadingData = (0, jotai.useAtomValue)(__envive_ai_react_hooks_atoms_widget.chatPreviewLoadingDataAtom)[widgetConfigId] ?? void 0;
+	const { featureFlagService } = (0, __envive_ai_react_hooks_contexts_featureFlagServiceContext.useFeatureFlagService)();
 	const isCacheEmpty = !chatPreviewLoadingData || Object.values(chatPreviewLoadingData).every((value) => value === void 0) || Object.keys(chatPreviewLoadingData).length === 0;
 	if (isLoading && isCacheEmpty) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreviewLoading.ChatPreviewLoading, { fullIsLoading: true });
 	const titleLabel = hardcopyContent?.values?.titleLabel ?? chatPreviewLoadingData?.titleLabel;
 	const textFieldPlaceholder = hardcopyContent?.values?.textFieldPlaceholderText ?? chatPreviewLoadingData?.textFieldPlaceholder;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo ?? chatPreviewLoadingData?.hideLogo;
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc ?? chatPreviewLoadingData?.logoSrc;
+	const variant = chatPreviewLoadingWidgetConfig?.variant ?? chatPreviewLoadingData?.variant;
+	const hexCardColor = chatPreviewLoadingWidgetConfig?.hexCardColor ?? chatPreviewLoadingData?.hexCardColor;
+	const hideTextField = chatPreviewLoadingWidgetConfig?.hideTextField ?? chatPreviewLoadingData?.hideTextField;
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreviewLoading.ChatPreviewLoading, {
 		id,
-		variant: chatPreviewLoadingWidgetConfig?.variant ?? chatPreviewLoadingData?.variant,
-		hexCardColor: chatPreviewLoadingWidgetConfig?.hexCardColor ?? chatPreviewLoadingData?.hexCardColor,
-		hideTextField: chatPreviewLoadingWidgetConfig?.hideTextField ?? chatPreviewLoadingData?.hideTextField,
+		variant,
+		hexCardColor,
+		hideTextField,
 		textFieldPlaceholder,
 		hideLogo,
 		logoSrc,
-		titleLabel
+		titleLabel,
+		voiceInputEnabled: featureFlagService?.isFeatureGateEnabled(__envive_ai_react_hooks_application_models.FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled
 	});
 };
 const ChatPreviewLoadingWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(ChatPreviewLoadingWidgetHandler);

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

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

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

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

package/dist/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.js

@@ -3,8 +3,10 @@ import { PromptCarouselWidget } from "../PromptCarouselWidget/PromptCarouselWidg
 import { jsx } from "react/jsx-runtime";
 import { WidgetTypeV3 } from "@envive-ai/react-hooks/contexts/typesV3";
 import { useAtomValue } from "jotai";
-import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoading";
+import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
+import { FeatureGates } from "@envive-ai/react-hooks/application/models";
 import { chatPreviewLoadingDataAtom } from "@envive-ai/react-hooks/atoms/widget";
+import { ChatPreviewLoading } from "@envive-ai/react-toolkit-v3/ChatPreviewLoading";
 
 //#region src/widgets/ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.tsx
 const ChatPreviewLoadingWidgetHandler = (props) => {
@@ -12,21 +14,27 @@ const ChatPreviewLoadingWidgetHandler = (props) => {
 	const chatPreviewLoadingWidgetConfig = widgetConfig;
 	const id = widgetConfig?.contentId;
 	const chatPreviewLoadingData = useAtomValue(chatPreviewLoadingDataAtom)[widgetConfigId] ?? void 0;
+	const { featureFlagService } = useFeatureFlagService();
 	const isCacheEmpty = !chatPreviewLoadingData || Object.values(chatPreviewLoadingData).every((value) => value === void 0) || Object.keys(chatPreviewLoadingData).length === 0;
 	if (isLoading && isCacheEmpty) return /* @__PURE__ */ jsx(ChatPreviewLoading, { fullIsLoading: true });
 	const titleLabel = hardcopyContent?.values?.titleLabel ?? chatPreviewLoadingData?.titleLabel;
 	const textFieldPlaceholder = hardcopyContent?.values?.textFieldPlaceholderText ?? chatPreviewLoadingData?.textFieldPlaceholder;
 	const hideLogo = uiConfig?.lookAndFeel?.hideWidgetLogo ?? chatPreviewLoadingData?.hideLogo;
 	const logoSrc = uiConfig?.lookAndFeel?.widgetLogoSrc ?? chatPreviewLoadingData?.logoSrc;
+	const variant = chatPreviewLoadingWidgetConfig?.variant ?? chatPreviewLoadingData?.variant;
+	const hexCardColor = chatPreviewLoadingWidgetConfig?.hexCardColor ?? chatPreviewLoadingData?.hexCardColor;
+	const hideTextField = chatPreviewLoadingWidgetConfig?.hideTextField ?? chatPreviewLoadingData?.hideTextField;
+	const voiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
 	return /* @__PURE__ */ jsx(ChatPreviewLoading, {
 		id,
-		variant: chatPreviewLoadingWidgetConfig?.variant ?? chatPreviewLoadingData?.variant,
-		hexCardColor: chatPreviewLoadingWidgetConfig?.hexCardColor ?? chatPreviewLoadingData?.hexCardColor,
-		hideTextField: chatPreviewLoadingWidgetConfig?.hideTextField ?? chatPreviewLoadingData?.hideTextField,
+		variant,
+		hexCardColor,
+		hideTextField,
 		textFieldPlaceholder,
 		hideLogo,
 		logoSrc,
-		titleLabel
+		titleLabel,
+		voiceInputEnabled: featureFlagService?.isFeatureGateEnabled(FeatureGates.IsVoiceInputEnabled) || voiceInputEnabled
 	});
 };
 const ChatPreviewLoadingWidgetWithBaseWidget = withBaseWidget(ChatPreviewLoadingWidgetHandler);

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.cjs

@@ -5,16 +5,17 @@ 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_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_hooks_WidgetInteraction = require("@envive-ai/react-hooks/hooks/WidgetInteraction");
 let __envive_ai_react_toolkit_v3_ChatPreview = require("@envive-ai/react-toolkit-v3/ChatPreview");
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx
@@ -36,17 +37,11 @@ const ChatPreviewWidgetHandler = (props) => {
 	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
 	const { trackWidgetInteraction } = (0, __envive_ai_react_hooks_hooks_WidgetInteraction.useWidgetInteraction)();
 	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = (0, __envive_ai_react_toolkit_v3_PromptCarousel.usePromptCarouselAnalytics)(__envive_ai_react_hooks_hooks_WidgetInteraction_types.WidgetInteractionComponent.CHAT_PREVIEW, (text) => text);
-	(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.ChatPreviewV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	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_PROMPT_BUTTON);
 		openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
@@ -62,6 +57,25 @@ const ChatPreviewWidgetHandler = (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.CHAT_PREVIEW,
+				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.CHAT_PREVIEW,
+				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,
@@ -88,7 +102,8 @@ const ChatPreviewWidgetHandler = (props) => {
 		messageText: hardCopyContent?.messageText,
 		promptButtons: hardCopyContent?.promptButtons,
 		textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
-		logoSrc: logoSrc ?? void 0
+		logoSrc: logoSrc ?? void 0,
+		voiceInputEnabled: isVoiceInputEnabled
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ChatPreview.ChatPreview, {
 		baseProps: { id },
@@ -103,7 +118,9 @@ const ChatPreviewWidgetHandler = (props) => {
 			handlePromptButtonTouchStart: onTouchStart,
 			handlePromptButtonTouchEnd: onTouchEnd,
 			handleLinkClick,
-			handleTextFieldClick
+			handleTextFieldClick,
+			onTranscriptionStarted: handleTranscriptionStarted,
+			onTranscriptionCompleted: handleTranscriptionCompleted
 		}
 	});
 };

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

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

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

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

package/dist/widgets/ChatPreviewWidget/ChatPreviewWidget.js

@@ -1,19 +1,20 @@
 import { withBaseWidget } from "../../hocs/withBaseWidget/withBaseWidget.js";
 import { getMessageText } from "../utils/functions.js";
 import { ChatPreviewLoadingWidgetWithBaseWidget } from "../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget.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 { 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 } 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 { 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 { chatAtom, lastAssistantMessageAtom } from "@envive-ai/react-hooks/atoms/chat";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { ChatPreview } from "@envive-ai/react-toolkit-v3/ChatPreview";
 
 //#region src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx
@@ -35,17 +36,11 @@ const ChatPreviewWidgetHandler = (props) => {
 	const { trackEvent } = useAmplitude();
 	const { trackWidgetInteraction } = useWidgetInteraction();
 	const { onClick: onPromptClicked, onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } = usePromptCarouselAnalytics(WidgetInteractionComponent.CHAT_PREVIEW, (text) => text);
-	useEffect(() => {
-		trackEvent({
-			eventName: SpiffyMetricsEventName.ChatComponentVisible,
-			eventProps: {
-				widget_config_id: widgetConfigId,
-				widget_type: WidgetTypeV3.ChatPreviewV3
-			}
-		});
-	}, [trackEvent, widgetConfigId]);
 	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_PROMPT_BUTTON);
 		openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
@@ -61,6 +56,25 @@ const ChatPreviewWidgetHandler = (props) => {
 			}
 		});
 	}, [openChat]);
+	const handleTranscriptionStarted = useCallback(() => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.CHAT_PREVIEW,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED
+			}
+		});
+	}, []);
+	const handleTranscriptionCompleted = useCallback((transcript) => {
+		trackWidgetInteraction({
+			eventName: EnviveMetricsEventName.WidgetInteraction,
+			trigger: {
+				widget: WidgetInteractionComponent.CHAT_PREVIEW,
+				widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+				widget_interaction_data: { transcription: transcript }
+			}
+		});
+	}, []);
 	const handleLinkClick = (url) => {
 		trackWidgetInteraction({
 			eventName: EnviveMetricsEventName.WidgetInteraction,
@@ -87,7 +101,8 @@ const ChatPreviewWidgetHandler = (props) => {
 		messageText: hardCopyContent?.messageText,
 		promptButtons: hardCopyContent?.promptButtons,
 		textFieldPlaceholderText: hardCopyContent?.textFieldPlaceholderText,
-		logoSrc: logoSrc ?? void 0
+		logoSrc: logoSrc ?? void 0,
+		voiceInputEnabled: isVoiceInputEnabled
 	};
 	return /* @__PURE__ */ jsx(ChatPreview, {
 		baseProps: { id },
@@ -102,7 +117,9 @@ const ChatPreviewWidgetHandler = (props) => {
 			handlePromptButtonTouchStart: onTouchStart,
 			handlePromptButtonTouchEnd: onTouchEnd,
 			handleLinkClick,
-			handleTextFieldClick
+			handleTextFieldClick,
+			onTranscriptionStarted: handleTranscriptionStarted,
+			onTranscriptionCompleted: handleTranscriptionCompleted
 		}
 	});
 };

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.cjs

@@ -11,14 +11,16 @@ const require_useFloatingButtonVisibility = require('./hooks/useFloatingButtonVi
 const require_useAutoPopup = require('./hooks/useAutoPopup.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 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_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_FloatingButton = require("@envive-ai/react-toolkit-v3/FloatingButton");
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
@@ -50,6 +52,13 @@ const FloatingChatWidgetHandler = (props) => {
 	const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 	const { customerServiceIntegration, floatingButton, floatingChat } = uiConfig ?? {};
 	const cxProvider = customerServiceIntegration?.provider ?? require_types.CustomerServiceType.unsupported;
+	const { featureFlagService } = (0, __envive_ai_react_hooks_contexts_featureFlagServiceContext.useFeatureFlagService)();
+	const originalVoiceInputEnabled = uiConfig?.lookAndFeel?.voiceInputEnabled;
+	const isVoiceInputEnabled = featureFlagService?.isFeatureGateEnabled(__envive_ai_react_hooks_application_models.FeatureGates.IsVoiceInputEnabled) || originalVoiceInputEnabled;
+	const modifiedLookAndFeelConfig = (0, react.useMemo)(() => ({
+		...uiConfig?.lookAndFeel,
+		voiceInputEnabled: isVoiceInputEnabled
+	}), [uiConfig?.lookAndFeel, isVoiceInputEnabled]);
 	const { isOpen, openChat, closeChat, onHover } = (0, __envive_ai_react_hooks_hooks_ChatToggle.useChatToggle)();
 	const [isCXOpen, setIsCXOpen] = (0, react.useState)(false);
 	const [isResultsModalOpen, setIsResultsModalOpen] = (0, react.useState)(false);
@@ -78,20 +87,12 @@ const FloatingChatWidgetHandler = (props) => {
 		return uiConfig?.lookAndFeel?.theme ?? __envive_ai_react_toolkit_v3_Tokens.Theme.GLOBAL_CUSTOM;
 	}, [isUiConfigLoading, uiConfig]);
 	require_useAutoPopup.useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
-	const { trackEvent } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
-	const hasTrackedEvent = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
-		if (buttonShouldRender && !hasTrackedEvent.current) {
-			trackEvent({
-				eventName: __envive_ai_react_hooks_contexts_amplitudeContext.SpiffyMetricsEventName.ChatComponentVisible,
-				eventProps: {
-					widget_config_id: "floating-button",
-					widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingButtonV3
-				}
-			});
-			hasTrackedEvent.current = true;
-		}
-	}, [trackEvent, buttonShouldRender]);
+	const { isReady } = (0, __envive_ai_react_hooks_contexts_amplitudeContext.useAmplitude)();
+	const floatingButtonVisibilityRef = (0, react.useRef)(null);
+	(0, __envive_ai_react_hooks_hooks_TrackComponentVisibleEvent.useTrackComponentVisibleEvent)(floatingButtonVisibilityRef, {
+		widget_config_id: "floating-button",
+		widget_type: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingButtonV3
+	}, "0px", isReady && buttonShouldRender);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CXButtonProvider, {
 		provider: cxProvider,
 		enabled: customerServiceIntegration?.enabled ?? false,
@@ -112,7 +113,7 @@ const FloatingChatWidgetHandler = (props) => {
 				salesAgentData,
 				hardcopyContent,
 				floatingChatConfig: uiConfig?.floatingChat ?? {},
-				lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
+				lookAndFeelConfig: modifiedLookAndFeelConfig ?? {},
 				isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
 				isFloatingChatOpen: effectiveIsOpen,
 				onToggleCXButton: toggle,
@@ -126,23 +127,26 @@ const FloatingChatWidgetHandler = (props) => {
 					handleClose({ collapse_source: "close_button" });
 				}
 			}) })
-		}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
-			id: require_constants.FLOATING_BUTTON_ID,
-			variant: floatingButton?.style,
-			mode: floatingButton?.mode,
-			backgroundColor: floatingButton?.backgroundColor,
-			onClick: previewButtonOnly ? () => {} : () => openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_BUTTON),
-			onMouseOver: onHover,
-			customIcon: floatingButton?.iconSVGSrc,
-			show: floatingButton?.showOption,
-			location: floatingButton?.position,
-			hasInteractionHappened: userHasInteractedValue,
-			ariaLabel: "Open chat",
-			previewMode: !!previewButtonOnly
+		}), buttonShouldRender && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: floatingButtonVisibilityRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_FloatingButton.FloatingButton, {
+				id: require_constants.FLOATING_BUTTON_ID,
+				variant: floatingButton?.style,
+				mode: floatingButton?.mode,
+				backgroundColor: floatingButton?.backgroundColor,
+				onClick: previewButtonOnly ? () => {} : () => openChat(__envive_ai_react_hooks_application_models.ChatElementDisplayLocationV3.FLOATING_BUTTON),
+				onMouseOver: onHover,
+				customIcon: floatingButton?.iconSVGSrc,
+				show: floatingButton?.showOption,
+				location: floatingButton?.position,
+				hasInteractionHappened: userHasInteractedValue,
+				ariaLabel: "Open chat",
+				previewMode: !!previewButtonOnly
+			})
 		})] })
 	}, cxProvider);
 };
-const FloatingChatWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(FloatingChatWidgetHandler);
+const FloatingChatWidgetWithBaseWidget = require_withBaseWidget.withBaseWidget(FloatingChatWidgetHandler, { deferLoading: false });
 const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen } = {}) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingChatWidgetWithBaseWidget, {
 		widgetType: __envive_ai_react_hooks_contexts_typesV3.WidgetTypeV3.FloatingChatV3,

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

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

package/dist/widgets/FloatingChatWidget/FloatingChatWidget.js

@@ -9,15 +9,17 @@ import { FloatingChatOverlay } from "./FloatingChatOverlay.js";
 import { useFloatingButtonVisibility } from "./hooks/useFloatingButtonVisibility.js";
 import { useAutoPopup } from "./hooks/useAutoPopup.js";
 import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
-import { EnviveMetricsEventName, SpiffyMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { EnviveMetricsEventName, useAmplitude } from "@envive-ai/react-hooks/contexts/amplitudeContext";
+import { useTrackComponentVisibleEvent } from "@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent";
 import { Fragment, jsx, jsxs } 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 { Theme } from "@envive-ai/react-toolkit-v3/Tokens";
+import { useWidgetInteraction } from "@envive-ai/react-hooks/hooks/WidgetInteraction";
 import { FloatingButton } from "@envive-ai/react-toolkit-v3/FloatingButton";
 
 //#region src/widgets/FloatingChatWidget/FloatingChatWidget.tsx
@@ -49,6 +51,13 @@ const FloatingChatWidgetHandler = (props) => {
 	const { uiConfig, isUiConfigLoading, hardcopyContent } = props;
 	const { customerServiceIntegration, floatingButton, floatingChat } = uiConfig ?? {};
 	const cxProvider = customerServiceIntegration?.provider ?? 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]);
 	const { isOpen, openChat, closeChat, onHover } = useChatToggle();
 	const [isCXOpen, setIsCXOpen] = useState(false);
 	const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
@@ -77,20 +86,12 @@ const FloatingChatWidgetHandler = (props) => {
 		return uiConfig?.lookAndFeel?.theme ?? Theme.GLOBAL_CUSTOM;
 	}, [isUiConfigLoading, uiConfig]);
 	useAutoPopup({ autoPopupConfig: floatingChat?.autoPopupConfig });
-	const { trackEvent } = useAmplitude();
-	const hasTrackedEvent = useRef(false);
-	useEffect(() => {
-		if (buttonShouldRender && !hasTrackedEvent.current) {
-			trackEvent({
-				eventName: SpiffyMetricsEventName.ChatComponentVisible,
-				eventProps: {
-					widget_config_id: "floating-button",
-					widget_type: WidgetTypeV3.FloatingButtonV3
-				}
-			});
-			hasTrackedEvent.current = true;
-		}
-	}, [trackEvent, buttonShouldRender]);
+	const { isReady } = useAmplitude();
+	const floatingButtonVisibilityRef = useRef(null);
+	useTrackComponentVisibleEvent(floatingButtonVisibilityRef, {
+		widget_config_id: "floating-button",
+		widget_type: WidgetTypeV3.FloatingButtonV3
+	}, "0px", isReady && buttonShouldRender);
 	return /* @__PURE__ */ jsx(CXButtonProvider, {
 		provider: cxProvider,
 		enabled: customerServiceIntegration?.enabled ?? false,
@@ -111,7 +112,7 @@ const FloatingChatWidgetHandler = (props) => {
 				salesAgentData,
 				hardcopyContent,
 				floatingChatConfig: uiConfig?.floatingChat ?? {},
-				lookAndFeelConfig: uiConfig?.lookAndFeel ?? {},
+				lookAndFeelConfig: modifiedLookAndFeelConfig ?? {},
 				isCXButtonSwitchEnabled: !!isSwitchEnabled?.(),
 				isFloatingChatOpen: effectiveIsOpen,
 				onToggleCXButton: toggle,
@@ -125,23 +126,26 @@ const FloatingChatWidgetHandler = (props) => {
 					handleClose({ collapse_source: "close_button" });
 				}
 			}) })
-		}), buttonShouldRender && /* @__PURE__ */ jsx(FloatingButton, {
-			id: FLOATING_BUTTON_ID,
-			variant: floatingButton?.style,
-			mode: floatingButton?.mode,
-			backgroundColor: floatingButton?.backgroundColor,
-			onClick: previewButtonOnly ? () => {} : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
-			onMouseOver: onHover,
-			customIcon: floatingButton?.iconSVGSrc,
-			show: floatingButton?.showOption,
-			location: floatingButton?.position,
-			hasInteractionHappened: userHasInteractedValue,
-			ariaLabel: "Open chat",
-			previewMode: !!previewButtonOnly
+		}), buttonShouldRender && /* @__PURE__ */ jsx("div", {
+			ref: floatingButtonVisibilityRef,
+			children: /* @__PURE__ */ jsx(FloatingButton, {
+				id: FLOATING_BUTTON_ID,
+				variant: floatingButton?.style,
+				mode: floatingButton?.mode,
+				backgroundColor: floatingButton?.backgroundColor,
+				onClick: previewButtonOnly ? () => {} : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON),
+				onMouseOver: onHover,
+				customIcon: floatingButton?.iconSVGSrc,
+				show: floatingButton?.showOption,
+				location: floatingButton?.position,
+				hasInteractionHappened: userHasInteractedValue,
+				ariaLabel: "Open chat",
+				previewMode: !!previewButtonOnly
+			})
 		})] })
 	}, cxProvider);
 };
-const FloatingChatWidgetWithBaseWidget = withBaseWidget(FloatingChatWidgetHandler);
+const FloatingChatWidgetWithBaseWidget = withBaseWidget(FloatingChatWidgetHandler, { deferLoading: false });
 const FloatingChatWidget = ({ previewButtonOnly, previewChatAlwaysOpen } = {}) => {
 	return /* @__PURE__ */ jsx(FloatingChatWidgetWithBaseWidget, {
 		widgetType: WidgetTypeV3.FloatingChatV3,

package/dist/widgets/FloatingChatWidget/hooks/useAutoPopup.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
 let react = require("react");
-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_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_ChatToggle = require("@envive-ai/react-hooks/hooks/ChatToggle");
 
 //#region src/widgets/FloatingChatWidget/hooks/useAutoPopup.ts
 const useAutoPopup = ({ autoPopupConfig }) => {

package/dist/widgets/FloatingChatWidget/hooks/useAutoPopup.js

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
-import { ChatElementDisplayLocationV3, FeatureGates } from "@envive-ai/react-hooks/application/models";
 import { useFeatureFlagService } from "@envive-ai/react-hooks/contexts/featureFlagServiceContext";
+import { ChatElementDisplayLocationV3, FeatureGates } from "@envive-ai/react-hooks/application/models";
+import { useChatToggle } from "@envive-ai/react-hooks/hooks/ChatToggle";
 
 //#region src/widgets/FloatingChatWidget/hooks/useAutoPopup.ts
 const useAutoPopup = ({ autoPopupConfig }) => {