chore: fix check, add whiteSpace: 'pre-wrap' for nicer placeholder formatting

Author: gagik

package-lock.json

@@ -59,7 +59,6 @@
     "use-sync-external-store": "^1.5.0"
   },
   "devDependencies": {
-    "react-dom": "^17.0.2",
     "throttleit": "^2.1.0",
     "@mongodb-js/eslint-config-compass": "^1.4.5",
     "@mongodb-js/mocha-config-compass": "^1.7.0",

packages/compass-assistant/package.json

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import type { UIMessage } from './@ai-sdk/react/use-chat';
 
-interface AsisstantChatProps {
+interface AssistantChatProps {
   messages: UIMessage[];
   onSendMessage?: (message: string) => void;
 }
@@ -10,7 +10,7 @@ interface AsisstantChatProps {
  * 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 AsisstantChat: React.FunctionComponent<AsisstantChatProps> = ({
+export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   messages,
   onSendMessage,
 }) => {
@@ -60,6 +60,7 @@ export const AsisstantChat: React.FunctionComponent<AsisstantChatProps> = ({
               alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
               maxWidth: '80%',
               wordWrap: 'break-word',
+              whiteSpace: 'pre-wrap',
             }}
           >
             {message.parts

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

@@ -2,7 +2,7 @@ import { DrawerSection } from '@mongodb-js/compass-components';
 import React, { type PropsWithChildren, useCallback, useRef } from 'react';
 import { type UIMessage, useChat } from './@ai-sdk/react/use-chat';
 import type { Chat } from './@ai-sdk/react/chat.react';
-import { AsisstantChat } from './assistant-chat';
+import { AssistantChat } from './assistant-chat';
 import { usePreference } from 'compass-preferences-model/provider';
 
 export const ASSISTANT_DRAWER_ID = 'compass-assistant-drawer';
@@ -53,7 +53,7 @@ export const AssistantProvider: React.FunctionComponent<
           label="MongoDB Assistant"
           glyph="Sparkle"
         >
-          <AsisstantChat
+          <AssistantChat
             messages={messages}
             onSendMessage={handleMessageSend}
           />

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { render } from '@mongodb-js/testing-library-compass';
 import { CompassAssistantProvider } from './index';
+import { expect } from 'chai';
 
 describe('Compass Assistant', function () {
   const CompassAssistant = CompassAssistantProvider.withMockServices({});
 
   it('renders a Plugin', function () {
-    render(<CompassAssistant></CompassAssistant>);
+    expect(() => render(<CompassAssistant></CompassAssistant>)).to.not.throw;
   });
 });