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

package/src/components/FloatingChat/components/DocumentRetrievalCardsCarousel.tsx

@@ -7,16 +7,19 @@ import { Theme } from '../../../../tokens/theme/theme';
 export interface DocumentRetrievalCardsCarouselProps {
   theme: Theme;
   documents: DocumentRetrievalCardProps[];
+  hideNavigation?: boolean;
 }
 
 export const DocumentRetrievalCardsCarousel = ({
   documents,
   theme,
+  hideNavigation = false,
 }: DocumentRetrievalCardsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
 
   return (
     <Carousel
+      hideNavigation={hideNavigation}
       elements={documents.map(document => (
         <DocumentRetrievalCard
           key={document.title}

package/src/components/FloatingChat/components/Layout.tsx

@@ -17,6 +17,8 @@ type LayoutProps = {
   chatMessages?: React.ReactNode;
   answerSuggestions?: React.ReactNode;
   scrollToBottomButton?: React.ReactNode;
+  disclaimer?: React.ReactNode;
+  isFloatingFooterLayout?: boolean;
 };
 
 export const Layout = ({
@@ -31,6 +33,8 @@ export const Layout = ({
   chatMessages,
   answerSuggestions,
   scrollToBottomButton,
+  disclaimer,
+  isFloatingFooterLayout = false,
 }: LayoutProps) => {
   const finalTheme = resolveTheme(theme);
   const hasWelcomeMessage = isValidElement(welcomeMessage);
@@ -52,20 +56,22 @@ export const Layout = ({
       >
         {header && <div className="envive-tw-flex-shrink-0 envive-tw-leading-[0]">{header}</div>}
 
-        <div className="envive-tw-flex-1 envive-tw-overflow-y-auto envive-tw-overflow-x-hidden">
+        <div className="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">
           <Stack
             className="envive-tw-h-full"
             direction="column"
             justify="between"
           >
             {welcomeMessage}
+            {disclaimer && <div>{disclaimer}</div>}
             <Stack
               direction="column"
               gap="0"
               className={classNames(
                 (!hasWelcomeMessage || (hasWelcomeMessage && finalTheme === Theme.STANDARD)) &&
                   'envive-tw-pt-4',
-                !hasAnswerSuggestions && 'envive-tw-pb-4',
+                !hasAnswerSuggestions && !isFloatingFooterLayout && 'envive-tw-pb-4',
+                isFloatingFooterLayout && 'envive-tw-pb-[180px]',
               )}
             >
               {chatMessages}
@@ -74,10 +80,26 @@ export const Layout = ({
           </Stack>
         </div>
 
-        {footer && <div className="envive-tw-flex-shrink-0">{footer}</div>}
+        {footer && (
+          <div
+            className={classNames(
+              'envive-tw-w-full envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out',
+              isFloatingFooterLayout
+                ? 'envive-tw-absolute envive-tw-bottom-[0px] envive-tw-z-10'
+                : 'envive-tw-flex-shrink-0',
+            )}
+          >
+            {footer}
+          </div>
+        )}
 
         {scrollToBottomButton && (
-          <div className="envive-tw-absolute envive-tw-bottom-[170px] envive-tw-right-4 envive-tw-z-10">
+          <div
+            className={classNames(
+              'envive-tw-absolute envive-tw-right-4 envive-tw-z-10 envive-tw-transition-all envive-tw-duration-300 envive-tw-ease-in-out',
+              isFloatingFooterLayout ? 'envive-tw-bottom-[80px]' : 'envive-tw-bottom-[170px]',
+            )}
+          >
             {scrollToBottomButton}
           </div>
         )}

package/src/components/FloatingChat/components/MessageDivider.tsx

@@ -15,14 +15,20 @@ export const MessageDivider = ({ label }: MessageDividerProps) => {
       align="center"
       justify="center"
     >
-      <div className={lineClassName} />
+      <div
+        className={lineClassName}
+        style={{ display: 'block' }}
+      />
       <Typography
         variant={TypographyVariant.B3_RG}
         color={TypographyColor.TEXT_SECONDARY}
       >
         {label}
       </Typography>
-      <div className={lineClassName} />
+      <div
+        className={lineClassName}
+        style={{ display: 'block' }}
+      />
     </Stack>
   );
 };

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

@@ -263,7 +263,7 @@ export const ModalSheet: FC<ModalSheetProps> = ({
               width: '100%',
               height: swipeviewHeightPx + BOTTOM_OFFSET,
               position: 'fixed',
-              bottom: -BOTTOM_OFFSET + 1,
+              bottom: -BOTTOM_OFFSET + 2,
               right: 0,
               boxSizing: 'content-box',
               zIndex: 2147483646,

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,54 @@
+import { Theme } from '../Tokens';
+import { resolveTheme } from '../utils/resolveTheme';
+import { WidgetTextField } from '../WidgetTextField';
+import { ProductCardWidgetComponents } from './components';
+import { ProductCardProps } from './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}
+        className="envive-tw-bg-background-light"
+      />
+    </ProductCardWidgetComponents.Poster>
+  );
+};