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

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)}</>;
 };

package/src/components/PromptCarousel/PromptCarousel.tsx

@@ -1,18 +1,14 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
+import { useScrollContainer } from 'react-indiana-drag-scroll';
 import { Theme } from '../../../tokens/theme/theme';
 import { PromptButton, PromptButtonVariant } from '../PromptButton';
 import { useCheckIsMobile } from '../utils/useCheckIsMobile';
-import {
-  AnimationSpeed,
-  PromptCarouselProps,
-  PromptCarouselRows,
-  RepetitionNumberSuffix,
-} from './types/types';
-import { useCarouselAnimation, useCarouselButtons, useCarouselRefs } from './hooks';
-import { PromptCarouselComponents } from './components';
+import { AnimationSpeed, PromptCarouselProps, PromptCarouselRows } from './types/types';
+import { useCarouselButtons, useCoordinatedScrollAnimation, useScrollSync } from './hooks';
 import { Container } from '../Container';
 import { isAnimated, removeSpaces, shouldShowTwoRows } from './utils/functions';
 import { resolveTheme } from '../utils/resolveTheme';
+import { Stack } from '../Stack';
 
 export const PromptCarousel = ({
   id,
@@ -37,21 +33,39 @@ export const PromptCarousel = ({
   const shouldShowTwoRowsValue = shouldShowTwoRows(promptCarouselRows, isMobile);
   const finalTheme = resolveTheme(theme);
 
-  const {
-    firstRowScrollRef,
-    firstRowStackRef,
-    secondRowScrollRef,
-    blockScrollRef,
-    blockFirstRowStackRef,
-    scrollRefs,
-  } = useCarouselRefs({ shouldShowTwoRows: shouldShowTwoRowsValue });
+  const { ref: dragScrollRef1 } = useScrollContainer();
+  const { ref: dragScrollRef2 } = useScrollContainer();
+  const scrollContainerRef1 = useRef<HTMLDivElement>(null);
+  const scrollContainerRef2 = useRef<HTMLDivElement>(null);
 
-  const { isAnimationStopped, shouldUseRowScroll } = useCarouselAnimation({
-    firstRowScrollRef,
-    blockScrollRef,
-    scrollRefs,
+  const setRef1 = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (typeof dragScrollRef1 === 'function') dragScrollRef1(el);
+      scrollContainerRef1.current = el;
+    },
+    [dragScrollRef1],
+  );
+
+  const setRef2 = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (typeof dragScrollRef2 === 'function') dragScrollRef2(el);
+      scrollContainerRef2.current = el;
+    },
+    [dragScrollRef2],
+  );
+
+  const scrollContainerRefs = shouldShowTwoRowsValue
+    ? [scrollContainerRef1, scrollContainerRef2]
+    : [scrollContainerRef1];
+
+  useCoordinatedScrollAnimation({
+    scrollContainerRefs,
     animationSpeed,
-    isAnimated: isAnimatedValue,
+  });
+
+  useScrollSync({
+    scrollContainerRefs,
+    enabled: true,
   });
 
   const { visibleButtonsFirstRow, visibleButtonsSecondRow } = useCarouselButtons({
@@ -60,11 +74,12 @@ export const PromptCarousel = ({
   });
 
   const renderButton = useCallback(
-    (text: string, index: number, repetitionNumber: `${RepetitionNumberSuffix}` = undefined) => {
+    (text: string, index: number, duplicateIndex = 0) => {
       const textWithoutSpaces = removeSpaces(text);
-      const buttonId = repetitionNumber
-        ? `${id}-${textWithoutSpaces}${repetitionNumber}`
-        : `${id}-${textWithoutSpaces}`;
+      const buttonId =
+        duplicateIndex > 0
+          ? `${id}-${textWithoutSpaces}-duplicate-${duplicateIndex}`
+          : `${id}-${textWithoutSpaces}`;
       const buttonKey = `button-${buttonId}`;
 
       return (
@@ -75,7 +90,7 @@ export const PromptCarousel = ({
           variant={promptButtonType}
           theme={finalTheme}
           isLoading={isLoading}
-          bold={boldFirstButton && index === 0}
+          bold={boldFirstButton && index === 0 && duplicateIndex === 0}
           onClick={() => handleButtonClick?.(text)}
         />
       );
@@ -83,6 +98,14 @@ export const PromptCarousel = ({
     [id, promptButtonType, boldFirstButton, handleButtonClick, isLoading, finalTheme],
   );
 
+  const renderButtonRow = (buttons: string[], startIndex: number) => (
+    <>
+      {buttons.map((text, i) => renderButton(text, startIndex + i, 0))}
+      {isAnimatedValue && buttons.map((text, i) => renderButton(text, startIndex + i, 1))}
+      {isAnimatedValue && buttons.map((text, i) => renderButton(text, startIndex + i, 2))}
+    </>
+  );
+
   const defaultAriaLabel = ariaLabel || 'Prompt carousel with suggested actions';
 
   return (
@@ -98,30 +121,44 @@ export const PromptCarousel = ({
       aria-busy={isLoading}
       aria-live={isAnimatedValue && !isLoading ? 'polite' : undefined}
     >
-      {shouldUseRowScroll ? (
-        <PromptCarouselComponents.CarouselContentWithRowScroll
-          visibleButtonsFirstRow={visibleButtonsFirstRow}
-          visibleButtonsSecondRow={visibleButtonsSecondRow}
-          shouldShowTwoRows={shouldShowTwoRowsValue}
-          renderButton={renderButton}
-          isAnimated={isAnimatedValue}
-          isAnimationStopped={isAnimationStopped}
-          firstRowScrollRef={firstRowScrollRef}
-          firstRowStackRef={firstRowStackRef}
-          secondRowScrollRef={secondRowScrollRef}
-        />
-      ) : (
-        <PromptCarouselComponents.CarouselContentWithBlockScroll
-          visibleButtonsFirstRow={visibleButtonsFirstRow}
-          visibleButtonsSecondRow={visibleButtonsSecondRow}
-          shouldShowTwoRows={shouldShowTwoRowsValue}
-          renderButton={renderButton}
-          isAnimated={isAnimatedValue}
-          isAnimationStopped={isAnimationStopped}
-          blockScrollRef={blockScrollRef}
-          blockFirstRowStackRef={blockFirstRowStackRef}
-        />
-      )}
+      <Stack
+        direction="column"
+        gap="2"
+      >
+        <div
+          className="envive-tw-no-scrollbar envive-tw-relative envive-tw-w-full envive-tw-overflow-x-scroll"
+          ref={setRef1}
+          style={{ cursor: 'grab', userSelect: 'none' }}
+        >
+          <div className="envive-tw-relative envive-tw-inline-block envive-tw-whitespace-nowrap">
+            <Stack
+              direction="row"
+              gap="2"
+              className="envive-tw-pl-0 envive-tw-h-full envive-tw-items-center"
+            >
+              {renderButtonRow(visibleButtonsFirstRow, 0)}
+            </Stack>
+          </div>
+        </div>
+
+        {shouldShowTwoRowsValue && (
+          <div
+            className="envive-tw-no-scrollbar envive-tw-relative envive-tw-w-full envive-tw-overflow-x-scroll"
+            ref={setRef2}
+            style={{ cursor: 'grab', userSelect: 'none' }}
+          >
+            <div className="envive-tw-relative envive-tw-inline-block envive-tw-whitespace-nowrap">
+              <Stack
+                direction="row"
+                gap="2"
+                className="envive-tw-pl-0 envive-tw-h-full envive-tw-items-center"
+              >
+                {renderButtonRow(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
+              </Stack>
+            </div>
+          </div>
+        )}
+      </Stack>
     </Container>
   );
 };

package/src/components/PromptCarousel/hooks/index.ts

@@ -1,5 +1,3 @@
-export { useHorizontalScrollAnimation } from './useHorizontalScrollAnimation';
-export { useButtonScrollPosition } from './useButtonScrollPosition';
-export { useCarouselRefs } from './useCarouselRefs';
 export { useCarouselButtons } from './useCarouselButtons';
-export { useCarouselAnimation } from './useCarouselAnimation';
+export { useCoordinatedScrollAnimation } from './useCoordinatedScrollAnimation';
+export { useScrollSync } from './useScrollSync';

package/src/components/PromptCarousel/hooks/useCoordinatedScrollAnimation.ts

@@ -0,0 +1,115 @@
+import { useEffect, useRef } from 'react';
+import { AnimationSpeed } from '../types/types';
+
+interface UseCoordinatedScrollAnimationOptions {
+  scrollContainerRefs: React.RefObject<HTMLDivElement>[];
+  animationSpeed?: `${AnimationSpeed}`;
+}
+
+export function useCoordinatedScrollAnimation({
+  scrollContainerRefs,
+  animationSpeed = AnimationSpeed.NONE,
+}: UseCoordinatedScrollAnimationOptions): void {
+  const resumeTimeoutRef = useRef<number | null>(null);
+  const scrollAnimationRefs = useRef<number[]>([]);
+  const isPausedRef = useRef(false);
+
+  let PIXELS_PER_SECOND = 0;
+  switch (animationSpeed) {
+    case AnimationSpeed.FAST:
+      PIXELS_PER_SECOND = 60;
+      break;
+    case AnimationSpeed.SLOW:
+      PIXELS_PER_SECOND = 30;
+      break;
+    default:
+      PIXELS_PER_SECOND = 0;
+  }
+  const RESUME_DELAY_MS = 1500;
+  const isAnimated = animationSpeed !== AnimationSpeed.NONE;
+
+  useEffect(() => {
+    if (!isAnimated || scrollContainerRefs.length === 0) return undefined;
+
+    const containers = scrollContainerRefs
+      .map(ref => ref.current)
+      .filter((el): el is HTMLDivElement => el !== null);
+
+    if (containers.length === 0) return undefined;
+
+    const animationStates = containers.map(() => ({
+      lastTimestamp: null as number | null,
+      accumulatedScroll: 0,
+    }));
+
+    const step = (timestamp: number) => {
+      if (!isPausedRef.current) {
+        containers.forEach((containerElement, index) => {
+          const container = containerElement;
+          if (container.scrollWidth <= container.clientWidth) return;
+
+          const stateElement = animationStates[index];
+          const state = stateElement;
+          if (state.lastTimestamp === null) state.lastTimestamp = timestamp;
+
+          const delta = timestamp - state.lastTimestamp;
+          state.lastTimestamp = timestamp;
+
+          state.accumulatedScroll += PIXELS_PER_SECOND * (delta / 1000);
+
+          const pixelsToScroll = Math.floor(state.accumulatedScroll);
+          if (pixelsToScroll > 0) {
+            container.scrollLeft += pixelsToScroll;
+            state.accumulatedScroll -= pixelsToScroll;
+
+            if (Math.ceil(container.scrollLeft) >= container.scrollWidth - container.clientWidth) {
+              container.scrollLeft = 0;
+              state.accumulatedScroll = 0;
+            }
+          }
+        });
+      }
+
+      const rafId = requestAnimationFrame(step);
+      scrollAnimationRefs.current[0] = rafId;
+    };
+
+    scrollAnimationRefs.current[0] = requestAnimationFrame(step);
+
+    const pauseAnimation = () => {
+      isPausedRef.current = true;
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+        resumeTimeoutRef.current = null;
+      }
+    };
+
+    const scheduleResumeAnimation = () => {
+      resumeTimeoutRef.current = window.setTimeout(() => {
+        isPausedRef.current = false;
+        animationStates.forEach(stateElement => {
+          const state = stateElement;
+          state.lastTimestamp = null;
+        });
+      }, RESUME_DELAY_MS);
+    };
+
+    containers.forEach(container => {
+      container.addEventListener('mouseenter', pauseAnimation);
+      container.addEventListener('mouseleave', scheduleResumeAnimation);
+    });
+
+    return () => {
+      scrollAnimationRefs.current.forEach(rafId => {
+        if (rafId) cancelAnimationFrame(rafId);
+      });
+      containers.forEach(container => {
+        container.removeEventListener('mouseenter', pauseAnimation);
+        container.removeEventListener('mouseleave', scheduleResumeAnimation);
+      });
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+      }
+    };
+  }, [isAnimated, PIXELS_PER_SECOND, scrollContainerRefs]);
+}