surface assistant errors

Author: lerouxb

package-lock.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/package.json

@@ -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/@ai-sdk/react/use-chat.ts

@@ -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/assistant-chat.tsx

@@ -106,6 +106,13 @@ export const CompassAssistantProvider = registerCompassPlugin(
         transport: new DocsProviderTransport({
           baseUrl: atlasService.assistantApiEndpoint(),
         }),
+        /*
+        onError: () => {
+          // best we can do is assume it was the last message that caused it
+          // because there's nothing on the error object this function receives
+          chat.messages = chat.messages.slice(0, -1);
+        },
+        */
       });
       return {
         store: { state: { chat } },