chore(compass-assistant): bump lg-chat packages and apply patches

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

@@ -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(

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

@@ -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}>

packages/compass-components/package.json

@@ -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",

packages/compass-components/src/components/actions/constants.tsx

@@ -5,4 +5,4 @@ export const ItemActionButtonSize = {
 } as const;
 
 export type ItemActionButtonSize =
-  typeof ItemActionButtonSize[keyof typeof ItemActionButtonSize];
+  (typeof ItemActionButtonSize)[keyof typeof ItemActionButtonSize];

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

@@ -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'>,

packages/compass-components/src/components/guide-cue/guide-cue-groups.ts

@@ -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'];

packages/compass-components/src/components/modals/form-modal.tsx

@@ -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;

packages/compass-components/src/components/modals/modal-body.tsx

@@ -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`,

packages/compass-components/src/components/modals/modal-header.tsx

@@ -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],

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

@@ -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]>;
 };

packages/compass-components/src/utils/merge-props.ts

@@ -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

packages/data-service/test/helpers.ts

@@ -20,7 +20,7 @@ const ALLOWED_COMMANDS = [
 
 export type ClientMockOptions = {
   hosts: [{ host: string; port: number }];
-  commands: Partial<Record<typeof ALLOWED_COMMANDS[number], unknown>>;
+  commands: Partial<Record<(typeof ALLOWED_COMMANDS)[number], unknown>>;
   collections: Record<string, string[] | Error>;
   searchIndexes: Record<string, Record<string, SearchIndex[] | Error>>;
   clientOptions: Record<string, unknown>;
@@ -41,7 +41,7 @@ export function createMongoClientMock({
   const db = {
     command(spec: Document) {
       const cmd = Object.keys(spec).find((key) =>
-        ALLOWED_COMMANDS.includes(key as typeof ALLOWED_COMMANDS[number])
+        ALLOWED_COMMANDS.includes(key as (typeof ALLOWED_COMMANDS)[number])
       );
       if (cmd && commands[cmd]) {
         const command = commands[cmd];

packages/hadron-document/src/document-events.ts

@@ -22,4 +22,4 @@ export const DocumentEvents = {
 } as const;
 
 export type DocumentEventsType =
-  typeof DocumentEvents[keyof typeof DocumentEvents];
+  (typeof DocumentEvents)[keyof typeof DocumentEvents];

packages/hadron-document/src/element-events.ts

@@ -15,4 +15,4 @@ export const ElementEvents = {
 } as const;
 
 export type ElementEventsType =
-  typeof ElementEvents[keyof typeof ElementEvents];
+  (typeof ElementEvents)[keyof typeof ElementEvents];