feat(compass-assistant): handle assistant errors COMPASS-9695

packages/compass-assistant/package.json

@@ -53,7 +53,7 @@
     "@mongodb-js/atlas-service": "^0.56.0",
     "@mongodb-js/compass-app-registry": "^9.4.20",
     "@mongodb-js/compass-components": "^1.49.0",
-    "ai": "^5.0.5",
+    "ai": "^5.0.26",
     "compass-preferences-model": "^2.51.0",
     "react": "^17.0.2",
     "throttleit": "^2.1.0",

packages/compass-assistant/src/@ai-sdk/react/use-chat.ts

@@ -43,6 +43,7 @@ export type UseChatHelpers<UI_MESSAGE extends UIMessage> = {
   | 'addToolResult'
   | 'status'
   | 'messages'
+  | 'clearError'
 >;
 
 export type UseChatOptions<UI_MESSAGE extends UIMessage> =
@@ -116,6 +117,7 @@ export function useChat<UI_MESSAGE extends UIMessage = UIMessage>({
     setMessages,
     sendMessage: chatRef.current.sendMessage,
     regenerate: chatRef.current.regenerate,
+    clearError: chatRef.current.clearError,
     stop: chatRef.current.stop,
     error,
     resumeStream: chatRef.current.resumeStream,

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

@@ -10,6 +10,7 @@ import {
   LgChatInputBar,
   spacing,
   css,
+  Banner,
 } from '@mongodb-js/compass-components';
 
 const { ChatWindow } = LgChatChatWindow;
@@ -36,10 +37,19 @@ const chatWindowFixesStyles = css({
   height: '100%',
 });
 
+function makeErrorMessage(message: string) {
+  message = message || 'An error occurred';
+  return `${message}. Try clearing the chat if the error persists.`;
+}
+
+const errorBannerWrapperStyles = css({
+  margin: spacing[400],
+});
+
 export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
   chat,
 }) => {
-  const { messages, sendMessage, status } = useChat({
+  const { messages, sendMessage, status, error, clearError } = useChat({
     chat,
   });
 
@@ -94,6 +104,13 @@ export const AssistantChat: React.FunctionComponent<AssistantChatProps> = ({
               />
             )}
           </MessageFeed>
+          {error && (
+            <div className={errorBannerWrapperStyles}>
+              <Banner variant="danger" dismissible onClose={clearError}>
+                {makeErrorMessage(error.message)}
+              </Banner>
+            </div>
+          )}
           <InputBar
             data-testid="assistant-chat-input"
             onMessageSend={handleMessageSend}

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

@@ -8,6 +8,7 @@ import { DocsProviderTransport } from './docs-provider-transport';
 import { useDrawerActions } from '@mongodb-js/compass-components';
 import { buildExplainPlanPrompt } from './prompts';
 import { usePreference } from 'compass-preferences-model/provider';
+import { createLoggerLocator } from '@mongodb-js/compass-logging/provider';
 
 export const ASSISTANT_DRAWER_ID = 'compass-assistant-drawer';
 
@@ -101,11 +102,19 @@ export const CompassAssistantProvider = registerCompassPlugin(
       }
       return <AssistantProvider chat={chat}>{children}</AssistantProvider>;
     },
-    activate: (initialProps, { atlasService }) => {
+    activate: (initialProps, { atlasService, logger }) => {
       const chat = new Chat({
         transport: new DocsProviderTransport({
           baseUrl: atlasService.assistantApiEndpoint(),
         }),
+        onError: (err: any) => {
+          logger.log.error(
+            logger.mongoLogId(1_001_000_370),
+            'Assistant',
+            'Failed to send a message',
+            { err }
+          );
+        },
       });
       return {
         store: { state: { chat } },
@@ -115,5 +124,6 @@ export const CompassAssistantProvider = registerCompassPlugin(
   },
   {
     atlasService: atlasServiceLocator,
+    logger: createLoggerLocator('COMPASS-ASSISTANT'),
   }
 );