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

package/src/components/Disclaimer/components/index.ts

@@ -0,0 +1,7 @@
+import { Container } from './Container';
+import { DisclaimerContent } from './DisclaimerContent';
+
+export const DisclaimerComponents = {
+  Container,
+  DisclaimerContent,
+};

package/src/components/Disclaimer/index.ts

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

package/src/components/Disclaimer/types/types.ts

@@ -0,0 +1,27 @@
+import { Theme } from '../../../../tokens/theme/theme';
+
+export type DisclaimerProps = {
+  /**
+   * The markdown to be ingested by the MarkdownProcessor and displayed
+   */
+  disclaimerMarkdown: string;
+  /**
+   * Visual theme of the text field.
+   * @default Theme.GLOBAL_CUSTOM (uses CSS variable --envive-global-custom-theme)
+   */
+  theme?: Theme;
+  ariaLabel?: string;
+  id?: string;
+  /**
+   * Adds a `data-testid` attribute for testing utilities.
+   */
+  testId?: string;
+  /**
+   * Additional class names appended to the computed classes.
+   */
+  className?: string;
+  /**
+   * Inline styles forwarded to the rendered element.
+   */
+  style?: React.CSSProperties;
+};

package/src/components/FloatingButton/hooks/useGetButtonProperties.ts

