From 3b3c8a2eecd3368193f8c258ee895498320b7f13 Mon Sep 17 00:00:00 2001 From: gagik Date: Mon, 1 Sep 2025 12:50:08 +0200 Subject: [PATCH 1/4] chore(compass-assistant): add disclaimer text COMPASS-9754 --- .../src/assistant-chat.spec.tsx | 7 +++++++ .../compass-assistant/src/assistant-chat.tsx | 16 ++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/packages/compass-assistant/src/assistant-chat.spec.tsx b/packages/compass-assistant/src/assistant-chat.spec.tsx index 8f0714ef95e..0f882e72308 100644 --- a/packages/compass-assistant/src/assistant-chat.spec.tsx +++ b/packages/compass-assistant/src/assistant-chat.spec.tsx @@ -63,6 +63,13 @@ describe('AssistantChat', function () { expect(inputField.value).to.equal('What is MongoDB?'); }); + it('displays the disclaimer 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('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..4076965cdc7 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; } @@ -191,6 +196,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) => ( Date: Mon, 1 Sep 2025 16:41:34 +0200 Subject: [PATCH 2/4] chore: add welcome message --- .../compass-assistant/src/assistant-chat.spec.tsx | 3 ++- packages/compass-assistant/src/assistant-chat.tsx | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/compass-assistant/src/assistant-chat.spec.tsx b/packages/compass-assistant/src/assistant-chat.spec.tsx index 0f882e72308..cf8fe5929de 100644 --- a/packages/compass-assistant/src/assistant-chat.spec.tsx +++ b/packages/compass-assistant/src/assistant-chat.spec.tsx @@ -63,11 +63,12 @@ describe('AssistantChat', function () { expect(inputField.value).to.equal('What is MongoDB?'); }); - it('displays the disclaimer text', function () { + 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; + expect(screen.getByText(/Welcome to your MongoDB Assistant./)).to.exist; }); it('send button is disabled when input is empty', function () { diff --git a/packages/compass-assistant/src/assistant-chat.tsx b/packages/compass-assistant/src/assistant-chat.tsx index 4076965cdc7..a5b2cde4ddb 100644 --- a/packages/compass-assistant/src/assistant-chat.tsx +++ b/packages/compass-assistant/src/assistant-chat.tsx @@ -59,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], @@ -100,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'; @@ -237,9 +243,17 @@ 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. +
+ )} Date: Mon, 1 Sep 2025 16:42:19 +0200 Subject: [PATCH 3/4] chore: add tests --- packages/compass-assistant/src/assistant-chat.spec.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/compass-assistant/src/assistant-chat.spec.tsx b/packages/compass-assistant/src/assistant-chat.spec.tsx index cf8fe5929de..b1c5ed08c41 100644 --- a/packages/compass-assistant/src/assistant-chat.spec.tsx +++ b/packages/compass-assistant/src/assistant-chat.spec.tsx @@ -68,9 +68,19 @@ describe('AssistantChat', function () { 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([]); From 8bb6049a5ecffcb93dabf102931ce3510423f440 Mon Sep 17 00:00:00 2001 From: gagik Date: Tue, 2 Sep 2025 11:07:19 +0200 Subject: [PATCH 4/4] chore: add better LG loading state --- .../src/assistant-chat.spec.tsx | 21 +++++++++++++++++-- .../compass-assistant/src/assistant-chat.tsx | 8 +------ packages/compass-assistant/test/utils.tsx | 5 +++++ 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/compass-assistant/src/assistant-chat.spec.tsx b/packages/compass-assistant/src/assistant-chat.spec.tsx index b1c5ed08c41..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, @@ -81,6 +88,16 @@ describe('AssistantChat', function () { .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 a5b2cde4ddb..5a509f1cd88 100644 --- a/packages/compass-assistant/src/assistant-chat.tsx +++ b/packages/compass-assistant/src/assistant-chat.tsx @@ -228,13 +228,6 @@ export const AssistantChat: React.FunctionComponent = ({ )} ))} - {status === 'submitted' && ( - - )} {error && (
@@ -254,6 +247,7 @@ export const AssistantChat: React.FunctionComponent = ({ data-testid="assistant-chat-input" onMessageSend={handleMessageSend} className={inputBarFixesStyles} + state={status === 'submitted' ? 'loading' : undefined} textareaProps={{ placeholder: 'Ask MongoDB Assistant a question', }} diff --git a/packages/compass-assistant/test/utils.tsx b/packages/compass-assistant/test/utils.tsx index e01ac18c94c..211bcc4fd2a 100644 --- a/packages/compass-assistant/test/utils.tsx +++ b/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({ messages, }); sinon.replace(newChat, 'sendMessage', sinon.stub()); + if (status) { + sinon.replaceGetter(newChat, 'status', () => status); + } return newChat as unknown as Chat & { sendMessage: sinon.SinonStub; };