@envive-ai/react-toolkit-v3 0.3.10 → 0.3.12

package/src/components/Carousel/components/Container.tsx

@@ -1,4 +1,5 @@
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
+import { useScrollContainer } from 'react-indiana-drag-scroll';
 import { Stack } from '../../Stack';
 import { Container as ContainerComponent } from '../../Container';
 import { useCarouselItems } from '../hooks/useCarouselItems';
@@ -27,8 +28,17 @@ export const Container = ({
   previous,
   badge,
 }: ContainerProps) => {
+  const { ref: dragScrollRef } = useScrollContainer();
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+  const setRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (typeof dragScrollRef === 'function') dragScrollRef(el);
+      scrollContainerRef.current = el;
+    },
+    [dragScrollRef],
+  );
+
   const { items, totalItems } = useCarouselItems(children);
 
   const { handleNext, handlePrevious } = useCarouselNavigation({
@@ -66,11 +76,13 @@ export const Container = ({
         )}
 
         <div
-          ref={scrollContainerRef}
-          className="[&::-webkit-scrollbar]:hidden envive-tw-flex envive-tw-gap-4 envive-tw-overflow-x-auto envive-tw-scroll-smooth"
+          ref={setRef}
+          className="[&::-webkit-scrollbar]:hidden envive-tw-flex envive-tw-gap-4 envive-tw-overflow-x-auto"
           style={{
             scrollbarWidth: 'none',
             msOverflowStyle: 'none',
+            cursor: 'grab',
+            userSelect: 'none',
           }}
         >
           {items.map((item, index) => (

package/src/components/ChatFooter/components/Layout.tsx

@@ -2,7 +2,6 @@ import { Container } from 'src/components/Container';
 import classNames from 'classnames';
 import { Stack } from '../../Stack';
 import { useGetContainerProperties } from '../hooks/useGetContainerProperties';
-import { useGetButtonScrollProperties } from '../hooks/useGetButtonScrollProperties';
 import { useGetChatScrollProperties } from '../hooks/useGetChatScrollProperties';
 import { Theme } from '../../../../tokens/theme/theme';
 
@@ -35,7 +34,6 @@ export const Layout = ({
     isScrolled,
     theme,
   });
-  const { buttonScrollClasses, buttonScrollStyle } = useGetButtonScrollProperties();
   const { footerVisibleClasses, footerVisibleOpacityClass } = useGetChatScrollProperties(
     isScrolled,
     theme,
@@ -51,19 +49,9 @@ export const Layout = ({
     >
       <Stack gap={2}>
         {!isScrolled && (
-          <Stack
-            direction="row"
-            align="center"
-            gap="2"
-            style={buttonScrollStyle}
-            className={classNames(
-              footerVisibleClasses,
-              footerVisibleOpacityClass,
-              buttonScrollClasses,
-            )}
-          >
+          <div className={classNames(footerVisibleClasses, footerVisibleOpacityClass)}>
             {promptSuggestions}
-          </Stack>
+          </div>
         )}
         {textField}
         {!hideEnviveWatermark && !isScrolled && (

package/src/components/ChatHeader/hooks/useGetCloseButtonProperties.ts

@@ -17,7 +17,7 @@ const iconClassMap = {
 };
 
 export const useGetCloseButtonProperties = (theme: Theme, variant: ChatHeaderVariant) => {
-  const closeButtonClasses = 'envive-tw-justify-end';
+  const closeButtonClasses = 'envive-tw-flex envive-tw-flex-1 envive-tw-justify-end';
   const iconClasses = classNames(
     'envive-tw-h-4 envive-tw-w-4 envive-tw-cursor-pointer',
     iconClassMap[theme][variant],

package/src/components/FloatingChat/FloatingChat.tsx

@@ -35,6 +35,7 @@ export const FloatingChat = ({
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
   isFloatingChatOpen,
+  debugBar,
   onClose,
   onToggleCXButton,
 }: FloatingChatProps) => {
@@ -195,13 +196,17 @@ export const FloatingChat = ({
       isScrolled={isMobile ? isFloatingLayout : false}
       onChange={setQuery}
       onSubmit={() => {
-        onTypedMessageSubmitted({ query, userTyped: true });
+        onTypedMessageSubmitted({
+          query,
+          userTyped: true,
+          displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT,
+        });
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
       }}
       textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
       promptSuggestions={
-        isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+        isPendingResponse || isResponseStreaming
           ? ['Loading suggestions 1...', 'Loading suggestions 2...'] // This is strings will not be shown to the user
           : generalSuggestions
       }
@@ -290,6 +295,7 @@ export const FloatingChat = ({
           <Disclaimer disclaimerMarkdown={disclaimerText} />
         ) : undefined
       }
+      debugBar={debugBar}
     />
   );
 

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

@@ -19,6 +19,7 @@ type LayoutProps = {
   scrollToBottomButton?: React.ReactNode;
   disclaimer?: React.ReactNode;
   isFloatingFooterLayout?: boolean;
+  debugBar?: React.ReactNode;
 };
 
 export const Layout = ({
@@ -35,6 +36,7 @@ export const Layout = ({
   scrollToBottomButton,
   disclaimer,
   isFloatingFooterLayout = false,
+  debugBar,
 }: LayoutProps) => {
   const finalTheme = resolveTheme(theme);
   const hasWelcomeMessage = isValidElement(welcomeMessage);
@@ -108,6 +110,7 @@ export const Layout = ({
             {scrollToBottomButton}
           </div>
         )}
+        {debugBar && <div className="envive-debug-bar">{debugBar}</div>}
       </Stack>
     </Container>
   );

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

@@ -1,11 +1,11 @@
+import { Theme } from '../../../../tokens/theme/theme';
+import { Carousel } from '../../Carousel/Carousel';
+import { SalesAgentProductCard } from '../../SalesAgentProductCard/SalesAgentProductCard';
 import {
   SalesAgentProductCardProps,
   SalesAgentProductCardVariant,
 } from '../../SalesAgentProductCard/types/types';
 import { resolveTheme } from '../../utils/resolveTheme';
-import { Carousel } from '../../Carousel/Carousel';
-import { SalesAgentProductCard } from '../../SalesAgentProductCard/SalesAgentProductCard';
-import { Theme } from '../../../../tokens/theme/theme';
 
 export interface SalesAgentProductCardsCarouselProps {
   theme: Theme;
@@ -52,6 +52,7 @@ export const SalesAgentProductCardsCarousel = ({
           numberOfReviews={product.numberOfReviews}
           image={product.image}
           url={product.url}
+          target="_blank"
           theme={finalTheme}
         />
       ))}

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

@@ -61,4 +61,8 @@ export interface FloatingChatProps {
    * Hardcopy content to display in the chat.
    */
   hardcopyContent: HardcopyResponse;
+  /**
+   * Debug bar to display in the chat.
+   */
+  debugBar?: React.ReactNode;
 }

package/src/components/FullPageSalesAgent/FullPageSalesAgent.tsx

@@ -0,0 +1,203 @@
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
+import { HardcopyResponse } from '@envive-ai/react-hooks/contexts/hardcopyContext';
+import { useSalesAgent } from '@envive-ai/react-hooks/contexts/salesAgentContext';
+import { FloatingChatConfig, LookAndFeelConfig } from '@envive-ai/react-hooks/contexts/typesV3';
+import { useRef, useState } from 'react';
+import { ChatFooter } from '../ChatFooter';
+import { Disclaimer } from '../Disclaimer';
+import { FloatingChatComponents } from '../FloatingChat/components';
+import { useChatSuggestions } from '../FloatingChat/hooks/useChatSuggestions';
+import { useScrollToBottom } from '../FloatingChat/hooks/useScrollToBottom';
+import { PromptButtonVariant } from '../PromptButton';
+import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
+import { Theme } from '../Tokens';
+import { resolveTheme } from '../utils/resolveTheme';
+import { SparkleIconColor, WelcomeMessage } from '../WelcomeMessage';
+import { FullPageSAComponents } from './components';
+import { useGetFooterStyles } from './hooks/useGetFooterStyles';
+import { useIsMobile } from './hooks/useIsMobile';
+
+interface FullPageSalesAgentProps {
+  theme?: Theme;
+  floatingChatConfig: FloatingChatConfig;
+  lookAndFeelConfig: LookAndFeelConfig;
+  hardcopyContent: HardcopyResponse;
+  headerContainer?: string;
+  autoHeight?: boolean;
+}
+
+export const FullPageSalesAgent = ({
+  theme = Theme.GLOBAL_CUSTOM,
+  floatingChatConfig,
+  lookAndFeelConfig,
+  hardcopyContent,
+  headerContainer,
+  autoHeight,
+}: FullPageSalesAgentProps) => {
+  const resolvedTheme = resolveTheme(theme);
+  const salesAgentData = useSalesAgent();
+  const [query, setQuery] = useState('');
+  const chatMessagesRef = useRef<HTMLDivElement>(null);
+  const { footerStyles } = useGetFooterStyles();
+  const { isMobile } = useIsMobile();
+
+  const {
+    welcomeMessageIconColor,
+    ignoreFirstModelResponse,
+    neverShowSingleProductCards,
+    showVerifiedBuyer,
+    showEnviveLogo,
+    userQueryInputEnabled = true,
+  } = floatingChatConfig;
+
+  const { agentName } = lookAndFeelConfig;
+
+  const {
+    welcomeMessageTitle,
+    welcomeMessageText,
+    chatFooterTextFieldPlaceholderText,
+    disclaimerText,
+  } = hardcopyContent?.values ?? {};
+
+  const {
+    messages,
+    isResponseStreaming,
+    isPendingResponse,
+    suggestions,
+    onSuggestionClicked,
+    onTypedMessageSubmitted,
+    onFormResponseSubmitted,
+  } = salesAgentData;
+
+  const {
+    answerSuggestions,
+    generalSuggestions,
+    showAnswerSuggestions,
+    setAnswerSuggestions,
+    setGeneralSuggestions,
+  } = useChatSuggestions({
+    suggestions,
+    isPendingResponse,
+    isResponseStreaming,
+  });
+
+  const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
+    messagesRef: chatMessagesRef,
+    scrollThreshold: 100,
+    footerHeight: 160,
+    autoScrollDependencies: [
+      messages,
+      isPendingResponse,
+      suggestions,
+      answerSuggestions,
+      generalSuggestions,
+    ],
+  });
+
+  const welcomeMessage = (
+    <WelcomeMessage
+      sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
+      title={welcomeMessageTitle as string}
+      text={welcomeMessageText as string}
+      theme={resolvedTheme}
+    />
+  );
+
+  const footer = (
+    <ChatFooter
+      className="envive-tw-bg-background-light"
+      style={footerStyles}
+      theme={resolvedTheme}
+      isScrolled={isMobile ? isFloatingLayout : false}
+      disabled={isPendingResponse || isResponseStreaming}
+      disabledInput={!userQueryInputEnabled}
+      isLoadingPromptSuggestions={
+        isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+      }
+      hideEnviveWatermark={!showEnviveLogo}
+      textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
+      promptSuggestions={
+        isPendingResponse || isResponseStreaming
+          ? ['Loading suggestions 1...', 'Loading suggestions 2...']
+          : generalSuggestions
+      }
+      handleButtonClick={buttonText => {
+        const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
+        if (suggestion) {
+          onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
+        }
+
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+      onChange={setQuery}
+      onSubmit={() => {
+        onTypedMessageSubmitted({
+          query,
+          userTyped: true,
+          displayLocation: ChatElementDisplayLocationV3.FLOATING_CHAT_TEXT_INPUT,
+        });
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+    />
+  );
+
+  const chatMessages = (
+    <FloatingChatComponents.ChatMessages
+      theme={resolvedTheme}
+      ref={chatMessagesRef}
+      isLoading={isPendingResponse && !isResponseStreaming}
+      agentName={agentName}
+      messages={messages}
+      hasFilteredMessages={false}
+      handlePreviousDiscussions={() => {}}
+      isResponseStreaming={isResponseStreaming}
+      ignoreFirstModelResponse={ignoreFirstModelResponse}
+      neverShowSingleProductCards={neverShowSingleProductCards}
+      showVerifiedBuyer={showVerifiedBuyer}
+      onFormResponseSubmitted={onFormResponseSubmitted}
+    />
+  );
+
+  const answerSuggestionsComponent = (
+    <PromptCarousel
+      className="envive-tw-flex envive-tw-justify-end envive-tw-p-4 [&>div>div]:envive-tw-items-end"
+      theme={resolvedTheme}
+      promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
+      promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
+      promptButtonTexts={answerSuggestions}
+      handleButtonClick={buttonText => {
+        const suggestion = suggestions.find(s => s.content === buttonText && s.isAnswer);
+        if (suggestion) {
+          onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
+        }
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+    />
+  );
+
+  const disclaimer =
+    disclaimerText && typeof disclaimerText === 'string' ? (
+      <Disclaimer disclaimerMarkdown={disclaimerText} />
+    ) : undefined;
+
+  return (
+    <FullPageSAComponents.Layout
+      theme={resolvedTheme}
+      welcomeMessage={welcomeMessage}
+      footer={footer}
+      chatMessages={chatMessages}
+      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
+      scrollToBottomButton={
+        showScrollButton ? (
+          <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
+        ) : undefined
+      }
+      disclaimer={disclaimer}
+      headerContainer={headerContainer}
+      autoHeight={autoHeight}
+    />
+  );
+};

package/src/components/FullPageSalesAgent/components/Layout.tsx

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import { isValidElement } from 'react';
+import { Theme } from 'tokens/theme/theme';
+import { Stack } from '../../Stack';
+import { useGetContainerStyles } from '../hooks/useGetContainerStyles';
+import { useGetFooterStyles } from '../hooks/useGetFooterStyles';
+import { useGetScrollContentStyles } from '../hooks/useGetScrollContentStyles';
+
+export interface LayoutProps {
+  theme: Theme;
+  welcomeMessage: React.ReactNode;
+  footer?: React.ReactNode;
+  chatMessages?: React.ReactNode;
+  answerSuggestions?: React.ReactNode;
+  scrollToBottomButton?: React.ReactNode;
+  disclaimer?: React.ReactNode;
+  headerContainer?: string;
+  autoHeight?: boolean;
+}
+
+export const Layout = ({
+  theme,
+  welcomeMessage,
+  footer,
+  chatMessages,
+  answerSuggestions,
+  scrollToBottomButton,
+  disclaimer,
+  headerContainer,
+  autoHeight,
+}: LayoutProps) => {
+  const hasWelcomeMessage = isValidElement(welcomeMessage);
+  const hasAnswerSuggestions = isValidElement(answerSuggestions);
+  const { contentClasses, messageContainerClasses } = useGetScrollContentStyles();
+  const { footerContainerClasses } = useGetFooterStyles();
+  const { containerClasses, containerStyles } = useGetContainerStyles({
+    headerContainer,
+    autoHeight,
+  });
+
+  return (
+    <div
+      className={containerClasses}
+      style={containerStyles}
+    >
+      <div className={contentClasses}>
+        <Stack
+          className={messageContainerClasses}
+          direction="column"
+          justify="between"
+        >
+          {welcomeMessage}
+          {disclaimer}
+        </Stack>
+        <Stack
+          direction="column"
+          gap="0"
+          className={classNames(
+            (!hasWelcomeMessage || (hasWelcomeMessage && theme === Theme.STANDARD)) &&
+              !hasAnswerSuggestions &&
+              'envive-tw-pb-4',
+            'envive-tw-pt-4',
+          )}
+        >
+          {chatMessages}
+          {answerSuggestions}
+        </Stack>
+      </div>
+      <div className={footerContainerClasses}>
+        {scrollToBottomButton && (
+          <div className="envive-tw-h-[0px]">
+            <div className="envive-tw-ml-auto envive-tw-table envive-tw-translate-x-[-30px] envive-tw-translate-y-[-50px]">
+              {scrollToBottomButton}
+            </div>
+          </div>
+        )}
+        {footer}
+      </div>
+    </div>
+  );
+};

package/src/components/FullPageSalesAgent/components/index.ts

@@ -0,0 +1,5 @@
+import { Layout } from './Layout';
+
+export const FullPageSAComponents = {
+  Layout,
+};

package/src/components/FullPageSalesAgent/hooks/useContainerResizerObserver.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+export const useContainerResizerObserver = ({
+  headerContainer,
+  autoHeight,
+}: {
+  headerContainer?: string;
+  autoHeight?: boolean;
+}) => {
+  const [containerHeight, setContainerHeight] = useState<number | string>('100%');
+
+  useEffect(() => {
+    if (!autoHeight) {
+      return () => {};
+    }
+
+    const watchResizing = () => {
+      const { height = 0, top = 0 } =
+        document.querySelector(headerContainer)?.getBoundingClientRect() || {};
+      setContainerHeight(window.innerHeight - (height + top));
+    };
+
+    window.addEventListener('resize', watchResizing);
+    watchResizing();
+
+    return () => {
+      window.removeEventListener('resize', watchResizing);
+    };
+  }, [headerContainer, autoHeight]);
+
+  return {
+    containerHeight,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useGetContainerStyles.ts

@@ -0,0 +1,24 @@
+import { useContainerResizerObserver } from './useContainerResizerObserver';
+
+export const useGetContainerStyles = ({
+  headerContainer,
+  autoHeight,
+}: {
+  headerContainer?: string;
+  autoHeight?: boolean;
+}) => {
+  const { containerHeight } = useContainerResizerObserver({
+    headerContainer,
+    autoHeight,
+  });
+
+  const containerClasses =
+    'envive-tw-mx-auto envive-tw-flex envive-tw-h-full envive-tw-max-w-[768px] envive-tw-flex-col';
+
+  const containerStyles = { height: containerHeight };
+
+  return {
+    containerClasses,
+    containerStyles,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useGetFooterStyles.ts

@@ -0,0 +1,17 @@
+import { useIsMobile } from './useIsMobile';
+
+export const useGetFooterStyles = () => {
+  const { isMobile } = useIsMobile();
+  const footerStyles = !isMobile
+    ? { boxShadow: '0px 2px 10px 0px rgba(0, 0, 0, 0.2)', borderWidth: '1px' }
+    : null;
+
+  const footerContainerClasses = isMobile
+    ? 'envive-tw-absolute envive-tw-bottom-[0] envive-tw-left-[0] envive-tw-right-[0]'
+    : 'envive-tw-pb-5';
+
+  return {
+    footerStyles,
+    footerContainerClasses,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useGetScrollContentStyles.ts

@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import { useIsMobile } from './useIsMobile';
+
+export const useGetScrollContentStyles = () => {
+  const { isMobile } = useIsMobile();
+  const contentClasses = classNames({
+    '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': true,
+    'envive-tw-pb-[131px]': isMobile,
+  });
+
+  const messageContainerClasses = !isMobile ? 'envive-tw-pt-4' : null;
+
+  return {
+    contentClasses,
+    messageContainerClasses,
+  };
+};

package/src/components/FullPageSalesAgent/hooks/useIsMobile.ts

@@ -0,0 +1,3 @@
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+
+export const useIsMobile = () => useCheckIsMobile('md');

package/src/components/FullPageSalesAgent/index.ts

@@ -0,0 +1 @@
+export { FullPageSalesAgent } from './FullPageSalesAgent';

package/src/components/Image/Image.tsx

@@ -88,8 +88,10 @@ export const Image = ({
           objectFitClass,
           isLoading && 'envive-tw-opacity-0',
         )}
+        style={{ userSelect: 'none', WebkitUserDrag: 'none' } as React.CSSProperties}
         onLoad={handleLoad}
         onError={handleError}
+        draggable={false}
         {...accessibilityProps}
         {...rest}
       />

package/src/components/Message/hooks/useVariantStyleProperties.ts

@@ -20,7 +20,7 @@ export const useVariantStyleProperties = (
     const variantStylesMap: Record<MessageVariant, VariantStylesProperties> = {
       [MessageVariant.AGENT]: {
         containerLayoutClasses: 'envive-tw-flex envive-tw-flex-col envive-tw-gap-2',
-        containerBackgroundClasses: 'envive-tw-bg-background-light',
+        containerBackgroundClasses: '',
         containerBorderClasses: '',
         containerRadiusClasses: 'envive-tw-rounded-md',
         contentClasses: '',