@envive-ai/react-toolkit-v3 0.3.8 → 0.3.10

package/src/components/ChatPreview/types/types.ts

@@ -1,3 +1,4 @@
+import { Suggestion } from '@envive-ai/react-hooks/application/models';
 import { Theme } from '../../Tokens';
 import { WidgetWrapperVariant } from '../../WidgetWrapper';
 
@@ -56,9 +57,9 @@ export type WidgetContentProps = {
   messageText?: string;
 
   /**
-   * Array of text labels for the prompt buttons.
+   * Array of Suggestions for the prompt buttons.
    */
-  promptButtonTexts?: string[];
+  promptButtons?: Suggestion[];
 
   /**
    * Placeholder text for the text field input.
@@ -128,14 +129,14 @@ export type WidgetEventProps = {
    *
    * @param text - The text label of the clicked prompt button
    */
-  handlePromptButtonClick?: (text: string) => void;
+  handlePromptButtonClick?: (suggestion: Suggestion) => void;
 
   /**
    * Callback function invoked when the text field is clicked.
    *
    * @param text - The placeholder text of the text field
    */
-  handleTextFieldClick?: (text: string) => void;
+  handleTextFieldClick?: () => void;
 };
 
 /**

package/src/components/ChatPreviewComparison/ChatPreviewComparison.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useMemo } from 'react';
 import { WidgetWrapperVariant } from '../WidgetWrapper/types/types';
 import { Theme } from '../Tokens';
 import { resolveTheme } from '../utils/resolveTheme';
@@ -28,7 +29,7 @@ export const ChatPreviewComparison = ({
   const {
     headlineText,
     messageText,
-    promptButtonTexts,
+    promptButtons,
     textFieldPlaceholderText,
     images,
     logoSrc,
@@ -39,6 +40,22 @@ export const ChatPreviewComparison = ({
 
   const finalTheme = resolveTheme(theme);
 
+  const suggestionTextMap = useMemo(() => {
+    return Object.fromEntries(
+      promptButtons?.map(suggestion => [suggestion.content, suggestion]) ?? [],
+    );
+  }, [promptButtons]);
+  const promptButtonTexts = useMemo(() => {
+    return Object.keys(suggestionTextMap);
+  }, [suggestionTextMap]);
+
+  const handleSuggestionButtonClick = useCallback(
+    (text: string) => {
+      handlePromptButtonClick?.(suggestionTextMap[text]);
+    },
+    [handlePromptButtonClick, suggestionTextMap],
+  );
+
   const headline = (
     <ChatPreviewComparisonComponents.Headline
       headlineText={headlineText ?? ''}
@@ -58,7 +75,7 @@ export const ChatPreviewComparison = ({
       promptButtonTexts={promptButtonTexts ?? []}
       promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
       promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
-      handleButtonClick={handlePromptButtonClick}
+      handleButtonClick={handleSuggestionButtonClick}
     />
   );
 
@@ -66,7 +83,7 @@ export const ChatPreviewComparison = ({
     <WidgetTextField
       theme={finalTheme}
       placeholder={textFieldPlaceholderText ?? ''}
-      onClick={() => handleTextFieldClick?.(textFieldPlaceholderText)}
+      onClick={() => handleTextFieldClick?.()}
     />
   );
 

package/src/components/ChatPreviewComparison/types/types.ts

@@ -1,3 +1,4 @@
+import { Suggestion } from '@envive-ai/react-hooks/application/models';
 import { ImageGalleryImage } from '../../ImageGallery/types/types';
 import { Theme } from '../../Tokens';
 import { WidgetWrapperVariant } from '../../WidgetWrapper';
@@ -59,7 +60,7 @@ export type WidgetContentProps = {
   /**
    * Array of text labels for the prompt buttons.
    */
-  promptButtonTexts?: string[];
+  promptButtons?: Suggestion[];
 
   /**
    * Placeholder text for the text field input.
@@ -134,14 +135,13 @@ export type WidgetEventProps = {
    *
    * @param text - The text label of the clicked prompt button
    */
-  handlePromptButtonClick?: (text: string) => void;
+  handlePromptButtonClick?: (suggestion: Suggestion) => void;
 
   /**
    * Callback function invoked when the text field is clicked.
    *
-   * @param text - The placeholder text of the text field
    */
