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

package/src/components/ChatPreview/__tests__/ChatPreview.test.tsx

@@ -1,10 +1,19 @@
 import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createElement } from 'react';
 import { ChatPreview } from '../ChatPreview';
 import { WidgetWrapperVariant } from '../../WidgetWrapper/types/types';
 import { Theme } from '../../Tokens';
 
+vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
+  return {
+    MarkdownProcessor: function MockMarkdownProcessor({ content }: { content: string }) {
+      return createElement('p', null, content);
+    },
+  };
+});
+
 describe('ChatPreview', () => {
   const defaultProps = {
     baseProps: {},
@@ -32,11 +41,11 @@ describe('ChatPreview', () => {
   });
 
   describe('Basic rendering', () => {
-    it('should render with default props', () => {
+    it('should render with default props', async () => {
       render(<ChatPreview {...defaultProps} />);
       expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
       expect(
-        screen.getByText('How can I help you find the perfect product today?'),
+        await screen.findByText('How can I help you find the perfect product today?'),
       ).toBeInTheDocument();
       expect(screen.getByText('What are the best products for gifting?')).toBeInTheDocument();
     });
@@ -86,10 +95,10 @@ describe('ChatPreview', () => {
   });
 
   describe('Content visibility', () => {
-    it('should render message text', () => {
+    it('should render message text', async () => {
       render(<ChatPreview {...defaultProps} />);
       expect(
-        screen.getByText('How can I help you find the perfect product today?'),
+        await screen.findByText('How can I help you find the perfect product today?'),
       ).toBeInTheDocument();
     });
 
@@ -281,7 +290,7 @@ describe('ChatPreview', () => {
   });
 
   describe('Edge cases', () => {
-    it('should render with empty promptButtonTexts array', () => {
+    it('should render with empty promptButtonTexts array', async () => {
       render(
         <ChatPreview
           {...defaultProps}
@@ -293,7 +302,7 @@ describe('ChatPreview', () => {
       );
       expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
       expect(
-        screen.getByText('How can I help you find the perfect product today?'),
+        await screen.findByText('How can I help you find the perfect product today?'),
       ).toBeInTheDocument();
     });
 
@@ -310,7 +319,7 @@ describe('ChatPreview', () => {
       expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
     });
 
-    it('should render with undefined optional props', () => {
+    it('should render with undefined optional props', async () => {
       render(
         <ChatPreview
           baseProps={{}}
@@ -324,7 +333,7 @@ describe('ChatPreview', () => {
         />,
       );
       expect(screen.getByText('Shopping Assistant')).toBeInTheDocument();
-      expect(screen.getByText('Test message')).toBeInTheDocument();
+      expect(await screen.findByText('Test message')).toBeInTheDocument();
       expect(screen.getByText('Button 1')).toBeInTheDocument();
     });
 

package/src/components/ChatPreview/components/Message.tsx

@@ -1,17 +1,23 @@
-import { MarkdownProcessor } from '../../MarkdownProcessor/MarkdownProcessor';
+import { Suspense, lazy } from 'react';
 import { TypographyColor, TypographyVariant } from '../../Typography/types';
 
+const MarkdownProcessor = lazy(async () => ({
+  default: (await import('../../MarkdownProcessor/MarkdownProcessor')).MarkdownProcessor,
+}));
+
 type MessageProps = {
   messageText: string;
 };
 
 export const Message = ({ messageText }: MessageProps) => {
   return (
-    <MarkdownProcessor
-      content={messageText}
-      clampParagraphs={4}
-      textColor={TypographyColor.TEXT_PRIMARY}
-      textVariant={TypographyVariant.B3_RG}
-    />
+    <Suspense>
+      <MarkdownProcessor
+        content={messageText}
+        clampParagraphs={4}
+        textColor={TypographyColor.TEXT_PRIMARY}
+        textVariant={TypographyVariant.B3_RG}
+      />
+    </Suspense>
   );
 };

package/src/components/ChatPreviewComparison/__tests__/ChatPreviewComparison.test.tsx

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createElement } from 'react';
 import { ChatPreviewComparison } from '../ChatPreviewComparison';
 import { WidgetWrapperVariant } from '../../WidgetWrapper/types/types';
 import { Theme } from '../../Tokens';
@@ -22,6 +23,15 @@ vi.mock('src/components/utils/useGetContentSize', () => ({
   }),
 }));
 
+// Mock MarkdownProcessor so it renders synchronously (avoids Suspense/lazy in ChatPreviewComparison Message).
+vi.mock('../../MarkdownProcessor/MarkdownProcessor', () => {
+  return {
+    MarkdownProcessor: function MockMarkdownProcessor({ content }: { content: string }) {
+      return createElement('p', null, content);
+    },
+  };
+});
+
 describe('ChatPreviewComparison', () => {
   const defaultProps = {
     baseProps: {},
@@ -55,11 +65,11 @@ describe('ChatPreviewComparison', () => {
   });
 
   describe('Basic rendering', () => {
-    it('should render with default props', () => {
+    it('should render with default props', async () => {
       render(<ChatPreviewComparison {...defaultProps} />);
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
       expect(
-        screen.getByText(
+        await screen.findByText(
           'I can help you compare these two products side by side. Let me know what specific features, specifications, or details you would like to know more about.',
         ),
       ).toBeInTheDocument();
@@ -162,10 +172,10 @@ describe('ChatPreviewComparison', () => {
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
     });
 
-    it('should render message text', () => {
+    it('should render message text', async () => {
       render(<ChatPreviewComparison {...defaultProps} />);
       expect(
-        screen.getByText(
+        await screen.findByText(
           'I can help you compare these two products side by side. Let me know what specific features, specifications, or details you would like to know more about.',
         ),
       ).toBeInTheDocument();
@@ -378,7 +388,7 @@ describe('ChatPreviewComparison', () => {
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
     });
 
-    it('should render with undefined optional props', () => {
+    it('should render with undefined optional props', async () => {
       render(
         <ChatPreviewComparison
           baseProps={{}}
@@ -393,7 +403,7 @@ describe('ChatPreviewComparison', () => {
         />,
       );
       expect(screen.getByText('Compare these products')).toBeInTheDocument();
-      expect(screen.getByText('Test message')).toBeInTheDocument();
+      expect(await screen.findByText('Test message')).toBeInTheDocument();
       expect(screen.getByText('Button 1')).toBeInTheDocument();
     });
   });

package/src/components/ChatPreviewComparison/components/Message.tsx

@@ -1,8 +1,12 @@
+import { Suspense, lazy } from 'react';
 import { Theme } from 'src/components/Tokens';
 import { TypographyColor, TypographyVariant } from '../../Typography';
 import { resolveTheme } from '../../utils/resolveTheme';
 import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
-import { MarkdownProcessor } from '../../MarkdownProcessor/MarkdownProcessor';
+
+const MarkdownProcessor = lazy(async () => ({
+  default: (await import('../../MarkdownProcessor/MarkdownProcessor')).MarkdownProcessor,
+}));
 
 type MessageProps = {
   messageText: string;
@@ -18,11 +22,13 @@ export const Message = ({ messageText, theme = Theme.GLOBAL_CUSTOM }: MessagePro
   const isStandardAndMobile = isStandardTheme && isMobile;
 
   return (
-    <MarkdownProcessor
-      content={messageText}
-      clampParagraphs={isStandardAndMobile ? 7 : 3}
-      textColor={TypographyColor.TEXT_PRIMARY}
-      textVariant={TypographyVariant.B3_RG}
-    />
+    <Suspense>
+      <MarkdownProcessor
+        content={messageText}
+        clampParagraphs={isStandardAndMobile ? 7 : 3}
+        textColor={TypographyColor.TEXT_PRIMARY}
+        textVariant={TypographyVariant.B3_RG}
+      />
+    </Suspense>
   );
 };

package/src/components/DesignTokens/components/Typography.tsx

@@ -112,7 +112,7 @@ export const Typography = () => {
                     className={classNames(
                       'envive-tw-flex-1',
                       value.className,
-                      `envive-tw-text-[var(--envive-colors-text-primary)]`,
+                      `envive-tw-text-text-primary`,
                     )}
                   >
                     Envive Design System

package/src/components/Disclaimer/Disclaimer.tsx

@@ -0,0 +1,27 @@
+import { DisclaimerProps } from './types/types';
+import { Theme } from '../../../tokens/theme/theme';
+import { DisclaimerComponents } from './components';
+
+/**
+ * The Welcome Message that appears at the top of our floating chat.
+ * It displays the sparkle icon, along with a title and some text.
+ * Supports three visual themes: Standard, Modern, and Minimal.
+ */
+export const Disclaimer = ({
+  disclaimerMarkdown,
+  theme = Theme.GLOBAL_CUSTOM,
+  id,
+  testId,
+  className,
+  style,
+}: DisclaimerProps): JSX.Element => {
+  return (
+    <DisclaimerComponents.Container
+      markdownNode={<DisclaimerComponents.DisclaimerContent content={disclaimerMarkdown} />}
+      id={id}
+      testId={testId}
+      className={className}
+      style={style}
+    />
+  );
+};

package/src/components/Disclaimer/components/Container.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import { Stack } from '../../Stack';
+import { Container as ContainerComponent } from '../../Container';
+
+type ContainerProps = {
+  markdownNode: React.ReactNode;
+  id?: string;
+  testId?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const Container = ({
+  markdownNode,
+  id,
+  testId,
+  className,
+  style,
+}: ContainerProps): JSX.Element => {
+  return (
+    <ContainerComponent
+      id={id}
+      testId={testId}
+      style={style}
+      className={classNames(className, 'envive-tw-px-4 envive-tw-py-6')}
+    >
+      <Stack
+        direction="column"
+        className={classNames(className)}
+      >
+        {markdownNode}
+      </Stack>
+    </ContainerComponent>
+  );
+};

package/src/components/Disclaimer/components/DisclaimerContent.tsx

@@ -0,0 +1,18 @@
+import { TypographyColor, TypographyVariant } from 'src/components/Typography';
+import { MarkdownProcessor } from '../../MarkdownProcessor/MarkdownProcessor';
+
+type DisclaimerContentProps = {
+  content: string;
+};
+
+export const DisclaimerContent = ({ content }: DisclaimerContentProps): React.ReactNode => {
+  return (
+    <MarkdownProcessor
+      content={content}
+      textColor={TypographyColor.TEXT_SECONDARY}
+      subTextColor={TypographyColor.TEXT_SECONDARY}
+      textVariant={TypographyVariant.B3_RG}
+      subTextVariant={TypographyVariant.B3_RG}
+    />
+  );
+};

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

@@ -20,6 +20,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 +30,7 @@ export const FloatingChat = ({
   theme = Theme.GLOBAL_CUSTOM,
   salesAgentData,
   floatingChatConfig,
+  hardcopyContent,
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
   isFloatingChatOpen,
@@ -51,10 +53,14 @@ export const FloatingChat = ({
     showEnviveLogo,
     ignoreFirstModelResponse,
     neverShowSingleProductCards,
+  } = floatingChatConfig;
+
+  const {
     welcomeMessageTitle,
     welcomeMessageText,
     chatFooterTextFieldPlaceholderText,
-  } = floatingChatConfig;
+    disclaimerText,
+  } = hardcopyContent?.values ?? {};
 
   const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
 
@@ -65,6 +71,7 @@ export const FloatingChat = ({
     suggestions,
     onSuggestionClicked,
     onTypedMessageSubmitted,
+    onFormResponseSubmitted,
   } = salesAgentData;
 
   const {
@@ -86,18 +93,6 @@ export const FloatingChat = ({
     }
   };
 
-  const { showScrollButton, scrollToBottom } = useScrollToBottom({
-    messagesRef: chatMessagesRef,
-    autoScrollDependencies: [
-      messages,
-      isPendingResponse,
-      suggestions,
-      answerSuggestions,
-      generalSuggestions,
-    ],
-    scrollThreshold: 30,
-  });
-
   const {
     modalSheetControl,
     maxSwipeableViewHeight,
@@ -111,11 +106,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 +191,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
@@ -216,8 +225,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 +245,7 @@ export const FloatingChat = ({
       neverShowSingleProductCards={neverShowSingleProductCards}
       showVerifiedBuyer={showVerifiedBuyer}
       isPartialView={isPartialView}
+      onFormResponseSubmitted={onFormResponseSubmitted}
     />
   );
 
@@ -274,6 +284,11 @@ export const FloatingChat = ({
           <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
         ) : undefined
       }
+      disclaimer={
+        disclaimerText && typeof disclaimerText === 'string' ? (
+          <Disclaimer disclaimerMarkdown={disclaimerText} />
+        ) : undefined
+      }
     />
   );
 
@@ -294,6 +309,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([
@@ -98,37 +108,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}
                     />
                   );
                 }