chore(compass-assistant): add disclaimer, loading and welcome text COMPASS-9754 (#7260)

Author: gagik

packages/compass-assistant/src/assistant-chat.spec.tsx

@@ -29,8 +29,15 @@ describe('AssistantChat', function () {
     },
   ];
 
-  function renderWithChat(messages: AssistantMessage[]) {
-    const chat = createMockChat({ messages });
+  function renderWithChat(
+    messages: AssistantMessage[],
+    {
+      status,
+    }: {
+      status?: 'submitted' | 'streaming';
+    } = {}
+  ) {
+    const chat = createMockChat({ messages, status });
     const result = render(<AssistantChat chat={chat} />);
     return {
       result,
@@ -63,6 +70,34 @@ describe('AssistantChat', function () {
     expect(inputField.value).to.equal('What is MongoDB?');
   });
 
+  it('displays the disclaimer and welcome text', function () {
+    renderWithChat([]);
+    expect(screen.getByText(/This feature is powered by generative AI/)).to
+      .exist;
+    expect(screen.getByText(/Please review the outputs carefully/)).to.exist;
+  });
+
+  it('displays the welcome text when there are no messages', function () {
+    renderWithChat([]);
+    expect(screen.getByText(/Welcome to your 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
+      .exist;
+  });
+
+  it('displays loading state when chat status is submitted', function () {
+    renderWithChat([], { status: 'submitted' });
+    expect(screen.getByText(/MongoDB Assistant is thinking/)).to.exist;
+  });
+
+  it('does not display loading in all other cases', function () {
+    renderWithChat(mockMessages, { status: 'streaming' });
+    expect(screen.queryByText(/MongoDB Assistant is thinking/)).to.not.exist;
+  });
+
   it('send button is disabled when input is empty', function () {
     renderWithChat([]);
 

packages/compass-assistant/src/assistant-chat.tsx

@@ -16,16 +16,21 @@ import {
   fontFamilies,
   palette,
   useDarkMode,
+  LgChatChatDisclaimer,
+  Link,
 } from '@mongodb-js/compass-components';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
 
+const { DisclaimerText } = LgChatChatDisclaimer;
 const { ChatWindow } = LgChatChatWindow;
 const { LeafyGreenChatProvider, Variant } = LgChatLeafygreenChatProvider;
 const { Message } = LgChatMessage;
 const { MessageFeed } = LgChatMessageFeed;
 const { MessageActions } = LgChatMessageActions;
 const { InputBar } = LgChatInputBar;
 
+const GEN_AI_FAQ_LINK = 'https://www.mongodb.com/docs/generative-ai-faq/';
+
 interface AssistantChatProps {
   chat: Chat<AssistantMessage>;
 }
@@ -54,6 +59,9 @@ const headerStyleLightModeFixes = css({
 
 // TODO(COMPASS-9751): These are temporary patches to make the Assistant chat take the entire
 // width and height of the drawer since Leafygreen doesn't support this yet.
+const inputBarFixesStyles = css({
+  marginBottom: -spacing[400],
+});
 const assistantChatFixesStyles = css({
   // Negative margin to patch the padding of the drawer.
   marginTop: -spacing[400],
@@ -95,6 +103,9 @@ const messageFeedFixesStyles = css({ height: '100%' });
 const chatWindowFixesStyles = css({
   height: '100%',
 });
+const welcomeMessageStyles = css({
+  padding: spacing[400],
+});
 
 function makeErrorMessage(message: string) {
   message = message || 'An error occurred';
@@ -191,6 +202,17 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
             data-testid="assistant-chat-messages"
             className={messageFeedFixesStyles}
           >
+            <DisclaimerText>
+              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>
             {lgMessages.map((messageFields) => (
               <Message
                 key={messageFields.id}
@@ -206,13 +228,6 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
                 )}
               </Message>
             ))}
-            {status === 'submitted' && (
-              <Message
-                id="loading"
-                messageBody="Thinking..."
-                isSender={false}
-              />
-            )}
           </MessageFeed>
           {error && (
             <div className={errorBannerWrapperStyles}>
@@ -221,9 +236,18 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
               </Banner>
             </div>
           )}
+          {lgMessages.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.
+            </div>
+          )}
           <InputBar
             data-testid="assistant-chat-input"
             onMessageSend={handleMessageSend}
+            className={inputBarFixesStyles}
+            state={status === 'submitted' ? 'loading' : undefined}
             textareaProps={{
               placeholder: 'Ask MongoDB Assistant a question',
             }}

packages/compass-assistant/test/utils.tsx

@@ -4,13 +4,18 @@ import type { AssistantMessage } from '../src/compass-assistant-provider';
 
 export const createMockChat = ({
   messages,
+  status,
 }: {
   messages: AssistantMessage[];
+  status?: 'submitted' | 'streaming';
 }) => {
   const newChat = new Chat<AssistantMessage>({
     messages,
   });
   sinon.replace(newChat, 'sendMessage', sinon.stub());
+  if (status) {
+    sinon.replaceGetter(newChat, 'status', () => status);
+  }
   return newChat as unknown as Chat<AssistantMessage> & {
     sendMessage: sinon.SinonStub;
   };