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

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