-  handleTextFieldClick?: (text: string) => void;
+  handleTextFieldClick?: () => void;
 };
 
 /**

package/src/components/FloatingChat/FloatingChat.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 
 import { motion } from 'framer-motion';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import { ColorNames } from '../../models/colorsConfig';
 import { Theme } from '../../../tokens/theme/theme';
 
@@ -207,7 +208,7 @@ export const FloatingChat = ({
       handleButtonClick={buttonText => {
         const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
         if (suggestion) {
-          onSuggestionClicked(suggestion);
+          onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
         }
 
         setAnswerSuggestions([]);
@@ -259,7 +260,7 @@ export const FloatingChat = ({
       handleButtonClick={buttonText => {
         const suggestion = suggestions.find(s => s.content === buttonText && s.isAnswer);
         if (suggestion) {
-          onSuggestionClicked(suggestion);
+          onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
         }
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);

package/src/components/FloatingChat/components/AgentMessage.tsx

@@ -81,6 +81,7 @@ export const AgentMessage = ({
         reviews={reviews}
         theme={finalTheme}
         showVerifiedBuyer={showVerifiedBuyer}
+        hideNavigation={reviews.length === 1}
       />
     );
   }

package/src/components/FloatingChat/components/Layout.tsx

@@ -62,8 +62,13 @@ export const Layout = ({
             direction="column"
             justify="between"
           >
-            {welcomeMessage}
-            {disclaimer && <div>{disclaimer}</div>}
+            <Stack
+              direction="column"
+              gap="0"
+            >
+              {welcomeMessage}
+              {disclaimer && <div>{disclaimer}</div>}
+            </Stack>
             <Stack
               direction="column"
               gap="0"

package/src/components/FloatingChat/components/ModalSheet.tsx

@@ -10,8 +10,6 @@ import { Unit } from '../hooks/useSnapCalculator';
 import { useSnapControl } from '../hooks/useSnapControl';
 import { usePreventScroll } from '../hooks/usePreventScroll';
 
-const BOTTOM_OFFSET = 100;
-
 export interface ModalSheetControl {
   jumpToSnap: (snapIndex: number) => void;
 }
@@ -228,7 +226,7 @@ export const ModalSheet: FC<ModalSheetProps> = ({
             dragConstraints={{ top: 0, bottom: swipeviewHeightPx }}
             initial={{ y: swipeviewHeightPx }}
             animate={{ y: initSnapInPixels }}
-            exit={{ y: swipeviewHeightPx + BOTTOM_OFFSET }}
+            exit={{ y: swipeviewHeightPx }}
             transition={animation}
             onDragEnd={handleDragEnd}
             onClick={expandToFullView}
@@ -254,16 +252,16 @@ export const ModalSheet: FC<ModalSheetProps> = ({
             onPointerMove={
               disableDrag ? undefined : event => handleContentGesture(event.clientX, event.clientY)
             }
-            initial={{ y: swipeviewHeightPx + BOTTOM_OFFSET }}
+            initial={{ y: swipeviewHeightPx }}
             animate={{ y: initSnapInPixels }}
-            exit={{ y: swipeviewHeightPx + BOTTOM_OFFSET }}
+            exit={{ y: swipeviewHeightPx }}
             transition={animation}
             style={{
               y: animatedY,
               width: '100%',
-              height: swipeviewHeightPx + BOTTOM_OFFSET,
+              height: swipeviewHeightPx,
               position: 'fixed',
-              bottom: -BOTTOM_OFFSET + 2,
+              bottom: 0,
               right: 0,
               boxSizing: 'content-box',
               zIndex: 2147483646,

package/src/components/FloatingChat/components/ReviewCardsCarousel.tsx

@@ -7,17 +7,20 @@ export interface ReviewCardsCarouselProps {
   theme: Theme;
   reviews: ReviewCardProps[];
   showVerifiedBuyer?: boolean;
+  hideNavigation?: boolean;
 }
 
 export const ReviewCardsCarousel = ({
   reviews,
   theme,
   showVerifiedBuyer,
+  hideNavigation = false,
 }: ReviewCardsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
 
   return (
     <Carousel
+      hideNavigation={hideNavigation}
       elements={reviews.map(review => (
         <ReviewCard
           key={review.id}

package/src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx

@@ -52,9 +52,6 @@ export const SalesAgentProductCardsCarousel = ({
           numberOfReviews={product.numberOfReviews}
           image={product.image}
           url={product.url}
-          onClick={() => {
-            window.open(product.url, '_blank');
-          }}
           theme={finalTheme}
         />
       ))}

package/src/components/ProductCard/ProductCard.tsx

@@ -1,8 +1,10 @@
+import classNames from 'classnames';
 import { Theme } from '../Tokens';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextField } from '../WidgetTextField';
 import { ProductCardWidgetComponents } from './components';
 import { ProductCardProps } from './types';
+import { TypographyColor } from '../Typography/types';
 
 export const ProductCard = ({
   theme = Theme.GLOBAL_CUSTOM,
@@ -47,7 +49,16 @@ export const ProductCard = ({
         theme={resolvedTheme}
         placeholder={placeholder}
         onClick={onInputClick}
-        className="envive-tw-bg-background-light"
+        textColor={
+          resolvedTheme === Theme.MINIMAL
+            ? TypographyColor.TEXT_LIGHT
+            : TypographyColor.TEXT_SECONDARY
+        }
+        className={classNames(
+          resolvedTheme === Theme.MINIMAL
+            ? 'envive-tw-bg-transparent'
+            : 'envive-tw-bg-background-light',
+        )}
       />
     </ProductCardWidgetComponents.Poster>
   );

package/src/components/ProductCard/components/Header.tsx

@@ -34,20 +34,22 @@ export const Header = ({
       className={stackClasses}
     >
       <Typography
-        variant={TypographyVariant.B1_MD}
+        variant={TypographyVariant.H1_MD}
         color={TypographyColor.TEXT_LIGHT}
         className={headlineClasses}
         numberOfLines={2}
       >
         {headline}
       </Typography>
-      <AnimatedText
-        sequence={animatedText}
-        getNodeWrapper={animatedTextWrapper}
-        typingDuration={textTypingDuration}
-        transition={textTransition}
-        loop={loop}
-      />
+      {animatedText.length > 0 && (
+        <AnimatedText
+          sequence={animatedText}
+          getNodeWrapper={animatedTextWrapper}
+          typingDuration={textTypingDuration}
+          transition={textTransition}
+          loop={loop}
+        />
+      )}
     </Stack>
   );
 };

package/src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.tsx

@@ -22,8 +22,10 @@ export const PromptButtonCarouselWithImage = ({
 }: PromptButtonCarouselWithImageProps) => {
   const finalTheme = resolveTheme(theme);
 
-  if (promptButtonsTexts && promptButtonsTexts?.length !== 3) {
-    throw new Error('PromptButtonsCarouselWithImage: promptButtonsTexts must be equal to 3');
+  if (promptButtonsTexts && promptButtonsTexts?.length < 3) {
+    throw new Error(
+      'PromptButtonsCarouselWithImage: promptButtonsTexts must have at least 3 items',
+    );
   }
 
   return (
@@ -37,6 +39,7 @@ export const PromptButtonCarouselWithImage = ({
         <PromptButtonCarouselWithImageComponents.TextField
           isLoading={isLoading}
           placeholder={textFieldPlaceholder}
+          className={finalTheme === Theme.MINIMAL ? '!envive-tw-border-border-medium' : undefined}
           onClick={() => handleTextFieldClick(textFieldPlaceholder)}
           theme={finalTheme}
         />
@@ -52,7 +55,7 @@ export const PromptButtonCarouselWithImage = ({
         <PromptButtonCarouselWithImageComponents.PromptButtonsCarousel
           theme={finalTheme}
           isLoading={isLoading}
-          promptButtonsTexts={promptButtonsTexts}
+          promptButtonsTexts={promptButtonsTexts || []}
           promptButtonType={promptButtonType}
           handlePromptButtonClick={handlePromptButtonClick}
         />

package/src/components/PromptButtonCarouselWithImage/components/Layout.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { cloneElement } from 'react';
+import { cloneElement, isValidElement } from 'react';
 import { useGetContentSize } from '../../utils/useGetContentSize';
 import { calculateWidthImageGallery } from '../../SocialProof/utils/functions';
 import { Stack } from '../../Stack';
@@ -7,6 +7,7 @@ import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
 import { ImageProps } from './Image';
 import { WidgetTextFieldProps } from '../../WidgetTextField/types/types';
 import { useHorizontalWheelScroll } from '../../utils/useHorizontalWheelScroll';
+import { useDragToScroll } from '../../utils/useDragToScroll';
 
 type LayoutProps = {
   id: string;
@@ -36,6 +37,10 @@ export const Layout = ({
     heightDefault: 245,
   });
   const wheelScrollRef = useHorizontalWheelScroll(!isMobile);
+  useDragToScroll(wheelScrollRef, {
+    direction: isMobile ? 'y' : 'x',
+    isEnabled: true,
+  });
 
   const combinedRef = (node: HTMLDivElement | null) => {
     contentSizeRef.current = node;
@@ -73,19 +78,23 @@ export const Layout = ({
             }}
             gap={4}
             className={classNames(
-              '[&::-webkit-scrollbar]:hidden envive-tw-h-fit envive-tw-scroll-smooth',
+              '[&::-webkit-scrollbar]:hidden envive-tw-h-fit',
               isMobile ? 'envive-tw-w-full envive-tw-overflow-y-auto' : 'envive-tw-overflow-x-auto',
               isMobile || hideTextField
                 ? 'envive-tw-w-full'
-                : 'envive-tw-max-w-[300px] md:envive-tw-max-w-[450px] lg:envive-tw-max-w-[700px]',
+                : 'envive-tw-max-w-[300px] md:envive-tw-max-w-[450px] lg:envive-tw-max-w-[900px]',
             )}
           >
             {promptButtons}
           </Stack>
         </Stack>
         {!hideTextField &&
+          isValidElement(textField) &&
           cloneElement(textField as React.ReactElement<WidgetTextFieldProps>, {
-            className: isMobile ? 'envive-tw-w-full' : 'envive-tw-min-w-[276px]',
+            className: classNames(
+              isMobile ? 'envive-tw-w-full' : 'envive-tw-min-w-[276px]',
+              (textField as React.ReactElement<WidgetTextFieldProps>).props.className,
+            ),
           })}
       </Stack>
     </Stack>

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

@@ -1,6 +1,8 @@
 import { Theme } from '../../../../tokens/theme/theme';
 import { PromptButton, PromptButtonVariant } from '../../PromptButton';
 import { resolveTheme } from '../../utils/resolveTheme';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { Stack } from '../../Stack';
 
 type PromptButtonsCarouselProps = {
   theme: Theme;
@@ -10,6 +12,25 @@ type PromptButtonsCarouselProps = {
   handlePromptButtonClick: (text: string) => void;
 };
 
+function distributeInThreeRows<T>(items: T[]): [T[], T[], T[]] {
+  const n = items.length;
+  const perRow = [1, 1, 1];
+  let remaining = Math.max(0, n - 3);
+  let idx = 0;
+  while (remaining > 0) {
+    perRow[idx % 3] += 1;
+    remaining -= 1;
+    idx += 1;
+  }
+  let start = 0;
+  const [row0, row1, row2] = perRow.map(count => {
+    const row = items.slice(start, start + count);
+    start += count;
+    return row;
+  });
+  return [row0, row1, row2];
+}
+
 export const PromptButtonsCarousel = ({
   theme,
   isLoading,
@@ -18,29 +39,51 @@ export const PromptButtonsCarousel = ({
   handlePromptButtonClick,
 }: PromptButtonsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
+  const { isMobile } = useCheckIsMobile();
 
   const promptButtonsTextsFinal = isLoading
     ? ['Loading 1...', 'Loading 2...', 'Loading 3...']
-    : promptButtonsTexts;
+    : promptButtonsTexts || [];
 
-  return (
-    <>
-      {promptButtonsTextsFinal.map(text => (
-        <div
-          key={text}
-          className="envive-tw-flex-shrink-0"
-        >
-          <PromptButton
-            id={`prompt-button-${text}`}
-            isLoading={isLoading}
-            label={text}
-            variant={promptButtonType}
-            className="envive-tw-w-fit"
-            theme={finalTheme}
-            onClick={() => handlePromptButtonClick(text)}
-          />
-        </div>
-      ))}
-    </>
+  const renderButton = (text: string) => (
+    <div
+      key={text}
+      className="envive-tw-flex-shrink-0"
+    >
+      <PromptButton
+        id={`prompt-button-${text}`}
+        isLoading={isLoading}
+        label={text}
+        variant={promptButtonType}
+        className="envive-tw-w-fit"
+        theme={finalTheme}
+        onClick={() => handlePromptButtonClick(text)}
+      />
+    </div>
   );
+
+  if (isMobile) {
+    const [row0, row1, row2] = distributeInThreeRows(promptButtonsTextsFinal);
+    const rows = [row0, row1, row2].filter(row => row.length > 0);
+    return (
+      <Stack
+        direction="column"
+        gap="4"
+        className="envive-tw-w-full"
+      >
+        {rows.map(row => (
+          <Stack
+            key={row.join('-')}
+            direction="row"
+            gap="4"
+            className="envive-tw-w-full envive-tw-flex-nowrap"
+          >
+            {row.map(renderButton)}
+          </Stack>
+        ))}
+      </Stack>
+    );
+  }
+
+  return <>{promptButtonsTextsFinal.map(renderButton)}</>;
 };