@envive-ai/react-widgets-v3 0.3.6 → 0.3.7

package/src/CXIntegration/hooks/useUnifiedCXButton.ts

@@ -34,5 +34,13 @@ export const useUnifiedCXButton = ({
     if (!showUnifiedButton) return undefined;
   }
 
+  if (!selectedCustomerService.isSwitchEnabled() && !window?._spiffy?.selectedCustomizeOption) {
+    return undefined;
+  }
+
+  if (window?._spiffy?.selectedCustomizeOption && provider === CustomerServiceType.unsupported) {
+    return undefined;
+  }
+
   return selectedCustomerService;
 };

package/src/stories/SalesAgentTest/SalesAgentTest.tsx

@@ -56,7 +56,7 @@ export const SalesAgentTest = () => {
           onChange={e => setQuery(e.target.value)}
           onKeyDown={e => {
             if (e.key === 'Enter') {
-              onTypedMessageSubmitted({ query });
+              onTypedMessageSubmitted({ query, userTyped: true });
               setQuery('');
             }
           }}
@@ -65,7 +65,7 @@ export const SalesAgentTest = () => {
         <button
           type="button"
           onClick={() => {
-            onTypedMessageSubmitted({ query });
+            onTypedMessageSubmitted({ query, userTyped: true });
             setQuery('');
           }}
         >

package/src/widgets/ChatPreviewComparisonWidget/ChatPreviewComparisonWidget.tsx

@@ -2,8 +2,8 @@ import {
   ChatPreviewComparisonWidgetV3Config,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { handleReplyAtom } from '@envive-ai/react-hooks/atoms/chat/replies';
+import { useAtomValue } from 'jotai';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 
@@ -11,12 +11,8 @@ import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useCallback, useMemo } from 'react';
 import {
   ChatElementDisplayLocationV3,
-  Message,
-  MessageRole,
-  MessageType,
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
-import { v4 as uuid } from 'uuid';
 import { ChatPreviewComparison } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison';
 import { ChatPreviewComparisonProps } from '@envive-ai/react-toolkit-v3/ChatPreviewComparison/types/types';
 import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
@@ -26,7 +22,7 @@ import { getMessageText, getRecentProductImageUrls } from '../utils/functions';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
 
 const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
-  const handleReply = useSetAtom(handleReplyAtom);
+  const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
 
   const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
@@ -78,33 +74,15 @@ const ChatPreviewComparisonWidgetHandler = (props: BaseWidgetProps) => {
 
   const handlePromptButtonClick = useCallback(
     (text: string) => {
-      const newMessage: Message = {
-        id: uuid(),
-        role: MessageRole.User,
-        type: MessageType.QueryTyped,
-        createdAt: new Date().toISOString(),
-        metadata: { content: text },
-      };
-      handleReply({ message: newMessage, userTyped: false });
+      onTypedMessageSubmitted({ query: text, userTyped: false });
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_PROMPT_BUTTON);
     },
-    [handleReply, openChat],
+    [onTypedMessageSubmitted, openChat],
   );
 
-  const handleTextFieldClick = useCallback(
-    (text: string) => {
-      const newMessage: Message = {
-        id: uuid(),
-        role: MessageRole.User,
-        type: MessageType.QueryTyped,
-        createdAt: new Date().toISOString(),
-        metadata: { content: text },
-      };
-      handleReply({ message: newMessage, userTyped: false });
-      openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
-    },
-    [handleReply, openChat],
-  );
+  const handleTextFieldClick = useCallback(() => {
+    openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_COMPARISON_TEXT_FIELD);
+  }, [openChat]);
 
   if (isLoading) {
     return (

package/src/widgets/ChatPreviewWidget/ChatPreviewWidget.tsx

@@ -1,18 +1,17 @@
 import { ChatPreviewWidgetV3Config, WidgetTypeV3 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { handleReplyAtom } from '@envive-ai/react-hooks/atoms/chat/replies';
+import { useAtomValue } from 'jotai';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { chatAtom, lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { useCallback, useMemo } from 'react';
+
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { useCallback, useEffect, useMemo } from 'react';
 import {
-  ChatElementDisplayLocationV3,
-  Message,
-  MessageRole,
-  MessageType,
-} from '@envive-ai/react-hooks/application/models';
-import { v4 as uuid } from 'uuid';
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { ChatPreviewProps } from '@envive-ai/react-toolkit-v3/ChatPreview/types/types';
 import { ChatPreview } from '@envive-ai/react-toolkit-v3/ChatPreview';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
@@ -21,7 +20,7 @@ import { getMessageText } from '../utils/functions';
 import { ChatPreviewLoadingWidgetWithBaseWidget } from '../ChatPreviewLoadingWidget/ChatPreviewLoadingWidget';
 
 const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
-  const handleReply = useSetAtom(handleReplyAtom);
+  const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
 
   const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
@@ -50,39 +49,33 @@ const ChatPreviewWidgetHandler = (props: BaseWidgetProps) => {
     'messageText' | 'promptButtonTexts' | 'textFieldPlaceholderText' | 'titleLabel'
   >;
 
+  const { trackEvent } = useAmplitude();
+
+  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 handlePromptButtonClick = useCallback(
     (text: string) => {
-      const newMessage: Message = {
-        id: uuid(),
-        role: MessageRole.User,
-        type: MessageType.QueryTyped,
-        createdAt: new Date().toISOString(),
-        metadata: { content: text },
-      };
-      handleReply({ message: newMessage, userTyped: false });
+      onTypedMessageSubmitted({ query: text, userTyped: false });
       openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_PROMPT_BUTTON);
     },
-    [handleReply, openChat],
+    [onTypedMessageSubmitted, openChat],
   );
 
-  const handleTextFieldClick = useCallback(
-    (text: string) => {
-      const newMessage: Message = {
-        id: uuid(),
-        role: MessageRole.User,
-        type: MessageType.QueryTyped,
-        createdAt: new Date().toISOString(),
-        metadata: { content: text },
-      };
-      handleReply({ message: newMessage, userTyped: false });
-      openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
-    },
-    [handleReply, openChat],
-  );
+  const handleTextFieldClick = useCallback(() => {
+    openChat(ChatElementDisplayLocationV3.CHAT_PREVIEW_TEXT_FIELD);
+  }, [openChat]);
 
   if (isLoading) {
     return (

package/src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx

@@ -9,6 +9,7 @@ export interface FloatingChatOverlayProps {
   onClose: () => void;
   className?: string;
   dataTestId?: string;
+  previewMode?: boolean;
 }
 
 export const FloatingChatOverlay = ({
@@ -17,13 +18,14 @@ export const FloatingChatOverlay = ({
   onClose,
   className,
   dataTestId,
+  previewMode = false,
 }: FloatingChatOverlayProps) => {
   const overlayClasses = classNames(
     'envive-floating-chat-overlay',
-    'envive-tw-fixed',
+    previewMode ? 'envive-tw-absolute' : 'envive-tw-fixed',
     'envive-tw-top-0',
     'envive-tw-left-0',
-    'envive-tw-h-screen',
+    previewMode ? 'envive-tw-h-full' : 'envive-tw-h-screen',
     'envive-tw-w-full',
     'envive-tw-z-[2147483647]',
     className,
@@ -67,14 +69,16 @@ export const FloatingChatOverlay = ({
           transition={{ duration: 0.3 }}
           data-testid={dataTestId}
         >
-          <motion.div
-            className={backdropClasses}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 0.5 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.3 }}
-            aria-label="Close chat"
-          />
+          {!previewMode && (
+            <motion.div
+              className={backdropClasses}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 0.5 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              aria-label="Close chat"
+            />
+          )}
           <div
             className={overlayContentClasses}
             onClick={onClose}
@@ -88,11 +92,11 @@ export const FloatingChatOverlay = ({
             aria-label="Close floating chat"
           >
             <motion.div
-              initial={{ opacity: 0, x: 512 }}
+              initial={{ opacity: 0, x: previewMode ? 0 : 512 }}
               animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: 512 }}
+              exit={{ opacity: 0, x: previewMode ? 0 : 512 }}
               transition={{ duration: 0.3 }}
-              style={{ height: '100dvh', cursor: 'default' }}
+              style={{ height: previewMode ? '100%' : '100dvh', cursor: 'default' }}
               className="envive-tw-shadow-md"
               onClick={e => e.stopPropagation()}
             >
@@ -104,6 +108,11 @@ export const FloatingChatOverlay = ({
     </AnimatePresence>
   );
 
+  // In preview mode, render inline. Otherwise use portal to body
+  if (previewMode) {
+    return chatWrapper;
+  }
+
   // Render using portal to body to ensure it's on top of everything
   if (typeof document !== 'undefined') {
     return createPortal(chatWrapper, document.body);

package/src/widgets/FloatingChatWidget/FloatingChatWidget.tsx

@@ -1,9 +1,13 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import {
   FloatingChatConfig,
   LookAndFeelConfig,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
+import {
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { FloatingChat } from '@envive-ai/react-toolkit-v3/FloatingChat';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
@@ -23,8 +27,15 @@ import useGetWidgetStatus from '../hooks/useGetWidgetStatus';
 import { useUnifiedCXButton } from '../../CXIntegration/hooks/useUnifiedCXButton';
 import { FLOATING_BUTTON_ID } from './constants';
 import { CustomerServiceType } from '../../CXIntegration/types';
+import { useFloatingButtonVisibility } from './hooks/useFloatingButtonVisibility';
+
+interface FloatingChatWidgetHandlerProps extends BaseWidgetProps {
+  previewButtonOnly?: boolean;
+  previewChatAlwaysOpen?: boolean;
+}
 
-const FloatingChatWidgetHandler = (props: BaseWidgetProps) => {
+const FloatingChatWidgetHandler = (props: FloatingChatWidgetHandlerProps) => {
+  const { previewButtonOnly, previewChatAlwaysOpen } = props;
   const salesAgentData = useSalesAgent();
 
   const { userHasInteractedValue } = useGetWidgetStatus();
@@ -46,9 +57,23 @@ const FloatingChatWidgetHandler = (props: BaseWidgetProps) => {
   });
 
   const { isSwitchEnabled, toggle } = unifiedCXButton ?? {};
+
+  const { floatingButton } = uiConfig ?? {};
+
   // TODO: Get hardcopy content
   const { isOpen, openChat, closeChat } = useChatToggle();
 
+  const { shouldShowFloatingButton } = useFloatingButtonVisibility({
+    floatingButtonShowConfig: floatingButton?.showOption as FloatingButtonShow,
+    isChatOpen: isOpen,
+    userHasInteracted: userHasInteractedValue,
+  });
+
+  // Override isOpen for preview modes
+  const effectiveIsOpen = previewChatAlwaysOpen ? true : isOpen;
+  const effectiveShouldRenderFloatingButton = !isOpen && shouldShowFloatingButton;
+  const buttonShouldRender = previewButtonOnly ? true : effectiveShouldRenderFloatingButton;
+
   const theme = useMemo(() => {
     if (isUiConfigLoading || !uiConfig) {
       return Theme.STANDARD;
@@ -57,52 +82,94 @@ const FloatingChatWidgetHandler = (props: BaseWidgetProps) => {
     return (uiConfig?.lookAndFeel?.theme as Theme) ?? Theme.GLOBAL_CUSTOM;
   }, [isUiConfigLoading, uiConfig]);
 
-  const { floatingButton } = uiConfig ?? {};
+  const { trackEvent } = useAmplitude();
+  const hasTrackedEvent = useRef(false);
+  // When we add support for initially hidden floating buttons, we will need to update this to handle that case
+  useEffect(() => {
+    if (buttonShouldRender && !hasTrackedEvent.current) {
+      trackEvent({
+        eventName: SpiffyMetricsEventName.ChatComponentVisible,
+        eventProps: {
+          widget_config_id: 'floating-button',
+          widget_type: WidgetTypeV3.FloatingButtonV3,
+        },
+      });
+      hasTrackedEvent.current = true;
+    }
+  }, [trackEvent, buttonShouldRender]);
 
   return (
     <>
-      <FloatingChatOverlay
-        isOpened={isOpen}
-        onClose={() => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)}
-      >
-        <FloatingChat
-          theme={theme}
-          salesAgentData={salesAgentData}
-          floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
-          lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
-          isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
-          onToggleCXButton={toggle}
-          onClose={() => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)}
-        />
-      </FloatingChatOverlay>
+      {/* Render chat when always open preview OR when normally open */}
+      {(previewChatAlwaysOpen || effectiveIsOpen) && !previewButtonOnly && (
+        <FloatingChatOverlay
+          isOpened={effectiveIsOpen}
+          onClose={
+            previewChatAlwaysOpen
+              ? () => {}
+              : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_OVERLAY)
+          }
+          previewMode={!!previewChatAlwaysOpen}
+        >
+          <FloatingChat
+            theme={theme}
+            salesAgentData={salesAgentData}
+            floatingChatConfig={uiConfig?.floatingChat ?? ({} as FloatingChatConfig)}
+            lookAndFeelConfig={uiConfig?.lookAndFeel ?? ({} as LookAndFeelConfig)}
+            isCXButtonSwitchEnabled={!!isSwitchEnabled?.()}
+            isFloatingChatOpen={effectiveIsOpen}
+            onToggleCXButton={toggle}
+            onClose={
+              previewChatAlwaysOpen
+                ? () => {}
+                : () => closeChat(ChatElementDisplayLocationV3.FLOATING_CHAT_CLOSE_BUTTON)
+            }
+          />
+        </FloatingChatOverlay>
+      )}
 
-      {!isOpen && (
+      {/* Render button when preview button only OR when chat is closed */}
+      {buttonShouldRender && (
         <FloatingButton
           id={FLOATING_BUTTON_ID}
           variant={floatingButton?.style as FloatingButtonVariant}
           mode={floatingButton?.mode as FloatingButtonMode}
           backgroundColor={floatingButton?.backgroundColor as FloatingButtonBackgroundColor}
-          onClick={() => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)}
+          onClick={
+            previewButtonOnly
+              ? () => {}
+              : () => openChat(ChatElementDisplayLocationV3.FLOATING_BUTTON)
+          }
           customIcon={floatingButton?.iconSVGSrc}
           show={floatingButton?.showOption as FloatingButtonShow}
           location={floatingButton?.position as FloatingButtonLocation}
           hasInteractionHappened={userHasInteractedValue}
           ariaLabel="Open chat"
+          previewMode={!!previewButtonOnly}
         />
       )}
     </>
   );
 };
 
-const FloatingChatWidgetWithBaseWidget = withBaseWidget<BaseWidgetProps>(FloatingChatWidgetHandler);
+const FloatingChatWidgetWithBaseWidget =
+  withBaseWidget<FloatingChatWidgetHandlerProps>(FloatingChatWidgetHandler);
 
-export interface FloatingChatWidgetProps {}
+export interface FloatingChatWidgetProps {
+  previewButtonOnly?: boolean;
+  previewChatAlwaysOpen?: boolean;
+}
 
-export const FloatingChatWidget = () => {
+export const FloatingChatWidget = ({
+  previewButtonOnly,
+  previewChatAlwaysOpen,
+}: FloatingChatWidgetProps = {}) => {
   return (
     <FloatingChatWidgetWithBaseWidget
       widgetType={WidgetTypeV3.FloatingChatV3}
       widgetConfigId="fake-widget-config-id"
+      previewButtonOnly={previewButtonOnly}
+      previewChatAlwaysOpen={previewChatAlwaysOpen}
     />
   );
 };

package/src/widgets/FloatingChatWidget/hooks/useFloatingButtonVisibility.ts

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { featureFlagServiceAtom } from '@envive-ai/react-hooks/atoms/org';
+import { FeatureGates } from '@envive-ai/react-hooks/application/models';
+import { FloatingButtonShow } from '@envive-ai/react-toolkit-v3/FloatingButton';
+
+export interface UseFloatingButtonVisibilityProps {
+  floatingButtonShowConfig?: FloatingButtonShow;
+  isChatOpen: boolean;
+  userHasInteracted: boolean;
+}
+
+export interface UseFloatingButtonVisibilityReturn {
+  shouldShowFloatingButton: boolean;
+  isSalesAgentEnabled: boolean;
+}
+
+export const useFloatingButtonVisibility = ({
+  floatingButtonShowConfig = FloatingButtonShow.ALWAYS,
+  isChatOpen,
+  userHasInteracted,
+}: UseFloatingButtonVisibilityProps): UseFloatingButtonVisibilityReturn => {
+  const featureFlagService = useAtomValue(featureFlagServiceAtom);
+
+  const isSalesAgentEnabled = useMemo(
+    () =>
+      featureFlagService?.featureFlagService?.isFeatureGateEnabled(
+        FeatureGates.IsSalesAgentEnabled,
+      ),
+    [featureFlagService],
+  );
+
+  const shouldShowFloatingButton =
+    (isSalesAgentEnabled || isSalesAgentEnabled === undefined) &&
+    !isChatOpen &&
+    (floatingButtonShowConfig === FloatingButtonShow.ALWAYS ||
+      (floatingButtonShowConfig === FloatingButtonShow.POST_INTERACTION && userHasInteracted));
+
+  return {
+    shouldShowFloatingButton,
+    isSalesAgentEnabled,
+  };
+};

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -2,19 +2,16 @@ import {
   PromptButtonCarouselWithImageWidgetV3Config,
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
-import { useSetAtom } from 'jotai';
-import { handleReplyAtom } from '@envive-ai/react-hooks/atoms/chat/replies';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
-  ChatElementDisplayLocationV3,
-  Message,
-  MessageRole,
-  MessageType,
-} from '@envive-ai/react-hooks/application/models';
-import { v4 as uuid } from 'uuid';
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import {
   PromptButtonCarouselWithImage,
   PromptButtonCarouselWithImageProps,
@@ -23,10 +20,10 @@ import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
 
 const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
-  const handleReply = useSetAtom(handleReplyAtom);
+  const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
 
-  const { hardcopyContent, widgetConfig, isLoading } = props;
+  const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 
   const promptButtonCarouselWithImageWidgetConfig =
     widgetConfig as PromptButtonCarouselWithImageWidgetV3Config;
@@ -42,35 +39,29 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
     'title' | 'promptButtonsTexts' | 'textFieldPlaceholder'
   >;
 
+  const { trackEvent } = useAmplitude();
+
+  useEffect(() => {
+    trackEvent({
+      eventName: SpiffyMetricsEventName.ChatComponentVisible,
+      eventProps: {
+        widget_config_id: widgetConfigId,
+        widget_type: WidgetTypeV3.PromptButtonCarouselWithImageV3,
+      },
+    });
+  }, [trackEvent, widgetConfigId]);
+
   const handlePromptButtonClick = useCallback(
     (text: string) => {
-      const newMessage: Message = {
-        id: uuid(),
-        role: MessageRole.User,
-        type: MessageType.QueryTyped,
-        createdAt: new Date().toISOString(),
-        metadata: { content: text },
-      };
-      handleReply({ message: newMessage, userTyped: false });
+      onTypedMessageSubmitted({ query: text, userTyped: false });
       openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_PROMPT_BUTTON);
     },
-    [handleReply, openChat],
+    [onTypedMessageSubmitted, openChat],
   );
 
-  const handleTextFieldClick = useCallback(
-    (text: string) => {
-      const newMessage: Message = {
-        id: uuid(),
-        role: MessageRole.User,
-        type: MessageType.QueryTyped,
-        createdAt: new Date().toISOString(),
-        metadata: { content: text },
-      };
-      handleReply({ message: newMessage, userTyped: false });
-      openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
-    },
-    [handleReply, openChat],
-  );
+  const handleTextFieldClick = useCallback(() => {
+    openChat(ChatElementDisplayLocationV3.PROMPT_BUTTON_CAROUSEL_WITH_IMAGE_TEXT_FIELD);
+  }, [openChat]);
 
   return (
     <PromptButtonCarouselWithImage

package/src/widgets/PromptCarouselWidget/PromptCarouselWidget.tsx

@@ -3,16 +3,14 @@ import {
   WidgetTypeV3,
 } from '@envive-ai/react-hooks/contexts/typesV3';
 import { PromptButtonVariant } from '@envive-ai/react-toolkit-v3/PromptButton/types';
-import { useCallback } from 'react';
-import { v4 as uuid } from 'uuid';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { useCallback, useEffect } from 'react';
 import {
-  ChatElementDisplayLocationV3,
-  Message,
-  MessageRole,
-  MessageType,
-} from '@envive-ai/react-hooks/application/models';
-import { useSetAtom } from 'jotai';
-import { handleReplyAtom } from '@envive-ai/react-hooks/atoms/chat/replies';
+  SpiffyMetricsEventName,
+  useAmplitude,
+} from '@envive-ai/react-hooks/contexts/amplitudeContext';
+
 import { useChatToggle } from '@envive-ai/react-hooks/hooks/ChatToggle';
 import { AnimationSpeed } from '@envive-ai/react-toolkit-v3/PromptCarousel/types/types';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
@@ -28,10 +26,10 @@ const mockButtonTexts = [
 ];
 
 const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
-  const handleReply = useSetAtom(handleReplyAtom);
+  const { onTypedMessageSubmitted } = useSalesAgent();
   const { openChat } = useChatToggle();
 
-  const { hardcopyContent, widgetConfig, isLoading } = props;
+  const { hardcopyContent, widgetConfig, isLoading, widgetConfigId } = props;
 
   const promptButtonTexts = (hardcopyContent?.values?.promptButtonTexts as string[]) || [];
   const buttonTexts = isLoading ? mockButtonTexts : promptButtonTexts;
@@ -46,19 +44,24 @@ const PromptCarouselWidgetHandler = (props: BaseWidgetProps) => {
     ? AnimationSpeed.FAST
     : promptCarouselWidgetConfig?.animationSpeed;
 
+  const { trackEvent } = useAmplitude();
+
+  useEffect(() => {
+    trackEvent({
+      eventName: SpiffyMetricsEventName.ChatComponentVisible,
+      eventProps: {
+        widget_config_id: widgetConfigId,
+        widget_type: WidgetTypeV3.PromptCarouselV3,
+      },
+    });
+  }, [trackEvent, widgetConfigId]);
+
   const handleButtonClick = useCallback(
     (text: string) => {
-      const newMessage: Message = {
-        id: uuid(),
-        role: MessageRole.User,
-        type: MessageType.QueryTyped,
-        createdAt: new Date().toISOString(),
-        metadata: { content: text },
-      };
-      handleReply({ message: newMessage, userTyped: false });
+      onTypedMessageSubmitted({ query: text, userTyped: false });
       openChat(ChatElementDisplayLocationV3.PROMPT_CAROUSEL);
     },
-    [handleReply, openChat],
+    [onTypedMessageSubmitted, openChat],
   );
 
   return (