mongodb-js · gagik · Aug 29, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025
@@ -20,7 +20,7 @@ import type { RootState } from '../../../../modules';
 import type { WizardComponentProps } from '..';
 import { FieldCombobox } from '../field-combobox';
 
-type Accumulator = typeof ACCUMULATORS[number];
+type Accumulator = (typeof ACCUMULATORS)[number];
 
 const ACCUMULATOR_LABELS = {
   $avg: 'Average',

@@ -21,7 +21,7 @@ import type { RootState } from '../../../../modules';
 import type { WizardComponentProps } from '..';
 import { FieldCombobox } from '../field-combobox';
 
-type Accumulator = typeof ACCUMULATORS[number];
+type Accumulator = (typeof ACCUMULATORS)[number];
 
 const SUBSET_ACCUMULATORS = {
   $first: {
@@ -54,7 +54,7 @@ const N_OPERATORS = Object.values(SUBSET_ACCUMULATORS).map(
   (acc) => acc.nOperator
 );
 
-function isGroupNOperator(k: string): k is typeof N_OPERATORS[number] {
+function isGroupNOperator(k: string): k is (typeof N_OPERATORS)[number] {
   return N_OPERATORS.includes(k as any);
 }
 

@@ -103,7 +103,7 @@ const MATCH_OPERATOR_LABELS = [
   },
 ] as const;
 
-export type MatchOperator = typeof MATCH_OPERATOR_LABELS[number]['operator'];
+export type MatchOperator = (typeof MATCH_OPERATOR_LABELS)[number]['operator'];
 
 // Components - Condition
 const conditionContainerStyles = css({

@@ -16,7 +16,7 @@ import {
 import type { WizardComponentProps } from '..';
 import { FieldCombobox } from '../field-combobox';
 
-type SortDirection = typeof SORT_DIRECTION_OPTIONS[number]['value'];
+type SortDirection = (typeof SORT_DIRECTION_OPTIONS)[number]['value'];
 type SortFieldState = {
   id: number;
   field: string;

@@ -28,7 +28,7 @@ export const SORT_DIRECTION_OPTIONS = [
   },
 ] as const;
 
-export type SortDirection = typeof SORT_DIRECTION_OPTIONS[number]['value'];
+export type SortDirection = (typeof SORT_DIRECTION_OPTIONS)[number]['value'];
 
 export const mapSortDataToStageValue = (
   data: {

@@ -1,6 +1,6 @@
 import { ON_PREM, type ENVS } from '@mongodb-js/mongodb-constants';
 
-export type ServerEnvironment = typeof ENVS[number];
+export type ServerEnvironment = (typeof ENVS)[number];
 
 export const INITIAL_STATE: ServerEnvironment = ON_PREM;
 

@@ -52,7 +52,7 @@ export type ConfigureStoreOptions = CollectionTabPluginMetadata &
      * Current connection env type. Affects available stages. Accepted values:
      * "atlas" | "on-prem" | "adl"
      */
-    env: typeof ENVS[number] | null;
+    env: (typeof ENVS)[number] | null;
     /**
      * Namespace field values that will be used in autocomplete
      */
@@ -148,7 +148,7 @@ export function activateAggregationsPlugin(
         // mms specifies options.env whereas we don't currently get this variable when
         // we use the aggregations plugin inside compass. In that use case we get it
         // from the instance model above.
-        options.env ?? (instance.env as typeof ENVS[number]),
+        options.env ?? (instance.env as (typeof ENVS)[number]),
       // options.outResultsFn is only used by mms
       outResultsFn: options.outResultsFn,
       pipelineBuilder: {

@@ -11,7 +11,7 @@ export const MongoDBInstancesManagerEvents = {
 } as const;
 
 type MongoDBInstancesManagerEvent =
-  typeof MongoDBInstancesManagerEvents[keyof typeof MongoDBInstancesManagerEvents];
+  (typeof MongoDBInstancesManagerEvents)[keyof typeof MongoDBInstancesManagerEvents];
 
 export type MongoDBInstancesManagerEventListeners = {
   [MongoDBInstancesManagerEvents.InstanceCreated]: (

@@ -99,8 +99,7 @@ describe('AssistantChat', function () {
     expect(sendButton.disabled).to.be.false;
   });
 
-  // Not currently supported by the LeafyGreen Input Bar
-  it.skip('send button is disabled for whitespace-only input', async function () {
+  it('send button is disabled for whitespace-only input', async function () {
     renderWithChat([]);
 
     const inputField = screen.getByPlaceholderText(

@@ -11,6 +11,10 @@ import {
   spacing,
   css,
   Banner,
+  cx,
+  fontFamilies,
+  palette,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 
 const { ChatWindow } = LgChatChatWindow;
@@ -23,14 +27,66 @@ interface AssistantChatProps {
   chat: Chat<AssistantMessage>;
 }
 
+const assistantChatStyles = css({
+  // Compass has a global bullet point override but we clear this for the chat.
+  ul: {
+    listStyleType: 'disc',
+  },
+  ol: {
+    listStyleType: 'decimal',
+  },
+});
+
+const headerStyleDarkModeFixes = css({
+  'h1, h2, h3, h4, h5, h6': {
+    color: palette.gray.light2,
+  },
+});
+
+const headerStyleLightModeFixes = css({
+  'h1, h2, h3, h4, h5, h6': {
+    color: palette.black,
+  },
+});
+
 // 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 assistantChatFixesStyles = css({
   // Negative margin to patch the padding of the drawer.
-  margin: -spacing[400],
-  '> div, > div > div, > div > div > div, > div > div > div > div': {
+  marginTop: -spacing[400],
+  '> div, > div > div, > div > div > div, > div > div > div': {
     height: '100%',
   },
+  // This is currently set to 'pre-wrap' which causes list items to be on a different line than the list markers.
+  'li, ol': {
+    whiteSpace: 'normal',
+  },
+  /** TODO(COMPASS-9751): We're adjusting styling of all the headers to a lower level than the default for chat, this should be updated in Leafygreen as well and removed from our end. */
+  'h1, h2, h3, h4, h5, h6': {
+    margin: 'unset',
+    fontFamily: fontFamilies.default,
+  },
+  /** h4, h5, h6 -> body 1 styling */
+  'h4, h5, h6': {
+    fontSize: '13px',
+  },
+  /** h1 -> h3 styling */
+  h1: {
+    fontSize: '24px',
+    lineHeight: '32px',
+    fontWeight: 'medium',
+  },
+  /** h2 -> subtitle styling */
+  h2: {
+    color: '#001E2B',
+    fontWeight: 'semibold',
+    fontSize: '18px',
+  },
+  /** h3 -> body 2 styling */
+  h3: {
+    fontSize: '16px',
+    fontWeight: 'semibold',
+  },
 });
 const messageFeedFixesStyles = css({ height: '100%' });
 const chatWindowFixesStyles = css({
@@ -49,6 +105,7 @@ const errorBannerWrapperStyles = css({
 export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   chat,
 }) => {
+  const darkMode = useDarkMode();
   const { messages, sendMessage, status, error, clearError } = useChat({
     chat,
   });
@@ -79,7 +136,11 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   return (
     <div
       data-testid="assistant-chat"
-      className={assistantChatFixesStyles}
+      className={cx(
+        assistantChatFixesStyles,
+        assistantChatStyles,
+        darkMode ? headerStyleDarkModeFixes : headerStyleLightModeFixes
+      )}
       style={{ height: '100%', width: '100%' }}
     >
       <LeafyGreenChatProvider variant={Variant.Compact}>

@@ -81,16 +81,16 @@
     "@leafygreen-ui/tooltip": "^13.0.13",
     "@leafygreen-ui/typography": "^20.0.2",
     "@lg-chat/avatar": "^7.0.0",
-    "@lg-chat/chat-disclaimer": "^4.0.6",
-    "@lg-chat/chat-window": "^4.1.1",
+    "@lg-chat/chat-disclaimer": "^4.0.7",
+    "@lg-chat/chat-window": "^4.1.2",
     "@lg-chat/fixed-chat-window": "^4.0.4",
-    "@lg-chat/input-bar": "^10.0.1",
+    "@lg-chat/input-bar": "^10.0.2",
     "@lg-chat/leafygreen-chat-provider": "^5.0.0",
-    "@lg-chat/lg-markdown": "^4.0.4",
+    "@lg-chat/lg-markdown": "^4.1.1",
     "@lg-chat/message": "^8.0.0",
-    "@lg-chat/message-actions": "^1.0.0",
+    "@lg-chat/message-actions": "^1.1.0",
     "@lg-chat/message-feed": "^7.0.0",
-    "@lg-chat/message-feedback": "^6.0.0",
+    "@lg-chat/message-feedback": "^7.0.0",
     "@lg-chat/message-prompts": "^4.0.3",
     "@lg-chat/message-rating": "^5.0.0",
     "@lg-chat/rich-links": "^3.1.1",

@@ -5,4 +5,4 @@ export const ItemActionButtonSize = {
 } as const;
 
 export type ItemActionButtonSize =
-  typeof ItemActionButtonSize[keyof typeof ItemActionButtonSize];
+  (typeof ItemActionButtonSize)[keyof typeof ItemActionButtonSize];
@@ -15,7 +15,7 @@ export const DisplayMode = {
   Embedded: 'embedded',
   Overlay: 'overlay',
 } as const;
-export type DisplayMode = typeof DisplayMode[keyof typeof DisplayMode];
+export type DisplayMode = (typeof DisplayMode)[keyof typeof DisplayMode];
 
 export interface DrawerProps
   extends Omit<HTMLElementProps<'dialog' | 'div'>, 'title'>,

@@ -7,4 +7,4 @@ export const GROUP_STEPS_MAP = new Map<GroupName, number>(
   GROUPS.map(({ id, steps }) => [id, steps])
 );
 
-export type GroupName = typeof GROUPS[number]['id'];
+export type GroupName = (typeof GROUPS)[number]['id'];
@@ -12,7 +12,7 @@ export const Variant = {
   Danger: ButtonVariant.Danger,
 } as const;
 
-export type Variant = typeof Variant[keyof typeof Variant];
+export type Variant = (typeof Variant)[keyof typeof Variant];
 
 type FormModalProps = React.ComponentProps<typeof Modal> & {
   variant?: Variant;

@@ -9,7 +9,7 @@ export const Variant = {
   Danger: ButtonVariant.Danger,
 } as const;
 
-export type Variant = typeof Variant[keyof typeof Variant];
+export type Variant = (typeof Variant)[keyof typeof Variant];
 
 const contentStyle = css({
   padding: `0 ${spacing[800]}px`,

@@ -12,7 +12,7 @@ export const Variant = {
   Danger: ButtonVariant.Danger,
 } as const;
 
-export type Variant = typeof Variant[keyof typeof Variant];
+export type Variant = (typeof Variant)[keyof typeof Variant];
 
 const headerStyle = css({
   padding: spacing[800],

@@ -160,6 +160,6 @@ export const PerformanceSignals = new Map(
   })
 ) as {
   get(
-    key: typeof SIGNALS[number]['id']
-  ): Pick<Signal, keyof typeof SIGNALS[number]>;
+    key: (typeof SIGNALS)[number]['id']
+  ): Pick<Signal, keyof (typeof SIGNALS)[number]>;
 };
@@ -3,7 +3,7 @@ import { mergeProps as _mergeProps } from '@react-aria/utils';
 
 export function mergeProps<T extends HTMLElement = HTMLElement>(
   ...props: React.HTMLProps<T>[]
-): typeof props[number] {
+): (typeof props)[number] {
   const propsWithRefs = props.filter((prop) => prop.ref);
   return {
     // This mergeProps method can handle callbacks and class names, but not refs

@@ -1434,7 +1434,7 @@ function isAtlasStreamsInstance(
 // https://github.com/10gen/mms/blob/de2a9c463cfe530efb8e2a0941033e8207b6cb11/server/src/main/com/xgen/cloud/services/clusterconnection/runtime/res/CustomCloseCodes.java
 const NonRetryableErrorCodes = [3000, 3003, 4004, 1008] as const;
 const NonRetryableErrorDescriptionFallbacks: {
-  [code in typeof NonRetryableErrorCodes[number]]: string;
+  [code in (typeof NonRetryableErrorCodes)[number]]: string;
 } = {
   3000: 'Unauthorized',
   3003: 'Forbidden',
@@ -1459,7 +1459,7 @@ function getDescriptionForNonRetryableError(error: Error): string {
     : NonRetryableErrorDescriptionFallbacks[
         Number(
           error.message.match(/code: (\d+),/)?.[1]
-        ) as typeof NonRetryableErrorCodes[number]
+        ) as (typeof NonRetryableErrorCodes)[number]
       ] ?? 'Unknown';
 }
 

@@ -188,7 +188,7 @@ const mockConnections = [
 ] as const;
 
 function connectionInfoById(
-  connectionId: typeof mockConnections[number]['id']
+  connectionId: (typeof mockConnections)[number]['id']
 ): ConnectionInfo {
   const connectionInfo = mockConnections.find(({ id }) => id === connectionId);
   if (!connectionInfo) {

@@ -13,4 +13,4 @@ export const DOCUMENTS_STATUSES_ALL = [
   DOCUMENTS_STATUS_FETCHED_CUSTOM,
   DOCUMENTS_STATUS_FETCHED_PAGINATION,
 ] as const;
-export type DOCUMENTS_STATUSES = typeof DOCUMENTS_STATUSES_ALL[number];
+export type DOCUMENTS_STATUSES = (typeof DOCUMENTS_STATUSES_ALL)[number];
@@ -113,8 +113,8 @@ const atlasCloudExternalArgs = [
 ] as const;
 
 type AtlasCloudExternalArgs =
-  | typeof atlasCloudExternalArgs[number]
-  | CamelCase<typeof atlasCloudExternalArgs[number]>;
+  | (typeof atlasCloudExternalArgs)[number]
+  | CamelCase<(typeof atlasCloudExternalArgs)[number]>;
 
 const atlasCloudSandboxArgs = [
   'atlas-cloud-sandbox-cloud-config',
@@ -126,8 +126,8 @@ const atlasCloudSandboxArgs = [
 ] as const;
 
 type AtlasCloudSandboxArgs =
-  | typeof atlasCloudSandboxArgs[number]
-  | CamelCase<typeof atlasCloudSandboxArgs[number]>;
+  | (typeof atlasCloudSandboxArgs)[number]
+  | CamelCase<(typeof atlasCloudSandboxArgs)[number]>;
 
 let testEnv: 'desktop' | 'web' | undefined;
 

@@ -72,7 +72,7 @@ describe('Connection Import / Export', function () {
 
   function verifyExportedFile(
     contents: any,
-    variant: typeof variants[number]
+    variant: (typeof variants)[number]
   ): any {
     expect(contents.type).to.equal('Compass Connections');
     expect(contents.version.$numberInt).to.equal('1');
@@ -101,7 +101,7 @@ describe('Connection Import / Export', function () {
   async function verifyAndRemoveImportedFavorite(
     browser: CompassBrowser,
     favoriteName: string,
-    variant: typeof variants[number]
+    variant: (typeof variants)[number]
   ) {
     await browser.selectConnection(favoriteName);
     await browser.clickVisible(Selectors.EditConnectionStringToggle);

@@ -18,7 +18,7 @@ const SCHEMA_FIELD_FIELDS = ['name', 'path', 'count', 'type'] as const;
 
 export type SchemaFieldSubset = Pick<
   SchemaField,
-  typeof SCHEMA_FIELD_FIELDS[number]
+  (typeof SCHEMA_FIELD_FIELDS)[number]
 >;
 
 /**