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

package/src/widgets/TypingAnimationWidget/TypingAnimationWidget.tsx

@@ -1,10 +1,14 @@
-import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import {
+  ChatElementDisplayLocationV3,
+  FeatureGates,
+} from '@envive-ai/react-hooks/application/models';
 import { chatOnToggleAtom } from '@envive-ai/react-hooks/atoms/chat/chatState';
 import {
   EnviveMetricsEventName,
   useAmplitude,
 } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useFeatureFlagService } from '@envive-ai/react-hooks/contexts/featureFlagServiceContext';
 import {
   TypingAnimationWidgetV3Config,
   WidgetTypeV3,
@@ -42,7 +46,7 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
   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 as string | undefined) || '';
   const headlineText = (hardcopyContent?.values?.headlineText as string | undefined) || '';
@@ -69,6 +73,10 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
 
   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();
@@ -119,6 +127,29 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
     });
   }, [onToggle]);
 
+  const handleTranscriptionStarted = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_STARTED,
+      },
+    });
+  }, []);
+
+  const handleTranscriptionCompleted = useCallback((transcript: string) => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.EMBEDDED_WIDGET,
+        widget_interaction: WidgetInteractionType.VOICE_TRANSCRIPTION_COMPLETED,
+        widget_interaction_data: {
+          transcription: transcript,
+        },
+      },
+    });
+  }, []);
+
   return (
     <TypingAnimation
       baseProps={{
@@ -133,6 +164,7 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         textFieldAriaLabel,
         logoSrc: logoSrc ?? undefined,
         hideLogo: hideLogo ?? false,
+        voiceInputEnabled: isVoiceInputEnabled,
       }}
       widgetStyleProps={{
         widgetVariant,
@@ -151,6 +183,8 @@ const TypingAnimationWidgetHandler = (props: BaseWidgetProps) => {
         handleButtonTouchStart: onTouchStart,
         handleButtonTouchEnd: onTouchEnd,
         handleTextFieldClick,
+        onTranscriptionStarted: handleTranscriptionStarted,
+        onTranscriptionCompleted: handleTranscriptionCompleted,
       }}
     />
   );