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

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 + 2,
+              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>
+  );
+};

package/src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx

@@ -12,6 +12,8 @@ export interface SalesAgentProductCardsCarouselProps {
   hideNavigation?: boolean;
   numberOfProducts?: number;
   products: SalesAgentProductCardProps[];
+  variant?: SalesAgentProductCardVariant;
+  isPartialView?: boolean;
 }
 
 export const SalesAgentProductCardsCarousel = ({
@@ -19,9 +21,13 @@ export const SalesAgentProductCardsCarousel = ({
   theme,
   hideNavigation = false,
   numberOfProducts,
+  variant = SalesAgentProductCardVariant.LARGE,
+  isPartialView = false,
 }: SalesAgentProductCardsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
 
+  const finalVariant = isPartialView ? SalesAgentProductCardVariant.SMALL : variant;
+
   const forceShowCurrentPriceSpace = products.some(
     product => product.currentPrice && product.previousPrice !== product.currentPrice,
   );
@@ -36,8 +42,7 @@ export const SalesAgentProductCardsCarousel = ({
       elements={products.map(product => (
         <SalesAgentProductCard
           key={product.id}
-          // TODO: Change variant if partial view
-          variant={SalesAgentProductCardVariant.LARGE}
+          variant={finalVariant}
           productName={product.productName}
           currentPrice={product.currentPrice}
           previousPrice={product.previousPrice}

package/src/components/FloatingChat/components/index.ts

@@ -21,3 +21,6 @@ export const FloatingChatComponents = {
   ScrollToBottomButton,
   MessageDivider,
 };
+
+export { ModalSheet } from './ModalSheet';
+export type { ModalSheetControl } from './ModalSheet';

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

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { Suggestion } from '@envive-ai/react-hooks/application/models';
+
+export interface UseChatSuggestionsProps {
+  suggestions: Suggestion[];
+  isPendingResponse: boolean;
+  isResponseStreaming: boolean;
+}
+
+export interface UseChatSuggestionsReturn {
+  answerSuggestions: string[];
+  generalSuggestions: string[];
+  showAnswerSuggestions: boolean;
+  setAnswerSuggestions: React.Dispatch<React.SetStateAction<string[]>>;
+  setGeneralSuggestions: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+export const useChatSuggestions = ({
+  suggestions,
+  isPendingResponse,
+  isResponseStreaming,
+}: UseChatSuggestionsProps): UseChatSuggestionsReturn => {
+  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]);
+
+  return {
+    answerSuggestions,
+    generalSuggestions,
+    showAnswerSuggestions,
+    setAnswerSuggestions,
+    setGeneralSuggestions,
+  };
+};

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

@@ -0,0 +1,43 @@
+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';
+
+export interface UseFilteredChatMessagesProps {
+  messages: Message[][];
+  isMobile: boolean;
+  currentSnapPercentage: number;
+  modalSheetControl: RefObject<ModalSheetControl>;
+}
+
+export interface UseFilteredChatMessagesReturn {
+  filteredMessages: Message[][];
+  hasFilteredMessages: boolean;
+  handlePreviousDiscussions: () => void;
+}
+
+export const useFilteredChatMessages = ({
+  messages,
+  isMobile,
+  currentSnapPercentage,
+  modalSheetControl,
+}: UseFilteredChatMessagesProps): UseFilteredChatMessagesReturn => {
+  const { getFilteredMessages } = useMessageFilter();
+
+  const keepMessagesExpanded = !isMobile || (isMobile && currentSnapPercentage === 100);
+
+  const filteredMessages = useMemo(
+    () => getFilteredMessages(messages, keepMessagesExpanded),
+    [getFilteredMessages, messages, keepMessagesExpanded],
+  );
+
+  const hasFilteredMessages = filteredMessages.length !== messages.length && isMobile;
+
+  const handlePreviousDiscussions = () => modalSheetControl.current?.jumpToSnap(2);
+
+  return {
+    filteredMessages,
+    hasFilteredMessages,
+    handlePreviousDiscussions,
+  };
+};

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

@@ -0,0 +1,207 @@
+import { Touch, useRef } from 'react';
+
+type GestureDirections = 'left' | 'right' | 'up' | 'down';
+type ScrollableDirections = 'horizontal' | 'vertical';
+
+interface ScrollableEl {
+  element: HTMLElement | null;
+  scrollableDirections: ScrollableDirections[] | null;
+}
+interface GrabGesture {
+  event: Touch | null;
+  scrollableElements: ScrollableEl[];
+}
+
+/**
+ * Prevent the body element from scrolling when a modal (partial view) is open.
+ *
+ * @returns
+ */
+export const usePreventScroll = () => {
+  const gestureRef = useRef<GrabGesture | null>(null);
+
+  /**
+   * Calculate the angle of a user gesture (grab/drop).
+   *
+   * @param startX
+   * @param startY
+   * @param endX
+   * @param endY
+   * @returns
+   */
+  const calculateAngle = (startX: number, startY: number, endX: number, endY: number) => {
+    const deltaX = endX - startX;
+    const deltaY = endY - startY;
+
+    // atan2 returns the angle in radians, convert to degrees
+    const radians = Math.atan2(deltaY, deltaX);
+    const degrees = radians * (180 / Math.PI);
+
+    // Normalize the angle to 0 - 360 degrees
+    return (degrees + 360) % 360;
+  };
+
+  /**
+   * Test if an element has scrollable capabilities.
+   *
+   * @param node
+   * @returns
+   */
+  const isScrollable = (node: Element): boolean => {
+    const style = window.getComputedStyle(node);
+    return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+  };
+
+  /**
+   * Find the parent node that has scrollable capabilities.
+   *
+   * @param node
+   * @returns
+   */
+  const getScrollParent = (
+    node: HTMLElement | null,
+    ignoreCurrentNode: boolean = false,
+  ): HTMLElement | null => {
+    let parentNode = ignoreCurrentNode ? node?.parentElement : node;
+
+    if (!parentNode) {
+      return null;
+    }
+
+    if (isScrollable(parentNode)) {
+      return parentNode;
+    }
+
+    while (parentNode && !isScrollable(parentNode)) {
+      parentNode = parentNode.parentElement as HTMLElement;
+    }
+
+    if (!parentNode && isScrollable(document.body)) {
+      return document.body;
+    }
+
+    return (
+      parentNode ||
+      (document.scrollingElement as HTMLElement) ||
+      (document.documentElement as HTMLElement)
+    );
+  };
+
+  /**
+   * Get the scrollable directions an element can scroll.
+   *
+   * @returns
+   */
+  const getScrollDirections = (scrollableElement: HTMLElement | null) => {
+    const horizontalScroll =
+      (scrollableElement?.scrollWidth || 0) > (scrollableElement?.clientWidth || 0);
+    const verticalScroll =
+      (scrollableElement?.scrollHeight || 0) > (scrollableElement?.clientHeight || 0);
+
+    const scrollDirections: ScrollableDirections[] = [];
+    if (horizontalScroll) scrollDirections.push('horizontal');
+    if (verticalScroll) scrollDirections.push('vertical');
+
+    return scrollDirections;
+  };
+
+  /**
+   * Determine the direction of a gesture event based on the angle of a grab/drop event.
+   *
+   * @param fingerX
+   * @param fingerY
+   * @returns
+   */
+  const getGestureDirection = (fingerX: number, fingerY: number): GestureDirections => {
+    const clientX = gestureRef?.current?.event?.clientX || 0;
+    const clientY = gestureRef?.current?.event?.clientY || 0;
+    const directionAngle = calculateAngle(clientX, clientY, fingerX, fingerY);
+
+    if (directionAngle < 45 || directionAngle > 315) {
+      return 'right';
+    }
+
+    if (directionAngle > 45 && directionAngle < 135) {
+      return 'down';
+    }
+
+    if (directionAngle > 135 && directionAngle < 225) {
+      return 'left';
+    }
+
+    return 'up';
+  };
+
+  /**
+   * Determine whether the direction of the gesture can scroll the element in context.
+   *
+   * @param param0
+   * @param direction
+   * @returns
+   */
+  const isScrollDirectionAllowed = (
+    { element, scrollableDirections }: ScrollableEl,
+    direction: GestureDirections,
+  ) => {
+    if (
+      element?.tagName === 'BODY' ||
+      element?.tagName === 'HTML' ||
+      scrollableDirections?.length === 0
+    ) {
+      return false;
+    }
+
+    const {
+      clientHeight = 0,
+      clientWidth = 0,
+      scrollHeight = 0,
+      scrollWidth = 0,
+      scrollTop = 0,
+      scrollLeft = 0,
+    } = element || {};
+
+    const atTop = scrollTop === 0;
+    const atLeft = scrollLeft === 0;
+    const atBottom = (100 / scrollHeight) * (scrollTop + clientHeight) > 99.9;
+    const atRight = (100 / scrollWidth) * (scrollLeft + clientWidth) > 99.9;
+
+    const verticalScrollBlocked =
+      (atBottom && direction === 'up') ||
+      (atTop && direction === 'down') ||
+      direction === 'left' ||
+      direction === 'right';
+    if (scrollableDirections?.includes('vertical') && verticalScrollBlocked) {
+      return false;
+    }
+
+    const horizontalScrollBlocked =
+      (atRight && direction === 'left') ||
+      (atLeft && direction === 'right') ||
+      direction === 'up' ||
+      direction === 'down';
+    if (scrollableDirections?.includes('horizontal') && horizontalScrollBlocked) {
+      return false;
+    }
+
+    return true;
+  };
+
+  /**
+   * Test if the selected scrollable element can scroll in the direction of the grab/drop event.
+   *
+   * @param direction
+   * @returns
+   */
+  const isScrollableArea = (direction: GestureDirections) => {
+    const { scrollableElements } = gestureRef.current || {};
+    return scrollableElements?.some(el => isScrollDirectionAllowed(el, direction));
+  };
+
+  return {
+    gestureRef,
+    getScrollParent,
+    isScrollableArea,
+    getGestureDirection,
+    getScrollDirections,
+  };
+};