Skip to content

chore(compass-assistant): update the placeholder text and disclaimer COMPASS-9836 #7333

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 3 commits into from
Sep 19, 2025
Merged

chore(compass-assistant): update the placeholder text and disclaimer COMPASS-9836 #7333

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3bce39e
chore: update text
gagik Sep 17, 2025
cafd1c4
chore: fix text
gagik Sep 17, 2025
87845e4
Merge branch 'main' into gagik/assist-fixes
gagik Sep 18, 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
8 changes: 3 additions & 5 deletions packages/compass-assistant/src/compass-assistant-provider.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,9 +390,7 @@ describe('CompassAssistantProvider', function () {

await renderOpenAssistantDrawer({ chat: mockChat });

const input = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
);
const input = screen.getByPlaceholderText('Ask a question');
const sendButton = screen.getByLabelText('Send message');

userEvent.type(input, 'Hello assistant');
Expand Down Expand Up @@ -430,7 +428,7 @@ describe('CompassAssistantProvider', function () {
await renderOpenAssistantDrawer({ chat: mockChat });

userEvent.type(
screen.getByPlaceholderText('Ask MongoDB Assistant a question'),
screen.getByPlaceholderText('Ask a question'),
'Hello assistant!'
);
userEvent.click(screen.getByLabelText('Send message'));
Expand Down Expand Up @@ -473,7 +471,7 @@ describe('CompassAssistantProvider', function () {
await renderOpenAssistantDrawer({ chat, atlastAiService });

userEvent.type(
screen.getByPlaceholderText('Ask MongoDB Assistant a question'),
screen.getByPlaceholderText('Ask a question'),
'Hello assistant!'
);
userEvent.click(screen.getByLabelText('Send message'));
Expand Down
31 changes: 9 additions & 22 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 @@ -85,9 +85,7 @@ describe('AssistantChat', function () {
it('renders input field and send button', function () {
renderWithChat([]);

const inputField = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
);
const inputField = screen.getByPlaceholderText('Ask a question');
const sendButton = screen.getByLabelText('Send message');

expect(inputField).to.exist;
Expand All @@ -99,7 +97,7 @@ describe('AssistantChat', function () {

// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
const inputField = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
'Ask a question'
) as HTMLTextAreaElement;

userEvent.type(inputField, 'What is MongoDB?');
Expand All @@ -109,9 +107,8 @@ describe('AssistantChat', function () {

it('displays the disclaimer and welcome text', function () {
renderWithChat([]);
expect(screen.getByText(/This feature is powered by generative AI/)).to
expect(screen.getByText(/AI can make mistakes. Review for accuracy./)).to
.exist;
expect(screen.getByText(/Please review the outputs carefully/)).to.exist;
});

it('displays the welcome text when there are no messages', function () {
Expand Down Expand Up @@ -149,9 +146,7 @@ describe('AssistantChat', function () {
it('send button is enabled when input has text', function () {
renderWithChat([]);

const inputField = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
);
const inputField = screen.getByPlaceholderText('Ask a question');
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
const sendButton = screen.getByLabelText(
'Send message'
Expand All @@ -165,9 +160,7 @@ describe('AssistantChat', function () {
it('send button is disabled for whitespace-only input', async function () {
renderWithChat([]);

const inputField = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
);
const inputField = screen.getByPlaceholderText('Ask a question');
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
const sendButton = screen.getByLabelText(
'Send message'
Expand Down Expand Up @@ -246,9 +239,7 @@ describe('AssistantChat', function () {
it('calls sendMessage when form is submitted', async function () {
const { result, ensureOptInAndSendStub } = renderWithChat([]);
const { track } = result;
const inputField = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
);
const inputField = screen.getByPlaceholderText('Ask a question');
const sendButton = screen.getByLabelText('Send message');

userEvent.type(inputField, 'What is aggregation?');
Expand All @@ -268,7 +259,7 @@ describe('AssistantChat', function () {

// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
const inputField = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
'Ask a question'
) as HTMLTextAreaElement;

userEvent.type(inputField, 'Test message');
Expand All @@ -282,9 +273,7 @@ describe('AssistantChat', function () {
const { ensureOptInAndSendStub, result } = renderWithChat([]);
const { track } = result;

const inputField = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
);
const inputField = screen.getByPlaceholderText('Ask a question');

userEvent.type(inputField, ' What is sharding? ');
userEvent.click(screen.getByLabelText('Send message'));
Expand All @@ -301,9 +290,7 @@ describe('AssistantChat', function () {
it('does not call ensureOptInAndSend when input is empty or whitespace-only', function () {
const { ensureOptInAndSendStub } = renderWithChat([]);

const inputField = screen.getByPlaceholderText(
'Ask MongoDB Assistant a question'
);
const inputField = screen.getByPlaceholderText('Ask a question');
const chatForm = screen.getByTestId('assistant-chat-input');

// Test empty input
Expand Down
51 changes: 30 additions & 21 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 @@ -127,8 +127,16 @@ const welcomeMessageStyles = css({
paddingRight: spacing[400],
});
const disclaimerTextStyles = css({
marginTop: spacing[400],
marginBottom: spacing[400],
paddingBottom: spacing[400],
paddingLeft: spacing[400],
paddingRight: spacing[400],
});
/** 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],
});

function makeErrorMessage(message: string) {
Expand Down Expand Up @@ -345,17 +353,6 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
);
})}
</div>
<DisclaimerText className={disclaimerTextStyles}>
This feature is powered by generative AI. See our{' '}
<Link
hideExternalIcon={false}
href={GEN_AI_FAQ_LINK}
target="_blank"
>
FAQ
</Link>{' '}
for more information. Please review the outputs carefully.
</DisclaimerText>
</div>
{error && (
<div className={errorBannerWrapperStyles}>
Expand All @@ -371,14 +368,26 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
documentation right in your window.
</div>
)}
<InputBar
data-testid="assistant-chat-input"
onMessageSend={handleMessageSend}
state={status === 'submitted' ? 'loading' : undefined}
textareaProps={{
placeholder: 'Ask MongoDB Assistant a question',
}}
/>
<div className={inputBarStyleFixes}>
<InputBar
data-testid="assistant-chat-input"
onMessageSend={handleMessageSend}
state={status === 'submitted' ? 'loading' : undefined}
textareaProps={{
placeholder: 'Ask a question',
}}
/>
</div>
<DisclaimerText className={disclaimerTextStyles}>
AI can make mistakes. Review for accuracy. See our{' '}
<Link
hideExternalIcon={false}
href={GEN_AI_FAQ_LINK}
target="_blank"
>
Learn more
</Link>
</DisclaimerText>
</ChatWindow>
</LeafyGreenChatProvider>
</div>
Expand Down
Loading