chore(compass-assistant): remove drawer padding and fix auto-scroll

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.

Some things we're missing out on at this stage:
1. "Scroll to bottom" button: This button currently has bugs with appearing even when there is no content to scroll and I believe the scroll behavior improvements outweight the benefits of having this.
2. Shadow at the top when scrolling.

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;
 
@@ -99,12 +97,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 +142,31 @@ 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.reduce<
+    {
+      id: string;
+      messageBody: string;
+      isSender: boolean;
+    }[]
+  >(
+    (acc, message) => [
+      {
+        id: message.id,
+        messageBody:
+          message.metadata?.displayText ||
+          (message.parts
+            ?.filter((part) => part.type === 'text')
+            .map((part) => part.text)
+            .join('') ??
+            ''),
+        isSender: message.role === 'user',
+      },
+      ...acc,
+    ],
+    []
+  );
 
   const handleMessageSend = useCallback(
     (messageBody: string) => {
@@ -198,21 +223,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 +242,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}>

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],
 });