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

package/src/components/ChatFooter/hooks/useGetContainerProperties.ts

@@ -19,7 +19,7 @@ export const useGetContainerProperties = ({
     return themeContainerClassNameMap[theme] ?? '';
   }, [theme, isScrolled]);
 
-  const baseClassName = `envive-tw-w-full envive-tw-border-border-light ${!isScrolled ? 'envive-tw-opacity-90 envive-tw-backdrop-blur-[12px]' : ''}`;
+  const baseClassName = `envive-tw-w-full envive-tw-border-border-light ${!isScrolled ? 'envive-tw-bg-[color-mix(in_srgb,var(--envive-colors-background-light),transparent_10%)] envive-tw-backdrop-blur-[12px]' : ''}`;
 
   return { baseClassName, themeContainerClassNames };
 };

package/src/components/ChatHeader/components/Handle.tsx

@@ -1,4 +1,5 @@
 import { motion, useMotionValue, useTransform } from 'framer-motion';
+import { MAX_SWIPEABLE_VIEW_HEIGHT } from 'src/components/FloatingChat/snapConstants';
 import { Container } from '../../Container';
 import { Stack } from '../../Stack';
 import { useGetHandleProperties } from '../hooks/useGetHandleProperties';
@@ -7,14 +8,23 @@ import { HandleProps } from '../types';
 export const Handle = ({ theme, variant, state, animationKey }: HandleProps) => {
   const { containerClasses, leftBar, rightBar } = useGetHandleProperties(theme, variant, state);
 
-  const snap43Percent = ((100 - 43) / 100) * window.innerHeight;
-  const snap100Percent = 0;
+  const swipeviewFactor = MAX_SWIPEABLE_VIEW_HEIGHT / 100;
+  const closetSheetHeight = Math.floor(window.innerHeight * swipeviewFactor);
+  const snapFullView = 0;
 
   const defaultAnimationKey = useMotionValue(0);
   const activeAnimationKey = animationKey || defaultAnimationKey;
 
-  const leftRotation = useTransform(activeAnimationKey, [snap100Percent, snap43Percent], [0, -10]);
-  const rightRotation = useTransform(activeAnimationKey, [snap100Percent, snap43Percent], [0, 10]);
+  const leftRotation = useTransform(
+    activeAnimationKey,
+    [snapFullView, closetSheetHeight],
+    [0, -10],
+  );
+  const rightRotation = useTransform(
+    activeAnimationKey,
+    [snapFullView, closetSheetHeight],
+    [0, 10],
+  );
 
   if (animationKey) {
     return (

package/src/components/ChatPreview/ChatPreview.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useMemo } from 'react';
-import { WidgetWrapperVariant } from '../WidgetWrapper/types/types';
-import { Theme } from '../Tokens';
-import { resolveTheme } from '../utils/resolveTheme';
-import { ChatPreviewComponents } from './components';
 import { PromptButtonVariant } from '../PromptButton';
 import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
+import { Theme } from '../Tokens';
+import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextField } from '../WidgetTextField';
+import { WidgetWrapperVariant } from '../WidgetWrapper/types/types';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle/WidgetWrapperWithTitle';
+import { ChatPreviewComponents } from './components';
 import { ChatPreviewProps } from './types/types';
 
 export const ChatPreview = ({
@@ -28,7 +28,17 @@ export const ChatPreview = ({
   const { messageText, promptButtons, textFieldPlaceholderText, logoSrc, titleLabel } =
     widgetContentProps ?? {};
 
-  const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
+  const {
+    handlePromptButtonClick,
+    handlePromptButtonDrag,
+    handlePromptButtonHover,
+    handlePromptButtonMouseDown,
+    handlePromptButtonMouseUp,
+    handlePromptButtonTouchStart,
+    handlePromptButtonTouchEnd,
+    handleLinkClick,
+    handleTextFieldClick,
+  } = widgetEventProps ?? {};
 
   const suggestionTextMap = useMemo(() => {
     return Object.fromEntries(
@@ -48,7 +58,12 @@ export const ChatPreview = ({
 
   const finalTheme = resolveTheme(theme);
 
-  const message = <ChatPreviewComponents.Message messageText={messageText ?? ''} />;
+  const message = (
+    <ChatPreviewComponents.Message
+      messageText={messageText ?? ''}
+      onLinkClick={handleLinkClick}
+    />
+  );
 
   const promptCarousel = (
     <PromptCarousel
@@ -56,6 +71,12 @@ export const ChatPreview = ({
       promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
       promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
       handleButtonClick={handleSuggestionButtonClick}
+      handleButtonDrag={handlePromptButtonDrag}
+      handleButtonHover={text => handlePromptButtonHover(suggestionTextMap[text].id)}
+      handleButtonMouseDown={text => handlePromptButtonMouseDown(suggestionTextMap[text].id)}
+      handleButtonMouseUp={handlePromptButtonMouseUp}
+      handleButtonTouchStart={text => handlePromptButtonTouchStart(suggestionTextMap[text].id)}
+      handleButtonTouchEnd={handlePromptButtonTouchEnd}
     />
   );
 

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

@@ -2,10 +2,21 @@ import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { createElement } from 'react';
+import { Suggestion } from '@envive-ai/react-hooks/application/models';
+import { SuggestionCategory } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { ChatPreview } from '../ChatPreview';
 import { WidgetWrapperVariant } from '../../WidgetWrapper/types/types';
 import { Theme } from '../../Tokens';
 
+const createSuggestions = (texts: string[]): Suggestion[] =>
+  texts.map((content, i) => ({
+    id: `suggestion-${i}`,
+    content,
+    category: SuggestionCategory.ProductBased,
+    createdAt: new Date().toISOString(),
+    isAnswer: false,
+  }));
+
 vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
   return {
     MarkdownProcessor: function MockMarkdownProcessor({ content }: { content: string }) {
@@ -20,12 +31,12 @@ describe('ChatPreview', () => {
     widgetContentProps: {
       titleLabel: 'Shopping Assistant',
       messageText: 'How can I help you find the perfect product today?',
-      promptButtonTexts: [
+      promptButtons: createSuggestions([
         'What are the best products for gifting?',
         'Show me summer dresses',
         'Do you have free shipping?',
         'What sizes are available?',
-      ],
+      ]),
       textFieldPlaceholderText: 'What can I help you find?',
       logoSrc: 'https://example.com/logo.svg',
     },
@@ -290,13 +301,13 @@ describe('ChatPreview', () => {
   });
 
   describe('Edge cases', () => {
-    it('should render with empty promptButtonTexts array', async () => {
+    it('should render with empty promptButtons array', async () => {
       render(
         <ChatPreview
           {...defaultProps}
           widgetContentProps={{
             ...defaultProps.widgetContentProps,
-            promptButtonTexts: [],
+            promptButtons: [],
           }}
         />,
       );
@@ -326,7 +337,7 @@ describe('ChatPreview', () => {
           widgetContentProps={{
             titleLabel: 'Shopping Assistant',
             messageText: 'Test message',
-            promptButtonTexts: ['Button 1'],
+            promptButtons: createSuggestions(['Button 1']),
           }}
           widgetStyleProps={{}}
           widgetEventProps={{}}

package/src/components/ChatPreview/components/Message.tsx

@@ -7,9 +7,10 @@ const MarkdownProcessor = lazy(async () => ({
 
 type MessageProps = {
   messageText: string;
+  onLinkClick?: (url: string) => void;
 };
 
-export const Message = ({ messageText }: MessageProps) => {
+export const Message = ({ messageText, onLinkClick }: MessageProps) => {
   return (
     <Suspense>
       <MarkdownProcessor
@@ -17,6 +18,7 @@ export const Message = ({ messageText }: MessageProps) => {
         clampParagraphs={4}
         textColor={TypographyColor.TEXT_PRIMARY}
         textVariant={TypographyVariant.B3_RG}
+        onLinkClick={onLinkClick}
       />
     </Suspense>
   );

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

@@ -130,11 +130,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 text - The placeholder text of the text field
+   * @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/ChatPreviewComparison/ChatPreviewComparison.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useMemo } from 'react';
-import { WidgetWrapperVariant } from '../WidgetWrapper/types/types';
-import { Theme } from '../Tokens';
-import { resolveTheme } from '../utils/resolveTheme';
-import { ChatPreviewComparisonComponents } from './components';
 import { PromptButtonVariant } from '../PromptButton';
 import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
+import { Theme } from '../Tokens';
+import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextField } from '../WidgetTextField';
-import { ChatPreviewComparisonProps } from './types/types';
+import { WidgetWrapperVariant } from '../WidgetWrapper/types/types';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle/WidgetWrapperWithTitle';
+import { ChatPreviewComparisonComponents } from './components';
+import { ChatPreviewComparisonProps } from './types/types';
 
 export const ChatPreviewComparison = ({
   baseProps,
@@ -36,7 +36,17 @@ export const ChatPreviewComparison = ({
     titleLabel,
   } = widgetContentProps ?? {};
 
-  const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
+  const {
+    handlePromptButtonClick,
+    handlePromptButtonDrag,
+    handlePromptButtonHover,
+    handlePromptButtonMouseDown,
+    handlePromptButtonMouseUp,
+    handlePromptButtonTouchStart,
+    handlePromptButtonTouchEnd,
+    handleLinkClick,
+    handleTextFieldClick,
+  } = widgetEventProps ?? {};
 
   const finalTheme = resolveTheme(theme);
 
@@ -67,6 +77,7 @@ export const ChatPreviewComparison = ({
     <ChatPreviewComparisonComponents.Message
       messageText={messageText ?? ''}
       theme={finalTheme}
+      onLinkClick={handleLinkClick}
     />
   );
 
@@ -76,6 +87,12 @@ export const ChatPreviewComparison = ({
       promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
       promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
       handleButtonClick={handleSuggestionButtonClick}
+      handleButtonDrag={handlePromptButtonDrag}
+      handleButtonHover={text => handlePromptButtonHover(suggestionTextMap[text].id)}
+      handleButtonMouseDown={text => handlePromptButtonMouseDown(suggestionTextMap[text].id)}
+      handleButtonMouseUp={handlePromptButtonMouseUp}
+      handleButtonTouchStart={text => handlePromptButtonTouchStart(suggestionTextMap[text].id)}
+      handleButtonTouchEnd={handlePromptButtonTouchEnd}
     />
   );
 

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

@@ -2,10 +2,21 @@ import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { createElement } from 'react';
+import { Suggestion } from '@envive-ai/react-hooks/application/models';
+import { SuggestionCategory } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { ChatPreviewComparison } from '../ChatPreviewComparison';
 import { WidgetWrapperVariant } from '../../WidgetWrapper/types/types';
 import { Theme } from '../../Tokens';
 
+const createSuggestions = (texts: string[]): Suggestion[] =>
+  texts.map((content, i) => ({
+    id: `suggestion-${i}`,
+    content,
+    category: SuggestionCategory.ProductBased,
+    createdAt: new Date().toISOString(),
+    isAnswer: false,
+  }));
+
 const mockUseCheckIsMobile = vi.fn(() => ({ isMobile: false, viewportWidth: 1024 }));
 vi.mock('../../utils/useCheckIsMobile', () => ({
   useCheckIsMobile: () => mockUseCheckIsMobile(),
@@ -40,12 +51,12 @@ describe('ChatPreviewComparison', () => {
       headlineText: 'Compare these products',
       messageText:
         'I can help you compare these two products side by side. Let me know what specific features, specifications, or details you would like to know more about.',
-      promptButtonTexts: [
+      promptButtons: createSuggestions([
         'Tell me about product A',
         'Tell me about product B',
         'What are the differences?',
         'Which one is better?',
-      ],
+      ]),
       textFieldPlaceholderText: 'What can I help you find?',
       images: [
         { src: 'https://picsum.photos/400/600?random=1', alt: 'Image 1' },
@@ -349,13 +360,13 @@ describe('ChatPreviewComparison', () => {
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
     });
 
-    it('should render with empty promptButtonTexts array', () => {
+    it('should render with empty promptButtons array', () => {
       render(
         <ChatPreviewComparison
           {...defaultProps}
           widgetContentProps={{
             ...defaultProps.widgetContentProps,
-            promptButtonTexts: [],
+            promptButtons: [],
           }}
         />,
       );
@@ -396,7 +407,7 @@ describe('ChatPreviewComparison', () => {
             titleLabel: 'Shopping Assistant',
             headlineText: 'Compare these products',
             messageText: 'Test message',
-            promptButtonTexts: ['Button 1'],
+            promptButtons: createSuggestions(['Button 1']),
           }}
           widgetStyleProps={{}}
           widgetEventProps={{}}

package/src/components/ChatPreviewComparison/components/Message.tsx

@@ -11,9 +11,14 @@ const MarkdownProcessor = lazy(async () => ({
 type MessageProps = {
   messageText: string;
   theme: Theme;
+  onLinkClick?: (url: string) => void;
 };
 
-export const Message = ({ messageText, theme = Theme.GLOBAL_CUSTOM }: MessageProps) => {
+export const Message = ({
+  messageText,
+  theme = Theme.GLOBAL_CUSTOM,
+  onLinkClick,
+}: MessageProps) => {
   const { isMobile } = useCheckIsMobile();
 
   const finalTheme = resolveTheme(theme);
@@ -28,6 +33,7 @@ export const Message = ({ messageText, theme = Theme.GLOBAL_CUSTOM }: MessagePro
         clampParagraphs={isStandardAndMobile ? 7 : 3}
         textColor={TypographyColor.TEXT_PRIMARY}
         textVariant={TypographyVariant.B3_RG}
+        onLinkClick={onLinkClick}
       />
     </Suspense>
   );

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(() => {