@copilotkit/react-ui 1.10.0-next.8 → 1.10.0-next.9

package/dist/components/chat/Chat.mjs

@@ -2,7 +2,7 @@ import {
   CopilotChat,
   WrappedCopilotChat,
   useCopilotChatLogic
-} from "../../chunk-3DVMCBME.mjs";
+} from "../../chunk-2KG77MAY.mjs";
 import "../../chunk-JHUTTP5C.mjs";
 import "../../chunk-GCKKSSBU.mjs";
 import "../../chunk-DBKRAOH7.mjs";

package/dist/components/chat/Modal.js

@@ -2313,17 +2313,20 @@ function CopilotChat({
   imageUploadsEnabled,
   inputFileAccept = "image/*",
   hideStopButton,
-  observabilityHooks
+  observabilityHooks,
+  renderError
 }) {
   const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } = (0, import_react_core9.useCopilotContext)();
+  const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
   const [selectedImages, setSelectedImages] = (0, import_react14.useState)([]);
+  const [chatError, setChatError] = (0, import_react14.useState)(null);
   const fileInputRef = (0, import_react14.useRef)(null);
   const triggerObservabilityHook = (0, import_react14.useCallback)(
     (hookName, ...args) => {
-      if (copilotApiConfig.publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
         observabilityHooks[hookName](...args);
       }
-      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !copilotApiConfig.publicApiKey) {
+      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !publicApiKey) {
         setBannerError(
           new import_shared3.CopilotKitError({
             message: "observabilityHooks requires a publicApiKey to function.",
@@ -2335,7 +2338,50 @@ function CopilotChat({
         import_shared3.styledConsole.publicApiKeyRequired("observabilityHooks");
       }
     },
-    [copilotApiConfig.publicApiKey, observabilityHooks]
+    [publicApiKey, observabilityHooks, setBannerError]
+  );
+  const triggerChatError = (0, import_react14.useCallback)(
+    (error, operation, originalError) => {
+      const errorMessage = (error == null ? void 0 : error.message) || (error == null ? void 0 : error.toString()) || "An error occurred";
+      setChatError({
+        message: errorMessage,
+        operation,
+        timestamp: Date.now()
+      });
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks.onError)) {
+        const errorEvent = {
+          type: "error",
+          timestamp: Date.now(),
+          context: {
+            source: "ui",
+            request: {
+              operation,
+              url: chatApiEndpoint,
+              startTime: Date.now()
+            },
+            technical: {
+              environment: "browser",
+              userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+              stackTrace: originalError instanceof Error ? originalError.stack : void 0
+            }
+          },
+          error
+        };
+        observabilityHooks.onError(errorEvent);
+      }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks.onError) && !publicApiKey) {
+        setBannerError(
+          new import_shared3.CopilotKitError({
+            message: "observabilityHooks.onError requires a publicApiKey to function.",
+            code: import_shared3.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared3.Severity.CRITICAL,
+            visibility: import_shared3.ErrorVisibility.BANNER
+          })
+        );
+        import_shared3.styledConsole.publicApiKeyRequired("observabilityHooks.onError");
+      }
+    },
+    [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
   );
   (0, import_react14.useEffect)(() => {
     if (!imageUploadsEnabled)
@@ -2376,12 +2422,13 @@ function CopilotChat({
         const loadedImages = (yield Promise.all(imagePromises)).filter((img) => img !== null);
         setSelectedImages((prev) => [...prev, ...loadedImages]);
       } catch (error) {
+        triggerChatError(error, "processClipboardImages", error);
         console.error("Error processing pasted images:", error);
       }
     });
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
-  }, [imageUploadsEnabled]);
+  }, [imageUploadsEnabled, triggerChatError]);
   (0, import_react14.useEffect)(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
@@ -2472,6 +2519,7 @@ function CopilotChat({
       const loadedImages = yield Promise.all(fileReadPromises);
       setSelectedImages((prev) => [...prev, ...loadedImages]);
     } catch (error) {
+      triggerChatError(error, "processUploadedImages", error);
       console.error("Error reading files:", error);
     }
   });
@@ -2491,6 +2539,12 @@ function CopilotChat({
     triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    chatError && renderError && renderError(__spreadProps(__spreadValues({}, chatError), {
+      onDismiss: () => setChatError(null),
+      onRetry: () => {
+        setChatError(null);
+      }
+    })),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Messages2,
       {
@@ -2724,8 +2778,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
         stableContext,
         messagesContext.messages,
         appendMessage,
-        runChatCompletion,
-        hint
+        runChatCompletion
       );
     }
   });
@@ -2795,6 +2848,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
 
 // src/components/chat/Modal.tsx
 var import_react_core11 = require("@copilotkit/react-core");
+var import_shared5 = require("@copilotkit/shared");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var CopilotModalInner = (_a) => {
   var _b = _a, {
@@ -2820,14 +2874,26 @@ var CopilotModalInner = (_a) => {
     "Button",
     "Header"
   ]);
-  const { copilotApiConfig } = (0, import_react_core11.useCopilotContext)();
+  const { copilotApiConfig, setBannerError } = (0, import_react_core11.useCopilotContext)();
+  const { publicApiKey } = copilotApiConfig;
   const triggerObservabilityHook = (0, import_react15.useCallback)(
     (hookName, ...args) => {
-      if (copilotApiConfig.publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
         observabilityHooks[hookName](...args);
       }
+      if ((observabilityHooks == null ? void 0 : observabilityHooks[hookName]) && !publicApiKey) {
+        setBannerError(
+          new import_shared5.CopilotKitError({
+            message: "observabilityHooks requires a publicApiKey to function.",
+            code: import_shared5.CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR,
+            severity: import_shared5.Severity.CRITICAL,
+            visibility: import_shared5.ErrorVisibility.BANNER
+          })
+        );
+        import_shared5.styledConsole.publicApiKeyRequired("observabilityHooks");
+      }
     },
-    [copilotApiConfig.publicApiKey, observabilityHooks]
+    [publicApiKey, observabilityHooks, setBannerError]
   );
   const { open } = useChatContext();
   const prevOpen = (0, import_react15.useRef)(open);