diff --git a/packages/compass-assistant/src/assistant-chat.tsx b/packages/compass-assistant/src/assistant-chat.tsx index 5a509f1cd88..23303800b9c 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; @@ -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 = ({ }, }); - // 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 = ({ > - - - 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 && (
@@ -246,7 +256,6 @@ export const AssistantChat: React.FunctionComponent = ({ {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], });