(DOCSP-33059) [UI] Fix suggested prompts & other LG Chat tweaks (#171)

mongodb · Sep 20, 2023 · cde1b74 · cde1b74
1 parent ba69ad8
commit cde1b74
Show file tree

Hide file tree

Showing 4 changed files with 341 additions and 138 deletions.
diff --git a/chat-ui/package.json b/chat-ui/package.json
@@ -66,7 +66,6 @@
     "@lg-chat/avatar",
     "@lg-chat/chat-window",
     "@lg-chat/input-bar",
-    "@lg-chat/leafygreen-chat-provider",
     "@lg-chat/message",
     "@lg-chat/message-feed",
     "@lg-chat/message-rating"
@@ -90,12 +89,11 @@
     "@leafygreen-ui/text-input": "^12.1.18",
     "@leafygreen-ui/toggle": "^10.0.15",
     "@leafygreen-ui/typography": "^16.5.4",
-    "@lg-chat/avatar": "^2.0.3",
+    "@lg-chat/avatar": "^2.0.6",
     "@lg-chat/chat-window": "^1.0.4",
-    "@lg-chat/input-bar": "^3.0.1",
-    "@lg-chat/leafygreen-chat-provider": "^1.0.2",
-    "@lg-chat/message": "^2.0.4",
-    "@lg-chat/message-feed": "^2.0.4",
+    "@lg-chat/input-bar": "^3.1.3",
+    "@lg-chat/message": "^2.0.8",
+    "@lg-chat/message-feed": "^2.0.7",
     "@lg-chat/message-rating": "^1.1.3",
     "@microsoft/fetch-event-source": "^2.0.1",
     "buffer": "^6.0.3",

diff --git a/chat-ui/src/Chatbot.tsx b/chat-ui/src/Chatbot.tsx
@@ -264,7 +264,14 @@ export function Chatbot(props: ChatbotProps) {
           <InputBar
             key={"initialInput"}
             hasError={showInitialInputErrorState}
-            badgeText={(initialInputFocused || inputText.length > 0) ? undefined : "Experimental"}
+            badgeText={
+              initialInputFocused || inputText.length > 0
+                ? undefined
+                : "Experimental"
+            }
+            dropdownProps={{
+              usePortal: false,
+            }}
             dropdownFooterSlot={
               <div className={styles.powered_by_footer}>
                 <Body>
@@ -591,7 +598,10 @@ function LegalDisclosure() {
     </Link>
   );
   const AcceptableUsePolicy = () => (
-    <Link hideExternalIcon href={"https://www.mongodb.com/legal/acceptable-use-policy"}>
+    <Link
+      hideExternalIcon
+      href={"https://www.mongodb.com/legal/acceptable-use-policy"}
+    >
       Acceptable Use Policy
     </Link>
   );

diff --git a/chat-ui/src/InputBar.tsx b/chat-ui/src/InputBar.tsx
@@ -1,4 +1,4 @@
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
 import { palette } from "@leafygreen-ui/palette";
 import { Body } from "@leafygreen-ui/typography";
 import {
@@ -18,10 +18,16 @@ const styles = {
       }
     }
   `,
+  suggested_prompts_menu: css`
+    [data-testid="lg-search-input-popover"] {
+      z-index: 1;
+    }
+  `,
   character_count: ({
     darkMode,
     isError,
   }: StylesProps & { isError: boolean }) => css`
+    white-space: nowrap;
     color: ${isError
       ? palette.red.base
       : darkMode
@@ -39,9 +45,10 @@ export const InputBar = forwardRef<HTMLFormElement, InputBarProps>(
     return (
       <LGInputBar
         ref={ref}
-        className={
+        className={cx(
+          styles.suggested_prompts_menu,
           hasError ?? false ? styles.chatbot_input_error_border : undefined
-        }
+        )}
         shouldRenderGradient={!hasError}
         {...props}
       >