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

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

@@ -1,17 +1,30 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 type UseScrollToBottomProps = {
   messagesRef: React.RefObject<HTMLDivElement>;
   autoScrollDependencies?: unknown[];
   scrollThreshold?: number;
+  useFloatingLayout?: boolean;
+  footerHeight?: number;
+  isOpen?: boolean;
 };
 
 export const useScrollToBottom = ({
   messagesRef,
   autoScrollDependencies = [],
   scrollThreshold = 30,
+  useFloatingLayout = false,
+  footerHeight = 120,
+  isOpen = true,
 }: UseScrollToBottomProps) => {
   const [showScrollButton, setShowScrollButton] = useState(false);
+  const [isFloatingLayout, setIsFloatingLayout] = useState(false);
+  const isTransitioningLayoutRef = useRef(false);
+  const lastScrollTopRef = useRef(0);
+  const scrollDirectionRef = useRef<'up' | 'down' | null>(null);
+  const isInitialMountRef = useRef(true);
+  const previousIsOpenRef = useRef(isOpen);
+  const blockLayoutChangeRef = useRef(false);
 
   const getScrollableContainer = useCallback(() => {
     return messagesRef.current?.closest('.envive-tw-overflow-y-auto') as HTMLDivElement;
@@ -22,11 +35,83 @@ export const useScrollToBottom = ({
     if (!scrollableContainer) return false;
 
     const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
-    // Add a threshold to account for rounding errors
+
     const isAtBottom = scrollHeight - scrollTop - clientHeight < scrollThreshold;
+
     return isAtBottom;
   }, [getScrollableContainer, scrollThreshold]);
 
+  useEffect(() => {
+    if (isOpen && !previousIsOpenRef.current) {
+      setIsFloatingLayout(false);
+      setShowScrollButton(false);
+      isInitialMountRef.current = true;
+      isTransitioningLayoutRef.current = false;
+
+      blockLayoutChangeRef.current = true;
+      setTimeout(() => {
+        blockLayoutChangeRef.current = false;
+      }, 500);
+    }
+    previousIsOpenRef.current = isOpen;
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (useFloatingLayout) {
+      setIsFloatingLayout(false);
+      setShowScrollButton(false);
+      isInitialMountRef.current = true;
+
+      blockLayoutChangeRef.current = true;
+      setTimeout(() => {
+        blockLayoutChangeRef.current = false;
+      }, 500);
+    }
+  }, [useFloatingLayout]);
+
+  useEffect(() => {
+    if (!useFloatingLayout) return;
+
+    const scrollableContainer = getScrollableContainer();
+    if (!scrollableContainer) return;
+
+    const shouldBeFloating = showScrollButton;
+
+    if (shouldBeFloating !== isFloatingLayout && !isTransitioningLayoutRef.current) {
+      isTransitioningLayoutRef.current = true;
+
+      const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+      const scrollFromBottom = scrollHeight - scrollTop - clientHeight;
+
+      setIsFloatingLayout(shouldBeFloating);
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            const newScrollHeight = scrollableContainer.scrollHeight;
+            const newClientHeight = scrollableContainer.clientHeight;
+
+            const newScrollTop = newScrollHeight - newClientHeight - scrollFromBottom;
+
+            if (scrollFromBottom > scrollThreshold) {
+              scrollableContainer.scrollTop = Math.max(0, newScrollTop);
+            }
+
+            setTimeout(() => {
+              isTransitioningLayoutRef.current = false;
+            }, 250);
+          }, 50);
+        });
+      });
+    }
+  }, [
+    showScrollButton,
+    isFloatingLayout,
+    getScrollableContainer,
+    useFloatingLayout,
+    scrollThreshold,
+  ]);
+
   useEffect(() => {
     const scrollableContainer = getScrollableContainer();
 
@@ -34,9 +119,13 @@ export const useScrollToBottom = ({
       requestAnimationFrame(() => {
         scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
         setShowScrollButton(false);
+        if (useFloatingLayout) {
+          setIsFloatingLayout(false);
+          isInitialMountRef.current = true;
+        }
       });
     }
-  }, [...autoScrollDependencies, getScrollableContainer]);
+  }, [...autoScrollDependencies, getScrollableContainer, useFloatingLayout]);
 
   useEffect(() => {
     const scrollableContainer = getScrollableContainer();
@@ -45,32 +134,85 @@ export const useScrollToBottom = ({
     }
 
     const handleScroll = () => {
-      const isAtBottom = checkIfScrolledToBottom();
-      setShowScrollButton(!isAtBottom);
+      if (isTransitioningLayoutRef.current || blockLayoutChangeRef.current) {
+        return;
+      }
+
+      const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+
+      if (scrollTop > lastScrollTopRef.current) {
+        scrollDirectionRef.current = 'down';
+      } else if (scrollTop < lastScrollTopRef.current) {
+        scrollDirectionRef.current = 'up';
+      }
+      lastScrollTopRef.current = scrollTop;
+
+      const contentBelowViewport = scrollHeight - scrollTop - clientHeight;
+
+      const upThreshold = scrollThreshold * 2;
+
+      if (showScrollButton) {
+        if (scrollDirectionRef.current === 'down') {
+          const switchThreshold = footerHeight + 40;
+          if (contentBelowViewport <= switchThreshold) {
+            setShowScrollButton(false);
+          }
+        } else if (contentBelowViewport <= scrollThreshold) {
+          setShowScrollButton(false);
+        }
+      } else if (contentBelowViewport > upThreshold) {
+        setShowScrollButton(true);
+      }
     };
 
     scrollableContainer.addEventListener('scroll', handleScroll);
-    handleScroll();
+
+    if (!isInitialMountRef.current) {
+      handleScroll();
+    } else {
+      isInitialMountRef.current = false;
+    }
 
     return () => {
       scrollableContainer.removeEventListener('scroll', handleScroll);
     };
-  }, [getScrollableContainer, checkIfScrolledToBottom]);
+  }, [
+    getScrollableContainer,
+    checkIfScrolledToBottom,
+    scrollThreshold,
+    showScrollButton,
+    footerHeight,
+  ]);
 
   const scrollToBottom = useCallback(() => {
     const scrollableContainer = getScrollableContainer();
     if (scrollableContainer) {
+      blockLayoutChangeRef.current = true;
+
       requestAnimationFrame(() => {
-        scrollableContainer.scrollTo({
-          top: scrollableContainer.scrollHeight,
-          behavior: 'smooth',
+        requestAnimationFrame(() => {
+          const targetScroll = scrollableContainer.scrollHeight;
+
+          scrollableContainer.scrollTo({
+            top: targetScroll,
+            behavior: 'smooth',
+          });
+
+          setTimeout(() => {
+            blockLayoutChangeRef.current = false;
+            setShowScrollButton(false);
+            if (useFloatingLayout) {
+              setIsFloatingLayout(false);
+            }
+          }, 500);
         });
       });
     }
-  }, [getScrollableContainer]);
+  }, [getScrollableContainer, useFloatingLayout]);
 
   return {
     showScrollButton,
     scrollToBottom,
+    isFloatingLayout: useFloatingLayout ? isFloatingLayout : false,
   };
 };

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

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+
+export enum Unit {
+  PERCENT = 'percent',
+  PIXEL = 'pixel',
+}
+
+export const useSnapCalculator = (snaps: number[], maxHeight: number, unit: Unit) => {
+  const viewportHeightPx = document.documentElement.clientHeight;
+  const swipeviewHeightPx =
+    unit === Unit.PERCENT ? Math.floor(viewportHeightPx * (maxHeight / 100)) : maxHeight;
+
+  const snapsToPixels = useMemo(
+    () =>
+      snaps?.map(snap =>
+        Math.abs(
+          (unit === Unit.PERCENT ? Math.floor(swipeviewHeightPx * (snap / 100)) : snap) -
+            swipeviewHeightPx,
+        ),
+      ),
+    [swipeviewHeightPx, unit, snaps],
+  );
+
+  const getPixelToSnap = (pixels: number) => {
+    const snapIdx = snapsToPixels?.indexOf(pixels) || 0;
+    return snaps?.[snapIdx] || 0;
+  };
+
+  const getSnapToPixel = (snap: number) => {
+    const snapIdx = snaps?.indexOf(snap) || 0;
+    return snapsToPixels?.[snapIdx] || 0;
+  };
+
+  return {
+    viewportHeightPx,
+    snapsToPixels,
+    swipeviewHeightPx,
+    getPixelToSnap,
+    getSnapToPixel,
+  };
+};

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

