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

package/src/components/FloatingChat/FloatingChat.tsx

@@ -1,21 +1,25 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
+import { motion } from 'framer-motion';
 import { ColorNames } from '../../models/colorsConfig';
 import { Theme } from '../../../tokens/theme/theme';
 
-import { FloatingChatComponents } from './components';
+import { FloatingChatComponents, ModalSheet } from './components';
 import { useScrollToBottom } from './hooks/useScrollToBottom';
+import { useSnapSetup } from './hooks/useSnapSetup';
+import { useChatSuggestions } from './hooks/useChatSuggestions';
 import { ChatHeader } from '../ChatHeader';
-import { ChatHeaderOptions, ChatHeaderVariant } from '../ChatHeader/types';
+import { ChatHeaderOptions, ChatHeaderVariant, HandleState } from '../ChatHeader/types';
 import { WelcomeMessage } from '../WelcomeMessage/WelcomeMessage';
 import { SparkleIconColor } from '../WelcomeMessage/types/types';
-import { Stack } from '../Stack';
 import { ChatFooter } from '../ChatFooter';
 import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
 import { PromptButtonVariant } from '../PromptButton';
 
 import { resolveTheme } from '../utils/resolveTheme';
 import { FloatingChatProps } from './types/types';
+import { useFilteredChatMessages } from './hooks/useFilteredChatMessages';
+import { Unit } from './hooks/useSnapCalculator';
 
 export const FloatingChat = ({
   id,
@@ -27,6 +31,7 @@ export const FloatingChat = ({
   floatingChatConfig,
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
+  isFloatingChatOpen,
   onClose,
   onToggleCXButton,
 }: FloatingChatProps) => {
@@ -41,7 +46,8 @@ export const FloatingChat = ({
     headerMode,
     welcomeMessageIconColor,
     showVerifiedBuyer,
-    userQueryInputEnabled,
+    // Default this to true to avoid needing it in the default config
+    userQueryInputEnabled = true,
     showEnviveLogo,
     ignoreFirstModelResponse,
     neverShowSingleProductCards,
@@ -61,24 +67,17 @@ export const FloatingChat = ({
     onTypedMessageSubmitted,
   } = salesAgentData;
 
-  const [answerSuggestions, setAnswerSuggestions] = useState<string[]>([]);
-  const [generalSuggestions, setGeneralSuggestions] = useState<string[]>([]);
-
-  const showAnswerSuggestions =
-    answerSuggestions.length > 0 && !isPendingResponse && !isResponseStreaming;
-
-  useEffect(() => {
-    if (suggestions.length > 0) {
-      setAnswerSuggestions(
-        suggestions.filter(suggestion => suggestion.isAnswer).map(suggestion => suggestion.content),
-      );
-      setGeneralSuggestions(
-        suggestions
-          .filter(suggestion => !suggestion.isAnswer)
-          .map(suggestion => suggestion.content),
-      );
-    }
-  }, [suggestions]);
+  const {
+    answerSuggestions,
+    generalSuggestions,
+    showAnswerSuggestions,
+    setAnswerSuggestions,
+    setGeneralSuggestions,
+  } = useChatSuggestions({
+    suggestions,
+    isPendingResponse,
+    isResponseStreaming,
+  });
 
   const handleToggleCXButton = (item: ChatHeaderOptions) => {
     if (item === ChatHeaderOptions.LIVE_SUPPORT) {
@@ -99,6 +98,32 @@ export const FloatingChat = ({
     scrollThreshold: 30,
   });
 
+  const {
+    modalSheetControl,
+    maxSwipeableViewHeight,
+    isOpen,
+    isMobile,
+    snaps,
+    initialSnap,
+    shouldAutoExpand,
+    currentSnapPercentage,
+    handleSnapChange,
+    animationKey,
+    mobileHeaderHeight,
+    shouldShowHeader,
+    shouldShowScrolled,
+    isFullView,
+    isPartialView,
+  } = useSnapSetup({ isFloatingChatOpen });
+
+  const { filteredMessages, hasFilteredMessages, handlePreviousDiscussions } =
+    useFilteredChatMessages({
+      messages,
+      isMobile,
+      currentSnapPercentage,
+      modalSheetControl,
+    });
+
   const header = (
     <ChatHeader
       logoDark={chatHeaderLogoDarkSrc}
@@ -116,43 +141,76 @@ export const FloatingChat = ({
     />
   );
 
-  const footer = (
-    <Stack
-      direction="column"
-      gap={4}
+  const mobileHeader = (
+    <motion.div
+      style={{
+        maxHeight: mobileHeaderHeight,
+        overflow: 'hidden',
+      }}
     >
-      <ChatFooter
+      <ChatHeader
+        logoDark={chatHeaderLogoDarkSrc}
+        logoLight={chatHeaderLogoLightSrc}
         theme={finalTheme}
-        isScrolled={false}
-        onChange={setQuery}
-        onSubmit={() => {
-          onTypedMessageSubmitted({ query });
-          setAnswerSuggestions([]);
-          setGeneralSuggestions([]);
-        }}
-        textFieldPlaceholderText={chatFooterTextFieldPlaceholderText}
-        promptSuggestions={
-          isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
-            ? ['Loading suggestions 1...', 'Loading suggestions 2...'] // This is strings will not be shown to the user
-            : generalSuggestions
-        }
-        handleButtonClick={buttonText => {
-          const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
-          if (suggestion) {
-            onSuggestionClicked(suggestion);
-          }
-
-          setAnswerSuggestions([]);
-          setGeneralSuggestions([]);
-        }}
-        disabled={isPendingResponse || isResponseStreaming}
-        disabledInput={!userQueryInputEnabled}
-        isLoadingPromptSuggestions={
-          isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
-        }
-        hideEnviveWatermark={!showEnviveLogo}
+        variant={headerMode as ChatHeaderVariant}
+        headerBgColor={headerBackgroundColor as ColorNames}
+        showLogo
+        showCXToggle={isCXButtonSwitchEnabled}
+        centralizeCXToggle
+        selectedOption={ChatHeaderOptions.ASSISTANT}
+        onToggle={handleToggleCXButton}
+        onClose={onClose}
       />
-    </Stack>
+    </motion.div>
+  );
+
+  const handler = (
+    <ChatHeader
+      theme={finalTheme}
+      variant={headerMode as ChatHeaderVariant}
+      headerBgColor={headerBackgroundColor as ColorNames}
+      showHandle
+      handleState={isFullView ? HandleState.OPEN : HandleState.CLOSED}
+      handleAnimationKey={animationKey}
+      showMainContent={false}
+      selectedOption={ChatHeaderOptions.ASSISTANT}
+      onToggle={handleToggleCXButton}
+      onClose={onClose}
+    />
+  );
+
+  const footer = (
+    <ChatFooter
+      theme={finalTheme}
+      isScrolled={isMobile ? shouldShowScrolled : false}
+      onChange={setQuery}
+      onSubmit={() => {
+        onTypedMessageSubmitted({ query, userTyped: true });
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+      textFieldPlaceholderText={chatFooterTextFieldPlaceholderText}
+      promptSuggestions={
+        isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+          ? ['Loading suggestions 1...', 'Loading suggestions 2...'] // This is strings will not be shown to the user
+          : generalSuggestions
+      }
+      handleButtonClick={buttonText => {
+        const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
+        if (suggestion) {
+          onSuggestionClicked(suggestion);
+        }
+
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+      disabled={isPendingResponse || isResponseStreaming}
+      disabledInput={!userQueryInputEnabled}
+      isLoadingPromptSuggestions={
+        isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+      }
+      hideEnviveWatermark={!showEnviveLogo}
+    />
   );
 
   const welcomeMessage = (
@@ -170,11 +228,14 @@ export const FloatingChat = ({
       ref={chatMessagesRef}
       isLoading={isPendingResponse && !isResponseStreaming}
       agentName={agentName}
-      messages={messages}
+      messages={filteredMessages}
+      hasFilteredMessages={hasFilteredMessages}
+      handlePreviousDiscussions={handlePreviousDiscussions}
       isResponseStreaming={isResponseStreaming}
       ignoreFirstModelResponse={ignoreFirstModelResponse}
       neverShowSingleProductCards={neverShowSingleProductCards}
       showVerifiedBuyer={showVerifiedBuyer}
+      isPartialView={isPartialView}
     />
   );
 
@@ -196,7 +257,7 @@ export const FloatingChat = ({
     />
   );
 
-  return (
+  const desktopLayout = (
     <FloatingChatComponents.Layout
       id={id}
       className={className}
@@ -215,4 +276,44 @@ export const FloatingChat = ({
       }
     />
   );
+
+  const mobileLayout = (
+    <FloatingChatComponents.Layout
+      id={id}
+      className={className}
+      style={style}
+      testId={testId}
+      theme={finalTheme}
+      header={shouldShowHeader ? mobileHeader : undefined}
+      footer={footer}
+      welcomeMessage={welcomeMessage}
+      chatMessages={chatMessages}
+      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
+      scrollToBottomButton={
+        showScrollButton ? (
+          <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
+        ) : undefined
+      }
+    />
+  );
+
+  return isMobile ? (
+    <ModalSheet
+      animationKey={animationKey}
+      open={isOpen}
+      height={maxSwipeableViewHeight}
+      handler={handler}
+      unit={Unit.PERCENT}
+      snaps={snaps}
+      initSnap={initialSnap}
+      onSnap={handleSnapChange}
+      onClose={onClose}
+      controlRef={modalSheetControl}
+      disableDrag={shouldAutoExpand}
+    >
+      {mobileLayout}
+    </ModalSheet>
+  ) : (
+    desktopLayout
+  );
 };

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

@@ -23,6 +23,7 @@ export interface AgentMessageProps {
   isResponseStreaming?: boolean;
   neverShowSingleProductCards?: boolean;
   showVerifiedBuyer?: boolean;
+  isPartialView?: boolean;
 }
 
 export const AgentMessage = ({
@@ -34,6 +35,7 @@ export const AgentMessage = ({
   isResponseStreaming = false,
   neverShowSingleProductCards = false,
   showVerifiedBuyer = false,
+  isPartialView,
 }: AgentMessageProps) => {
   const finalTheme = resolveTheme(theme);
 
@@ -86,6 +88,7 @@ export const AgentMessage = ({
         products={products}
         numberOfProducts={products.length}
         theme={finalTheme}
+        isPartialView={isPartialView}
       />
     );
   }

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

@@ -9,17 +9,22 @@ import { Message as MessageComponent, MessageVariant } from '../../Message';
 import { MessageDivider } from './MessageDivider';
 import { Theme } from '../../../../tokens/theme/theme';
 import { resolveTheme } from '../../utils/resolveTheme';
+import { Typography, TypographyVariant } from '../../Typography';
+import { TypographyColor } from '../../Typography/types';
 
 export interface ChatMessagesProps {
   theme: Theme;
   className?: string;
   agentName: string;
   messages: Message[][];
+  hasFilteredMessages: boolean;
+  handlePreviousDiscussions: () => void;
   isLoading: boolean;
   isResponseStreaming: boolean;
   ignoreFirstModelResponse?: boolean;
   neverShowSingleProductCards?: boolean;
   showVerifiedBuyer?: boolean;
+  isPartialView?: boolean;
 }
 
 export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
@@ -29,11 +34,14 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
       className,
       agentName,
       messages,
+      hasFilteredMessages,
+      handlePreviousDiscussions,
       isLoading,
       isResponseStreaming,
       ignoreFirstModelResponse,
       neverShowSingleProductCards,
       showVerifiedBuyer,
+      isPartialView,
     },
     ref,
   ) => {
@@ -45,6 +53,22 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
         className={classNames('envive-tw-px-4', className)}
         gap={4}
       >
+        {hasFilteredMessages && (
+          <button
+            type="button"
+            className="envive-tw-w-full envive-tw-cursor-pointer envive-tw-px-4 envive-tw-py-2 envive-tw-text-center"
+            onClick={handlePreviousDiscussions}
+          >
+            {/* TODO: Get hard copy */}
+            <Typography
+              color={TypographyColor.TEXT_PRIMARY}
+              variant={TypographyVariant.B3_RG}
+              className="hover:envive-tw-underline"
+            >
+              View Previous Messages
+            </Typography>
+          </button>
+        )}
         {messages.map((message: Message[], index: number) => {
           if (
             ignoreFirstModelResponse &&
@@ -108,6 +132,7 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
                       isResponseStreaming={isResponseStreaming && isLastMessageTurn}
                       neverShowSingleProductCards={neverShowSingleProductCards}
                       showVerifiedBuyer={showVerifiedBuyer}
+                      isPartialView={isPartialView}
                     />
                   );
                 }

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

@@ -42,7 +42,7 @@ export const Layout = ({
       testId={testId}
       style={style}
       className={classNames(
-        'envive-tw-flex envive-tw-h-full envive-tw-w-[512px] envive-tw-flex-col envive-tw-bg-[#FFFFFF]',
+        'envive-tw-flex envive-tw-h-full envive-tw-w-full envive-tw-max-w-[512px] envive-tw-flex-col envive-tw-bg-[#FFFFFF]',
         className,
       )}
     >
@@ -50,7 +50,7 @@ export const Layout = ({
         direction="column"
         className="envive-tw-relative envive-tw-h-full envive-tw-overflow-hidden"
       >
-        {header && <div className="envive-tw-flex-shrink-0">{header}</div>}
+        {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">
           <Stack

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

@@ -0,0 +1,288 @@
+import {
+  AnimatePresence,
+  MotionValue,
+  ValueAnimationTransition,
+  motion,
+  useAnimate,
+} from 'framer-motion';
+import React, { FC, TouchEvent, useEffect, useImperativeHandle } from 'react';
+import { Unit } from '../hooks/useSnapCalculator';
+import { useSnapControl } from '../hooks/useSnapControl';
+import { usePreventScroll } from '../hooks/usePreventScroll';
+
+const BOTTOM_OFFSET = 100;
+
+export interface ModalSheetControl {
+  jumpToSnap: (snapIndex: number) => void;
+}
+
+interface ModalSheetProps {
+  animationKey: MotionValue;
+  open: boolean;
+  height: number;
+  unit: Unit;
+  snaps?: number[];
+  initSnap?: number;
+  children?: React.ReactNode;
+  handler?: React.ReactNode;
+  animation?: ValueAnimationTransition;
+  onClose: () => void;
+  onSnap?: (snap: number) => void;
+  controlRef?: React.MutableRefObject<ModalSheetControl | undefined>;
+  disableDrag?: boolean;
+}
+
+export const ModalSheet: FC<ModalSheetProps> = ({
+  animationKey,
+  children,
+  open,
+  height,
+  unit,
+  snaps = [],
+  initSnap = 0,
+  handler,
+  animation = { type: 'spring', stiffness: 300, damping: 30 },
+  controlRef,
+  onClose,
+  onSnap,
+  disableDrag = false,
+}) => {
+  const [layerRef] = useAnimate();
+  const [containerRef] = useAnimate();
+
+  const {
+    gestureRef,
+    isScrollableArea,
+    getScrollParent,
+    getGestureDirection,
+    getScrollDirections,
+  } = usePreventScroll();
+
+  const onSnapComplete = (currentSnap: number, nextSnap: number, collapsed: boolean) => {
+    if (collapsed) {
+      onClose?.();
+      return;
+    }
+
+    if (currentSnap !== nextSnap) {
+      onSnap?.(nextSnap);
+    }
+  };
+
+  const {
+    scope,
+    animatedY,
+    swipeviewHeightPx,
+    initSnapInPixels,
+    contentHeight,
+    currentSnap,
+    displayOverlay,
+    opacityOverlay,
+    jumpTo,
+    defineNextSnapByPosition,
+    resetControls,
+    getSnapToPixel,
+  } = useSnapControl({
+    animationKey,
+    animation,
+    height,
+    unit,
+    snaps,
+    initSnap,
+    overlayOpacity: 0.5,
+    onSnapComplete,
+  });
+
+  useImperativeHandle(controlRef, () => ({
+    jumpToSnap: (snapIndex: number) => {
+      const snapPx = getSnapToPixel(snaps[snapIndex]);
+      jumpTo(snapPx);
+    },
+  }));
+
+  const expandToFullView = () => {
+    const idx = snaps.indexOf(currentSnap);
+    if (idx === 1) {
+      jumpTo(getSnapToPixel(2));
+    }
+  };
+
+  const notifySnapChanges = (isModalOpen: boolean) => {
+    if (isModalOpen) {
+      onSnap?.(currentSnap);
+      return;
+    }
+
+    const snap = resetControls();
+    onSnap?.(snap);
+  };
+
+  useEffect(() => {
+    // Making iOS compatible
+    const preventDefault = (event: TouchEvent) => event.preventDefault();
+    layerRef?.current?.addEventListener('touchmove', preventDefault, { passive: false });
+
+    return () => {
+      layerRef?.current?.removeEventListener('touchmove', preventDefault);
+    };
+  }, [layerRef?.current]);
+
+  useEffect(() => {
+    const preventScroll = (event: TouchEvent) => {
+      const gestureDirection = getGestureDirection(
+        event.touches[0].clientX,
+        event.touches[0].clientY,
+      );
+      const isScrollable = isScrollableArea(gestureDirection);
+
+      if (!isScrollable) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+
+    containerRef?.current?.addEventListener('touchmove', preventScroll, { passive: false });
+    notifySnapChanges(open);
+
+    return () => {
+      containerRef?.current?.removeEventListener('touchmove', preventScroll);
+    };
+  }, [open]);
+
+  const handleDragEnd = () => {
+    const snap = defineNextSnapByPosition();
+    jumpTo(snap);
+  };
+
+  const handleTouchStart = (event: React.TouchEvent) => {
+    const scrollableElement = getScrollParent(event.target as HTMLElement);
+    const scrollableDirections = getScrollDirections(scrollableElement);
+    const parentScrollableElement = getScrollParent(scrollableElement, true);
+    const parentScrollableDirections = getScrollDirections(parentScrollableElement);
+    const grandparentScrollableElement = getScrollParent(parentScrollableElement, true);
+    const grandparentScrollableDirections = getScrollDirections(grandparentScrollableElement);
+    gestureRef.current = {
+      event: event.touches?.[0],
+      scrollableElements: [
+        {
+          element: scrollableElement,
+          scrollableDirections,
+        },
+        {
+          element: parentScrollableElement,
+          scrollableDirections: parentScrollableDirections,
+        },
+        {
+          element: grandparentScrollableElement,
+          scrollableDirections: grandparentScrollableDirections,
+        },
+      ],
+    };
+  };
+
+  const handleTouchEnd = () => {
+    handleDragEnd();
+    gestureRef.current = {
+      scrollableElements: [],
+      event: null,
+    };
+  };
+
+  const handleContentGesture = (fingerX: number, fingerY: number) => {
+    if (!gestureRef.current?.event) {
+      return;
+    }
+
+    const pointerDistance = (gestureRef.current?.event?.clientY || 0) - fingerY;
+    const snapPx = getSnapToPixel(currentSnap);
+    const distanceToTravel = snapPx - pointerDistance;
+    const gestureDirection = getGestureDirection(fingerX, fingerY);
+    const isScrollable = isScrollableArea(gestureDirection);
+    const animationBlocked = isScrollable || (gestureDirection !== 'down' && currentSnap === 100);
+
+    if (!animationBlocked) {
+      animatedY.set(distanceToTravel);
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          <motion.div
+            ref={layerRef}
+            style={{
+              display: displayOverlay,
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              opacity: opacityOverlay,
+              background: 'black',
+            }}
+          />
+          <motion.div
+            ref={scope}
+            drag="y"
+            dragConstraints={{ top: 0, bottom: swipeviewHeightPx }}
+            initial={{ y: swipeviewHeightPx }}
+            animate={{ y: initSnapInPixels }}
+            exit={{ y: swipeviewHeightPx + BOTTOM_OFFSET }}
+            transition={animation}
+            onDragEnd={handleDragEnd}
+            onClick={expandToFullView}
+            style={{
+              y: animatedY,
+              bottom: swipeviewHeightPx,
+              right: 0,
+              position: 'fixed',
+              width: '100%',
+              zIndex: 2147483647,
+            }}
+          >
+            {handler}
+          </motion.div>
+
+          <motion.div
+            ref={scope}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+            onTouchMove={event =>
+              handleContentGesture(event.touches[0].clientX, event.touches[0].clientY)
+            }
+            onPointerMove={
+              disableDrag ? undefined : event => handleContentGesture(event.clientX, event.clientY)
+            }
+            initial={{ y: swipeviewHeightPx + BOTTOM_OFFSET }}
+            animate={{ y: initSnapInPixels }}
+            exit={{ y: swipeviewHeightPx + BOTTOM_OFFSET }}
+            transition={animation}
+            style={{
+              y: animatedY,
+              width: '100%',
+              height: swipeviewHeightPx + BOTTOM_OFFSET,
+              position: 'fixed',
+              bottom: -BOTTOM_OFFSET + 1,
+              right: 0,
+              boxSizing: 'content-box',
+              zIndex: 2147483646,
+            }}
+          >
+            <motion.div
+              ref={containerRef}
+              initial={{ height: 0 }}
+              style={{
+                width: '100%',
+                height: contentHeight,
+                userSelect: 'none',
+              }}
+            >
+              {children}
+            </motion.div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+};