@envive-ai/react-toolkit-v3 0.3.16 → 0.3.18

package/src/components/FloatingChat/utils/functions.ts

@@ -118,3 +118,22 @@ export const getCleanOrders = (messages: Message[]) => {
 
   return orders.filter(o => o !== null) as OrderLookupCardProps[];
 };
+
+export const MOST_RELEVANT_DISPLAY_LIMIT = 8;
+
+export const getProductCarouselDisplayInfo = <T>(
+  products: T[],
+  numberOfProducts?: number,
+  displayLimit = MOST_RELEVANT_DISPLAY_LIMIT,
+): {
+  totalProducts: number;
+  areProductsMoreThanDisplayLimit: boolean;
+  displayedProducts: T[];
+} => {
+  const totalProducts = numberOfProducts ?? products.length;
+  const areProductsMoreThanDisplayLimit = totalProducts > displayLimit;
+  const displayedProducts = areProductsMoreThanDisplayLimit
+    ? products.slice(0, displayLimit)
+    : products;
+  return { totalProducts, areProductsMoreThanDisplayLimit, displayedProducts };
+};

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -22,6 +22,7 @@ import { SparkleIconColor, WelcomeMessage } from '../WelcomeMessage';
 import { FullPageSAComponents } from './components';
 import { useGetFooterStyles } from './hooks/useGetFooterStyles';
 import { useGetMessagesStyles } from './hooks/useGetMessagesStyles';
+import { useGetScrollContentStyles } from './hooks/useGetScrollContentStyles';
 import { useIsMobile } from './hooks/useIsMobile';
 
 interface FullPageSalesAgentProps {
@@ -47,6 +48,7 @@ export const FullPageSalesAgent = ({
   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 } =
@@ -127,12 +129,14 @@ export const FullPageSalesAgent = ({
   };
 
   const welcomeMessage = (
-    <WelcomeMessage
-      sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
-      title={welcomeMessageTitle as string}
-      text={welcomeMessageText as string}
-      theme={resolvedTheme}
-    />
+    <div className={messageContainerClasses}>
+      <WelcomeMessage
+        sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
+        title={welcomeMessageTitle as string}
+        text={welcomeMessageText as string}
+        theme={resolvedTheme}
+      />
+    </div>
   );
 
   const footer = (

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

@@ -33,7 +33,7 @@ export const Layout = ({
   const hasWelcomeMessage = isValidElement(welcomeMessage);
   const hasAnswerSuggestions = isValidElement(answerSuggestions);
   const { isMobile } = useIsMobile();
-  const { contentClasses, messageContainerClasses } = useGetScrollContentStyles();
+  const { contentClasses } = useGetScrollContentStyles();
   const { footerContainerClasses } = useGetFooterStyles();
   const { containerClasses, containerStyles } = useGetContainerStyles({
     headerContainer,
@@ -47,7 +47,6 @@ export const Layout = ({
     >
       <div className={contentClasses}>
         <Stack
-          className={messageContainerClasses}
           direction="column"
           justify="between"
         >

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

@@ -11,6 +11,7 @@ export const useContainerResizerObserver = ({
 
   useEffect(() => {
     if (!autoHeight) {
+      setContainerHeight('100%');
       return () => {};
     }
 

package/src/components/PromptButtonCarouselWithImage/components/PromptButtonsCarousel.tsx

@@ -17,7 +17,9 @@ type PromptButtonsCarouselProps = {
   handlePromptButtonTouchEnd?: () => void;
 };
 
-function distributeInThreeRows<T>(items: T[]): [T[], T[], T[]] {
+function distributeInThreeRows<T>(
+  items: [number, T][],
+): [[number, T][], [number, T][], [number, T][]] {
   const n = items.length;
   const perRow = [1, 1, 1];
   let remaining = Math.max(0, n - 3);
@@ -55,13 +57,13 @@ export const PromptButtonsCarousel = ({
     ? ['Loading 1...', 'Loading 2...', 'Loading 3...']
     : promptButtonsTexts || [];
 
-  const renderButton = (text: string) => (
+  const renderButton = ([index, text]: [number, string]) => (
     <div
-      key={text}
+      key={`${text}-${index}`}
       className="envive-tw-flex-shrink-0"
     >
       <PromptButton
-        id={`prompt-button-${text}`}
+        id={`prompt-button-${index}`}
         isLoading={isLoading}
         label={text}
         variant={promptButtonType}
@@ -77,18 +79,19 @@ export const PromptButtonsCarousel = ({
     </div>
   );
 
+  const indexedTexts: [number, string][] = Array.from(promptButtonsTextsFinal.entries());
+
   if (isMobile) {
-    const [row0, row1, row2] = distributeInThreeRows(promptButtonsTextsFinal);
-    const rows = [row0, row1, row2].filter(row => row.length > 0);
+    const rows = distributeInThreeRows(indexedTexts).filter(row => row.length > 0);
     return (
       <Stack
         direction="column"
         gap="4"
         className="envive-tw-w-full"
       >
-        {rows.map(row => (
+        {rows.map((row, rowIndex) => (
           <Stack
-            key={row.join('-')}
+            key={rowIndex}
             direction="row"
             gap="4"
             className="envive-tw-w-full envive-tw-flex-nowrap"
@@ -100,5 +103,5 @@ export const PromptButtonsCarousel = ({
     );
   }
 
-  return <>{promptButtonsTextsFinal.map(renderButton)}</>;
+  return <>{indexedTexts.map(renderButton)}</>;
 };