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

package/src/components/FloatingChat/FloatingChat.tsx

@@ -1,21 +1,26 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
+import { motion } from 'framer-motion';
 import { ColorNames } from '../../models/colorsConfig';
 import { Theme } from '../../../tokens/theme/theme';
 
-import { FloatingChatComponents } from './components';
+import { FloatingChatComponents, ModalSheet } from './components';
 import { useScrollToBottom } from './hooks/useScrollToBottom';
+import { useSnapSetup } from './hooks/useSnapSetup';
+import { useChatSuggestions } from './hooks/useChatSuggestions';
 import { ChatHeader } from '../ChatHeader';
-import { ChatHeaderOptions, ChatHeaderVariant } from '../ChatHeader/types';
+import { ChatHeaderOptions, ChatHeaderVariant, HandleState } from '../ChatHeader/types';
 import { WelcomeMessage } from '../WelcomeMessage/WelcomeMessage';
 import { SparkleIconColor } from '../WelcomeMessage/types/types';
-import { Stack } from '../Stack';
 import { ChatFooter } from '../ChatFooter';
 import { PromptCarousel, PromptCarouselRows } from '../PromptCarousel';
 import { PromptButtonVariant } from '../PromptButton';
 
 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,
@@ -25,8 +30,10 @@ export const FloatingChat = ({
   theme = Theme.GLOBAL_CUSTOM,
   salesAgentData,
   floatingChatConfig,
+  hardcopyContent,
   lookAndFeelConfig,
   isCXButtonSwitchEnabled,
+  isFloatingChatOpen,
   onClose,
   onToggleCXButton,
 }: FloatingChatProps) => {
@@ -41,14 +48,19 @@ export const FloatingChat = ({
     headerMode,
     welcomeMessageIconColor,
     showVerifiedBuyer,
-    userQueryInputEnabled,
+    // Default this to true to avoid needing it in the default config
+    userQueryInputEnabled = true,
     showEnviveLogo,
     ignoreFirstModelResponse,
     neverShowSingleProductCards,
+  } = floatingChatConfig;
+
+  const {
     welcomeMessageTitle,
     welcomeMessageText,
     chatFooterTextFieldPlaceholderText,
-  } = floatingChatConfig;
+    disclaimerText,
+  } = hardcopyContent?.values ?? {};
 
   const { agentName, chatHeaderLogoDarkSrc, chatHeaderLogoLightSrc } = lookAndFeelConfig;
 
@@ -59,26 +71,20 @@ export const FloatingChat = ({
     suggestions,
     onSuggestionClicked,
     onTypedMessageSubmitted,
+    onFormResponseSubmitted,
   } = salesAgentData;
 
-  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]);
+  const {
+    answerSuggestions,
+    generalSuggestions,
+    showAnswerSuggestions,
+    setAnswerSuggestions,
+    setGeneralSuggestions,
+  } = useChatSuggestions({
+    suggestions,
+    isPendingResponse,
+    isResponseStreaming,
+  });
 
   const handleToggleCXButton = (item: ChatHeaderOptions) => {
     if (item === ChatHeaderOptions.LIVE_SUPPORT) {
@@ -87,7 +93,24 @@ export const FloatingChat = ({
     }
   };
 
-  const { showScrollButton, scrollToBottom } = useScrollToBottom({
+  const {
+    modalSheetControl,
+    maxSwipeableViewHeight,
+    isOpen,
+    isMobile,
+    snaps,
+    initialSnap,
+    shouldAutoExpand,
+    currentSnapPercentage,
+    handleSnapChange,
+    animationKey,
+    mobileHeaderHeight,
+    shouldShowHeader,
+    isFullView,
+    isPartialView,
+  } = useSnapSetup({ isFloatingChatOpen });
+
+  const { showScrollButton, scrollToBottom, isFloatingLayout } = useScrollToBottom({
     messagesRef: chatMessagesRef,
     autoScrollDependencies: [
       messages,
@@ -96,9 +119,20 @@ export const FloatingChat = ({
       answerSuggestions,
       generalSuggestions,
     ],
-    scrollThreshold: 30,
+    scrollThreshold: 100,
+    useFloatingLayout: isMobile && isPartialView,
+    footerHeight: 160,
+    isOpen: isFloatingChatOpen,
   });
 
+  const { filteredMessages, hasFilteredMessages, handlePreviousDiscussions } =
+    useFilteredChatMessages({
+      messages,
+      isMobile,
+      currentSnapPercentage,
+      modalSheetControl,
+    });
+
   const header = (
     <ChatHeader
       logoDark={chatHeaderLogoDarkSrc}
@@ -116,50 +150,83 @@ export const FloatingChat = ({
     />
   );
 
-  const footer = (
-    <Stack
-      direction="column"
-      gap={4}
+  const mobileHeader = (
+    <motion.div
+      style={{
+        maxHeight: mobileHeaderHeight,
+        overflow: 'hidden',
+      }}
     >
-      <ChatFooter
+      <ChatHeader
+        logoDark={chatHeaderLogoDarkSrc}
+        logoLight={chatHeaderLogoLightSrc}
         theme={finalTheme}
-        isScrolled={false}
-        onChange={setQuery}
-        onSubmit={() => {
-          onTypedMessageSubmitted({ query });
-          setAnswerSuggestions([]);
-          setGeneralSuggestions([]);
-        }}
-        textFieldPlaceholderText={chatFooterTextFieldPlaceholderText}
-        promptSuggestions={
-          isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
-            ? ['Loading suggestions 1...', 'Loading suggestions 2...'] // This is strings will not be shown to the user
-            : generalSuggestions
-        }
-        handleButtonClick={buttonText => {
-          const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
-          if (suggestion) {
-            onSuggestionClicked(suggestion);
-          }
-
-          setAnswerSuggestions([]);
-          setGeneralSuggestions([]);
-        }}
-        disabled={isPendingResponse || isResponseStreaming}
-        disabledInput={!userQueryInputEnabled}
-        isLoadingPromptSuggestions={
-          isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
-        }
-        hideEnviveWatermark={!showEnviveLogo}
+        variant={headerMode as ChatHeaderVariant}
+        headerBgColor={headerBackgroundColor as ColorNames}
+        showLogo
+        showCXToggle={isCXButtonSwitchEnabled}
+        centralizeCXToggle
+        selectedOption={ChatHeaderOptions.ASSISTANT}
+        onToggle={handleToggleCXButton}
+        onClose={onClose}
       />
-    </Stack>
+    </motion.div>
+  );
+
+  const handler = (
+    <ChatHeader
+      theme={finalTheme}
+      variant={headerMode as ChatHeaderVariant}
+      headerBgColor={headerBackgroundColor as ColorNames}
+      showHandle
+      handleState={isFullView ? HandleState.OPEN : HandleState.CLOSED}
+      handleAnimationKey={animationKey}
+      showMainContent={false}
+      selectedOption={ChatHeaderOptions.ASSISTANT}
+      onToggle={handleToggleCXButton}
+      onClose={onClose}
+    />
+  );
+
+  const footer = (
+    <ChatFooter
+      theme={finalTheme}
+      isScrolled={isMobile ? isFloatingLayout : false}
+      onChange={setQuery}
+      onSubmit={() => {
+        onTypedMessageSubmitted({ query, userTyped: true });
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+      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
+          : generalSuggestions
+      }
+      handleButtonClick={buttonText => {
+        const suggestion = suggestions.find(s => s.content === buttonText && !s.isAnswer);
+        if (suggestion) {
+          onSuggestionClicked(suggestion);
+        }
+
+        setAnswerSuggestions([]);
+        setGeneralSuggestions([]);
+      }}
+      disabled={isPendingResponse || isResponseStreaming}
+      disabledInput={!userQueryInputEnabled}
+      isLoadingPromptSuggestions={
+        isPendingResponse || isResponseStreaming || generalSuggestions.length === 0
+      }
+      hideEnviveWatermark={!showEnviveLogo}
+    />
   );
 
   const welcomeMessage = (
     <WelcomeMessage
       sparkleIconColor={welcomeMessageIconColor as SparkleIconColor}
-      title={welcomeMessageTitle}
-      text={welcomeMessageText}
+      title={welcomeMessageTitle as string}
+      text={welcomeMessageText as string}
       theme={finalTheme}
     />
   );
@@ -170,11 +237,15 @@ export const FloatingChat = ({
       ref={chatMessagesRef}
       isLoading={isPendingResponse && !isResponseStreaming}
       agentName={agentName}
-      messages={messages}
+      messages={filteredMessages}
+      hasFilteredMessages={hasFilteredMessages}
+      handlePreviousDiscussions={handlePreviousDiscussions}
       isResponseStreaming={isResponseStreaming}
       ignoreFirstModelResponse={ignoreFirstModelResponse}
       neverShowSingleProductCards={neverShowSingleProductCards}
       showVerifiedBuyer={showVerifiedBuyer}
+      isPartialView={isPartialView}
+      onFormResponseSubmitted={onFormResponseSubmitted}
     />
   );
 
@@ -196,7 +267,7 @@ export const FloatingChat = ({
     />
   );
 
-  return (
+  const desktopLayout = (
     <FloatingChatComponents.Layout
       id={id}
       className={className}
@@ -213,6 +284,57 @@ export const FloatingChat = ({
           <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
         ) : undefined
       }
+      disclaimer={
+        disclaimerText && typeof disclaimerText === 'string' ? (
+          <Disclaimer disclaimerMarkdown={disclaimerText} />
+        ) : undefined
+      }
+    />
+  );
+
+  const mobileLayout = (
+    <FloatingChatComponents.Layout
+      id={id}
+      className={className}
+      style={style}
+      testId={testId}
+      theme={finalTheme}
+      header={shouldShowHeader ? mobileHeader : undefined}
+      footer={footer}
+      welcomeMessage={welcomeMessage}
+      chatMessages={chatMessages}
+      answerSuggestions={showAnswerSuggestions ? answerSuggestionsComponent : undefined}
+      scrollToBottomButton={
+        showScrollButton ? (
+          <FloatingChatComponents.ScrollToBottomButton onClick={scrollToBottom} />
+        ) : undefined
+      }
+      disclaimer={
+        disclaimerText && typeof disclaimerText === 'string' ? (
+          <Disclaimer disclaimerMarkdown={disclaimerText} />
+        ) : undefined
+      }
+      isFloatingFooterLayout={isFloatingLayout}
     />
   );
+
+  return isMobile ? (
+    <ModalSheet
+      animationKey={animationKey}
+      open={isOpen}
+      height={maxSwipeableViewHeight}
+      handler={handler}
+      unit={Unit.PERCENT}
+      snaps={snaps}
+      initSnap={initialSnap}
+      onSnap={handleSnapChange}
+      onClose={onClose}
+      controlRef={modalSheetControl}
+      disableDrag={shouldAutoExpand}
+    >
+      {mobileLayout}
+    </ModalSheet>
+  ) : (
+    desktopLayout
+  );
 };

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';
@@ -23,6 +30,8 @@ export interface AgentMessageProps {
   isResponseStreaming?: boolean;
   neverShowSingleProductCards?: boolean;
   showVerifiedBuyer?: boolean;
+  isPartialView?: boolean;
+  onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
 }
 
 export const AgentMessage = ({
@@ -34,7 +43,10 @@ export const AgentMessage = ({
   isResponseStreaming = false,
   neverShowSingleProductCards = false,
   showVerifiedBuyer = false,
+  isPartialView,
+  onFormResponseSubmitted,
 }: AgentMessageProps) => {
+  const handleFormSubmittedAtomFallback = useSetAtom(handleFormSubmittedAtom);
   const finalTheme = resolveTheme(theme);
 
   const textContentMessageTypes = new Set([
@@ -86,6 +98,7 @@ export const AgentMessage = ({
         products={products}
         numberOfProducts={products.length}
         theme={finalTheme}
+        isPartialView={isPartialView}
       />
     );
   }
@@ -95,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';
@@ -9,17 +14,23 @@ import { Message as MessageComponent, MessageVariant } from '../../Message';
 import { MessageDivider } from './MessageDivider';
 import { Theme } from '../../../../tokens/theme/theme';
 import { resolveTheme } from '../../utils/resolveTheme';
+import { Typography, TypographyVariant } from '../../Typography';
+import { TypographyColor } from '../../Typography/types';
 
 export interface ChatMessagesProps {
   theme: Theme;
   className?: string;
   agentName: string;
   messages: Message[][];
+  hasFilteredMessages: boolean;
+  handlePreviousDiscussions: () => void;
   isLoading: boolean;
   isResponseStreaming: boolean;
   ignoreFirstModelResponse?: boolean;
   neverShowSingleProductCards?: boolean;
   showVerifiedBuyer?: boolean;
+  isPartialView?: boolean;
+  onFormResponseSubmitted?: (formResponse: FormSubmittedAttributes) => void;
 }
 
 export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
@@ -29,11 +40,15 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
       className,
       agentName,
       messages,
+      hasFilteredMessages,
+      handlePreviousDiscussions,
       isLoading,
       isResponseStreaming,
       ignoreFirstModelResponse,
       neverShowSingleProductCards,
       showVerifiedBuyer,
+      isPartialView,
+      onFormResponseSubmitted,
     },
     ref,
   ) => {
@@ -42,9 +57,25 @@ 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-text-left"
+            onClick={handlePreviousDiscussions}
+          >
+            {/* TODO: Get hard copy */}
+            <Typography
+              color={TypographyColor.TEXT_PRIMARY}
+              variant={TypographyVariant.B4_MD}
+              className="envive-tw-underline hover:envive-tw-underline-offset-2"
+            >
+              View Previous Messages
+            </Typography>
+          </button>
+        )}
         {messages.map((message: Message[], index: number) => {
           if (
             ignoreFirstModelResponse &&
@@ -108,6 +139,8 @@ export const ChatMessages = forwardRef<HTMLDivElement, ChatMessagesProps>(
                       isResponseStreaming={isResponseStreaming && isLastMessageTurn}
                       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);
@@ -42,7 +46,7 @@ export const Layout = ({
       testId={testId}
       style={style}
       className={classNames(
-        'envive-tw-flex envive-tw-h-full envive-tw-w-[512px] envive-tw-flex-col envive-tw-bg-[#FFFFFF]',
+        'envive-tw-flex envive-tw-h-full envive-tw-w-full envive-tw-max-w-[512px] envive-tw-flex-col envive-tw-bg-[#FFFFFF]',
         className,
       )}
     >
@@ -50,22 +54,24 @@ export const Layout = ({
         direction="column"
         className="envive-tw-relative envive-tw-h-full envive-tw-overflow-hidden"
       >
-        {header && <div className="envive-tw-flex-shrink-0">{header}</div>}
+        {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}
+            {disclaimer && <div>{disclaimer}</div>}
             <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 +80,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>
   );
 };