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

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

@@ -136,10 +136,44 @@ export type WidgetEventProps = {
    * @param text - The text label of the clicked prompt button
    */
   handlePromptButtonClick?: (suggestion: Suggestion) => void;
+  /**
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handlePromptButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handlePromptButtonHover?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Receives the pressed button's text as a parameter.
+   */
+  handlePromptButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handlePromptButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handlePromptButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handlePromptButtonTouchEnd?: () => void;
 
   /**
-   * Callback function invoked when the text field is clicked.
+   * Callback function invoked when a link inside the widget is clicked.
    *
+   * @param url - The URL of the clicked link
+   */
+  handleLinkClick?: (url: string) => void;
+
+  /**
+   * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
 };

package/src/components/FloatingChat/FloatingChat.tsx

@@ -65,7 +65,6 @@ export const FloatingChat = ({
     showEnviveLogo,
     ignoreFirstModelResponse,
     neverShowSingleProductCards,
-    partialViewConfig,
   } = floatingChatConfig;
 
   const {
@@ -108,8 +107,6 @@ export const FloatingChat = ({
     }
   };
 
-  const partialViewDisabled = partialViewConfig?.disabled ?? false;
-
   const {
     modalSheetControl,
     maxSwipeableViewHeight,
@@ -122,10 +119,8 @@ export const FloatingChat = ({
     handleSnapChange,
     animationKey,
     mobileHeaderHeight,
-    shouldShowHeader,
     isFullView,
-    isPartialView,
-  } = useSnapSetup({ isFloatingChatOpen, partialViewDisabled });
+  } = useSnapSetup({ isFloatingChatOpen });
 
   const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
     messagesRef: chatMessagesRef,
@@ -137,7 +132,7 @@ export const FloatingChat = ({
       generalSuggestions,
     ],
     scrollThreshold: 100,
-    useFloatingLayout: isMobile && isPartialView,
+    useFloatingLayout: false,
     footerHeight: 160,
     isOpen: isFloatingChatOpen,
   });
@@ -304,7 +299,6 @@ export const FloatingChat = ({
       ignoreFirstModelResponse={ignoreFirstModelResponse}
       neverShowSingleProductCards={neverShowSingleProductCards}
       showVerifiedBuyer={showVerifiedBuyer}
-      isPartialView={isPartialView}
       onFormResponseSubmitted={onFormResponseSubmitted}
       parentWidget={WidgetInteractionComponent.FLOATING_CHAT}
     />
@@ -367,7 +361,7 @@ export const FloatingChat = ({
       style={style}
       testId={testId}
       theme={finalTheme}
-      header={shouldShowHeader ? mobileHeader : undefined}
+      header={mobileHeader}
       footer={footer}
       welcomeMessage={welcomeMessage}
       chatMessages={chatMessages}

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

@@ -40,7 +40,6 @@ export interface AgentMessageProps {
   isPendingResponse?: boolean;
   neverShowSingleProductCards?: boolean;
   showVerifiedBuyer?: boolean;
-  isPartialView?: boolean;
   onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
   parentWidget: WidgetInteractionComponent;
 }
@@ -55,7 +54,6 @@ export const AgentMessage = ({
   isPendingResponse = false,
   neverShowSingleProductCards = false,
   showVerifiedBuyer = false,
-  isPartialView,
   onFormResponseSubmitted,
   parentWidget,
 }: AgentMessageProps) => {
@@ -175,7 +173,6 @@ export const AgentMessage = ({
         products={products}
         numberOfProducts={products.length}
         theme={finalTheme}
-        isPartialView={isPartialView}
         onProductCardClick={handleProductCardClick}
       />
     );

package/src/components/FloatingChat/components/ChatMessages.tsx

@@ -30,7 +30,6 @@ export interface ChatMessagesProps {
   ignoreFirstModelResponse?: boolean;
   neverShowSingleProductCards?: boolean;
   showVerifiedBuyer?: boolean;
-  isPartialView?: boolean;
   onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
   parentWidget: WidgetInteractionComponent;
 }
@@ -49,7 +48,6 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
       ignoreFirstModelResponse,
       neverShowSingleProductCards,
       showVerifiedBuyer,
-      isPartialView,
       onFormResponseSubmitted,
       parentWidget,
     },
@@ -143,7 +141,6 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
                       isPendingResponse={isLoading && isLastMessageTurn}
                       neverShowSingleProductCards={neverShowSingleProductCards}
                       showVerifiedBuyer={showVerifiedBuyer}
-                      isPartialView={isPartialView}
                       onFormResponseSubmitted={onFormResponseSubmitted}
                       parentWidget={parentWidget}
                     />

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

@@ -5,14 +5,12 @@ import {
   motion,
   useAnimate,
 } from 'framer-motion';
-import React, { FC, TouchEvent, useEffect, useImperativeHandle } from 'react';
+import React, { FC, TouchEvent, useEffect, useImperativeHandle, useRef } from 'react';
 import { usePreventScroll } from '../hooks/usePreventScroll';
 import { Unit } from '../hooks/useSnapCalculator';
 import { useSnapControl } from '../hooks/useSnapControl';
-
-export interface ModalSheetControl {
-  jumpToSnap: (snapIndex: number) => void;
-}
+import { FULL_SNAP_INDEX, HIDDEN_SNAP_INDEX } from '../snapConstants';
+import type { ModalSheetControl } from '../snapConstants';
 
 interface ModalSheetProps {
   animationKey: MotionValue;
@@ -47,6 +45,7 @@ export const ModalSheet: FC<ModalSheetProps> = ({
 }) => {
   const [layerRef] = useAnimate();
   const [containerRef] = useAnimate();
+  const justDraggedRef = useRef(false);
 
   const {
     gestureRef,
@@ -98,10 +97,15 @@ export const ModalSheet: FC<ModalSheetProps> = ({
     },
   }));
 
-  const expandToFullView = () => {
-    const idx = snaps.indexOf(currentSnap);
-    if (idx === 1) {
-      jumpTo(getSnapToPixel(2));
+  const handleHandlerClick = () => {
+    if (justDraggedRef.current) {
+      justDraggedRef.current = false;
+      return;
+    }
+    if (snaps.length === 2) {
+      // Toggle between open and closed. if full (100): close. if closed (0): open.
+      const targetSnap = currentSnap === 100 ? snaps[HIDDEN_SNAP_INDEX] : snaps[FULL_SNAP_INDEX];
+      jumpTo(getSnapToPixel(targetSnap));
     }
   };
 
@@ -148,6 +152,10 @@ export const ModalSheet: FC<ModalSheetProps> = ({
   }, [open]);
 
   const handleDragEnd = () => {
+    justDraggedRef.current = true;
+    setTimeout(() => {
+      justDraggedRef.current = false;
+    }, 200);
     const snap = defineNextSnapByPosition();
     jumpTo(snap);
   };
@@ -229,7 +237,7 @@ export const ModalSheet: FC<ModalSheetProps> = ({
             exit={{ y: swipeviewHeightPx }}
             transition={animation}
             onDragEnd={handleDragEnd}
-            onClick={expandToFullView}
+            onClick={handleHandlerClick}
             style={{
               y: animatedY,
               bottom: swipeviewHeightPx,

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

@@ -13,7 +13,6 @@ export interface SalesAgentProductCardsCarouselProps {
   numberOfProducts?: number;
   products: SalesAgentProductCardProps[];
   variant?: SalesAgentProductCardVariant;
-  isPartialView?: boolean;
   onProductCardClick?: (product: SalesAgentProductCardProps) => void;
 }
 
@@ -23,13 +22,10 @@ export const SalesAgentProductCardsCarousel = ({
   hideNavigation = false,
   numberOfProducts,
   variant = SalesAgentProductCardVariant.LARGE,
-  isPartialView = false,
   onProductCardClick,
 }: SalesAgentProductCardsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
 
-  const finalVariant = isPartialView ? SalesAgentProductCardVariant.SMALL : variant;
-
   const forceShowCurrentPriceSpace = products.some(
     product => product.currentPrice && product.previousPrice !== product.currentPrice,
   );
@@ -44,7 +40,7 @@ export const SalesAgentProductCardsCarousel = ({
       elements={products.map(product => (
         <SalesAgentProductCard
           key={product.id}
-          variant={finalVariant}
+          variant={variant}
           productName={product.productName}
           currentPrice={product.currentPrice}
           previousPrice={product.previousPrice}

package/src/components/FloatingChat/hooks/useFilteredChatMessages.ts

@@ -1,7 +1,7 @@
 import { RefObject, useMemo } from 'react';
 import { Message } from '@envive-ai/react-hooks/application/models';
 import { useMessageFilter } from '@envive-ai/react-hooks/hooks/MessageFilter';
-import { ModalSheetControl } from '../components';
+import type { ModalSheetControl } from '../types';
 
 export interface UseFilteredChatMessagesProps {
   messages: Message[][];
@@ -33,7 +33,7 @@ export const useFilteredChatMessages = ({
 
   const hasFilteredMessages = filteredMessages.length !== messages.length && isMobile;
 
-  const handlePreviousDiscussions = () => modalSheetControl.current?.jumpToSnap(2);
+  const handlePreviousDiscussions = () => modalSheetControl.current?.jumpToSnap(1);
 
   return {
     filteredMessages,

package/src/components/FloatingChat/hooks/useScrollToBottom.ts

@@ -125,6 +125,7 @@ export const useScrollToBottom = ({
         }
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- autoScrollDependencies is intentionally spread for dynamic deps
   }, [...autoScrollDependencies, getScrollableContainer, useFloatingLayout]);
 
   useEffect(() => {

package/src/components/FloatingChat/hooks/useSnapControl.ts

@@ -8,6 +8,7 @@ import {
 } from 'framer-motion';
 import { useMemo, useState } from 'react';
 import { Unit, useSnapCalculator } from './useSnapCalculator';
+import { FULL_SNAP_INDEX, HIDDEN_SNAP_INDEX } from '../snapConstants';
 
 type SnapControl = {
   animationKey?: MotionValue;
@@ -21,8 +22,6 @@ type SnapControl = {
   onSnapComplete: (currentSnap: number, nextSnap: number, collapsed: boolean) => void;
 };
 
-const MIDDLE_SNAP_OFFSET = 5;
-
 export const useSnapControl = ({
   animationKey,
   animation,
@@ -45,26 +44,22 @@ export const useSnapControl = ({
 
   const contentHeight = useTransform(animatedY, [0, swipeviewHeightPx], [swipeviewHeightPx, 0]);
 
-  const snapOverlayReference = useMemo(
-    () => [
-      getSnapToPixel(snaps[0]),
-      getSnapToPixel(snaps[1]) - MIDDLE_SNAP_OFFSET,
-      getSnapToPixel(snaps[2]),
-    ],
-    [getSnapToPixel, snaps],
-  );
-
-  const displayOverlay = useTransform(() =>
-    animatedY.get() === -1
-      ? 'none'
-      : transform(animatedY.get(), snapOverlayReference, ['none', 'none', 'block']),
-  );
-
-  const opacityOverlay = useTransform(() =>
-    animatedY.get() === -1
-      ? 0
-      : transform(animatedY.get(), snapOverlayReference, [0, 0, overlayOpacity]),
-  );
+  const snapOverlayReference = useMemo(() => {
+    if (snaps.length === 1) {
+      return [0, swipeviewHeightPx];
+    }
+    return [getSnapToPixel(snaps[HIDDEN_SNAP_INDEX]), getSnapToPixel(snaps[FULL_SNAP_INDEX])];
+  }, [getSnapToPixel, snaps, swipeviewHeightPx]);
+
+  const displayOverlay = useTransform(() => {
+    if (animatedY.get() === -1) return 'none';
+    return transform(animatedY.get(), snapOverlayReference, ['none', 'block']) as string;
+  });
+
+  const opacityOverlay = useTransform(() => {
+    if (animatedY.get() === -1) return 0;
+    return transform(animatedY.get(), snapOverlayReference, [0, overlayOpacity]) as number;
+  });
 
   const initSnapInPixels = snapsToPixels?.[initSnap];
   const getInitSnap = () => snaps?.[initSnap];

package/src/components/FloatingChat/hooks/useSnapSetup.ts

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { MotionValue, useMotionValue, useTransform } from 'framer-motion';
 import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
-import { ModalSheetControl } from '../components';
+import { MAX_SWIPEABLE_VIEW_HEIGHT, ModalSheetControl } from '../snapConstants';
 
 export interface UseSnapSetupReturn {
   modalSheetControl: React.RefObject<ModalSheetControl>;
@@ -20,24 +20,19 @@ export interface UseSnapSetupReturn {
   animationKey: MotionValue<number>;
   mobileHeaderHeight: MotionValue<number>;
 
-  snap43Percent: number;
-  snap100Percent: number;
-
-  shouldShowHeader: boolean;
   isFullView: boolean;
-  isPartialView: boolean;
 }
 
 export interface UseSnapSetupProps {
   isFloatingChatOpen: boolean;
-  partialViewDisabled?: boolean;
 }
 
-export const useSnapSetup = ({
-  isFloatingChatOpen,
-  partialViewDisabled,
-}: UseSnapSetupProps): UseSnapSetupReturn => {
-  const maxSwipeableViewHeight = 89;
+export { MAX_SWIPEABLE_VIEW_HEIGHT, HIDDEN_SNAP_INDEX, FULL_SNAP_INDEX } from '../snapConstants';
+
+const SNAPS_NO_AUTO_EXPAND = [0, 100];
+
+export const useSnapSetup = ({ isFloatingChatOpen }: UseSnapSetupProps): UseSnapSetupReturn => {
+  const maxSwipeableViewHeight = MAX_SWIPEABLE_VIEW_HEIGHT;
   const modalSheetControl = useRef<ModalSheetControl>(null);
   const { viewportWidth } = useCheckIsMobile();
 
@@ -49,35 +44,23 @@ export const useSnapSetup = ({
       ?.selectedCustomizeOption,
   );
 
-  const snaps = (() => {
-    if (partialViewDisabled) return shouldAutoExpand ? [100] : [0, 100];
-    return shouldAutoExpand ? [43, 100] : [0, 43, 100];
-  })();
-  const partialViewDisabledValue = shouldAutoExpand ? 0 : 1;
-  const initialSnap = partialViewDisabled ? partialViewDisabledValue : 1;
+  const snaps = shouldAutoExpand ? [100] : SNAPS_NO_AUTO_EXPAND;
+  const initialSnap = shouldAutoExpand ? 0 : 1;
 
   const [currentSnapPercentage, setCurrentSnapPercentage] = useState<number>(
-    snaps[initialSnap] || 43,
+    snaps[initialSnap] ?? 100,
   );
 
   const animationKey = useMotionValue(0);
 
-  const snap43Percent = ((100 - 43) / 100) * window.innerHeight;
-  const snap100Percent = 0;
-
-  const mobileHeaderHeight = useTransform(animationKey, [snap100Percent, snap43Percent], [56, 0]);
-
-  const [shouldShowHeader, setShouldShowHeader] = useState(false);
+  // Y=0 when full screen, Y=swipeviewHeightPx when closed (matches useSnapCalculator)
+  const swipeviewHeightPx = Math.floor(
+    (typeof window !== 'undefined' ? window.innerHeight : 0) * (maxSwipeableViewHeight / 100),
+  );
 
-  useEffect(() => {
-    const unsubscribe = animationKey.on('change', value => {
-      setShouldShowHeader(value < snap43Percent - 10);
-    });
-    return unsubscribe;
-  }, [animationKey, snap43Percent]);
+  const mobileHeaderHeight = useTransform(animationKey, [0, swipeviewHeightPx], [56, 0]);
 
   const isFullView = isMobile && currentSnapPercentage === 100;
-  const isPartialView = isMobile && currentSnapPercentage >= 0 && currentSnapPercentage <= 43;
 
   const handleSnapChange = (snapPercentage: number) => {
     setCurrentSnapPercentage(snapPercentage);
@@ -101,10 +84,6 @@ export const useSnapSetup = ({
     handleSnapChange,
     animationKey,
     mobileHeaderHeight,
-    snap43Percent,
-    snap100Percent,
-    shouldShowHeader,
     isFullView,
-    isPartialView,
   };
 };

package/src/components/FloatingChat/snapConstants.ts

@@ -0,0 +1,7 @@
+export const MAX_SWIPEABLE_VIEW_HEIGHT = 89;
+export const HIDDEN_SNAP_INDEX = 0;
+export const FULL_SNAP_INDEX = 1;
+
+export interface ModalSheetControl {
+  jumpToSnap: (snapIndex: number) => void;
+}

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -21,6 +21,7 @@ import { resolveTheme } from '../utils/resolveTheme';
 import { SparkleIconColor, WelcomeMessage } from '../WelcomeMessage';
 import { FullPageSAComponents } from './components';
 import { useGetFooterStyles } from './hooks/useGetFooterStyles';
+import { useGetMessagesStyles } from './hooks/useGetMessagesStyles';
 import { useIsMobile } from './hooks/useIsMobile';
 
 interface FullPageSalesAgentProps {
@@ -44,7 +45,8 @@ export const FullPageSalesAgent = ({
   const salesAgentData = useSalesAgent(WidgetInteractionComponent.FULL_PAGE_SALES_AGENT);
   const [query, setQuery] = useState('');
   const chatMessagesRef = useRef<HTMLDivElement>(null);
-  const { footerStyles } = useGetFooterStyles();
+  const { footerStyles, footerClasses } = useGetFooterStyles();
+  const { messageClasses } = useGetMessagesStyles();
   const { isMobile } = useIsMobile();
   const { trackWidgetInteraction } = useWidgetInteraction();
   const { onDrag, onHover, onMouseDown, onMouseUp, onTouchStart, onTouchEnd } =
@@ -135,7 +137,7 @@ export const FullPageSalesAgent = ({
 
   const footer = (
     <ChatFooter
-      className="envive-tw-bg-background-light"
+      className={footerClasses}
       style={footerStyles}
       theme={resolvedTheme}
       isScrolled={isMobile ? isFloatingLayout : false}
@@ -177,6 +179,7 @@ export const FullPageSalesAgent = ({
 
   const chatMessages = (
     <FloatingChatComponents.ChatMessages
+      className={messageClasses}
       theme={resolvedTheme}
       ref={chatMessagesRef}
       isLoading={isPendingResponse && !isResponseStreaming}

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

@@ -5,6 +5,7 @@ import { Stack } from '../../Stack';
 import { useGetContainerStyles } from '../hooks/useGetContainerStyles';
 import { useGetFooterStyles } from '../hooks/useGetFooterStyles';
 import { useGetScrollContentStyles } from '../hooks/useGetScrollContentStyles';
+import { useIsMobile } from '../hooks/useIsMobile';
 
 export interface LayoutProps {
   theme: Theme;
@@ -31,6 +32,7 @@ export const Layout = ({
 }: LayoutProps) => {
   const hasWelcomeMessage = isValidElement(welcomeMessage);
   const hasAnswerSuggestions = isValidElement(answerSuggestions);
+  const { isMobile } = useIsMobile();
   const { contentClasses, messageContainerClasses } = useGetScrollContentStyles();
   const { footerContainerClasses } = useGetFooterStyles();
   const { containerClasses, containerStyles } = useGetContainerStyles({
@@ -59,7 +61,7 @@ export const Layout = ({
             (!hasWelcomeMessage || (hasWelcomeMessage && theme === Theme.STANDARD)) &&
               !hasAnswerSuggestions &&
               'envive-tw-pb-4',
-            'envive-tw-pt-4',
+            isMobile ? 'envive-tw-pt-4' : 'envive-tw-pt-6',
           )}
         >
           {chatMessages}

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

@@ -6,12 +6,17 @@ export const useGetFooterStyles = () => {
     ? { boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.2)', borderWidth: '1px' }
     : null;
 
+  const footerClasses = isMobile
+    ? 'envive-tw-rounded-t-[var(--envive-global-custom-border-radius)]'
+    : 'envive-tw-rounded-[var(--envive-global-custom-border-radius)]';
+
   const footerContainerClasses = isMobile
-    ? 'envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]'
-    : 'envive-tw-pb-5';
+    ? '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]';
 
   return {
     footerStyles,
+    footerClasses,
     footerContainerClasses,
   };
 };

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

@@ -0,0 +1,11 @@
+import { useIsMobile } from './useIsMobile';
+
+export const useGetMessagesStyles = () => {
+  const { isMobile } = useIsMobile();
+
+  const messageClasses = !isMobile ? '!envive-tw-gap-6' : '';
+
+  return {
+    messageClasses,
+  };
+};

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

@@ -5,10 +5,14 @@ export const useGetScrollContentStyles = () => {
   const { isMobile } = useIsMobile();
   const contentClasses = classNames({
     'envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out': true,
+    'envive-tw-mb-5': !isMobile,
     'envive-tw-pb-[131px]': isMobile,
+    'envive-tw-pb-[150px]': !isMobile,
   });
 
-  const messageContainerClasses = !isMobile ? 'envive-tw-pt-4' : null;
+  const messageContainerClasses = !isMobile
+    ? 'envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-mt-4 envive-tw-overflow-hidden'
+    : 'envive-tw-rounded-[var(--envive-global-custom-border-radius)] envive-tw-mx-4 envive-tw-overflow-hidden';
 
   return {
     contentClasses,

package/src/components/MarkdownProcessor/MarkdownProcessor.tsx

@@ -21,7 +21,7 @@ export const MarkdownProcessor = ({
       a: createMarkdownLinkComponent({ onLinkClick }),
       p: createMarkdownParagraphComponent({ clampParagraphs, textColor, textVariant }),
     }),
-    [clampParagraphs, textColor, textVariant],
+    [clampParagraphs, textColor, textVariant, onLinkClick],
   );
 
   return <ReactMarkdown components={components}>{processedContent}</ReactMarkdown>;

package/src/components/Message/__tests__/Message.test.tsx

@@ -12,13 +12,13 @@ vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
   const urlRegex = /(https?:\/\/[^\s]+)/g;
   return {
     MarkdownProcessor: function MockMarkdownProcessor({ content }: { content: string }) {
-      const matches = [...content.matchAll(urlRegex)];
+      const matches = Array.from(content.matchAll(urlRegex));
       if (matches.length === 0) {
         return createElement('p', null, content);
       }
       const nodes: ReactNode[] = [];
       let lastIndex = 0;
-      matches.forEach((m: RegExpMatchArray, i: number) => {
+      matches.forEach((m: RegExpMatchArray) => {
         const url = m[0];
         const index = m.index ?? 0;
         nodes.push(content.slice(lastIndex, index));
@@ -26,7 +26,7 @@ vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
           createElement(
             'span',
             {
-              key: i,
+              key: `link-${index}-${url}`,
               role: 'button',
               'aria-label': `${url} (opens in new tab)`,
               className: 'hover:envive-tw-underline',

package/src/components/ProductCard/ProductCard.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { Theme } from '../Tokens';
+import { TypographyColor } from '../Typography/types';
 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,
@@ -21,6 +21,12 @@ export const ProductCard = ({
   textTransition,
   loop,
   onSelect,
+  onDrag,
+  onHover,
+  onMouseDown,
+  onMouseUp,
+  onTouchStart,
+  onTouchEnd,
   onInputClick,
 }: ProductCardProps) => {
   const resolvedTheme = resolveTheme(theme);
@@ -44,6 +50,12 @@ export const ProductCard = ({
         prompts={prompts}
         promptButtonType={promptButtonType}
         onSelect={onSelect}
+        onDrag={onDrag}
+        onHover={onHover}
+        onMouseDown={onMouseDown}
+        onMouseUp={onMouseUp}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd}
       />
       <WidgetTextField
         theme={resolvedTheme}