From 60ce6a1979bb2fa69f255ef7e131befacdc7031c Mon Sep 17 00:00:00 2001 From: gagik Date: Wed, 3 Sep 2025 10:48:38 +0200 Subject: [PATCH 1/2] 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. --- .../compass-assistant/src/assistant-chat.tsx | 83 ++++++++++++------- .../drawer-toolbar-layout-container.tsx | 1 + .../src/components/drawer/drawer/drawer.tsx | 12 ++- .../components/drawer/drawer/drawer.types.ts | 6 ++ .../drawer/drawer-section-components.tsx | 5 -- 5 files changed, 72 insertions(+), 35 deletions(-) diff --git a/packages/compass-assistant/src/assistant-chat.tsx b/packages/compass-assistant/src/assistant-chat.tsx index 5a509f1cd88..eaddf07a3b9 100644 --- a/packages/compass-assistant/src/assistant-chat.tsx +++ b/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 = ({ }, }); - // 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 = ({ > - - - This feature is powered by generative AI. See our{' '} - - FAQ - {' '} - for more information. Please review the outputs carefully. - {lgMessages.map((messageFields) => ( = ({ )} ))} - + + This feature is powered by generative AI. See our{' '} + + FAQ + {' '} + for more information. Please review the outputs carefully. + + {error && (
diff --git a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx b/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx index 056e911d8a7..5835483fc54 100644 --- a/packages/compass-components/src/components/drawer/drawer-toolbar-layout/drawer-toolbar-layout-container.tsx +++ b/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} diff --git a/packages/compass-components/src/components/drawer/drawer/drawer.tsx b/packages/compass-components/src/components/drawer/drawer/drawer.tsx index 75a02e8a373..98fdf1a85a0 100644 --- a/packages/compass-components/src/components/drawer/drawer/drawer.tsx +++ b/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( ( @@ -40,6 +45,7 @@ export const Drawer = forwardRef( onClose, open = false, title, + hasPadding = true, ...rest }, fwdRef @@ -168,7 +174,11 @@ export const Drawer = forwardRef( theme, })} > -
+
{/* Empty span element used to track if children container has scrolled down */} {} {children} diff --git a/packages/compass-components/src/components/drawer/drawer/drawer.types.ts b/packages/compass-components/src/components/drawer/drawer/drawer.types.ts index e6405df2968..e9124983b7b 100644 --- a/packages/compass-components/src/components/drawer/drawer/drawer.types.ts +++ b/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; } diff --git a/packages/compass-data-modeling/src/components/drawer/drawer-section-components.tsx b/packages/compass-data-modeling/src/components/drawer/drawer-section-components.tsx index 97cb324ade3..b7782c85ce1 100644 --- a/packages/compass-data-modeling/src/components/drawer/drawer-section-components.tsx +++ b/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], }); From b132e82ea17c723ea1191a6ad00aec7eed46b1d1 Mon Sep 17 00:00:00 2001 From: gagik Date: Wed, 3 Sep 2025 12:53:47 +0200 Subject: [PATCH 2/2] chore: remove padding fixes and use map reverse --- .../compass-assistant/src/assistant-chat.tsx | 40 ++++++------------- 1 file changed, 12 insertions(+), 28 deletions(-) diff --git a/packages/compass-assistant/src/assistant-chat.tsx b/packages/compass-assistant/src/assistant-chat.tsx index eaddf07a3b9..23303800b9c 100644 --- a/packages/compass-assistant/src/assistant-chat.tsx +++ b/packages/compass-assistant/src/assistant-chat.tsx @@ -57,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%', }, @@ -144,29 +140,18 @@ export const AssistantChat: React.FunctionComponent = ({ // 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 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) => { @@ -271,7 +256,6 @@ export const AssistantChat: React.FunctionComponent = ({