@copilotkit/react-ui 1.10.4-next.0 → 1.10.4-next.2

package/dist/components/chat/Chat.js

@@ -1242,12 +1242,14 @@ var Messages = ({
   RenderMessage: RenderMessage2,
   AssistantMessage: AssistantMessage2,
   UserMessage: UserMessage2,
+  ErrorMessage: ErrorMessage2,
   ImageRenderer: ImageRenderer2,
   onRegenerate,
   onCopy,
   onThumbsUp,
   onThumbsDown,
   markdownTagRenderers,
+  chatError,
   // Legacy props
   RenderTextMessage,
   RenderActionExecutionMessage,
@@ -1308,7 +1310,8 @@ var Messages = ({
           index
         );
       }),
-      interrupt
+      interrupt,
+      chatError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorMessage2, { error: chatError, isCurrentMessage: true })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: "copilotKitMessagesFooter", ref: messagesEndRef, children })
   ] });
@@ -1691,15 +1694,67 @@ var Input = ({
   ] });
 };
 
+// src/components/chat/messages/ErrorMessage.tsx
+var import_react10 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ErrorMessage = (props) => {
+  const { icons, labels } = useChatContext();
+  const { error, onRegenerate, onCopy, isCurrentMessage } = props;
+  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const handleCopy = () => {
+    const content = error.message;
+    if (content && onCopy) {
+      navigator.clipboard.writeText(content);
+      setCopied(true);
+      onCopy(content);
+      setTimeout(() => setCopied(false), 2e3);
+    } else if (content) {
+      navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  const handleRegenerate = () => {
+    if (onRegenerate)
+      onRegenerate();
+  };
+  console.log(error);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Markdown, { content: error.message }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          className: "copilotKitMessageControlButton",
+          onClick: handleRegenerate,
+          "aria-label": labels.regenerateResponse,
+          title: labels.regenerateResponse,
+          children: icons.regenerateIcon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "button",
+        {
+          className: "copilotKitMessageControlButton",
+          onClick: handleCopy,
+          "aria-label": labels.copyToClipboard,
+          title: labels.copyToClipboard,
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { fontSize: "10px", fontWeight: "bold" }, children: "\u2713" }) : icons.copyIcon
+        }
+      )
+    ] })
+  ] });
+};
+
 // src/components/chat/Chat.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_react_core5 = require("@copilotkit/react-core");
 var import_shared = require("@copilotkit/shared");
 var import_shared2 = require("@copilotkit/shared");
 var import_react_core6 = require("@copilotkit/react-core");
 
 // src/components/chat/ImageUploadQueue.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var ImageUploadQueue = ({
   images,
   onRemoveImage,
