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

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

@@ -63,6 +63,24 @@ 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('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}
@@ -221,9 +243,17 @@ 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}
             textareaProps={{
               placeholder: 'Ask MongoDB Assistant a question',
             }}