@envive-ai/react-toolkit-v3 0.3.26 → 0.3.28

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -3,14 +3,19 @@ import { listeningToSpeechAtom } from '@envive-ai/react-hooks/atoms/chat';
 import { EnviveMetricsEventName } from '@envive-ai/react-hooks/contexts/amplitudeContext';
 import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
-import { FloatingChatConfig, LookAndFeelConfig } from '@envive-ai/react-hooks/contexts/typesV3';
+import {
+  FloatingChatConfig,
+  FullPageSalesAgentWidgetV3Config,
+  LookAndFeelConfig,
+} from '@envive-ai/react-hooks/contexts/typesV3';
 import { useWidgetInteraction } from '@envive-ai/react-hooks/hooks/WidgetInteraction';
 import {
   WidgetInteractionComponent,
   WidgetInteractionType,
 } from '@envive-ai/react-hooks/hooks/WidgetInteraction/types';
+import { LayoutGroup, motion } from 'framer-motion';
 import { useSetAtom } from 'jotai';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { ChatFooter } from '../ChatFooter';
 import { Disclaimer } from '../Disclaimer';
 import { FloatingChatComponents } from '../FloatingChat/components';
@@ -28,20 +33,18 @@ import { PromptCarousel, PromptCarouselRows, usePromptCarouselAnalytics } from '
 import { SalesAgentProductCardProps } from '../SalesAgentProductCard/types/types';
 import { Theme } from '../Tokens';
 import { resolveTheme } from '../utils/resolveTheme';
-import { SparkleIconColor, WelcomeMessage } from '../WelcomeMessage';
 import { FullPageSAComponents } from './components';
+import { WelcomeOverlay } from './components/WelcomeOverlay';
 import { useGetFooterStyles } from './hooks/useGetFooterStyles';
 import { useGetMessagesStyles } from './hooks/useGetMessagesStyles';
-import { useGetScrollContentStyles } from './hooks/useGetScrollContentStyles';
 import { useIsMobile } from './hooks/useIsMobile';
 
