(DOCSP-31201) [UI] Updated Legalese (#39)

nlarew · web-flow · commit 39c0f9732bb1 · 2023-07-13T12:03:19.000-04:00
diff --git a/chat-ui/src/App.tsx b/chat-ui/src/App.tsx
@@ -7,7 +7,7 @@ function App() {
     <div className={styles.app_background}>
       <div
         style={{
-          width: "650px",
+          width: "750px",
         }}
       >
         <Chatbot />
diff --git a/chat-ui/src/Chatbot.tsx b/chat-ui/src/Chatbot.tsx
@@ -18,17 +18,37 @@ import IconButton from "@leafygreen-ui/icon-button";
 import Icon from "@leafygreen-ui/icon";
 
 function Disclosure() {
+  const TermsOfUse = () => (
+    <Link href={"https://www.mongodb.com/legal/terms-of-use"}>
+      Terms of Use
+    </Link>
+  );
+  const AcceptableUsePolicy = () => (
+    <Link href={"https://www.mongodb.com/legal/acceptable-use-policy"}>
+      Acceptable Use Policy
+    </Link>
+  );
+
   return (
     <div className={styles.disclosure}>
       <Badge variant="blue">Experimental</Badge>
       <Body color={"#FFFFFF"}>
-        By interacting with this chatbot, you agree to MongoDB's{" "}
-        <Link href="#TODO">Terms & Conditions</Link>
+        This is a generative AI chatbot. By interacting with it, you agree to
+        MongoDB's <TermsOfUse /> and <AcceptableUsePolicy />.
       </Body>
     </div>
   );
 }
 
+function VerifyInformationBanner() {
+  return (
+    <Banner className={styles.lg_banner} variant="warning">
+      This is an experimental generative AI chatbot. All information should be
+      verified prior to use.
+    </Banner>
+  );
+}
+
 type CTACardProps = {
   active: boolean;
   cardRef: React.RefObject<HTMLDivElement>;
@@ -94,13 +114,11 @@ function CTACard({
               </Message>
             )}
           </MessageList>
-          <Banner className={styles.lg_banner} variant="warning">
-            This is an experimental AI chatbot. All information should be
-            verified prior to use.
-          </Banner>
         </>
       ) : null}
 
+      {active ? <VerifyInformationBanner /> : null}
+
       <ChatInput
         ref={inputRef}
         key="wizard-input"
@@ -178,7 +196,7 @@ export default function Chatbot() {
   }
 
   function deactivate() {
-    if(active) {
+    if (active) {
       setActive(false);
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ function App() {`
`7`	`7`	`<div className={styles.app_background}>`
`8`	`8`	`<div`
`9`	`9`	`style={{`
`10`		`- width: "650px",`
	`10`	`+ width: "750px",`
`11`	`11`	`}}`
`12`	`12`	`>`
`13`	`13`	`<Chatbot />`