chore(compass-assistant): remove drawer padding and fix auto-scroll COMPASS-9757 (#7274)

This:
1. Removes padding from Drawer (aligning with upcoming `hasPadding` property) and adjusts the drawer sections accordingly.
2. Removes MessageFeed in favor of a custom div for scrolling. LG currently uses a JavaScript-based mechanism for autoscroll which is janky and has many bugs which were noted during the last bug bug bash. They are aware of this and looking to change that so this will likely reach their implementation as well.

Author: gagik

packages/compass-assistant/src/assistant-chat.tsx

@@ -6,7 +6,6 @@ import {
   LgChatChatWindow,
   LgChatLeafygreenChatProvider,
   LgChatMessage,
-  LgChatMessageFeed,
   LgChatMessageActions,
   LgChatInputBar,
   spacing,
@@ -25,7 +24,6 @@ const { DisclaimerText } = LgChatChatDisclaimer;
 const { ChatWindow } = LgChatChatWindow;
 const { LeafyGreenChatProvider, Variant } = LgChatLeafygreenChatProvider;
 const { Message } = LgChatMessage;
-const { MessageFeed } = LgChatMessageFeed;
 const { MessageActions } = LgChatMessageActions;
 const { InputBar } = LgChatInputBar;
 
@@ -59,12 +57,8 @@ const headerStyleLightModeFixes = css({
 
 // TODO(COMPASS-9751): These are temporary patches to make the Assistant chat take the entire
 // width and height of the drawer since Leafygreen doesn't support this yet.
-const inputBarFixesStyles = css({
-  marginBottom: -spacing[400],
-});
 const assistantChatFixesStyles = css({
   // Negative margin to patch the padding of the drawer.
-  marginTop: -spacing[400],
   '> div, > div > div, > div > div > div, > div > div > div': {
     height: '100%',
   },
@@ -99,12 +93,26 @@ const assistantChatFixesStyles = css({
     fontWeight: 'semibold',
   },
 });
-const messageFeedFixesStyles = css({ height: '100%' });
+const messageFeedFixesStyles = css({
+  display: 'flex',
+  flexDirection: 'column-reverse',
+  overflowY: 'auto',
+  flex: 1,
+  padding: spacing[400],
+});
 const chatWindowFixesStyles = css({
   height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
 });
 const welcomeMessageStyles = css({
-  padding: spacing[400],
+  paddingBottom: spacing[400],
+  paddingLeft: spacing[400],
+  paddingRight: spacing[400],
+});
+const disclaimerTextStyles = css({
+  marginTop: spacing[400],
+  marginBottom: spacing[400],
 });
 
 function makeErrorMessage(message: string) {
@@ -130,18 +138,20 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
     },
   });
 
-  // Transform AI SDK messages to LeafyGreen chat format
-  const lgMessages = messages.map((message) => ({
-    id: message.id,
-    messageBody:
-      message.metadata?.displayText ||
-      message.parts
-        ?.filter((part) => part.type === 'text')
-        .map((part) => part.text)
-        .join('') ||
-      '',
-    isSender: message.role === 'user',
-  }));
+  // Transform AI SDK messages to LeafyGreen chat format and reverse the order of the messages
+  // for displaying it correctly with flex-direction: column-reverse.
+  const lgMessages = messages
+    .map((message) => ({
+      id: message.id,
+      messageBody:
+        message.metadata?.displayText ||
+        message.parts
+          ?.filter((part) => part.type === 'text')
+          .map((part) => part.text)
+          .join(''),
+      isSender: message.role === 'user',
+    }))
+    .reverse();
 
   const handleMessageSend = useCallback(
     (messageBody: string) => {
@@ -198,21 +208,10 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
     >
       <LeafyGreenChatProvider variant={Variant.Compact}>
         <ChatWindow title="MongoDB Assistant" className={chatWindowFixesStyles}>
-          <MessageFeed
+          <div
             data-testid="assistant-chat-messages"
             className={messageFeedFixesStyles}
           >
-            <DisclaimerText>
-              This feature is powered by generative AI. See our{' '}
-              <Link
-                hideExternalIcon={false}
-                href={GEN_AI_FAQ_LINK}
-                target="_blank"
-              >
-                FAQ
-              </Link>{' '}
-              for more information. Please review the outputs carefully.
-            </DisclaimerText>
             {lgMessages.map((messageFields) => (
               <Message
                 key={messageFields.id}
@@ -228,7 +227,18 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
                 )}
               </Message>
             ))}
-          </MessageFeed>
+            <DisclaimerText className={disclaimerTextStyles}>
+              This feature is powered by generative AI. See our{' '}
+              <Link
+                hideExternalIcon={false}
+                href={GEN_AI_FAQ_LINK}
+                target="_blank"
+              >
+                FAQ
+              </Link>{' '}
+              for more information. Please review the outputs carefully.
+            </DisclaimerText>
+          </div>
           {error && (
             <div className={errorBannerWrapperStyles}>
               <Banner variant="danger" dismissible onClose={clearError}>
@@ -246,7 +256,6 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
           <InputBar
             data-testid="assistant-chat-input"
             onMessageSend={handleMessageSend}
-            className={inputBarFixesStyles}
             state={status === 'submitted' ? 'loading' : undefined}
             textareaProps={{
               placeholder: 'Ask MongoDB Assistant a question',

packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx

@@ -114,6 +114,7 @@ export const DrawerToolbarLayoutContainer = forwardRef<
             data-testid={`${dataLgId}`}
             aria-live="polite"
             aria-atomic="true"
+            hasPadding={false}
           >
             {content}
           </Drawer>

packages/compass-components/src/components/drawer/drawer/drawer.tsx

@@ -28,6 +28,11 @@ import {
 } from './drawer.styles';
 import { DisplayMode, type DrawerProps } from './drawer.types';
 import { Icon } from '../../leafygreen';
+import { css, cx } from '@leafygreen-ui/emotion';
+
+const noPaddingFixesStyles = css({
+  padding: 0,
+});
 
 export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
   (
@@ -40,6 +45,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
       onClose,
       open = false,
       title,
+      hasPadding = true,
       ...rest
     },
     fwdRef
@@ -168,7 +174,11 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
                   theme,
                 })}
               >
-                <div className={innerChildrenContainerStyles}>
+                <div
+                  className={cx(innerChildrenContainerStyles, {
+                    [noPaddingFixesStyles]: !hasPadding,
+                  })}
+                >
                   {/* Empty span element used to track if children container has scrolled down */}
                   {<span ref={interceptRef} />}
                   {children}

packages/compass-components/src/components/drawer/drawer/drawer.types.ts

@@ -44,4 +44,10 @@ export interface DrawerProps
    * Title of the Drawer
    */
   title: React.ReactNode;
+
+  /**
+   * Determines if the Drawer has padding
+   * @defaultValue true
+   */
+  hasPadding?: boolean;
 }

packages/compass-data-modeling/src/components/drawer/drawer-section-components.tsx

@@ -10,12 +10,7 @@ import {
 import React from 'react';
 
 const containerStyles = css({
-  '&:first-child': {
-    marginTop: `-${spacing[400]}px`,
-  },
   borderBottom: `1px solid ${palette.gray.light2}`,
-  marginLeft: `-${spacing[400]}px`,
-  marginRight: `-${spacing[400]}px`,
   padding: spacing[400],
 });