Skip to content

chore(compass-assistant): fix content overflow and resizing of drawer COMPASS-9882 COMPASS-9883 COMPASS-9888 #7373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 25, 2025
Merged

chore(compass-assistant): fix content overflow and resizing of drawer COMPASS-9882 COMPASS-9883 COMPASS-9888 #7373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eca8b2c
chore: remove dot
gagik Sep 24, 2025
2aed7de
chore: use break-word and width: 100 COMPASS-9882 COMPASS-9883
gagik Sep 24, 2025
d15d664
chore: minimize better on small sizing
gagik Sep 24, 2025
561b2fd
chore: clear error on chat clear
gagik Sep 24, 2025
ba989a5
chore: fix wrapping on small screens
gagik Sep 25, 2025
33d9047
chore: apply nowrap to sources
gagik Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions packages/compass-assistant/src/compass-assistant-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,20 @@ const assistantTitleStyles = css({
justifyContent: 'space-between',
});

const assistantTitleTextWrapperStyles = css({
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
transition: 'transform 0.16s ease-in',

// Shrink the title text and badge when the drawer is narrow
'@container (width < 320px)': {
'&': {
transform: 'scale(0.8) translateX(-10%)',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😘

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I should note that translate -10% is a bit of a hack but at least it's relative to content

},
},
});

const assistantTitleTextStyles = css({
marginRight: spacing[200],
});
Expand Down Expand Up @@ -55,7 +69,7 @@ export const CompassAssistantDrawer: React.FunctionComponent<{
'data-testid': 'assistant-confirm-clear-chat-modal',
});
if (confirmed) {
clearChat?.();
await clearChat?.();
}
}, [clearChat]);

Expand All @@ -74,7 +88,7 @@ export const CompassAssistantDrawer: React.FunctionComponent<{
id={ASSISTANT_DRAWER_ID}
title={
<div className={assistantTitleStyles}>
<div>
<div className={assistantTitleTextWrapperStyles}>
<span className={assistantTitleTextStyles}>MongoDB Assistant</span>
<Badge variant="blue">Preview</Badge>
</div>
Expand Down
8 changes: 5 additions & 3 deletions packages/compass-assistant/src/compass-assistant-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ type AssistantActionsContextType = {
connectionInfo: ConnectionInfo;
error: Error;
}) => void;
clearChat?: () => void;
clearChat?: () => Promise<void>;
tellMoreAboutInsight?: (context: ProactiveInsightsContext) => void;
ensureOptInAndSend?: (
message: SendMessage,
Expand All @@ -98,7 +98,7 @@ export const AssistantActionsContext =
interpretExplainPlan: () => {},
interpretConnectionError: () => {},
tellMoreAboutInsight: () => {},
clearChat: () => {},
clearChat: async () => {},
ensureOptInAndSend: async () => {},
});

Expand Down Expand Up @@ -215,7 +215,9 @@ export const AssistantProvider: React.FunctionComponent<
'performance insights',
buildProactiveInsightsPrompt
),
clearChat: () => {
clearChat: async () => {
await chat.stop();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

drive-by, we do not want to continue streaming after clearing

chat.clearError();
chat.messages = chat.messages.filter(
(message) => message.metadata?.isPermanent
);
Expand Down
19 changes: 17 additions & 2 deletions packages/compass-assistant/src/components/assistant-chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ const messageFeedFixesStyles = css({
display: 'flex',
flexDirection: 'column-reverse',
overflowY: 'auto',
width: '100%',
wordBreak: 'break-word',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we should move this to much more targeted elements so that we don't have to turn it off again on things one by one as we find them. Like make sure it is only message text and code blocks?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's one of the things that's actually better applied globally and then we set exceptions accordingly. In most cases we'd prefer breaking instead of overflowing with a scrollbar for example

flex: 1,
padding: spacing[400],
gap: spacing[400],
Expand Down Expand Up @@ -161,6 +163,12 @@ const disclaimerTextStyles = css({
fontSize: 'inherit',
},
});
// On small screens, many components end up breaking words which we don't want.
// This is a general temporary fix for all components that we want to prevent from wrapping.
const noWrapFixesStyles = css({
whiteSpace: 'nowrap',
});

/** TODO(COMPASS-9751): This should be handled by Leafygreen's disclaimers update */
const inputBarStyleFixes = css({
width: '100%',
Expand Down Expand Up @@ -400,9 +408,15 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
onSubmitFeedback={(event, state) =>
handleFeedback({ message, state })
}
className={noWrapFixesStyles}
/>
)}
{sources.length > 0 && (
<Message.Links
className={noWrapFixesStyles}
links={sources}
/>
)}
{sources.length > 0 && <Message.Links links={sources} />}
</Message>
);
})}
Expand All @@ -423,7 +437,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
size="large"
style={{ color: palette.green.dark1 }}
/>
<span>MongoDB Assistant.</span>
<span>MongoDB Assistant</span>
</h4>
<p className={welcomeTextStyles}>
Welcome to the MongoDB Assistant!
Expand All @@ -446,6 +460,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
<DisclaimerText className={disclaimerTextStyles}>
AI can make mistakes. Review for accuracy.{' '}
<Link
className={noWrapFixesStyles}
hideExternalIcon={false}
href={GEN_AI_FAQ_LINK}
target="_blank"
Expand Down
3 changes: 3 additions & 0 deletions packages/compass-components/src/components/drawer-portal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,9 @@ const drawerLayoutFixesStyles = css({
// Anchor is currently rendered
borderTop: 'none',
borderBottom: 'none',

// Settings inline-size allows us to use @container queries inside the drawer section.
containerType: 'inline-size',
},

// drawer content > title content
Expand Down
Loading