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

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

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,106 @@
+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);
+  const [shouldShowScrolled, setShouldShowScrolled] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = animationKey.on('change', value => {
+      setShouldShowHeader(value < snap43Percent - 10);
+      setShouldShowScrolled(value > snap43Percent);
+    });
+    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,
+    shouldShowScrolled,
+    isFullView,
+    isPartialView,
+  };
+};

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

@@ -57,4 +57,8 @@ export interface FloatingChatProps {
    * Whether the CX button switch is enabled.
    */
   isCXButtonSwitchEnabled: boolean;
+  /**
+   * Whether the chat is open.
+   */
+  isFloatingChatOpen: boolean;
 }

package/src/components/PromptCarousel/PromptCarousel.tsx

@@ -54,7 +54,6 @@ export const PromptCarousel = ({
     isAnimated: isAnimatedValue,
   });
 
-  console.log('PromptCarousel', promptButtonTexts, isLoading);
   const { visibleButtonsFirstRow, visibleButtonsSecondRow } = useCarouselButtons({
     promptButtonTexts,
     shouldShowTwoRows: shouldShowTwoRowsValue,

package/src/components/SocialProof/SocialProof.tsx

@@ -8,6 +8,7 @@ import { WidgetWrapperVariant } from '../WidgetWrapper';
 import { PromptCarouselRows } from '../PromptCarousel';
 import { PromptButtonVariant } from '../PromptButton';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle/WidgetWrapperWithTitle';
+import { useSocialProofCount } from './hooks';
 
 export const SocialProof = ({
   baseProps,
@@ -15,7 +16,7 @@ export const SocialProof = ({
   widgetStyleProps,
   widgetEventProps,
 }: SocialProofProps) => {
-  const { id, testId, className, style } = baseProps ?? {};
+  const { id, testId, className, style, pageVariant, countKey } = baseProps ?? {};
 
   const {
     theme = Theme.GLOBAL_CUSTOM,
@@ -32,7 +33,6 @@ export const SocialProof = ({
   } = widgetStyleProps ?? {};
 
   const {
-    numberOfCustomersText,
     customerQueryText,
     primaryButtonText,
     secondaryButtonTitleText,
@@ -43,6 +43,12 @@ export const SocialProof = ({
     titleLabel,
   } = widgetContentProps ?? {};
 
+  const numberOfCustomersText = useSocialProofCount({
+    pageVariant,
+    countKey,
+    id,
+  });
+
   const { handlePrimaryButtonClick, handleSecondaryButtonClick, handleTextFieldClick } =
     widgetEventProps ?? {};