@@ -0,0 +1,131 @@
+import {
+  MotionValue,
+  ValueAnimationTransition,
+  transform,
+  useAnimate,
+  useMotionValue,
+  useTransform,
+} from 'framer-motion';
+import { useMemo, useState } from 'react';
+import { Unit, useSnapCalculator } from './useSnapCalculator';
+
+type SnapControl = {
+  animationKey?: MotionValue;
+  animation: ValueAnimationTransition;
+  height: number;
+  unit: Unit;
+  snaps: number[];
+  initSnap: number;
+  threshold?: number;
+  overlayOpacity: number;
+  onSnapComplete: (currentSnap: number, nextSnap: number, collapsed: boolean) => void;
+};
+
+const MIDDLE_SNAP_OFFSET = 5;
+
+export const useSnapControl = ({
+  animationKey,
+  animation,
+  height,
+  unit,
+  snaps,
+  initSnap,
+  onSnapComplete,
+  overlayOpacity,
+}: SnapControl) => {
+  const [scope, animate] = useAnimate();
+  const defaultAnimationKey = useMotionValue(-1);
+  const animatedY = animationKey || defaultAnimationKey;
+
+  const { swipeviewHeightPx, snapsToPixels, getPixelToSnap, getSnapToPixel } = useSnapCalculator(
+    snaps,
+    height,
+    unit,
+  );
+
+  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 initSnapInPixels = snapsToPixels?.[initSnap];
+  const getInitSnap = () => snaps?.[initSnap];
+  const [currentSnap, setCurrentSnap] = useState<number>(getInitSnap());
+
+  const defineNextSnapByPosition = () => {
+    const currentY = animatedY.get();
+
+    let closestSnap = snapsToPixels[0];
+    let minDistance = Math.abs(currentY - snapsToPixels[0]);
+
+    snapsToPixels.forEach(snapPx => {
+      const distance = Math.abs(currentY - snapPx);
+      if (distance < minDistance) {
+        minDistance = distance;
+        closestSnap = snapPx;
+      }
+    });
+
+    return closestSnap;
+  };
+
+  const jumpTo = (snapPx: number) => {
+    const collapsed = snapPx === swipeviewHeightPx;
+    const nextSnap = getPixelToSnap(snapPx);
+    animate(
+      scope.current,
+      { y: snapPx },
+      {
+        ...animation,
+        onComplete: () => {
+          onSnapComplete(currentSnap, nextSnap, collapsed);
+          setCurrentSnap(nextSnap);
+        },
+      },
+    );
+
+    return {
+      nextSnap,
+      collapsed,
+    };
+  };
+
+  const resetControls = () => {
+    setCurrentSnap(getInitSnap());
+    return 0;
+  };
+
+  return {
+    scope,
+    animatedY,
+    animate,
+    swipeviewHeightPx,
+    initSnapInPixels,
+    contentHeight,
+    currentSnap,
+    displayOverlay,
+    opacityOverlay,
+    getSnapToPixel,
+    jumpTo,
+    defineNextSnapByPosition,
+    resetControls,
+  };
+};

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

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from 'react';
+import { MotionValue, useMotionValue, useTransform } from 'framer-motion';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { ModalSheetControl } from '../components';
+
+export interface UseSnapSetupReturn {
+  modalSheetControl: React.RefObject<ModalSheetControl>;
+  maxSwipeableViewHeight: number;
+  isOpen: boolean;
+
+  isMobile: boolean;
+
+  snaps: number[];
+  initialSnap: number;
+  shouldAutoExpand: boolean;
+
+  currentSnapPercentage: number;
+  handleSnapChange: (snapPercentage: number) => void;
+
+  animationKey: MotionValue<number>;
+  mobileHeaderHeight: MotionValue<number>;
+
+  snap43Percent: number;
+  snap100Percent: number;
+
+  shouldShowHeader: boolean;
+  shouldShowScrolled: boolean;
+  isFullView: boolean;
+  isPartialView: boolean;
+}
+
+export interface UseSnapSetupProps {
+  isFloatingChatOpen: boolean;
+}
+
+export const useSnapSetup = ({ isFloatingChatOpen }: UseSnapSetupProps): UseSnapSetupReturn => {
+  const maxSwipeableViewHeight = 89;
+  const modalSheetControl = useRef<ModalSheetControl>(null);
+  const { viewportWidth } = useCheckIsMobile();
+
+  const isMobile = viewportWidth !== undefined && viewportWidth < 512;
+
+  const shouldAutoExpand = Boolean(
+    isMobile &&
+    (window as Window & { _spiffy?: { selectedCustomizeOption?: string } })?._spiffy
+      ?.selectedCustomizeOption,
+  );
+
+  const snaps = shouldAutoExpand ? [43, 100] : [0, 43, 100];
+  const initialSnap = 1;
+
+  const [currentSnapPercentage, setCurrentSnapPercentage] = useState<number>(
+    snaps[initialSnap] || 43,
+  );
+
+  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);
+
+  useEffect(() => {
+    const unsubscribe = animationKey.on('change', value => {
+      setShouldShowHeader(value < snap43Percent - 10);
+    });
+    return unsubscribe;
+  }, [animationKey, snap43Percent]);
+
+  const isFullView = isMobile && currentSnapPercentage === 100;
+  const isPartialView = isMobile && currentSnapPercentage >= 0 && currentSnapPercentage <= 43;
+
+  const handleSnapChange = (snapPercentage: number) => {
+    setCurrentSnapPercentage(snapPercentage);
+  };
+
+  const isOpen =
+    (window as Window & { _spiffy?: { selectedCustomizeOption?: string } })?._spiffy
+      ?.selectedCustomizeOption === 'SalesAgent'
+      ? true
+      : Boolean(isFloatingChatOpen);
+
+  return {
+    modalSheetControl,
+    maxSwipeableViewHeight,
+    isOpen,
+    isMobile,
+    snaps,
+    initialSnap,
+    shouldAutoExpand,
+    currentSnapPercentage,
+    handleSnapChange,
+    animationKey,
+    mobileHeaderHeight,
+    snap43Percent,
+    snap100Percent,
+    shouldShowHeader,
+    isFullView,
+    isPartialView,
+  };
+};

