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

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/useSnapSetup.ts

@@ -61,12 +61,10 @@ export const useSnapSetup = ({ isFloatingChatOpen }: UseSnapSetupProps): UseSnap
   const mobileHeaderHeight = useTransform(animationKey, [snap100Percent, snap43Percent], [56, 0]);
 
   const [shouldShowHeader, setShouldShowHeader] = useState(false);
-  const [shouldShowScrolled, setShouldShowScrolled] = useState(false);
 
   useEffect(() => {
     const unsubscribe = animationKey.on('change', value => {
       setShouldShowHeader(value < snap43Percent - 10);
-      setShouldShowScrolled(value > snap43Percent);
     });
     return unsubscribe;
   }, [animationKey, snap43Percent]);
@@ -99,7 +97,6 @@ export const useSnapSetup = ({ isFloatingChatOpen }: UseSnapSetupProps): UseSnap
     snap43Percent,
     snap100Percent,
     shouldShowHeader,
-    shouldShowScrolled,
     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
@@ -61,4 +57,8 @@ export interface FloatingChatProps {
    * 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';
 

package/src/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,65 @@
+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,
+  imageSrc,
+  headline,
+  italicizeHeadline,
+  animatedText,
+  prompts,
+  promptButtonType,
+  carouselId,
+  fallbackColor,
+  placeholder,
+  textTypingDuration,
+  textTransition,
+  loop,
+  onSelect,
+  onInputClick,
+}: ProductCardProps) => {
+  const resolvedTheme = resolveTheme(theme);
+
+  return (
+    <ProductCardWidgetComponents.Poster
+      imageSrc={imageSrc}
+      fallbackColor={fallbackColor}
+    >
+      <ProductCardWidgetComponents.Header
+        headline={headline}
+        italicizeHeadline={italicizeHeadline}
+        animatedText={animatedText}
+        textTypingDuration={textTypingDuration}
+        textTransition={textTransition}
+        loop={loop}
+      />
+      <ProductCardWidgetComponents.Carousel
+        theme={resolvedTheme}
+        carouselId={carouselId}
+        prompts={prompts}
+        promptButtonType={promptButtonType}
+        onSelect={onSelect}
+      />
+      <WidgetTextField
+        theme={resolvedTheme}
+        placeholder={placeholder}
+        onClick={onInputClick}
+        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/__tests__/ProductCard.test.tsx

@@ -0,0 +1,191 @@
+import '@testing-library/jest-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Theme } from '../../../../tokens/theme/theme';
+import { PromptButtonVariant } from '../../PromptButton';
+import { ProductCard } from '../ProductCard';
+
+vi.mock('../../../utils/resolveTheme', () => ({
+  resolveTheme: vi.fn((theme: Theme) => theme),
+}));
+
+vi.mock('../../DesignTokens/components/utils', () => ({
+  getComputedCSSVariable: vi.fn(() => 'standard'),
+}));
+
+const defaultProps = {
+  theme: Theme.STANDARD,
+  imageSrc:
+    'https://www.bandolierstyle.com/cdn/shop/files/Lily17_Black_Gold_Chrome_MOD_Dec25_6.jpg?v=1765844272',
+  headline: 'Test Product',
+  italicizeHeadline: false,
+  animatedText: ['Description 1', 'Description 2'],
+  prompts: ['Prompt 1', 'Prompt 2'],
+  promptButtonType: PromptButtonVariant.LIGHT,
+  carouselId: 'test-carousel-id',
+  placeholder: 'Ask me anything...',
+  onSelect: vi.fn(),
+  onInputClick: vi.fn(),
+};
+
+describe('ProductCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Basic rendering', () => {
+    it('should render with all required props', () => {
+      render(<ProductCard {...defaultProps} />);
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render headline text', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          headline="Custom Headline"
+        />,
+      );
+
+      expect(screen.getByText('Custom Headline')).toBeInTheDocument();
+    });
+
+    it('should render with different themes', () => {
+      const { rerender } = render(
+        <ProductCard
+          {...defaultProps}
+          theme={Theme.STANDARD}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          theme={Theme.MODERN}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+  });
+
+  describe('Callback handlers', () => {
+    it('should call onInputClick when input is clicked', () => {
+      const handleInputClick = vi.fn();
+      render(
+        <ProductCard
+          {...defaultProps}
+          onInputClick={handleInputClick}
+        />,
+      );
+
+      const input = screen.getByText('Ask me anything...');
+      input.click();
+
+      expect(handleInputClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render prompts in carousel', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          prompts={['Prompt 1', 'Prompt 2']}
+        />,
+      );
+
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Optional props', () => {
+    it('should render with custom placeholder', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          placeholder="Custom placeholder"
+        />,
+      );
+
+      expect(screen.getByText('Custom placeholder')).toBeInTheDocument();
+    });
+
+    it('should render with fallbackColor', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          fallbackColor="#FF0000"
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with italicizeHeadline set to true', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          italicizeHeadline
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with italicizeHeadline set to false', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          italicizeHeadline={false}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with different promptButtonType variants', () => {
+      const { rerender } = render(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.LIGHT}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.DARK}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.GHOST}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+    });
+  });
+});