@envive-ai/react-widgets-v3 0.3.39 → 0.3.41

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

@@ -1,5 +1,5 @@
 import { SearchResultsEntryPointWidgetConfig } from "./types.cjs";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { SearchResultsHocProps } from "@envive-ai/react-hooks/hooks/Search";
 
 //#region ../widgets/dist/SearchResults/SearchResults.d.ts
@@ -7,7 +7,7 @@ import { SearchResultsHocProps } from "@envive-ai/react-hooks/hooks/Search";
 interface SearchResultsProps extends SearchResultsHocProps {
   widgetConfig: SearchResultsEntryPointWidgetConfig;
 }
-declare const SearchResults: (props: Omit<SearchResultsProps, string | number | symbol>) => react_jsx_runtime1.JSX.Element;
+declare const SearchResults: (props: Omit<SearchResultsProps, string | number | symbol>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 
 //#endregion

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/SuggestionBar/SuggestionBar.d.cts

@@ -1,5 +1,5 @@
 import { SuggestionBarLocationForMetrics } from "./types.cjs";
-import * as react_jsx_runtime0 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_runtime0.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 react = require("react");
 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 { useMemo } from "react";
 import { responseStreamingAtom } from "@envive-ai/react-hooks/atoms/chat/chatState";
 
 //#region src/widgets/hooks/useGetWidgetStatus.tsx

package/package.json

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

package/src/CXIntegration/implementations/useFreshChatUnifiedCXButton.ts

@@ -0,0 +1,132 @@
+import { useRef } from 'react';
+import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
+import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
+import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
+
+const FRESHCHAT_FRAME_ID = 'fc_frame';
+const FRESHCHAT_WIDGET_ID = 'fc_widget';
+const FRESHCHAT_OPEN_CLASS = 'fc-open';
+const FRESHCHAT_LAUNCHER_SELECTOR = '.d-hotline';
+
+interface FreshChatApi {
+  open: () => void;
+  close: () => void;
+  show: () => void;
+  hide: () => void;
+  isOpen?: () => boolean;
+  isLoaded?: () => boolean;
+  on?: (event: string, callback: () => void) => void;
+}
+
+declare global {
+  interface Window {
+    fcWidget?: FreshChatApi;
+  }
+}
+
+interface UseFreshChatUnifiedCXButtonProps extends CustomerServiceImplProps {}
+
+const isFreshChatOpen = (el: HTMLElement | null): boolean => {
+  if (!el) return false;
+  if (el.classList.contains(FRESHCHAT_OPEN_CLASS)) return true;
+  // Fallback: when open, the iframe expands well beyond launcher dimensions
+  const iframe = document.getElementById(FRESHCHAT_WIDGET_ID) as HTMLIFrameElement | null;
+  if (!iframe) return false;
+  const rect = iframe.getBoundingClientRect();
+  return rect.width > 80 && rect.height > 80;
+};
+
+export const useFreshChatUnifiedCXButton = ({
+  onSwitchToAgent,
+  onCXClose,
+  suppressMerchantButton,
+}: UseFreshChatUnifiedCXButtonProps): UnifiedCXButton => {
+  const freshchatFrame = useElementObserver(SelectorFactory.id(FRESHCHAT_FRAME_ID));
+  const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
+  // Tracks the previous open/closed state so onChange (which fires on every DOM
+  // mutation inside #fc_frame) only acts on real transitions — otherwise the
+  // floating button flickers while the chat panel is in use.
+  const wasOpenRef = useRef(false);
+
+  const toggle = () => {
+    onSwitchToAgent();
+    enviveFloatingButton.hide();
+
+    if (typeof window.fcWidget !== 'undefined') {
+      window.fcWidget.show();
+      window.fcWidget.open();
+    } else {
+      freshchatFrame.show();
+      const iframe = document.getElementById(FRESHCHAT_WIDGET_ID) as HTMLIFrameElement | null;
+      const launcher = iframe?.contentDocument?.querySelector(
+        FRESHCHAT_LAUNCHER_SELECTOR,
+      ) as HTMLElement | null;
+      launcher?.click();
+    }
+  };
+
+  const isFreshChatAvailable = () => {
+    const frame = document.getElementById(FRESHCHAT_FRAME_ID);
+    const hasApi = typeof window.fcWidget !== 'undefined';
+    return !!(frame || hasApi);
+  };
+
+  const isSwitchEnabled = () => isFreshChatAvailable();
+
+  freshchatFrame.onAdd(el => {
+    if (!el) return;
+
+    const isOpen = isFreshChatOpen(el);
+    wasOpenRef.current = isOpen;
+
+    if (isOpen) {
+      enviveFloatingButton.hide();
+    } else {
+      enviveFloatingButton.show();
+    }
+
+    if (suppressMerchantButton) {
+      if (isOpen) {
+        freshchatFrame.show();
+      } else {
+        freshchatFrame.hide();
+      }
+    }
+  });
+
+  freshchatFrame.onChange(el => {
+    if (!el) return;
+
+    const isOpen = isFreshChatOpen(el);
+
+    if (isOpen === wasOpenRef.current) return;
+    wasOpenRef.current = isOpen;
+
+    if (isOpen) {
+      enviveFloatingButton.hide();
+      if (suppressMerchantButton) {
+        freshchatFrame.show();
+      }
+    } else {
+      onCXClose?.();
+      enviveFloatingButton.show();
+      if (suppressMerchantButton) {
+        freshchatFrame.hide();
+      }
+    }
+  });
+
+  freshchatFrame.onRemove(() => {
+    if (wasOpenRef.current) {
+      onCXClose?.();
+    }
+    wasOpenRef.current = false;
+    enviveFloatingButton.show();
+  });
+
+  return {
+    toggle,
+    isSwitchEnabled,
+  };
+};

package/src/CXIntegration/implementations/useHelpScoutUnifiedCXButton.ts

@@ -1,102 +1,232 @@
 import { SelectorFactory } from '@envive-ai/react-hooks/application/utils';
 import { useElementObserver } from '@envive-ai/react-hooks/hooks/ElementObserver';
+import { useEffect, useRef } from 'react';
 import { FLOATING_BUTTON_ID } from '../../widgets/FloatingChatWidget/constants';
 import { CustomerServiceImplProps, UnifiedCXButton } from '../types';
 
 const BEACON_CONTAINER_ID = 'beacon-container';
+const FAB_BUTTON_SELECTOR = '.BeaconFabButtonFrame';
+const BEACON_WIDGET_SELECTOR = '.BeaconContainer';
+// HelpScout's container may render the widget either as a styled `.BeaconContainer` or
+// (e.g. in the "Instant Answers" view) inside an iframe. We treat either as "open".
+const BEACON_OPEN_CHILD_SELECTOR = '.BeaconContainer, iframe, [class*="Beacon"][class*="ontainer"]';
 
 interface UseHelpScoutUnifiedCXButtonProps extends CustomerServiceImplProps {}
 
+type BeaconApi = (command: string, ...args: unknown[]) => void;
+
+const getBeaconApi = (): BeaconApi | undefined => {
+  const beacon = (window as unknown as { Beacon?: BeaconApi }).Beacon;
+  return typeof beacon === 'function' ? beacon : undefined;
+};
+
+const getBeaconContainer = (): HTMLElement | null => document.getElementById(BEACON_CONTAINER_ID);
+
+const getFabButton = (): HTMLElement | null => {
+  return (getBeaconContainer()?.querySelector(FAB_BUTTON_SELECTOR) as HTMLElement) ?? null;
+};
+
+const getFloatingButtonEl = (): HTMLElement | null => document.getElementById(FLOATING_BUTTON_ID);
+
+/**
+ * Detects whether the HelpScout beacon is currently visible/open.
+ * We use multiple signals because HelpScout has different "views"
+ * (chat, instant answers) that may use different class names.
+ */
+const isBeaconCurrentlyOpen = (): boolean => {
+  const container = getBeaconContainer();
+  if (!container) return false;
+
+  // Signal 1: a `.BeaconContainer` exists with an enter-* class
+  const beaconWidget = container.querySelector(BEACON_WIDGET_SELECTOR);
+  if (beaconWidget) {
+    const cl = beaconWidget.classList;
+    if (
+      cl.contains('BeaconContainer-enter-done') ||
+      cl.contains('BeaconContainer-enter-active') ||
+      cl.contains('BeaconContainer-enter')
+    ) {
+      return true;
+    }
+    if (
+      cl.contains('BeaconContainer-exit') ||
+      cl.contains('BeaconContainer-exit-active') ||
+      cl.contains('BeaconContainer-exit-done')
+    ) {
+      return false;
+    }
+  }
+
+  // Signal 2: any non-FAB visible child in the container means the panel is rendered
+  const children = Array.from(container.children);
+  return children.some(child => {
+    if (child.matches(FAB_BUTTON_SELECTOR)) return false;
+    const rect = (child as HTMLElement).getBoundingClientRect();
+    return rect.width > 50 && rect.height > 50;
+  });
+};
+
+/**
+ * Force-hides the Envive floating button via direct DOM manipulation. This is a
+ * safety net for cases where React state alone doesn't unmount the element fast
+ * enough (or at all), so we never get a flash of the floating button on top of
+ * the merchant's CX UI.
+ */
+const forceHideFloatingButton = () => {
+  const el = getFloatingButtonEl();
+  if (el) el.style.display = 'none';
+};
+
+/**
+ * Restores the Envive floating button display, letting React's render logic take
+ * over again.
+ */
+const forceShowFloatingButton = () => {
+  const el = getFloatingButtonEl();
+  if (el && el.style.display === 'none') el.style.display = '';
+};
+
 export const useHelpScoutUnifiedCXButton = ({
   onSwitchToAgent,
+  onCXClose,
   suppressMerchantButton,
 }: UseHelpScoutUnifiedCXButtonProps): UnifiedCXButton => {
   const beaconContainer = useElementObserver(SelectorFactory.id(BEACON_CONTAINER_ID));
   const enviveFloatingButton = useElementObserver(SelectorFactory.id(FLOATING_BUTTON_ID));
 
+  // Track previous open state so we only fire onCXClose on a real open→closed
+  // transition, not on initial render or during the open animation.
+  const wasOpenRef = useRef(false);
+
+  // Keep latest callbacks/flags in refs so the Beacon API effect can read them
+  // without re-binding listeners on every render.
+  const onCXCloseRef = useRef(onCXClose);
+  const suppressMerchantButtonRef = useRef(suppressMerchantButton);
+  useEffect(() => {
+    onCXCloseRef.current = onCXClose;
+    suppressMerchantButtonRef.current = suppressMerchantButton;
+  }, [onCXClose, suppressMerchantButton]);
+
+  const handleBeaconOpened = () => {
+    wasOpenRef.current = true;
+    // Always force-hide the Envive floating button when the merchant CX opens.
+    // This is the safety net regardless of suppressMerchantButton.
+    forceHideFloatingButton();
+    if (suppressMerchantButtonRef.current) {
+      const fabButton = getFabButton();
+      if (fabButton) fabButton.style.display = '';
+      enviveFloatingButton.hide();
+    }
+  };
+
+  const handleBeaconClosed = () => {
+    if (!wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    onCXCloseRef.current?.();
+    forceShowFloatingButton();
+    if (suppressMerchantButtonRef.current) {
+      const fabButton = getFabButton();
+      if (fabButton) fabButton.style.display = 'none';
+      enviveFloatingButton.show();
+    }
+  };
+
   const toggle = () => {
     onSwitchToAgent();
+    // Force hide BEFORE opening HelpScout so there's no flash of the floating
+    // button next to the merchant's CX panel.
+    wasOpenRef.current = true;
+    forceHideFloatingButton();
+    if (suppressMerchantButton) {
+      enviveFloatingButton.hide();
+    }
 
-    // Try using the Help Scout Beacon API first
-    if (typeof (window as any).Beacon !== 'undefined') {
-      (window as any).Beacon('open');
+    const beacon = getBeaconApi();
+    if (beacon) {
+      beacon('open');
     } else {
-      // Fallback: Find and click the FAB button
-      const container = document.getElementById(BEACON_CONTAINER_ID);
-      const fabButton = container?.querySelector('.BeaconFabButtonFrame') as HTMLElement;
+      // Fallback: find and click the FAB button
+      const fabButton = getFabButton();
       if (fabButton) {
         fabButton.style.display = '';
         fabButton.click();
       }
     }
-
-    if (suppressMerchantButton) {
-      enviveFloatingButton.hide();
-    }
   };
 
   const isHelpScoutButtonEnabled = () => {
-    // Check for the main Help Scout Beacon container
-    const beaconContainerEl = document.getElementById('beacon-container');
+    const beaconContainerEl = getBeaconContainer();
     if (!beaconContainerEl) return false;
-
-    // Check for the FAB button (Floating Action Button) or the global Beacon API
-    const fabButton = beaconContainerEl.querySelector('.BeaconFabButtonFrame');
-    const hasBeaconAPI = typeof (window as any).Beacon !== 'undefined';
-
+    const fabButton = beaconContainerEl.querySelector(FAB_BUTTON_SELECTOR);
+    const hasBeaconAPI = !!getBeaconApi();
     return !!(fabButton || hasBeaconAPI);
   };
 
   const isSwitchEnabled = () => isHelpScoutButtonEnabled();
 
-  // Hide Help Scout FAB button when beacon container is added
+  // Use the official HelpScout Beacon API events for the most reliable open/close
+  // detection. We use empty deps + refs so this binds exactly once per mount, not
+  // every render — important because the Beacon listener registry doesn't dedupe.
+  useEffect(() => {
+    const beacon = getBeaconApi();
+    if (!beacon) return undefined;
+
+    try {
+      beacon('on', 'open', handleBeaconOpened);
+      beacon('on', 'close', handleBeaconClosed);
+    } catch {
+      // Beacon may not be initialized yet — the MutationObserver fallback will
+      // still detect the open/close transitions below.
+    }
+
+    return () => {
+      try {
+        beacon('off', 'open', handleBeaconOpened);
+        beacon('off', 'close', handleBeaconClosed);
+      } catch {
+        // ignore — beacon may already be torn down
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Hide the merchant's FAB button when the beacon container is added. Do NOT
+  // blindly re-show the Envive floating button here — if `Beacon('open')` creates
+  // the container in response to a "live support" click, this would un-hide the
+  // floating button the user just hid via toggle().
   beaconContainer.onAdd(() => {
     if (suppressMerchantButton) {
-      const fabButton = document
-        .getElementById(BEACON_CONTAINER_ID)
-        ?.querySelector('.BeaconFabButtonFrame') as HTMLElement;
-      if (fabButton) {
-        fabButton.style.display = 'none';
-      }
+      const fabButton = getFabButton();
+      if (fabButton) fabButton.style.display = 'none';
+    }
+    // If the beacon happens to mount in an already-open state, treat it like a
+    // proper open transition so the floating button is hidden.
+    if (isBeaconCurrentlyOpen()) {
+      handleBeaconOpened();
+    } else if (suppressMerchantButton) {
       enviveFloatingButton.show();
     }
   });
 
-  // Observe the beacon container for visibility changes
-  // Help Scout Beacon adds/removes classes to show/hide the widget
+  // MutationObserver fallback for cases where the Beacon API events don't fire
+  // (older Beacon versions, opened via direct DOM manipulation, etc.). The logic
+  // here is broader than just checking enter/exit classes because the "Instant
+  // Answers" view can use different DOM markers.
   beaconContainer.onChange(el => {
-    if (el && suppressMerchantButton) {
-      // Check if the BeaconContainer widget is open
-      const beaconWidget = el.querySelector('.BeaconContainer');
-      const fabButton = el.querySelector('.BeaconFabButtonFrame') as HTMLElement;
-
-      if (beaconWidget && fabButton) {
-        const { classList } = beaconWidget;
-
-        // When beacon is open (has enter-done class)
-        if (
-          classList.contains('BeaconContainer-enter-done') ||
-          classList.contains('BeaconContainer-enter-active')
-        ) {
-          fabButton.style.display = '';
-          enviveFloatingButton.hide();
-        }
-
-        // When beacon is closed (has exit class)
-        if (
-          classList.contains('BeaconContainer-exit') ||
-          classList.contains('BeaconContainer-exit-active')
-        ) {
-          fabButton.style.display = 'none';
-          enviveFloatingButton.show();
-        }
-      }
+    if (!el) return;
+    const open = isBeaconCurrentlyOpen();
+    if (open && !wasOpenRef.current) {
+      handleBeaconOpened();
+    } else if (!open && wasOpenRef.current) {
+      handleBeaconClosed();
     }
   });
 
-  // Cleanup when container is removed
+  // Cleanup when the entire container is removed.
   beaconContainer.onRemove(() => {
-    if (suppressMerchantButton) {
+    if (wasOpenRef.current) {
+      handleBeaconClosed();
+    } else if (suppressMerchantButton) {
       enviveFloatingButton.show();
     }
   });

package/src/CXIntegration/types.ts

@@ -12,6 +12,7 @@ export enum CustomerServiceType {
   helpscout = 'helpscout',
   talkdesk = 'talkdesk',
   eightByEight = '8x8',
+  freshchat = 'freshchat',
   unsupported = 'unsupported',
 }
 

package/src/CXIntegration/utils/functions.ts

@@ -13,6 +13,7 @@ import { useKustomerUnifiedCXButton } from '../implementations/useKustomerUnifie
 import { useHelpScoutUnifiedCXButton } from '../implementations/useHelpScoutUnifiedCXButton';
 import { useTalkdeskUnifiedCXButton } from '../implementations/useTalkdeskUnifiedCXButton';
 import { useEightByEightUnifiedCXButton } from '../implementations/useEightByEightUnifiedCXButton';
+import { useFreshChatUnifiedCXButton } from '../implementations/useFreshChatUnifiedCXButton';
 import { useDefaultUnifiedCXButton } from '../implementations/useDefaultUnifiedCXButton';
 
 export const findCustomerServiceImpl = (
@@ -57,6 +58,9 @@ export const findCustomerServiceImpl = (
   if (provider === CustomerServiceType.eightByEight) {
     return useEightByEightUnifiedCXButton;
   }
+  if (provider === CustomerServiceType.freshchat) {
+    return useFreshChatUnifiedCXButton;
+  }
 
   return useDefaultUnifiedCXButton;
 };

package/src/widgets/FloatingChatWidget/FloatingChatOverlay.tsx

@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
+import { ReactNode, useRef } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import classNames from 'classnames';
 import { useCheckIsMobile } from '@envive-ai/react-toolkit-v3/utils/useCheckIsMobile';
+import { useFocusTrap } from '@envive-ai/react-hooks/hooks/FocusTrap';
 
 export interface FloatingChatOverlayProps {
   children?: ReactNode;
@@ -54,6 +55,8 @@ export const FloatingChatOverlay = ({
     previewMode,
     isMobile,
   });
+  const dialogRef = useRef<HTMLDivElement>(null);
+  useFocusTrap(dialogRef, isOpened && !previewMode);
 
   const overlayClasses = classNames(
     previewMode ? 'envive-tw-absolute' : 'envive-tw-fixed',
@@ -126,6 +129,7 @@ export const FloatingChatOverlay = ({
             aria-label="Close floating chat"
           >
             <motion.div
+              ref={dialogRef}
               initial={overlayExitAnimation}
               animate={overlayAnimation}
               exit={overlayExitAnimation}
@@ -137,6 +141,9 @@ export const FloatingChatOverlay = ({
               }}
               className="envive-tw-shadow-md"
               onClick={e => e.stopPropagation()}
+              role="dialog"
+              aria-modal="true"
+              aria-label="Envive Chat Window"
             >
               {children}
             </motion.div>

package/src/widgets/PromptButtonCarouselWithImageWidget/PromptButtonCarouselWithImageWidget.tsx

@@ -12,7 +12,6 @@ import {
   VariantTypeEnum,
 } from '@envive-ai/react-hooks/application/models';
 import { variantInfoAtom } from '@envive-ai/react-hooks/atoms/app';
-import { lastAssistantMessageAtom } from '@envive-ai/react-hooks/atoms/chat';
 import {
   EnviveMetricsEventName,
   useAmplitude,
@@ -27,12 +26,13 @@ import {
   PromptButtonCarouselWithImageProps,
 } from '@envive-ai/react-toolkit-v3/PromptButtonCarouselWithImage';
 import { usePromptCarouselAnalytics } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { useProductImageUrl } from '@envive-ai/react-hooks/hooks/ProductImageUrl';
 import { Theme } from '@envive-ai/react-toolkit-v3/Tokens';
 import { useAtomValue } from 'jotai';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { BaseWidgetProps } from '../../hocs/withBaseWidget/types';
 import { withBaseWidget } from '../../hocs/withBaseWidget/withBaseWidget';
-import { RawValues, getRecentProductImageUrls, getStringIdForText } from '../utils/functions';
+import { RawValues, getStringIdForText } from '../utils/functions';
 
 const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
   const { onTypedMessageSubmitted } = useSalesAgent();
@@ -127,14 +127,7 @@ const PromptButtonCarouselWithImageWidgetHandler = (props: BaseWidgetProps) => {
   const variantInfo = useAtomValue(variantInfoAtom);
   const productId = variantInfo.variant === VariantTypeEnum.Pdp ? variantInfo.productId : undefined;
 
-  const lastAssistantMessage = useAtomValue(lastAssistantMessageAtom);
-
-  const productImageUrls = useMemo(
-    () => (lastAssistantMessage ? getRecentProductImageUrls(lastAssistantMessage, productId) : []),
-    [lastAssistantMessage, productId],
-  );
-
-  const productImageUrl = productImageUrls[1] ?? productImageUrls[0] ?? '';
+  const productImageUrl = useProductImageUrl(productId);
 
   const isDynamic = promptButtonCarouselWithImageWidgetConfig?.isDynamic ?? false;