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

Author: gagik

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'));

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

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<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}>
@@ -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.{' '}
+            <Link
+              hideExternalIcon={false}
+              href={GEN_AI_FAQ_LINK}
+              target="_blank"
+            >
+              Learn more
+            </Link>
+          </DisclaimerText>
         </ChatWindow>
       </LeafyGreenChatProvider>
     </div>