(DOCSP-32759) [UI] Use text instead of a banner for "validate answers" (

#124)
mongodb · Aug 31, 2023 · 302b3c7 · 302b3c7
1 parent 1be4087
commit 302b3c7
Showing 1 changed file with 8 additions and 11 deletions.
diff --git a/chat-ui/src/Chatbot.tsx b/chat-ui/src/Chatbot.tsx
@@ -142,6 +142,9 @@ const styles = {
   chatbot_input_menu: css`
     z-index: 1;
   `,
+  verify_information: css`
+    text-align: center;
+  `,
 };
 
 const MAX_INPUT_CHARACTERS = 300;
@@ -504,8 +507,6 @@ function ChatbotModal({
             <ErrorBanner message={conversation.error} />
           ) : null}
 
-          <VerifyInformationBanner />
-
           {!conversation.error ? (
             <InputBar
               ref={inputBarRef}
@@ -534,6 +535,11 @@ function ChatbotModal({
 
           {inputTextError ? <ErrorText>{inputTextError}</ErrorText> : null}
 
+          <Body className={styles.verify_information}>
+            This is an experimental generative AI chatbot. All information
+            should be verified prior to use.
+          </Body>
+
           <ConversationIdInfo conversation={conversation} />
         </div>
       </div>
@@ -577,15 +583,6 @@ function ErrorBanner({
   );
 }
 
-function VerifyInformationBanner() {
-  return (
-    <Banner variant="warning">
-      This is an experimental generative AI chatbot. All information should be
-      verified prior to use.
-    </Banner>
-  );
-}
-
 function ConversationIdInfo({ conversation }: { conversation: Conversation }) {
   return import.meta.env.VITE_QA === "true" ? (
     <div className={styles.conversation_id_info}>