Skip to content

fix(compass-assistant): make the chat markdown heading styles consistent between Compass and DE COMPASS-9872 #7359

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 2 commits into from
Sep 23, 2025
Merged

fix(compass-assistant): make the chat markdown heading styles consistent between Compass and DE COMPASS-9872 #7359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2bd8059
make the chat markdown heading styles consistent between Compass and DE
lerouxb Sep 23, 2025
43ef5ce
fix the welcome message and learn more link sizing
lerouxb Sep 23, 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
4 changes: 2 additions & 2 deletions packages/compass-assistant/src/components/assistant-chat.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,12 @@ describe('AssistantChat', function () {

it('displays the welcome text when there are no messages', function () {
renderWithChat([]);
expect(screen.getByText(/Welcome to your MongoDB Assistant./)).to.exist;
expect(screen.getByText(/Welcome to the MongoDB Assistant!/)).to.exist;
});

it('does not display the welcome text when there are messages', function () {
renderWithChat(mockMessages);
expect(screen.queryByText(/Welcome to your MongoDB Assistant./)).to.not
expect(screen.queryByText(/Welcome to the MongoDB Assistant!/)).to.not
.exist;
});

Expand Down
38 changes: 34 additions & 4 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 @@ -17,6 +17,7 @@ import {
useDarkMode,
LgChatChatDisclaimer,
Link,
Icon,
} from '@mongodb-js/compass-components';
import { ConfirmationMessage } from './confirmation-message';
import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
Expand Down Expand Up @@ -79,6 +80,8 @@ const assistantChatFixesStyles = css({
fontSize: '13px',
lineHeight: '15px',
marginTop: '4px',
// DE has reset css that sets all font weights to 400
fontWeight: 700,
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we also tackle blockquotes while we're at it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Can't get them to work. They are calculated as height: 60px no matter what I do. Will probably address in a separate PR.

},
/** h1 -> h3 styling */
h1: {
Expand Down Expand Up @@ -130,13 +133,16 @@ const disclaimerTextStyles = css({
paddingBottom: spacing[400],
paddingLeft: spacing[400],
paddingRight: spacing[400],
a: {
fontSize: 'inherit',
},
});
/** TODO(COMPASS-9751): This should be handled by Leafygreen's disclaimers update */
const inputBarStyleFixes = css({
width: '100%',
paddingLeft: spacing[400],
paddingRight: spacing[400],
paddingBottom: spacing[400],
paddingBottom: spacing[100],
});

function makeErrorMessage(message: string) {
Expand All @@ -154,6 +160,19 @@ const messagesWrapStyles = css({
gap: spacing[400],
});

const welcomeHeadingStyles = css({
display: 'flex',
alignItems: 'center',
gap: '6px',
span: {
fontWeight: 600,
lineHeight: '20px',
},
});
const welcomeTextStyles = css({
margin: `${spacing[100]}px 0 0 0`,
});

export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
chat,
hasNonGenuineConnections,
Expand Down Expand Up @@ -375,9 +394,20 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
)}
{messages.length === 0 && (
<div className={welcomeMessageStyles}>
<h4>Welcome to your MongoDB Assistant.</h4>
Ask any question about MongoDB to receive expert guidance and
documentation right in your window.
<h4 className={welcomeHeadingStyles}>
<Icon
glyph="Sparkle"
size="large"
style={{ color: palette.green.dark1 }}
/>
<span>MongoDB Assistant.</span>
</h4>
<p className={welcomeTextStyles}>
Welcome to the MongoDB Assistant!
<br />
Ask any question about MongoDB to receive expert guidance and
documentation.
</p>
</div>
)}
<div className={inputBarStyleFixes}>
Expand Down
Loading