@@ -1707,7 +1762,7 @@ var ImageUploadQueue = ({
 }) => {
   if (images.length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       className: `copilotKitImageUploadQueue ${className}`,
@@ -1718,7 +1773,7 @@ var ImageUploadQueue = ({
         margin: "8px",
         padding: "8px"
       },
-      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "div",
         {
           className: "copilotKitImageUploadQueueItem",
@@ -1731,7 +1786,7 @@ var ImageUploadQueue = ({
             overflow: "hidden"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "img",
               {
                 src: `data:${image.contentType};base64,${image.bytes}`,
@@ -1743,7 +1798,7 @@ var ImageUploadQueue = ({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 onClick: () => onRemoveImage(index),
@@ -1778,12 +1833,12 @@ var ImageUploadQueue = ({
 
 // src/components/chat/Suggestion.tsx
 var import_react_core4 = require("@copilotkit/react-core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Suggestion({ title, onClick, partial, className }) {
   if (!title)
     return null;
   const { isLoading } = (0, import_react_core4.useCopilotChatInternal)();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "button",
     {
       disabled: partial || isLoading,
@@ -1793,15 +1848,15 @@ function Suggestion({ title, onClick, partial, className }) {
       },
       className: className || (partial ? "suggestion loading" : "suggestion"),
       "data-test-id": "suggestion",
-      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: title })
+      children: partial ? SmallSpinnerIcon : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: title })
     }
   );
 }
 
 // src/components/chat/Suggestions.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Suggestions({ suggestions, onSuggestionClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Suggestion,
     {
       title: suggestion.title,
@@ -1815,7 +1870,7 @@ function Suggestions({ suggestions, onSuggestionClick }) {
 }
 
 // src/components/chat/Chat.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CopilotChat({
   instructions,
   suggestions = "auto",
@@ -1840,11 +1895,13 @@ function CopilotChat({
   AssistantMessage: AssistantMessage2 = AssistantMessage,
   UserMessage: UserMessage2 = UserMessage,
   ImageRenderer: ImageRenderer2 = ImageRenderer,
+  ErrorMessage: ErrorMessage2 = ErrorMessage,
   imageUploadsEnabled,
   inputFileAccept = "image/*",
   hideStopButton,
   observabilityHooks,
   renderError,
+  onError,
   // Legacy props - deprecated
   RenderTextMessage,
   RenderActionExecutionMessage,
@@ -1852,12 +1909,19 @@ function CopilotChat({
   RenderResultMessage,
   RenderImageMessage
 }) {
-  const { additionalInstructions, setChatInstructions, copilotApiConfig, setBannerError } = (0, import_react_core5.useCopilotContext)();
+  const {
+    additionalInstructions,
+    setChatInstructions,
+    copilotApiConfig,
+    setBannerError,
+    setInternalErrorHandler,
+    removeInternalErrorHandler
+  } = (0, import_react_core5.useCopilotContext)();
   const { publicApiKey, chatApiEndpoint } = copilotApiConfig;
-  const [selectedImages, setSelectedImages] = (0, import_react10.useState)([]);
-  const [chatError, setChatError] = (0, import_react10.useState)(null);
-  const fileInputRef = (0, import_react10.useRef)(null);
-  const triggerObservabilityHook = (0, import_react10.useCallback)(
+  const [selectedImages, setSelectedImages] = (0, import_react11.useState)([]);
+  const [chatError, setChatError] = (0, import_react11.useState)(null);
+  const fileInputRef = (0, import_react11.useRef)(null);
+  const triggerObservabilityHook = (0, import_react11.useCallback)(
     (hookName, ...args) => {
       if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks[hookName])) {
         observabilityHooks[hookName](...args);
@@ -1876,7 +1940,7 @@ function CopilotChat({
     },
     [publicApiKey, observabilityHooks, setBannerError]
   );
-  const triggerChatError = (0, import_react10.useCallback)(
+  const triggerChatError = (0, import_react11.useCallback)(
     (error, operation, originalError) => {
       const errorMessage = (error == null ? void 0 : error.message) || (error == null ? void 0 : error.toString()) || "An error occurred";
       setChatError({
@@ -1884,25 +1948,28 @@ function CopilotChat({
         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
-            }
+      const errorEvent = {
+        type: "error",
+        timestamp: Date.now(),
+        context: {
+          source: "ui",
+          request: {
+            operation,
+            url: chatApiEndpoint,
+            startTime: Date.now()
           },
-          error
-        };
+          technical: {
+            environment: "browser",
+            userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+            stackTrace: originalError instanceof Error ? originalError.stack : void 0
+          }
+        },
+        error
+      };
+      if (onError) {
+        onError(errorEvent);
+      }
+      if (publicApiKey && (observabilityHooks == null ? void 0 : observabilityHooks.onError)) {
         observabilityHooks.onError(errorEvent);
       }
       if ((observabilityHooks == null ? void 0 : observabilityHooks.onError) && !publicApiKey) {
@@ -1919,7 +1986,20 @@ function CopilotChat({
     },
     [publicApiKey, chatApiEndpoint, observabilityHooks, setBannerError]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
+    const id = "chat-component";
+    setInternalErrorHandler({
+      [id]: (error) => {
+        if (!error)
+          return;
+        triggerChatError(error.error, "sendMessage");
+      }
+    });
+    return () => {
+      removeInternalErrorHandler == null ? void 0 : removeInternalErrorHandler(id);
+    };
+  }, [triggerChatError, setInternalErrorHandler, removeInternalErrorHandler]);
+  (0, import_react11.useEffect)(() => {
     if (!imageUploadsEnabled)
       return;
     const handlePaste = (e) => __async(this, null, function* () {
@@ -1965,7 +2045,7 @@ function CopilotChat({
     document.addEventListener("paste", handlePaste);
     return () => document.removeEventListener("paste", handlePaste);
   }, [imageUploadsEnabled, triggerChatError]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!(additionalInstructions == null ? void 0 : additionalInstructions.length)) {
       setChatInstructions(instructions || "");
       return;
@@ -1993,8 +2073,8 @@ function CopilotChat({
     onStopGeneration,
     onReloadMessages
   );
-  const prevIsLoading = (0, import_react10.useRef)(isLoading);
-  (0, import_react10.useEffect)(() => {
+  const prevIsLoading = (0, import_react11.useRef)(isLoading);
+  (0, import_react11.useEffect)(() => {
     if (prevIsLoading.current !== isLoading) {
       if (isLoading) {
         triggerObservabilityHook("onChatStarted");
@@ -2013,7 +2093,7 @@ function CopilotChat({
     triggerObservabilityHook("onMessageSent", text);
     return sendMessage(text, images);
   };
-  const chatContext = import_react10.default.useContext(ChatContext);
+  const chatContext = import_react11.default.useContext(ChatContext);
   const isVisible = chatContext ? chatContext.open : true;
   const handleRegenerate = (messageId) => {
     if (onRegenerate) {
@@ -2075,14 +2155,14 @@ function CopilotChat({
     }
     triggerObservabilityHook("onFeedbackGiven", message.id, "thumbsDown");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
     chatError && renderError && renderError(__spreadProps(__spreadValues({}, chatError), {
       onDismiss: () => setChatError(null),
       onRetry: () => {
         setChatError(null);
       }
     })),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Messages2,
       {
         AssistantMessage: AssistantMessage2,
@@ -2096,12 +2176,14 @@ function CopilotChat({
         onThumbsDown: handleThumbsDown,
         markdownTagRenderers,
         ImageRenderer: ImageRenderer2,
+        ErrorMessage: ErrorMessage2,
+        chatError,
         RenderTextMessage,
         RenderActionExecutionMessage,
         RenderAgentStateMessage,
         RenderResultMessage,
         RenderImageMessage,
-        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           RenderSuggestionsList,
           {
             onSuggestionClick: handleSendMessage,
@@ -2110,9 +2192,9 @@ function CopilotChat({
         )
       }
     ),
-    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "input",
         {
           type: "file",
@@ -2124,7 +2206,7 @@ function CopilotChat({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Input2,
       {
         inProgress: isLoading,
@@ -2146,12 +2228,12 @@ function WrappedCopilotChat({
   labels,
   className
 }) {
-  const chatContext = import_react10.default.useContext(ChatContext);
+  const chatContext = import_react11.default.useContext(ChatContext);
   if (!chatContext) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
 }
 var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
   var _a;
@@ -2175,15 +2257,15 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMess
   const generalContext = (0, import_react_core5.useCopilotContext)();
   const messagesContext = (0, import_react_core5.useCopilotMessagesContext)();
   const { actions } = generalContext;
-  const [suggestionsFailed, setSuggestionsFailed] = (0, import_react10.useState)(false);
-  const hasGeneratedInitialSuggestions = (0, import_react10.useRef)(false);
-  (0, import_react10.useEffect)(() => {
+  const [suggestionsFailed, setSuggestionsFailed] = (0, import_react11.useState)(false);
+  const hasGeneratedInitialSuggestions = (0, import_react11.useRef)(false);
+  (0, import_react11.useEffect)(() => {
     if (Array.isArray(chatSuggestions)) {
       setSuggestions(chatSuggestions);
       hasGeneratedInitialSuggestions.current = true;
     }
   }, [JSON.stringify(chatSuggestions), setSuggestions]);
-  const generateSuggestionsWithErrorHandling = (0, import_react10.useCallback)(
+  const generateSuggestionsWithErrorHandling = (0, import_react11.useCallback)(
     (context) => __async(void 0, null, function* () {
       try {
         yield generateSuggestions();
@@ -2194,7 +2276,7 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMess
     }),
     [generateSuggestions]
   );
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (chatSuggestions !== "auto" || isLoadingSuggestions || suggestionsFailed) {
       return;
     }
@@ -2224,13 +2306,13 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMess
     // Use stable string instead of object reference
     generateSuggestionsWithErrorHandling
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (chatSuggestions !== "auto") {
       hasGeneratedInitialSuggestions.current = false;
       setSuggestionsFailed(false);
     }
   }, [chatSuggestions]);
-  const stableContext = (0, import_react10.useMemo)(
+  const stableContext = (0, import_react11.useMemo)(
     () => __spreadValues(__spreadValues({}, generalContext), messagesContext),
     [
       // Only include stable dependencies
@@ -2239,12 +2321,12 @@ var useCopilotChatLogic = (chatSuggestions, makeSystemMessage, disableSystemMess
       generalContext.isLoading
     ]
   );
-  const resetSuggestions = (0, import_react10.useCallback)(() => {
+  const resetSuggestions = (0, import_react11.useCallback)(() => {
     resetSuggestionsFromHook();
     setSuggestionsFailed(false);
     hasGeneratedInitialSuggestions.current = false;
   }, [resetSuggestionsFromHook]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     onInProgress == null ? void 0 : onInProgress(isLoading);
   }, [onInProgress, isLoading]);
   const safelySendMessage = (messageContent, imagesToUse) => __async(void 0, null, function* () {