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

package/dist/components/index.mjs

@@ -2,12 +2,12 @@ import "../chunk-MMVDU6DF.mjs";
 import "../chunk-SC6JRFAJ.mjs";
 import {
   CopilotSidebar
-} from "../chunk-KLV4ERV6.mjs";
+} from "../chunk-TW4LLLTE.mjs";
 import "../chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "../chunk-APLX7E54.mjs";
-import "../chunk-BPU3FDT4.mjs";
+} from "../chunk-6C3YVF5W.mjs";
+import "../chunk-7K2X77PW.mjs";
 import "../chunk-C3GSYRC3.mjs";
 import "../chunk-GDSZGYCE.mjs";
 import "../chunk-V7W6IM2V.mjs";
@@ -24,7 +24,7 @@ import "../chunk-BH6PCAAL.mjs";
 import "../chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "../chunk-3DVMCBME.mjs";
+} from "../chunk-2KG77MAY.mjs";
 import "../chunk-JHUTTP5C.mjs";
 import {
   AssistantMessage

package/dist/index.js

@@ -2328,17 +2328,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.",
@@ -2350,7 +2353,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)
@@ -2391,12 +2437,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 || "");
@@ -2487,6 +2534,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);
     }
   });
@@ -2506,6 +2554,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,
       {
@@ -2739,8 +2793,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, onInProgress, onS
         stableContext,
         messagesContext.messages,
         appendMessage,
-        runChatCompletion,
-        hint
+        runChatCompletion
       );
     }
   });
@@ -2810,6 +2863,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, {
@@ -2835,14 +2889,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);
@@ -3002,7 +3068,7 @@ function CopilotSidebar(props) {
 // src/hooks/use-copilot-chat-suggestions.tsx
 var import_react17 = require("react");
 var import_react_core12 = require("@copilotkit/react-core");
-var import_shared5 = require("@copilotkit/shared");
+var import_shared6 = require("@copilotkit/shared");
 function useCopilotChatSuggestions({
   available = "enabled",
   instructions,
@@ -3014,7 +3080,7 @@ function useCopilotChatSuggestions({
   (0, import_react17.useEffect)(() => {
     if (available === "disabled")
       return;
-    const id = (0, import_shared5.randomId)();
+    const id = (0, import_shared6.randomId)();
     context.addChatSuggestionConfiguration(id, {
       instructions,
       minSuggestions,