@@ -1,4 +1,4 @@
-import { ColorNames, enviveColorVar } from 'src/models/colorsConfig';
+import { extractColorNameFromCssVar } from 'tokens/utils';
 import { FloatingButtonMode, FloatingButtonProps, FloatingButtonVariant } from '../types/types';
 
 /**
@@ -14,8 +14,9 @@ export const useGetButtonProperties = (
       ? 'envive-tw-w-[64px] envive-tw-h-[64px]'
       : 'envive-tw-w-[44px] envive-tw-h-[44px]';
 
-  const customBackgroundColor = enviveColorVar(backgroundColor as ColorNames);
-  const customBackgroundColorClass = `envive-tw-bg-[${customBackgroundColor}]`;
+  const colorName = extractColorNameFromCssVar(backgroundColor);
+
+  const customBackgroundColorClass = `envive-tw-bg-${colorName}`;
 
   const defaultBackgroundColorClass =
     mode === FloatingButtonMode.LIGHT

package/src/components/FloatingChat/FloatingChat.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react';
 
 import { motion } from 'framer-motion';
+import { ChatElementDisplayLocationV3 } from '@envive-ai/react-hooks/application/models';
 import { ColorNames } from '../../models/colorsConfig';
 import { Theme } from '../../../tokens/theme/theme';
 
@@ -20,6 +21,7 @@ import { resolveTheme } from '../utils/resolveTheme';
 import { FloatingChatProps } from './types/types';
 import { useFilteredChatMessages } from './hooks/useFilteredChatMessages';
 import { Unit } from './hooks/useSnapCalculator';
+import { Disclaimer } from '../Disclaimer';
 
 export const FloatingChat = ({
   id,
@@ -29,6 +31,7 @@ export const FloatingChat = ({
   theme = Theme.GLOBAL_CUSTOM,
   salesAgentData,
   floatingChatConfig,
+  hardcopyContent,
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
   isFloatingChatOpen,
@@ -51,10 +54,14 @@ export const FloatingChat = ({
     showEnviveLogo,
     ignoreFirstModelResponse,
     neverShowSingleProductCards,
+  } = floatingChatConfig;
+
+  const {
     welcomeMessageTitle,
     welcomeMessageText,
     chatFooterTextFieldPlaceholderText,
-  } = floatingChatConfig;
+    disclaimerText,
+  } = hardcopyContent?.values ?? {};
 
   const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
 
@@ -65,6 +72,7 @@ export const FloatingChat = ({
     suggestions,
     onSuggestionClicked,
     onTypedMessageSubmitted,
+    onFormResponseSubmitted,
   } = salesAgentData;
 
   const {
@@ -86,18 +94,6 @@ export const FloatingChat = ({
     }
   };
 
-  const { showScrollButton, scrollToBottom } = useScrollToBottom({
-    messagesRef: chatMessagesRef,
-    autoScrollDependencies: [
-      messages,
-      isPendingResponse,
-      suggestions,
-      answerSuggestions,
-      generalSuggestions,
-    ],
-    scrollThreshold: 30,
-  });
-
   const {
     modalSheetControl,
     maxSwipeableViewHeight,
@@ -111,11 +107,25 @@ export const FloatingChat = ({
     animationKey,
     mobileHeaderHeight,
     shouldShowHeader,
-    shouldShowScrolled,
     isFullView,
     isPartialView,
   } = useSnapSetup({ isFloatingChatOpen });
 
+  const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
+    messagesRef: chatMessagesRef,
+    autoScrollDependencies: [
+      messages,
+      isPendingResponse,
+      suggestions,
+      answerSuggestions,
+      generalSuggestions,
+    ],
+    scrollThreshold: 100,
+    useFloatingLayout: isMobile && isPartialView,
+    footerHeight: 160,
+    isOpen: isFloatingChatOpen,
+  });
+
   const { filteredMessages, hasFilteredMessages, handlePreviousDiscussions } =
     useFilteredChatMessages({
       messages,
@@ -182,14 +192,14 @@ export const FloatingChat = ({
   const footer = (
     <ChatFooter
       theme={finalTheme}
-      isScrolled={isMobile ? shouldShowScrolled : false}
+      isScrolled={isMobile ? isFloatingLayout : false}
       onChange={setQuery}
       onSubmit={() => {
         onTypedMessageSubmitted({ query, userTyped: true });
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
       }}
-      textFieldPlaceholderText={chatFooterTextFieldPlaceholderText}
+      textFieldPlaceholderText={chatFooterTextFieldPlaceholderText as string}
       promptSuggestions={
         isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
           ? ['Loading suggestions 1...', 'Loading suggestions 2...'] // This is strings will not be shown to the user
@@ -198,7 +208,7 @@ export const FloatingChat = ({
       handleButtonClick={buttonText => {
         const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
         if (suggestion) {
-          onSuggestionClicked(suggestion);
+          onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
         }
 
         setAnswerSuggestions([]);
@@ -216,8 +226,8 @@ export const FloatingChat = ({
   const welcomeMessage = (
     <WelcomeMessage
       sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
-      title={welcomeMessageTitle}
-      text={welcomeMessageText}
+      title={welcomeMessageTitle as string}
+      text={welcomeMessageText as string}
       theme={finalTheme}
     />
   );
@@ -236,6 +246,7 @@ export const FloatingChat = ({
       neverShowSingleProductCards={neverShowSingleProductCards}
       showVerifiedBuyer={showVerifiedBuyer}
       isPartialView={isPartialView}
+      onFormResponseSubmitted={onFormResponseSubmitted}
     />
   );
 
@@ -249,7 +260,7 @@ export const FloatingChat = ({
       handleButtonClick={buttonText => {
         const suggestion = suggestions.find(s => s.content === buttonText && s.isAnswer);
         if (suggestion) {
-          onSuggestionClicked(suggestion);
+          onSuggestionClicked(suggestion, ChatElementDisplayLocationV3.FLOATING_CHAT_PROMPT_BUTTON);
         }
         setAnswerSuggestions([]);
         setGeneralSuggestions([]);
@@ -274,6 +285,11 @@ export const FloatingChat = ({
           <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
         ) : undefined
       }
+      disclaimer={
+        disclaimerText && typeof disclaimerText === 'string' ? (
+          <Disclaimer disclaimerMarkdown={disclaimerText} />
+        ) : undefined
+      }
     />
   );
 
@@ -294,6 +310,12 @@ export const FloatingChat = ({
           <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
         ) : undefined
       }
+      disclaimer={
+        disclaimerText && typeof disclaimerText === 'string' ? (
+          <Disclaimer disclaimerMarkdown={disclaimerText} />
+        ) : undefined
+      }
+      isFloatingFooterLayout={isFloatingLayout}
     />
   );
 

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

@@ -1,5 +1,12 @@
+import { useSetAtom } from 'jotai';
 import { Form } from 'src/components/Form';
-import { Message, MessageType } from '@envive-ai/react-hooks/application/models';
+import {
+  FormSubmittedAttributes,
+  Message,
+  MessageType,
+} from '@envive-ai/react-hooks/application/models';
+import { handleFormSubmittedAtom } from '@envive-ai/react-hooks/atoms/chat';
+import type { FormSubmitValue } from 'src/components/Form/types';
 import { Message as MessageComponent, MessageVariant } from '../../Message';
 import { Theme } from '../../../../tokens/theme/theme';
 import { ReviewCardsCarousel } from './ReviewCardsCarousel';
@@ -24,6 +31,7 @@ export interface AgentMessageProps {
   neverShowSingleProductCards?: boolean;
   showVerifiedBuyer?: boolean;
   isPartialView?: boolean;
+  onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
 }
 
 export const AgentMessage = ({
@@ -36,7 +44,9 @@ export const AgentMessage = ({
   neverShowSingleProductCards = false,
   showVerifiedBuyer = false,
   isPartialView,
+  onFormResponseSubmitted,
 }: AgentMessageProps) => {
+  const handleFormSubmittedAtomFallback = useSetAtom(handleFormSubmittedAtom);
   const finalTheme = resolveTheme(theme);
 
   const textContentMessageTypes = new Set([
@@ -71,6 +81,7 @@ export const AgentMessage = ({
         reviews={reviews}
         theme={finalTheme}
         showVerifiedBuyer={showVerifiedBuyer}
+        hideNavigation={reviews.length === 1}
       />
     );
   }
@@ -98,37 +109,56 @@ export const AgentMessage = ({
 
     return (
       <DocumentRetrievalCardsCarousel
+        hideNavigation={documents.length === 1}
         documents={documents}
         theme={finalTheme}
       />
     );
   }
 
-  // TODO: Need to test this with a real message.
   if (type === MessageType.Form) {
     return messages
       .filter(msg => msg.type === MessageType.Form)
-      .map(msg => (
-        <Form
-          key={msg.id}
-          textFields={msg.metadata.fields.map(field => ({
-            label: field.title,
-            isRequired: field.required,
-            type: field.format === 'email' ? 'email' : 'text',
-          }))}
-          submitButton={{ label: 'Submit', ariaLabel: 'Submit', isDisabled: false }}
-          onSubmit={values => {
-            console.log('submitted', values);
-            // TODO: Add API call to submit the form.
-          }}
-        />
-      ));
+      .map(msg => {
+        const { fields } = msg.metadata;
+        return (
+          <Form
+            key={msg.id}
+            textFields={fields.map(field => ({
+              label: field.title,
+              isRequired: field.required,
+              type: field.format === 'email' ? 'email' : 'text',
+            }))}
+            submitButton={{ label: 'Submit', ariaLabel: 'Submit', isDisabled: false }}
+            onSubmit={(values: FormSubmitValue[]) => {
+              const filledSchema: Record<string, unknown> = {};
+              fields.forEach((field, index) => {
+                filledSchema[field.key] = values[index]?.value ?? '';
+              });
+              const formResponseId = msg.id;
+              const formType =
+                msg.metadata.formType ?? ('order_lookup' as FormSubmittedAttributes['formType']);
+              const payload: FormSubmittedAttributes = {
+                filledSchema,
+                formResponseId,
+                formType,
+              };
+              if (onFormResponseSubmitted) {
+                onFormResponseSubmitted(payload);
+              } else {
+                handleFormSubmittedAtomFallback(payload);
+              }
+            }}
+          />
+        );
+      });
   }
 
-  // TODO: Need to test this with a real message.
   if (type === MessageType.Order) {
     const orders = getCleanOrders(messages);
-
+    if (!orders || orders.length === 0) {
+      return null;
+    }
     return (
       <OrderLookupCardCarousel
         orders={orders}

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

@@ -1,4 +1,9 @@
-import { Message, MessageRole, MessageType } from '@envive-ai/react-hooks/application/models';
+import {
+  FormSubmittedAttributes,
+  Message,
+  MessageRole,
+  MessageType,
+} from '@envive-ai/react-hooks/application/models';
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import { Stack } from '../../Stack';
@@ -25,6 +30,7 @@ export interface ChatMessagesProps {
   neverShowSingleProductCards?: boolean;
   showVerifiedBuyer?: boolean;
   isPartialView?: boolean;
+  onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
 }
 
 export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
@@ -42,6 +48,7 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
       neverShowSingleProductCards,
       showVerifiedBuyer,
       isPartialView,
+      onFormResponseSubmitted,
     },
     ref,
   ) => {
@@ -50,20 +57,20 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
       <Stack
         ref={ref}
         direction="column"
-        className={classNames('envive-tw-px-4', className)}
+        className={classNames('envive-tw-pl-4 envive-tw-pr-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"
+            className="envive-tw-w-full envive-tw-cursor-pointer envive-tw-text-left"
             onClick={handlePreviousDiscussions}
           >
             {/* TODO: Get hard copy */}
             <Typography
               color={TypographyColor.TEXT_PRIMARY}
