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

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,18 +52,15 @@ 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 } =
@@ -68,23 +68,68 @@ export const FullPageSalesAgent = ({
   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,
+    welcomeOverlayPromptSuggestions,
+    welcomeOverlayProductCarouselTitle,
+    welcomeOverlayProductIds,
   } = hardcopyContent?.values ?? {};
 
+  const overlayEnabled = typeof welcomeOverlayTitle === '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 +229,36 @@ 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(() => {
+    setShowOverlay(false);
+  }, []);
+
+  // TODO: Migrate to Widget and submit analytics for stringId tracking
+  const handleOverlaySuggestionClick = useCallback(
+    (buttonText: string) => {
+      onTypedMessageSubmitted({
+        query: buttonText,
+        userTyped: true,
+        displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT,
+      });
+      setListeningToSpeech('abort');
+      setAnswerSuggestions([]);
+      setGeneralSuggestions([]);
+      setShowOverlay(false);
+    },
+    [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 +266,12 @@ export const FullPageSalesAgent = ({
       theme={resolvedTheme}
       isScrolled={isMobile ? isFloatingLayout : false}
       disabled={isPendingResponse || isResponseStreaming}
-      disabledInput={!userQueryInputEnabled}
       isLoadingPromptSuggestions={
         isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
       }
-      hideEnviveWatermark={!showEnviveLogo}
+      hideEnviveWatermark={showOverlay || !showEnviveLogo}
       textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
-      promptSuggestions={
-        isPendingResponse || isResponseStreaming
-          ? ['Loading suggestions 1...', 'Loading suggestions 2...']
-          : generalSuggestions
-      }
+      promptSuggestions={promptSuggestions}
       handleButtonClick={buttonText => {
         const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
         if (suggestion) {
@@ -223,6 +282,7 @@ export const FullPageSalesAgent = ({
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
         handleBackToChat();
+        handleOverlayDismiss();
       }}
       onChange={setQuery}
       onSubmit={() => {
@@ -234,6 +294,7 @@ export const FullPageSalesAgent = ({
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
         handleBackToChat();
+        handleOverlayDismiss();
       }}
       onFocus={handleInputQueryFocus}
       parentWidget={WidgetInteractionComponent.FULL_PAGE_SALES_AGENT}
@@ -311,24 +372,53 @@ 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>
+  );
+
   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={welcomeOverlayTitle as string}
+              promptSuggestions={overlayPromptSuggestions}
+              productCarouselTitle={welcomeOverlayProductCarouselTitle as string | undefined}
+              productIds={overlayProductIds}
+              backgroundStyle={backgroundStyle}
+              chatFooter={showOverlay ? motionFooter : null}
+              onSuggestionClick={handleOverlaySuggestionClick}
+            />
+          ) : 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,121 @@
+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 { 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;
+}
+
+export const WelcomeOverlay = ({
+  show,
+  theme,
+  title,
+  promptSuggestions,
+  productCarouselTitle,
+  productIds,
+  chatFooter,
+  suggestionButtonType,
+  sparkleColor,
+  backgroundStyle = { backgroundColor: 'white' },
+  onSuggestionClick,
+}: 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}
+                />
+              )}
+            </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}
+                />
+              </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,51 @@
+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 => ({
+  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>

package/src/components/SocialProof/SocialProof.tsx

@@ -36,6 +36,7 @@ export const SocialProof = ({
   } = widgetStyleProps ?? {};
 
   const {
+    numberOfCustomersText,
     customerQueryText,
     primaryButtonText,
     secondaryButtonTitleText,
@@ -47,9 +48,10 @@ export const SocialProof = ({
     voiceInputEnabled,
   } = widgetContentProps ?? {};
 
-  const numberOfCustomersText = useSocialProofCount({
+  const socialProofCounter = useSocialProofCount({
     pageVariant,
     countKey,
+    numberOfCustomersText,
     id,
   });
 
@@ -91,7 +93,7 @@ export const SocialProof = ({
   const headline = (
     <SocialProofComponents.Headline
       theme={finalTheme}
-      socialProofCounter={numberOfCustomersText}
+      socialProofCounter={socialProofCounter}
       socialProofHeadline={customerQueryText}
       primaryPromptButtonText={primaryButtonText}
       primaryPromptButtonVariant={primaryButtonVariant}

package/src/components/SocialProof/components/Headline.tsx

@@ -48,7 +48,7 @@ export const Headline = forwardRef<HTMLDivElement, HeadlineProps>(
       <Stack
         ref={ref}
         gap="4"
-        className={classNames('envive-tw-h-fit', className)}
+        className={classNames('envive-tw-h-fit envive-tw-overflow-x-auto', className)}
       >
         <Stack gap="2">
           <Container>

package/src/components/SocialProof/components/LayoutSingle.tsx

@@ -1,12 +1,11 @@
 import { cloneElement } from 'react';
-import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
 import { ImageGalleryImage, ImageGalleryLayout } from '../../ImageGallery/types/types';
-import { useGetContentSize } from '../../utils/useGetContentSize';
-import { ImageGallery } from './ImageGallery';
 import { Stack } from '../../Stack';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { useGetContentSize } from '../../utils/useGetContentSize';
 import { DynamicLayout } from '../types/types';
-import { calculateWidthImageGallery } from '../utils/functions';
 import { HeadlineProps } from './Headline';
+import { ImageGallery } from './ImageGallery';
 
 export type LayoutSingleProps = {
   dynamicLayout: DynamicLayout;
@@ -35,7 +34,9 @@ export const LayoutSingle = ({
   const { height, ref } = useGetContentSize({
     heightDefault: 245,
   });
-  const imageGalleryWidth = calculateWidthImageGallery(height, 1, 1);
+
+  // For single image, image width must be fixed 80px.
+  const imageGalleryWidth = 80;
 
   return (
     <Stack