diff --git a/packages/compass-assistant/src/compass-assistant-provider.spec.tsx b/packages/compass-assistant/src/compass-assistant-provider.spec.tsx index 1acd65e5ed1..2ed08d7d0a8 100644 --- a/packages/compass-assistant/src/compass-assistant-provider.spec.tsx +++ b/packages/compass-assistant/src/compass-assistant-provider.spec.tsx @@ -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'); @@ -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')); @@ -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')); diff --git a/packages/compass-assistant/src/components/assistant-chat.spec.tsx b/packages/compass-assistant/src/components/assistant-chat.spec.tsx index ad33c41f369..64102372eb0 100644 --- a/packages/compass-assistant/src/components/assistant-chat.spec.tsx +++ b/packages/compass-assistant/src/components/assistant-chat.spec.tsx @@ -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; @@ -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?'); @@ -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 () { @@ -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' @@ -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' @@ -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?'); @@ -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'); @@ -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')); @@ -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 diff --git a/packages/compass-assistant/src/components/assistant-chat.tsx b/packages/compass-assistant/src/components/assistant-chat.tsx index 4d9d32ccef9..0a6e025caec 100644 --- a/packages/compass-assistant/src/components/assistant-chat.tsx +++ b/packages/compass-assistant/src/components/assistant-chat.tsx @@ -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) { @@ -345,17 +353,6 @@ export const AssistantChat: React.FunctionComponent = ({ ); })} - - This feature is powered by generative AI. See our{' '} - - FAQ - {' '} - for more information. Please review the outputs carefully. - {error && (
@@ -371,14 +368,26 @@ export const AssistantChat: React.FunctionComponent = ({ documentation right in your window.
)} - +
+ +
+ + AI can make mistakes. Review for accuracy.{' '} + + Learn more + +