package/src/components/FloatingChat/types/types.ts

@@ -1,5 +1,6 @@
 import { SalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
 import { FloatingChatConfig, LookAndFeelConfig } from '@envive-ai/react-hooks/contexts/typesV3';
+import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
 import { Theme } from '../../../../tokens/theme/theme';
 
 /**
@@ -23,11 +24,6 @@ export interface FloatingChatProps {
    * Test identifier for testing utilities.
    */
   testId?: string;
-  /**
-   * Whether the chat is in a loading state.
-   * @todo Needs to implement isLoading functionality.
-   */
-  isLoading?: boolean;
   /**
    * Theme variant to apply to the chat interface.
    * @default Theme.GLOBAL_CUSTOM
@@ -57,4 +53,12 @@ export interface FloatingChatProps {
    * Whether the CX button switch is enabled.
    */
   isCXButtonSwitchEnabled: boolean;
+  /**
+   * Whether the chat is open.
+   */
+  isFloatingChatOpen: boolean;
+  /**
+   * Hardcopy content to display in the chat.
+   */
+  hardcopyContent: HardcopyResponse;
 }

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

@@ -105,6 +105,7 @@ export const getCleanOrders = (messages: Message[]) => {
   >[] = lineItems.map(item => {
     if (item.image && item.orderItemId && order.createdAt) {
       return {
+        id: item.orderItemId,
         productImages: [item.image],
         orderStatus: item.fulfillmentDisplayStatus,
         orderNumber: order.metadata.orderNumber,

package/src/components/MarkdownProcessor/components/MarkdownLink.tsx

@@ -1,3 +1,4 @@
+import { TypographyColor } from 'src/components/Typography';
 import { LinkButton } from '../../Message/components/LinkButton';
 
 export type MarkdownLinkProps = {
@@ -9,5 +10,6 @@ export const MarkdownLink = ({ href, children }: MarkdownLinkProps) => (
   <LinkButton
     url={href}
     text={children?.toString()}
+    typographyColor={TypographyColor.TEXT_SECONDARY}
   />
 );

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

@@ -1,13 +1,51 @@
 import '@testing-library/jest-dom';
 import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+import { ReactNode, createElement } from 'react';
 import { Message } from '../Message';
 import { MessageVariant } from '../types';
 import { LinkButton } from '../components/LinkButton';
 
+// Mock MarkdownProcessor so it renders synchronously (avoids Suspense fallback in tests).
+// AgentContent uses lazy()-loaded MarkdownProcessor; without this mock, tests always see LoadingSkeleton.
+vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  return {
+    MarkdownProcessor: function MockMarkdownProcessor({ content }: { content: string }) {
+      const matches = [...content.matchAll(urlRegex)];
+      if (matches.length === 0) {
+        return createElement('p', null, content);
+      }
+      const nodes: ReactNode[] = [];
+      let lastIndex = 0;
+      matches.forEach((m: RegExpMatchArray, i: number) => {
+        const url = m[0];
+        const index = m.index ?? 0;
+        nodes.push(content.slice(lastIndex, index));
+        nodes.push(
+          createElement(
+            'span',
+            {
+              key: i,
+              role: 'button',
+              'aria-label': `${url} (opens in new tab)`,
+              className: 'hover:envive-tw-underline',
+              onClick: () => window.open(url, '_blank'),
+            },
+            url,
+          ),
+        );
+        lastIndex = index + url.length;
+      });
+      nodes.push(content.slice(lastIndex));
+      return createElement('p', null, ...nodes);
+    },
+  };
+});
+
 describe('Message', () => {
   describe('Basic rendering', () => {
-    it('should render with variant "agent" and agentName/content', () => {
+    it('should render with variant "agent" and agentName/content', async () => {
       const { container } = render(
         <Message
           variant={MessageVariant.AGENT}
@@ -16,7 +54,7 @@ describe('Message', () => {
         />,
       );
       expect(screen.getByText('Ask Maggie')).toBeInTheDocument();
-      expect(screen.getByText('This is a test message')).toBeInTheDocument();
+      expect(await screen.findByText('This is a test message')).toBeInTheDocument();
       const element = container.firstChild as HTMLElement;
       expect(element).toHaveClass('envive-tw-flex');
       expect(element).toHaveClass('envive-tw-flex-col');

package/src/components/Message/components/AgentContent.tsx

@@ -1,5 +1,9 @@
+import { Suspense, lazy } from 'react';
 import { LoadingSkeleton } from './LoadingSkeleton';
-import { MarkdownProcessor } from '../../MarkdownProcessor/MarkdownProcessor';
+
+const MarkdownProcessor = lazy(async () => ({
+  default: (await import('../../MarkdownProcessor/MarkdownProcessor')).MarkdownProcessor,
+}));
 
 type AgentContentProps = {
   content: string;
@@ -17,5 +21,9 @@ export const AgentContent = ({
     return <LoadingSkeleton />;
   }
 
-  return <MarkdownProcessor content={content} />;
+  return (
+    <Suspense fallback={<LoadingSkeleton />}>
+      <MarkdownProcessor content={content} />
+    </Suspense>
+  );
 };

package/src/components/Message/components/LinkButton.tsx

@@ -8,13 +8,14 @@ import { openUrlInNewTab } from '../utils/openUrlInNewTab';
 type LinkButtonProps = {
   url: string;
   text: string;
+  typographyColor?: TypographyColor;
 };
 
 /**
  * Component that renders an external link with an icon.
  * Uses an inline span with button role for better accessibility and inline text flow.
  */
-export const LinkButton = ({ url, text }: LinkButtonProps): React.ReactNode => {
+export const LinkButton = ({ url, text, typographyColor }: LinkButtonProps): React.ReactNode => {
   const { containerClasses } = useGetLinkButtonProperties();
   const { iconContainerClasses } = useGetLinkButtonIconProperties();
 
@@ -37,7 +38,7 @@ export const LinkButton = ({ url, text }: LinkButtonProps): React.ReactNode => {
     >
       <Typography
         variant={TypographyVariant.B3_MD}
-        color={TypographyColor.TEXT_PRIMARY}
+        color={typographyColor ?? TypographyColor.TEXT_PRIMARY}
         className="envive-tw-inline"
       >
         {text}

package/src/components/Message/hooks/useGetLinkButtonProperties.ts

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
  */
 export const useGetLinkButtonProperties = () => {
   const containerClasses = useMemo(() => {
-    const layoutClasses = 'envive-tw-inline envive-tw-align-middle';
+    const layoutClasses = 'envive-tw-inline envive-tw-align-top';
 
     const interactiveClasses = 'envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group';