Merge branch 'main' of github.com:mongodb-js/compass into CLOUDP-333847

Author: jcobis

THIRD-PARTY-NOTICES.md

@@ -1,5 +1,5 @@
 The following third-party software is used by and included in **Mongodb Compass**.
-This document was automatically generated on Thu Aug 14 2025.
+This document was automatically generated on Fri Aug 15 2025.
 
 ## List of dependencies
 
@@ -353,7 +353,7 @@ This document was automatically generated on Thu Aug 14 2025.
 | **[mongodb-query-parser](#15068a4e6d825438a4e6d365a3566f58762ef216402070179557503b775f3ff4)**                               | 4.3.0        | Apache-2.0                          |
 | **[mongodb-redact](#6e144657052b14482fcf7c46948b75815e885a6a92d9770bf29d479ba3188617)**                                     | 1.1.8        | Apache-2.0                          |
 | **[mongodb-schema](#dc7b6e03e707abdf4c8e28a57ca2df873ec3a9fc74b1822a899a0f7eb0cc4bd5)**                                     | 12.6.2       | Apache-2.0                          |
-| **[mongodb](#3145a15c2928eed9669f2e1bb6298bfbf2f03c22b2b70a1579b089223058930a)**                                            | 6.18.0       | Apache-2.0                          |
+| **[mongodb](#e9259a133815c37f78beb53d1e96543d3af8114834d306de35d623db235b3cca)**                                            | 6.17.0       | Apache-2.0                          |
 | **[ms](#0a987b2f79ff37005e452a5afa7dacd3042061a7077054d2ba9cabacd88506d2)**                                                 | 2.1.2        | MIT                                 |
 | **[ms](#2083576c5af8054927640b4788059806d07e250a26066c9ccb2d928394fb9226)**                                                 | 2.1.3        | MIT                                 |
 | **[napi-build-utils](#4446cbf58ee41dfc4c30b35af90a053cab7e15fcc9736c67a43265eeef531372)**                                   | 2.0.0        | MIT                                 |
@@ -24446,9 +24446,9 @@ License files:
          See the License for the specific language governing permissions and
          limitations under the License.
 
-<a id="3145a15c2928eed9669f2e1bb6298bfbf2f03c22b2b70a1579b089223058930a"></a>
+<a id="e9259a133815c37f78beb53d1e96543d3af8114834d306de35d623db235b3cca"></a>
 
-### [mongodb](https://www.npmjs.com/package/mongodb) (version 6.18.0)
+### [mongodb](https://www.npmjs.com/package/mongodb) (version 6.17.0)
 
 License tags: Apache-2.0
 

docs/tracking-plan.md

@@ -6,7 +6,7 @@
 > the tracking plan for the specific Compass version you can use the following
 > URL: `https://github.com/mongodb-js/compass/blob/<compass version>/docs/tracking-plan.md`
 
-Generated on Thu, Aug 14, 2025
+Generated on Fri, Aug 15, 2025
 
 ## Table of Contents
 

package-lock.json

@@ -3,16 +3,17 @@ import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
 import { AssistantChat } from './assistant-chat';
 import { expect } from 'chai';
 import type { UIMessage } from './@ai-sdk/react/use-chat';
+import { createMockChat } from '../test/utils';
 
 describe('AssistantChat', function () {
   const mockMessages: UIMessage[] = [
     {
-      id: '1',
+      id: 'user',
       role: 'user',
       parts: [{ type: 'text', text: 'Hello, MongoDB Assistant!' }],
     },
     {
-      id: '2',
+      id: 'assistant',
       role: 'assistant',
       parts: [
         {
@@ -23,8 +24,16 @@ describe('AssistantChat', function () {
     },
   ];
 
+  function renderWithChat(messages: UIMessage[]) {
+    const chat = createMockChat({ messages });
+    return {
+      result: render(<AssistantChat chat={chat} />),
+      chat,
+    };
+  }
+
   it('renders input field and send button', function () {
-    render(<AssistantChat messages={[]} />);
+    renderWithChat([]);
 
     const inputField = screen.getByTestId('assistant-chat-input');
     const sendButton = screen.getByTestId('assistant-chat-send-button');
@@ -34,7 +43,7 @@ describe('AssistantChat', function () {
   });
 
   it('input field accepts text input', function () {
-    render(<AssistantChat messages={[]} />);
+    renderWithChat([]);
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     const inputField = screen.getByTestId(
@@ -47,7 +56,7 @@ describe('AssistantChat', function () {
   });
 
   it('send button is disabled when input is empty', function () {
-    render(<AssistantChat messages={[]} />);
+    renderWithChat([]);
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     const sendButton = screen.getByTestId(
@@ -58,7 +67,7 @@ describe('AssistantChat', function () {
   });
 
   it('send button is enabled when input has text', function () {
-    render(<AssistantChat messages={[]} />);
+    renderWithChat([]);
 
     const inputField = screen.getByTestId('assistant-chat-input');
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
@@ -72,7 +81,7 @@ describe('AssistantChat', function () {
   });
 
   it('send button is disabled for whitespace-only input', function () {
-    render(<AssistantChat messages={[]} />);
+    renderWithChat([]);
 
     const inputField = screen.getByTestId('assistant-chat-input');
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
@@ -86,36 +95,32 @@ describe('AssistantChat', function () {
   });
 
   it('displays messages in the chat feed', function () {
-    render(<AssistantChat messages={mockMessages} />);
+    renderWithChat(mockMessages);
 
     expect(screen.getByTestId('assistant-message-user')).to.exist;
     expect(screen.getByTestId('assistant-message-assistant')).to.exist;
-    expect(screen.getByText('Hello, MongoDB Assistant!')).to.exist;
-    expect(screen.getByText('Hello! How can I help you with MongoDB today?')).to
-      .exist;
+    expect(screen.getByTestId('assistant-message-user')).to.have.text(
+      'Hello, MongoDB Assistant!'
+    );
+    expect(screen.getByTestId('assistant-message-assistant')).to.have.text(
+      'Hello! How can I help you with MongoDB today?'
+    );
   });
 
-  it('calls onSendMessage when form is submitted', function () {
-    let sentMessage = '';
-    const handleSendMessage = (message: string) => {
-      sentMessage = message;
-    };
-
-    render(<AssistantChat messages={[]} onSendMessage={handleSendMessage} />);
-
+  it('calls sendMessage when form is submitted', function () {
+    const { chat } = renderWithChat([]);
     const inputField = screen.getByTestId('assistant-chat-input');
     const sendButton = screen.getByTestId('assistant-chat-send-button');
 
     userEvent.type(inputField, 'What is aggregation?');
     userEvent.click(sendButton);
 
-    expect(sentMessage).to.equal('What is aggregation?');
+    expect(chat.sendMessage.calledWith({ text: 'What is aggregation?' })).to.be
+      .true;
   });
 
   it('clears input field after successful submission', function () {
-    const handleSendMessage = () => {};
-
-    render(<AssistantChat messages={[]} onSendMessage={handleSendMessage} />);
+    renderWithChat([]);
 
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     const inputField = screen.getByTestId(
@@ -130,44 +135,35 @@ describe('AssistantChat', function () {
   });
 
   it('trims whitespace from input before sending', function () {
-    let sentMessage = '';
-    const handleSendMessage = (message: string) => {
-      sentMessage = message;
-    };
-
-    render(<AssistantChat messages={[]} onSendMessage={handleSendMessage} />);
+    const { chat } = renderWithChat([]);
 
     const inputField = screen.getByTestId('assistant-chat-input');
 
     userEvent.type(inputField, '  What is sharding?  ');
     userEvent.click(screen.getByTestId('assistant-chat-send-button'));
 
-    expect(sentMessage).to.equal('What is sharding?');
+    expect(chat.sendMessage.calledWith({ text: 'What is sharding?' })).to.be
+      .true;
   });
 
-  it('does not call onSendMessage when input is empty or whitespace-only', function () {
-    let messageSent = false;
-    const handleSendMessage = () => {
-      messageSent = true;
-    };
-
-    render(<AssistantChat messages={[]} onSendMessage={handleSendMessage} />);
+  it('does not call sendMessage when input is empty or whitespace-only', function () {
+    const { chat } = renderWithChat([]);
 
     const inputField = screen.getByTestId('assistant-chat-input');
     const chatForm = screen.getByTestId('assistant-chat-form');
 
     // Test empty input
     userEvent.click(chatForm);
-    expect(messageSent).to.be.false;
+    expect(chat.sendMessage.notCalled).to.be.true;
 
     // Test whitespace-only input
     userEvent.type(inputField, '   ');
     userEvent.click(chatForm);
-    expect(messageSent).to.be.false;
+    expect(chat.sendMessage.notCalled).to.be.true;
   });
 
   it('displays user and assistant messages with different styling', function () {
-    render(<AssistantChat messages={mockMessages} />);
+    renderWithChat(mockMessages);
 
     const userMessage = screen.getByTestId('assistant-message-user');
     const assistantMessage = screen.getByTestId('assistant-message-assistant');
@@ -196,7 +192,7 @@ describe('AssistantChat', function () {
       },
     ];
 
-    render(<AssistantChat messages={messagesWithMultipleParts} />);
+    renderWithChat(messagesWithMultipleParts);
 
     expect(screen.getByText('Here is part 1. And here is part 2.')).to.exist;
   });
@@ -215,7 +211,7 @@ describe('AssistantChat', function () {
       },
     ];
 
-    render(<AssistantChat messages={messagesWithMixedParts} />);
+    renderWithChat(messagesWithMixedParts);
 
     expect(screen.getByText('This is text content. More text content.')).to
       .exist;

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

@@ -1,30 +1,33 @@
 import React, { useCallback, useState } from 'react';
 import type { UIMessage } from './@ai-sdk/react/use-chat';
+import type { Chat } from './@ai-sdk/react/chat-react';
+import { useChat } from './@ai-sdk/react/use-chat';
 
 interface AssistantChatProps {
-  messages: UIMessage[];
-  onSendMessage?: (message: string) => void;
+  chat: Chat<UIMessage>;
 }
 
 /**
  * This component is currently using placeholders as Leafygreen UI updates are not available yet.
  * Before release, we will replace this with the actual Leafygreen chat components.
  */
 export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
-  messages,
-  onSendMessage,
+  chat,
 }) => {
   const [inputValue, setInputValue] = useState('');
+  const { messages, sendMessage } = useChat({
+    chat,
+  });
 
   const handleInputSubmit = useCallback(
     (e: React.FormEvent) => {
       e.preventDefault();
-      if (inputValue.trim() && onSendMessage) {
-        onSendMessage(inputValue.trim());
+      if (inputValue.trim()) {
+        void sendMessage({ text: inputValue.trim() });
         setInputValue('');
       }
     },
-    [inputValue, onSendMessage]
+    [inputValue, sendMessage]
   );
 
   return (
@@ -53,7 +56,7 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
         {messages.map((message) => (
           <div
             key={message.id}
-            data-testid={`assistant-message-${message.role}`}
+            data-testid={`assistant-message-${message.id}`}
             style={{
               marginBottom: '12px',
               padding: '8px 12px',