-interface FullPageSalesAgentProps {
+export interface FullPageSalesAgentProps {
   theme?: Theme;
   floatingChatConfig: FloatingChatConfig;
   lookAndFeelConfig: LookAndFeelConfig;
+  widgetConfig: FullPageSalesAgentWidgetV3Config;
   hardcopyContent: HardcopyResponse;
-  headerContainer?: string;
-  autoHeight?: boolean;
   voiceInputEnabled?: boolean;
 }
 
@@ -49,42 +52,114 @@ export const FullPageSalesAgent = ({
   theme = Theme.GLOBAL_CUSTOM,
   floatingChatConfig,
   lookAndFeelConfig,
+  widgetConfig,
   hardcopyContent,
-  headerContainer,
-  autoHeight,
   voiceInputEnabled,
 }: FullPageSalesAgentProps) => {
   const resolvedTheme = resolveTheme(theme);
   const salesAgentData = useSalesAgent(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT);
   const [query, setQuery] = useState('');
   const chatMessagesRef = useRef<HTMLDivElement>(null);
-  const { footerStyles, footerClasses } = useGetFooterStyles();
   const { messageClasses } = useGetMessagesStyles();
-  const { messageContainerClasses } = useGetScrollContentStyles();
   const { isMobile } = useIsMobile();
   const { trackWidgetInteraction } = useWidgetInteraction();
   const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
     usePromptCarouselAnalytics(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT, text => text);
+  const getOverlaySuggestionId = useCallback(
+    (text: string) => {
+      const rawValues = hardcopyContent?.rawValues;
+      if (rawValues) {
+        for (const raw of Object.values(rawValues)) {
+          const list = Array.isArray(raw) ? raw : [raw];
+          const found = list.find(s => s.value === text);
+          if (found) return found.id;
+        }
+      }
+      return text;
+    },
+    [hardcopyContent?.rawValues],
+  );
+  const {
+    onDrag: onOverlayDrag,
+    onHover: onOverlayHover,
+    onMouseDown: onOverlayMouseDown,
+    onMouseUp: onOverlayMouseUp,
+    onTouchStart: onOverlayTouchStart,
+    onTouchEnd: onOverlayTouchEnd,
+  } = usePromptCarouselAnalytics(
+    WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+    getOverlaySuggestionId,
+  );
   const setListeningToSpeech = useSetAtom(listeningToSpeechAtom);
 
   const {
-    welcomeMessageIconColor,
     ignoreFirstModelResponse,
     neverShowSingleProductCards,
     showVerifiedBuyer,
     showEnviveLogo,
-    userQueryInputEnabled = true,
   } = floatingChatConfig;
 
+  const {
+    headerContainer,
+    autoHeight,
+    sparkleColor = 'var(--envive-colors-accent-primary)',
+    suggestionButtonType = PromptButtonVariant.LIGHT,
+    useBackgroundImage,
+    mobileBackgroundImage,
+    desktopBackgroundImage,
+    backgroundColor,
+  } = widgetConfig;
+
+  const backgroundStyle = useMemo((): React.CSSProperties => {
+    if (useBackgroundImage) {
+      const imageUrl = isMobile
+        ? (mobileBackgroundImage ?? desktopBackgroundImage)
+        : (desktopBackgroundImage ?? mobileBackgroundImage);
+      if (imageUrl) {
+        return {
+          backgroundImage: `url(${imageUrl})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        };
+      }
+    }
+    if (backgroundColor) {
+      return { backgroundColor };
+    }
+    return { backgroundColor: 'white' };
+  }, [
+    useBackgroundImage,
+    mobileBackgroundImage,
+    desktopBackgroundImage,
+    backgroundColor,
+    isMobile,
+  ]);
+
   const { agentName } = lookAndFeelConfig;
 
   const {
-    welcomeMessageTitle,
-    welcomeMessageText,
     chatFooterTextFieldPlaceholderText,
     disclaimerText,
+    welcomeOverlayTitle,
+    welcomeOverlayAnimatedPlaceholder,
+    welcomeOverlayPromptSuggestions,
+    welcomeOverlayProductCarouselTitle,
+    welcomeOverlayProductIds,
   } = hardcopyContent?.values ?? {};
 
+  const overlayTitle =
+    Array.isArray(welcomeOverlayTitle) && welcomeOverlayTitle.length > 0
+      ? welcomeOverlayTitle[0]
+      : welcomeOverlayTitle;
+  const overlayEnabled = typeof overlayTitle === 'string' && !!welcomeOverlayTitle;
+
+  const [showOverlay, setShowOverlay] = useState(overlayEnabled);
+  const { footerStyles, footerClasses } = useGetFooterStyles({ showOverlay });
+  const overlayPromptSuggestions = Array.isArray(welcomeOverlayPromptSuggestions)
+    ? welcomeOverlayPromptSuggestions
+    : [];
+  const overlayProductIds = Array.isArray(welcomeOverlayProductIds) ? welcomeOverlayProductIds : [];
+
   const {
     messages,
     isResponseStreaming,
@@ -184,17 +259,59 @@ export const FullPageSalesAgent = ({
     [trackWidgetInteraction],
   );
 
-  const welcomeMessage = (
-    <div className={messageContainerClasses}>
-      <WelcomeMessage
-        sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
-        title={welcomeMessageTitle as string}
-        text={welcomeMessageText as string}
-        theme={resolvedTheme}
-      />
-    </div>
+  const handleOverlayDismiss = useCallback(() => {
+    trackWidgetInteraction({
+      eventName: EnviveMetricsEventName.WidgetInteraction,
+      trigger: {
+        widget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+        widget_interaction: WidgetInteractionType.OVERLAY_DISMISSED,
+      },
+    });
+    setShowOverlay(false);
+  }, [trackWidgetInteraction]);
+
+  const handleOverlaySuggestionClick = useCallback(
+    (buttonText: string) => {
+      trackWidgetInteraction({
+        eventName: EnviveMetricsEventName.WidgetInteraction,
+        trigger: {
+          widget: WidgetInteractionComponent.FULL_PAGE_SALES_AGENT,
+          widget_interaction: WidgetInteractionType.SUGGESTION_CLICKED,
+          widget_interaction_data: {
+            suggestion_clicked: { suggestion_id: getOverlaySuggestionId(buttonText) },
+          },
+        },
+      });
+      onTypedMessageSubmitted({
+        query: buttonText,
+        userTyped: true,
+        displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT,
+      });
+      setListeningToSpeech('abort');
+      setAnswerSuggestions([]);
+      setGeneralSuggestions([]);
+      setShowOverlay(false);
+    },
+    [
+      getOverlaySuggestionId,
+      trackWidgetInteraction,
+      onTypedMessageSubmitted,
+      setListeningToSpeech,
+      setAnswerSuggestions,
+      setGeneralSuggestions,
+    ],
   );
 
+  const promptSuggestions = useMemo(() => {
+    if (showOverlay) {
+      return [];
+    }
+    if (isPendingResponse || isResponseStreaming) {
+      return ['Loading suggestions 1...', 'Loading suggestions 2...'];
+    }
+    return generalSuggestions;
+  }, [showOverlay, isPendingResponse, isResponseStreaming, generalSuggestions]);
+
   const footer = (
     <ChatFooter
       className={footerClasses}
@@ -202,17 +319,16 @@ export const FullPageSalesAgent = ({
       theme={resolvedTheme}
       isScrolled={isMobile ? isFloatingLayout : false}
       disabled={isPendingResponse || isResponseStreaming}
-      disabledInput={!userQueryInputEnabled}
       isLoadingPromptSuggestions={
         isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
       }
-      hideEnviveWatermark={!showEnviveLogo}
-      textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
-      promptSuggestions={
-        isPendingResponse || isResponseStreaming
-          ? ['Loading suggestions 1...', 'Loading suggestions 2...']
-          : generalSuggestions
+      hideEnviveWatermark={showOverlay || !showEnviveLogo}
+      textFieldPlaceholderText={
+        showOverlay
+          ? welcomeOverlayAnimatedPlaceholder
+          : (chatFooterTextFieldPlaceholderText as string)
       }
+      promptSuggestions={promptSuggestions}
       handleButtonClick={buttonText => {
         const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
         if (suggestion) {
@@ -223,6 +339,7 @@ export const FullPageSalesAgent = ({
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
         handleBackToChat();
+        handleOverlayDismiss();
       }}
       onChange={setQuery}
       onSubmit={() => {
@@ -234,6 +351,7 @@ export const FullPageSalesAgent = ({
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
         handleBackToChat();
+        handleOverlayDismiss();
       }}
       onFocus={handleInputQueryFocus}
       parentWidget={WidgetInteractionComponent.FULL_PAGE_SALES_AGENT}
@@ -311,24 +429,64 @@ export const FullPageSalesAgent = ({
       <Disclaimer disclaimerMarkdown={disclaimerText} />
     ) : undefined;
 
+  const motionFooter = (
+    <motion.div
+      transition={{ layout: { duration: 0.2 }, default: { duration: 0 } }}
+      layoutId="fpsa-chat-footer"
+    >
+      {footer}
+    </motion.div>
+  );
+
+  const productCarouselTitle = Array.isArray(welcomeOverlayProductCarouselTitle)
+    ? welcomeOverlayProductCarouselTitle[0]
+    : welcomeOverlayProductCarouselTitle;
+
   return (
-    <FullPageSAComponents.Layout
-      theme={resolvedTheme}
-      welcomeMessage={isResultsView ? null : welcomeMessage}
-      footer={footer}
-      chatMessages={middleContent}
-      answerSuggestions={
-        showAnswerSuggestions && !isResultsView ? answerSuggestionsComponent : undefined
-      }
-      scrollToBottomButton={
-        !isResultsView && showScrollButton ? (
-          <FloatingChatComponents.ScrollToBottomButton onClick={handleScrollToBottom} />
-        ) : undefined
-      }
-      disclaimer={isResultsView ? null : disclaimer}
-      headerContainer={headerContainer}
-      autoHeight={autoHeight}
-      scrollContainerRef={scrollContainerRef}
-    />
+    <LayoutGroup>
+      <FullPageSAComponents.Layout
+        theme={resolvedTheme}
+        welcomeMessage={null} // TODO: Remove this component entirely
+        footer={!overlayEnabled || !showOverlay ? motionFooter : null}
+        chatMessages={middleContent}
+        answerSuggestions={
+          showAnswerSuggestions && !isResultsView ? answerSuggestionsComponent : undefined
+        }
+        scrollToBottomButton={
+          !isResultsView && showScrollButton ? (
+            <FloatingChatComponents.ScrollToBottomButton onClick={handleScrollToBottom} />
+          ) : undefined
+        }
+        disclaimer={isResultsView ? null : disclaimer}
+        headerContainer={headerContainer}
+        autoHeight={autoHeight}
+        scrollContainerRef={scrollContainerRef}
+        backgroundStyle={backgroundStyle}
+        overlay={
+          overlayEnabled ? (
+            <WelcomeOverlay
+              show={showOverlay}
+              theme={resolvedTheme}
+              suggestionButtonType={suggestionButtonType}
+              sparkleColor={sparkleColor}
+              title={overlayTitle}
+              promptSuggestions={overlayPromptSuggestions}
+              productCarouselTitle={productCarouselTitle}
+              productIds={overlayProductIds}
+              backgroundStyle={backgroundStyle}
+              chatFooter={showOverlay ? motionFooter : null}
+              onSuggestionClick={handleOverlaySuggestionClick}
+              onSuggestionHover={onOverlayHover}
+              onSuggestionDrag={onOverlayDrag}
+              onSuggestionMouseDown={onOverlayMouseDown}
+              onSuggestionMouseUp={onOverlayMouseUp}
+              onSuggestionTouchStart={onOverlayTouchStart}
+              onSuggestionTouchEnd={onOverlayTouchEnd}
+              onProductCardClick={handleProductCardClick}
+            />
+          ) : null
+        }
+      />
+    </LayoutGroup>
   );
 };

package/src/components/FullPageSalesAgent/components/Layout.tsx

@@ -19,6 +19,10 @@ export interface LayoutProps {
   autoHeight?: boolean;
   /** Scrollable content ref (e.g. scroll to top when opening product results grid) */
   scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
+  /** Overlay rendered absolutely over all content (e.g. the welcome overlay). */
+  overlay?: React.ReactNode;
+  /** Background style applied to the container (background image or color). */
+  backgroundStyle?: React.CSSProperties;
 }
 
 export const Layout = ({
@@ -32,12 +36,14 @@ export const Layout = ({
   headerContainer,
   autoHeight,
   scrollContainerRef,
+  overlay,
+  backgroundStyle,
 }: LayoutProps) => {
   const hasWelcomeMessage = isValidElement(welcomeMessage);
   const hasAnswerSuggestions = isValidElement(answerSuggestions);
   const { isMobile } = useIsMobile();
   const { contentClasses } = useGetScrollContentStyles();
-  const { footerContainerClasses } = useGetFooterStyles();
+  const { footerContainerClasses } = useGetFooterStyles({ showOverlay: false });
   const { containerClasses, containerStyles } = useGetContainerStyles({
     headerContainer,
     autoHeight,
@@ -45,8 +51,8 @@ export const Layout = ({
 
   return (
     <div
-      className={containerClasses}
-      style={containerStyles}
+      className={classNames(containerClasses, 'envive-tw-relative')}
+      style={{ ...containerStyles, ...backgroundStyle }}
     >
       <div
         ref={scrollContainerRef}
@@ -83,6 +89,7 @@ export const Layout = ({
         )}
         {footer}
       </div>
+      {overlay}
     </div>
   );
 };

package/src/components/FullPageSalesAgent/components/WelcomeOverlay.tsx

@@ -0,0 +1,143 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import classNames from 'classnames';
+import { Theme } from 'tokens/theme/theme';
+import { Typography, TypographyVariant } from 'src/components/Typography';
+import { SparkleAnimation } from 'src/components/SparkleAnimation';
+import { PromptButtonVariant } from '../../PromptButton';
+import { AnimationSpeed, PromptCarousel, PromptCarouselRows } from '../../PromptCarousel';
+import { SalesAgentProductCardsCarousel } from '../../FloatingChat/components/SalesAgentProductCardsCarousel';
+import { SalesAgentProductCardProps } from '../../SalesAgentProductCard/types/types';
+import { useWelcomeOverlayProducts } from '../hooks/useWelcomeOverlayProducts';
+
+export interface WelcomeOverlayProps {
+  show: boolean;
+  theme: Theme;
+  title: string;
+  promptSuggestions: string[];
+  productCarouselTitle?: string;
+  productIds: string[];
+  suggestionButtonType: PromptButtonVariant;
+  sparkleColor: string;
+  /** Background style for the overlay surface (image or color). Defaults to white. */
+  backgroundStyle?: React.CSSProperties;
+  /** The ChatFooter node wrapped in motion.div layoutId — shared-element anchor for the dismiss animation. */
+  chatFooter: React.ReactNode;
+  onSuggestionClick: (text: string) => void;
+  onSuggestionHover?: (text: string) => void;
+  onSuggestionDrag?: () => void;
+  onSuggestionMouseDown?: (text: string) => void;
+  onSuggestionMouseUp?: (text: string) => void;
+  onSuggestionTouchStart?: (text: string) => void;
+  onSuggestionTouchEnd?: (text: string) => void;
+  onProductCardClick?: (product: SalesAgentProductCardProps) => void;
+}
+
+export const WelcomeOverlay = ({
+  show,
+  theme,
+  title,
+  promptSuggestions,
+  productCarouselTitle,
+  productIds,
+  chatFooter,
+  suggestionButtonType,
+  sparkleColor,
+  backgroundStyle = { backgroundColor: 'white' },
+  onSuggestionClick,
+  onSuggestionHover,
+  onSuggestionDrag,
+  onSuggestionMouseDown,
+  onSuggestionMouseUp,
+  onSuggestionTouchStart,
+  onSuggestionTouchEnd,
+  onProductCardClick,
+}: WelcomeOverlayProps) => {
+  const { products, isLoading } = useWelcomeOverlayProducts(productIds);
+  const showProductCarousel = !isLoading && products.length > 0 && !!productCarouselTitle;
+
+  const welcomeOverlayClassNames = classNames([
+    'envive-tw-inset-0',
+    'envive-tw-absolute',
+    'envive-tw-z-20',
+    'envive-tw-flex',
+    'envive-tw-w-full',
+    'envive-tw-h-full',
+    'envive-tw-max-w-[768px]',
+    'envive-tw-flex-col',
+  ]);
+
+  const titleClassNames = classNames([
+    'envive-tw-flex',
+    'envive-tw-flex-row',
+    'envive-tw-gap-2',
+    'envive-tw-items-center',
+  ]);
+
+  const titleBoxClassNames = classNames([
+    'envive-tw-flex',
+    'envive-tw-py-4',
+    'envive-tw-px-[14px]',
+    'envive-tw-flex-col',
+    'envive-tw-gap-4',
+    'envive-tw-bg-background-light',
+    'envive-tw-border-border-light',
+    'envive-tw-border-solid',
+    'envive-tw-border',
+    'envive-tw-rounded-global-custom',
+  ]);
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          key="welcome-overlay"
+          className={welcomeOverlayClassNames}
+          style={backgroundStyle}
+          initial={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.5, ease: 'easeIn' } }}
+        >
+          <div className="envive-tw-flex envive-tw-flex-1 envive-tw-flex-col envive-tw-gap-6 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-px-4 envive-tw-pb-4 envive-tw-pt-6 lg:envive-tw-gap-10">
+            <div className={titleBoxClassNames}>
+              <div className={titleClassNames}>
+                <Typography variant={TypographyVariant.T3_MD}>{title}</Typography>
+                <SparkleAnimation
+                  color={sparkleColor}
+                  animate={false}
+                />
+              </div>
+              {chatFooter}
+              {promptSuggestions.length > 0 && (
+                <PromptCarousel
+                  theme={theme}
+                  promptButtonTexts={promptSuggestions}
+                  promptButtonType={suggestionButtonType}
+                  promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
+                  animationSpeed={AnimationSpeed.NONE}
+                  handleButtonClick={onSuggestionClick}
+                  handleButtonHover={onSuggestionHover}
+                  handleButtonDrag={onSuggestionDrag}
+                  handleButtonMouseDown={onSuggestionMouseDown}
+                  handleButtonMouseUp={onSuggestionMouseUp}
+                  handleButtonTouchStart={onSuggestionTouchStart}
+                  handleButtonTouchEnd={onSuggestionTouchEnd}
+                />
+              )}
+            </div>
+
+            {showProductCarousel && (
+              <div className="envive-tw-flex envive-tw-flex-col envive-tw-gap-3">
+                <Typography variant={TypographyVariant.B2_MD}>{productCarouselTitle}</Typography>
+                <SalesAgentProductCardsCarousel
+                  theme={theme}
+                  hideBadgeCount
+                  products={products}
+                  hideNavigation={false}
+                  onProductCardClick={onProductCardClick}
+                />
+              </div>
+            )}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

package/src/components/FullPageSalesAgent/components/index.ts

@@ -3,3 +3,5 @@ import { Layout } from './Layout';
 export const FullPageSAComponents = {
   Layout,
 };
+
+export { WelcomeOverlay } from './WelcomeOverlay';

package/src/components/FullPageSalesAgent/hooks/useGetFooterStyles.ts

@@ -1,10 +1,20 @@
 import { useIsMobile } from './useIsMobile';
 
-export const useGetFooterStyles = () => {
+const getStyles = ({ isMobile, showOverlay }: { isMobile: boolean; showOverlay: boolean }) => {
+  if (showOverlay) {
+    return {
+      padding: 0,
+      borderTopWidth: '0px',
+    };
+  }
+  return isMobile
+    ? undefined
+    : { boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.2)', borderWidth: '1px' };
+};
+
+export const useGetFooterStyles = ({ showOverlay }: { showOverlay: boolean }) => {
   const { isMobile } = useIsMobile();
-  const footerStyles = !isMobile
-    ? { boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.2)', borderWidth: '1px' }
-    : null;
+  const footerStyles = getStyles({ isMobile, showOverlay });
 
   const footerClasses = isMobile
     ? 'envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]'
@@ -12,7 +22,7 @@ export const useGetFooterStyles = () => {
 
   const footerContainerClasses = isMobile
     ? 'envive-tw-z-10 envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]'
-    : 'envive-tw-z-10 envive-tw-absolute envive-tw-bottom-5 envive-tw-left-[calc((100vw-768px)/2)] envive-tw-right-[calc((100vw-768px)/2)] envive-tw-max-w-[768px]';
+    : 'envive-tw-z-10 envive-tw-absolute envive-tw-bottom-5 envive-tw-w-full envive-tw-left-0 envive-tw-right-0';
 
   return {
     footerStyles,

package/src/components/FullPageSalesAgent/hooks/useWelcomeOverlayProducts.ts

@@ -0,0 +1,52 @@
+import CommerceApiClient from '@envive-ai/react-hooks/application/commerce-api';
+import { useEffect, useState } from 'react';
+import { SalesAgentProductCardProps } from '../../SalesAgentProductCard/types/types';
+
+type RetrievedProduct = Awaited<
+  ReturnType<typeof CommerceApiClient.retrieveProducts>
+>['products'][0];
+
+const mapToCardProps = (p: RetrievedProduct): SalesAgentProductCardProps => ({
+  id: p.id,
+  productName: p.title ?? '',
+  currentPrice: p.salePrice ?? 0,
+  previousPrice: p.originalPrice === p.salePrice ? undefined : p.originalPrice,
+  pricePrefix: '$',
+  rate: p.averageRating ?? 0,
+  numberOfReviews: p.numberReviews ?? 0,
+  image: { src: p.imageUrl ?? '', alt: `${p.title ?? ''} image` },
+  url: p.url,
+});
+
+export const useWelcomeOverlayProducts = (productIds: string[]) => {
+  const [products, setProducts] = useState<SalesAgentProductCardProps[]>([]);
+  const [isLoading, setIsLoading] = useState(productIds.length > 0);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (productIds.length === 0) return () => {};
+
+    setIsLoading(true);
+
+    CommerceApiClient.retrieveProducts(productIds)
+      .then(result => {
+        if (!cancelled) {
+          setProducts(result.products.map(mapToCardProps));
+        }
+      })
+      .catch(() => {
+        // silently ignore — overlay just won't show products
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+    // productIds is normalized from hardcopy on mount, no need to re-fetch
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return { products, isLoading };
+};

package/src/components/PromptButton/hooks/useGetLayoutBaseProperties.ts

@@ -14,10 +14,12 @@ export const useGetLayoutBaseProperties = ({
   isDisabledClasses: string;
 } => {
   const baseClasses = classNames(
-    'envive-tw-h-fit envive-tw-w-fit',
+    'envive-tw-h-fit',
     'envive-tw-rounded-global-custom',
     'envive-tw-px-4 envive-tw-py-2',
     'envive-tw-group',
+    'envive-tw-w-[stretch]',
+    'envive-tw-max-w-min',
   );
 
   const isLoadingClasses = classNames(

package/src/components/SalesAgentProductCard/components/Price.tsx

@@ -24,7 +24,7 @@ export const Price = ({
       {(showSalePrice || forceShowCurrentPriceSpace) && (
         <Typography
           variant={TypographyVariant.B3_RG}
-          color={TypographyColor.TEXT_SECONDARY}
+          color={TypographyColor.TEXT_PRIMARY}
         >
           {forceShowCurrentPriceSpace && !showSalePrice ? 'ㅤ' : formattedCurrentPrice}
         </Typography>
@@ -32,7 +32,7 @@ export const Price = ({
 
       <Typography
         variant={TypographyVariant.B3_RG}
-        color={TypographyColor.TEXT_SECONDARY}
+        color={TypographyColor.TEXT_PRIMARY}
         className={showSalePrice ? 'envive-tw-line-through' : ''}
       >
         {formattedPreviousPrice}

package/src/components/SalesAgentProductCard/components/Rate.tsx

@@ -30,7 +30,7 @@ export const Rate = ({ rate, numberOfReviews, theme = Theme.GLOBAL_CUSTOM }: Rat
       />
       <Typography
         variant={TypographyVariant.B3_RG}
-        color={TypographyColor.TEXT_SECONDARY}
+        color={TypographyColor.TEXT_PRIMARY}
       >
         {formattedRateString}
       </Typography>