-              variant={TypographyVariant.B3_RG}
-              className="hover:envive-tw-underline"
+              variant={TypographyVariant.B4_MD}
+              className="envive-tw-underline hover:envive-tw-underline-offset-2"
             >
               View Previous Messages
             </Typography>
@@ -133,6 +140,7 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
                       neverShowSingleProductCards={neverShowSingleProductCards}
                       showVerifiedBuyer={showVerifiedBuyer}
                       isPartialView={isPartialView}
+                      onFormResponseSubmitted={onFormResponseSubmitted}
                     />
                   );
                 }

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,27 @@ 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}
+            <Stack
+              direction="column"
+              gap="0"
+            >
+              {welcomeMessage}
+              {disclaimer && <div>{disclaimer}</div>}
+            </Stack>
             <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 +85,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/components/ReviewCardsCarousel.tsx

@@ -7,17 +7,20 @@ export interface ReviewCardsCarouselProps {
   theme: Theme;
   reviews: ReviewCardProps[];
   showVerifiedBuyer?: boolean;
+  hideNavigation?: boolean;
 }
 
 export const ReviewCardsCarousel = ({
   reviews,
   theme,
   showVerifiedBuyer,
+  hideNavigation = false,
 }: ReviewCardsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
 
   return (
     <Carousel
+      hideNavigation={hideNavigation}
       elements={reviews.map(review => (
         <ReviewCard
           key={review.id}