diff --git a/packages/compass-assistant/src/assistant-chat.spec.tsx b/packages/compass-assistant/src/assistant-chat.spec.tsx index 8f0714ef95e..7fc97e6986b 100644 --- a/packages/compass-assistant/src/assistant-chat.spec.tsx +++ b/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(); 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([]); diff --git a/packages/compass-assistant/src/assistant-chat.tsx b/packages/compass-assistant/src/assistant-chat.tsx index 4f5c67eaf0c..5a509f1cd88 100644 --- a/packages/compass-assistant/src/assistant-chat.tsx +++ b/packages/compass-assistant/src/assistant-chat.tsx @@ -16,9 +16,12 @@ 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; @@ -26,6 +29,8 @@ 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; } @@ -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 = ({ data-testid="assistant-chat-messages" className={messageFeedFixesStyles} > + + This feature is powered by generative AI. See our{' '} + + FAQ + {' '} + for more information. Please review the outputs carefully. + {lgMessages.map((messageFields) => ( = ({ )} ))} - {status === 'submitted' && ( - - )} {error && (
@@ -221,9 +236,18 @@ export const AssistantChat: React.FunctionComponent = ({
)} + {lgMessages.length === 0 && ( +
+

Welcome to your MongoDB Assistant.

+ Ask any question about MongoDB to receive expert guidance and + documentation right in your window. +
+ )} { const newChat = new Chat({ messages, }); sinon.replace(newChat, 'sendMessage', sinon.stub()); + if (status) { + sinon.replaceGetter(newChat, 'status', () => status); + } return newChat as unknown as Chat & { sendMessage: sinon.SinonStub; };