Merge remote-tracking branch 'origin/main' into beta-releases

Author: github-actions[bot]

.github/workflows/bump-packages.yaml

@@ -58,7 +58,9 @@ jobs:
           commit-message: 'chore(release): bump package versions'
           branch: ci/bump-packages
           title: 'chore(release): bump package versions'
-          labels: no-title-validation
+          labels: |
+            no-title-validation
+            bot
           author: '${{ steps.app-token.outputs.app-slug}}[bot] <${{ steps.app-token.outputs.app-email }}>'
           body: >-
             <p>This PR is autogenerated and updates the version of every package

.github/workflows/update-dependencies.yaml

@@ -84,7 +84,9 @@ jobs:
           commit-message: 'chore(deps): update ${{ matrix.group_name }} to latest'
           branch: ci/update-${{ matrix.group_name }}
           title: 'chore(deps): update ${{ matrix.group_name }} to latest'
-          labels: no-title-validation
+          labels: |
+            no-title-validation
+            bot
           author: '${{ steps.app-token.outputs.app-slug}}[bot] <${{ steps.app-token.outputs.app-email }}>'
           body: |
             <p>This PR is automatically generated and updates the versions of

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

packages/compass-generative-ai/src/components/ai-optin-modal.tsx

@@ -47,12 +47,23 @@ const bodyDarkThemeStyles = css({
   color: palette.gray.light2,
 });
 
-const disclaimerStyles = css({
-  color: palette.gray.dark1,
+const disclaimerStylesCommon = {
   marginTop: spacing[400],
   marginLeft: spacing[800],
   marginRight: spacing[800],
-});
+  textAlign: 'center',
+};
+
+const disclaimerStyles = {
+  [Theme.Light]: css({
+    color: palette.gray.dark1,
+    ...disclaimerStylesCommon,
+  }),
+  [Theme.Dark]: css({
+    color: palette.gray.light2,
+    ...disclaimerStylesCommon,
+  }),
+};
 
 const bannerStyles = css({
   width: '480px',
@@ -203,13 +214,14 @@ export const AIOptInModal: React.FunctionComponent<OptInModalProps> = ({
       onLinkClick={onOptInModalClose}
       graphic={<AiImageBanner />}
       disclaimer={
-        <div className={disclaimerStyles}>
-          This is a feature powered by generative AI, and may give inaccurate
-          responses. Please see our{' '}
+        <div className={disclaimerStyles[darkMode ? Theme.Dark : Theme.Light]}>
+          Features in {isCloudOptIn ? 'Data Explorer' : 'Compass'} powered by
+          generative AI may produce inaccurate responses. Please see our{' '}
           <Link hideExternalIcon={false} href={GEN_AI_FAQ_LINK} target="_blank">
             FAQ
           </Link>{' '}
-          for more information.
+          for more information. Continue to opt into all AI-powered features
+          within {isCloudOptIn ? 'Data Explorer' : 'Compass'}.
         </div>
       }
     >

scripts/update-dependencies-config.js

@@ -21,7 +21,7 @@ module.exports = {
     'eslint-plugin-react',
     'eslint-plugin-react-hooks',
   ],
-  typescript: ['typescript', 'ts-node'],
+  typescript: ['@microsoft/api-extractor', 'typescript', 'ts-node'],
   leafygreen: [
     '@emotion/*',
     '@leafygreen-ui/*',
@@ -32,6 +32,5 @@ module.exports = {
   // TODO(COMPASS-9443): Update update-* github actions to handle all groups as
   // a matrix inside one action instead of having separate action for every
   // group and add more groups following the ones in _dependabot
-  // mongosh: [],
   // 'devtools-shared-prod': [],
 };