@copilotkit/react-core 1.9.2-next.2 → 1.9.2-next.21

package/dist/index.js

@@ -183,7 +183,8 @@ var emptyCopilotContext = {
   },
   langGraphInterruptAction: null,
   setLangGraphInterruptAction: () => null,
-  removeLangGraphInterruptAction: () => null
+  removeLangGraphInterruptAction: () => null,
+  onError: void 0
 };
 var CopilotContext = import_react.default.createContext(emptyCopilotContext);
 function useCopilotContext() {
@@ -547,12 +548,14 @@ function ToastProvider({
             border: `1px solid ${colors.border}`,
             borderLeft: `4px solid ${colors.border}`,
             borderRadius: "8px",
-            padding: "10px 14px",
+            padding: "12px 16px",
             fontSize: "13px",
             boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
             backdropFilter: "blur(8px)",
-            maxWidth: "500px",
-            minWidth: "350px"
+            maxWidth: "min(90vw, 700px)",
+            width: "100%",
+            boxSizing: "border-box",
+            overflow: "hidden"
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "div",
@@ -564,94 +567,125 @@ function ToastProvider({
                 gap: "10px"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px", flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "div",
-                    {
-                      style: {
-                        width: "12px",
-                        height: "12px",
-                        borderRadius: "50%",
-                        backgroundColor: colors.border,
-                        flexShrink: 0
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "10px", flex: 1 }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "div",
-                      {
-                        style: {
-                          color: colors.text,
-                          lineHeight: "1.4",
-                          fontWeight: "400",
-                          fontSize: "13px",
-                          flex: 1,
-                          wordWrap: "break-word",
-                          overflowWrap: "break-word",
-                          hyphens: "auto"
-                        },
-                        children: (() => {
-                          const message = bannerError.message;
-                          const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-                          const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
-                          let cleanMessage = message.replace(markdownLinkRegex, "").replace(plainUrlRegex, "").replace(/See more:\s*/g, "").replace(/\s+/g, " ").trim();
-                          if (cleanMessage.length > 120) {
-                            cleanMessage = cleanMessage.substring(0, 117) + "...";
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      flex: 1,
+                      minWidth: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: "12px",
+                            height: "12px",
+                            borderRadius: "50%",
+                            backgroundColor: colors.border,
+                            flexShrink: 0
                           }
-                          return cleanMessage;
-                        })()
-                      }
-                    ),
-                    (() => {
-                      const message = bannerError.message;
-                      const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-                      const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
-                      let url = null;
-                      let buttonText = "See More";
-                      const markdownMatch = markdownLinkRegex.exec(message);
-                      if (markdownMatch) {
-                        url = markdownMatch[2];
-                        buttonText = "See More";
-                      } else {
-                        const urlMatch = plainUrlRegex.exec(message);
-                        if (urlMatch) {
-                          url = urlMatch[0];
-                          buttonText = "See More";
                         }
-                      }
-                      if (!url)
-                        return null;
-                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "button",
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
                         {
-                          onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
                           style: {
-                            background: colors.border,
-                            color: "white",
-                            border: "none",
-                            borderRadius: "5px",
-                            padding: "4px 10px",
-                            fontSize: "11px",
-                            fontWeight: "500",
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                            flexShrink: 0
-                          },
-                          onMouseEnter: (e) => {
-                            e.currentTarget.style.opacity = "0.9";
-                            e.currentTarget.style.transform = "translateY(-1px)";
-                          },
-                          onMouseLeave: (e) => {
-                            e.currentTarget.style.opacity = "1";
-                            e.currentTarget.style.transform = "translateY(0)";
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            flex: 1,
+                            minWidth: 0
                           },
-                          children: buttonText
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "div",
+                              {
+                                style: {
+                                  color: colors.text,
+                                  lineHeight: "1.4",
+                                  fontWeight: "400",
+                                  fontSize: "13px",
+                                  flex: 1,
+                                  wordBreak: "break-all",
+                                  overflowWrap: "break-word",
+                                  maxWidth: "550px",
+                                  overflow: "hidden",
+                                  display: "-webkit-box",
+                                  WebkitLineClamp: 10,
+                                  WebkitBoxOrient: "vertical"
+                                },
+                                children: (() => {
+                                  let message = bannerError.message;
+                                  const jsonMatch = message.match(/'message':\s*'([^']+)'/);
+                                  if (jsonMatch) {
+                                    return jsonMatch[1];
+                                  }
+                                  message = message.split(" - ")[0];
+                                  message = message.split(": Error code")[0];
+                                  message = message.replace(/:\s*\d{3}$/, "");
+                                  message = message.replace(/See more:.*$/g, "");
+                                  message = message.trim();
+                                  return message || "Configuration error occurred.";
+                                })()
+                              }
+                            ),
+                            (() => {
+                              const message = bannerError.message;
+                              const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+                              const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
+                              let url = null;
+                              let buttonText = "See More";
+                              const markdownMatch = markdownLinkRegex.exec(message);
+                              if (markdownMatch) {
+                                url = markdownMatch[2];
+                                buttonText = "See More";
+                              } else {
+                                const urlMatch = plainUrlRegex.exec(message);
+                                if (urlMatch) {
+                                  url = urlMatch[0].replace(/[.,;:'"]*$/, "");
+                                  buttonText = "See More";
+                                }
+                              }
+                              if (!url)
+                                return null;
+                              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "button",
+                                {
+                                  onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
+                                  style: {
+                                    background: colors.border,
+                                    color: "white",
+                                    border: "none",
+                                    borderRadius: "5px",
+                                    padding: "4px 10px",
+                                    fontSize: "11px",
+                                    fontWeight: "500",
+                                    cursor: "pointer",
+                                    transition: "all 0.2s ease",
+                                    flexShrink: 0
+                                  },
+                                  onMouseEnter: (e) => {
+                                    e.currentTarget.style.opacity = "0.9";
+                                    e.currentTarget.style.transform = "translateY(-1px)";
+                                  },
+                                  onMouseLeave: (e) => {
+                                    e.currentTarget.style.opacity = "1";
+                                    e.currentTarget.style.transform = "translateY(0)";
+                                  },
+                                  children: buttonText
+                                }
+                              );
+                            })()
+                          ]
                         }
-                      );
-                    })()
-                  ] })
-                ] }),
+                      )
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "button",
                   {
@@ -704,8 +738,38 @@ function CopilotMessages({ children }) {
   const lastLoadedThreadId = (0, import_react6.useRef)();
   const lastLoadedAgentName = (0, import_react6.useRef)();
   const lastLoadedMessages = (0, import_react6.useRef)();
-  const { threadId, agentSession, runtimeClient, showDevConsole } = useCopilotContext();
+  const { threadId, agentSession, runtimeClient, showDevConsole, onError, copilotApiConfig } = useCopilotContext();
   const { setBannerError } = useToast();
+  const traceUIError = (0, import_react6.useCallback)(
+    (error, originalError) => __async(this, null, function* () {
+      if (!onError || !copilotApiConfig.publicApiKey)
+        return;
+      try {
+        const traceEvent = {
+          type: "error",
+          timestamp: Date.now(),
+          context: {
+            source: "ui",
+            request: {
+              operation: "loadAgentState",
+              url: copilotApiConfig.chatApiEndpoint,
+              startTime: Date.now()
+            },
+            technical: {
+              environment: "browser",
+              userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+              stackTrace: originalError instanceof Error ? originalError.stack : void 0
+            }
+          },
+          error
+        };
+        yield onError(traceEvent);
+      } catch (traceError) {
+        console.error("Error in CopilotMessages onError handler:", traceError);
+      }
+    }),
+    [onError, copilotApiConfig.publicApiKey, copilotApiConfig.chatApiEndpoint]
+  );
   const createStructuredError2 = (gqlError) => {
     const extensions = gqlError.extensions;
     const originalError = extensions == null ? void 0 : extensions.originalError;
@@ -750,12 +814,14 @@ function CopilotMessages({ children }) {
           const ckError = createStructuredError2(gqlError);
           if (ckError) {
             setBannerError(ckError);
+            traceUIError(ckError, gqlError);
           } else {
             const fallbackError = new import_shared4.CopilotKitError({
               message: gqlError.message,
               code: import_shared4.CopilotKitErrorCode.UNKNOWN
             });
             setBannerError(fallbackError);
+            traceUIError(fallbackError, gqlError);
           }
         };
         graphQLErrors.forEach(routeError);
@@ -769,10 +835,11 @@ function CopilotMessages({ children }) {
             code: import_shared4.CopilotKitErrorCode.UNKNOWN
           });
           setBannerError(fallbackError);
+          traceUIError(fallbackError, error);
         }
       }
     },
-    [setBannerError, showDevConsole]
+    [setBannerError, showDevConsole, traceUIError]
   );
   (0, import_react6.useEffect)(() => {
     if (!threadId || threadId === lastLoadedThreadId.current)
@@ -806,7 +873,8 @@ function CopilotMessages({ children }) {
       }
     });
     void fetchMessages();
-  }, [threadId, agentSession == null ? void 0 : agentSession.agentName, runtimeClient]);
+  }, [threadId, agentSession == null ? void 0 : agentSession.agentName]);
+  const memoizedChildren = (0, import_react6.useMemo)(() => children, [children]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     CopilotMessagesContext.Provider,
     {
@@ -814,7 +882,7 @@ function CopilotMessages({ children }) {
         messages,
         setMessages
       },
-      children
+      children: memoizedChildren
     }
   );
 }
@@ -825,8 +893,35 @@ var import_react7 = require("react");
 var import_shared5 = require("@copilotkit/shared");
 var useCopilotRuntimeClient = (options) => {
   const { setBannerError } = useToast();
-  const _a = options, { showDevConsole } = _a, runtimeOptions = __objRest(_a, ["showDevConsole"]);
+  const _a = options, { showDevConsole, onError } = _a, runtimeOptions = __objRest(_a, ["showDevConsole", "onError"]);
   const lastStructuredErrorRef = (0, import_react7.useRef)(null);
+  const traceUIError = (error, originalError) => __async(void 0, null, function* () {
+    if (!onError || !runtimeOptions.publicApiKey)
+      return;
+    try {
+      const errorEvent = {
+        type: "error",
+        timestamp: Date.now(),
+        context: {
+          source: "ui",
+          request: {
+            operation: "runtimeClient",
+            url: runtimeOptions.url,
+            startTime: Date.now()
+          },
+          technical: {
+            environment: "browser",
+            userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+            stackTrace: originalError instanceof Error ? originalError.stack : void 0
+          }
+        },
+        error
+      };
+      yield onError(errorEvent);
+    } catch (error2) {
+      console.error("Error in onError handler:", error2);
+    }
+  });
   const runtimeClient = (0, import_react7.useMemo)(() => {
     return new import_runtime_client_gql2.CopilotRuntimeClient(__spreadProps(__spreadValues({}, runtimeOptions), {
       handleGQLErrors: (error) => {
@@ -854,12 +949,14 @@ var useCopilotRuntimeClient = (options) => {
             const ckError = createStructuredError(gqlError);
             if (ckError) {
               setBannerError(ckError);
+              traceUIError(ckError, gqlError);
             } else {
               const fallbackError = new import_shared5.CopilotKitError({
                 message: gqlError.message,
                 code: import_shared5.CopilotKitErrorCode.UNKNOWN
               });
               setBannerError(fallbackError);
+              traceUIError(fallbackError, gqlError);
             }
           };
           graphQLErrors.forEach(routeError);
@@ -873,6 +970,7 @@ var useCopilotRuntimeClient = (options) => {
               code: import_shared5.CopilotKitErrorCode.UNKNOWN
             });
             setBannerError(fallbackError);
+            traceUIError(fallbackError, error);
           }
         }
       },
@@ -885,7 +983,7 @@ var useCopilotRuntimeClient = (options) => {
         setBannerError(warningError);
       }
     }));
-  }, [runtimeOptions, setBannerError, showDevConsole]);
+  }, [runtimeOptions, setBannerError, showDevConsole, onError]);
   return runtimeClient;
 };
 function createStructuredError(gqlError) {
@@ -1112,8 +1210,8 @@ var defaultIcons = {
     "svg",
     {
       viewBox: "0 0 24 24",
-      width: "18",
-      height: "18",
+      width: "16",
+      height: "16",
       stroke: "currentColor",
       strokeWidth: "2.5",
       fill: "none",
@@ -1130,8 +1228,8 @@ var defaultIcons = {
     "svg",
     {
       viewBox: "0 0 24 24",
-      width: "18",
-      height: "18",
+      width: "16",
+      height: "16",
       stroke: "currentColor",
       strokeWidth: "2.5",
       fill: "none",
@@ -1148,8 +1246,8 @@ var defaultIcons = {
     "svg",
     {
       viewBox: "0 0 24 24",
-      width: "18",
-      height: "18",
+      width: "16",
+      height: "16",
       stroke: "currentColor",
       strokeWidth: "2.5",
       fill: "none",
@@ -1174,19 +1272,33 @@ function UsageBanner({
     return null;
   }
   const parseMessage = (rawMessage) => {
-    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-    const matches = Array.from(rawMessage.matchAll(linkRegex));
-    if (matches.length > 0) {
-      let cleanMessage2 = rawMessage.replace(/\.\s*See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, ".").replace(/See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, "").trim();
-      return cleanMessage2;
+    if (rawMessage.toLowerCase().includes("authentication") || rawMessage.toLowerCase().includes("api key")) {
+      return "Authentication failed. Please check your API key.";
+    }
+    if (rawMessage.toLowerCase().includes("rate limit")) {
+      return "Rate limit exceeded. Please try again later.";
     }
-    return rawMessage;
+    if (rawMessage.toLowerCase().includes("checkpointer")) {
+      return "Agent configuration error. Please check your setup.";
+    }
+    let cleanMessage2 = rawMessage;
+    cleanMessage2 = cleanMessage2.split(" - ")[0];
+    cleanMessage2 = cleanMessage2.split(": Error code")[0];
+    cleanMessage2 = cleanMessage2.split(": 401")[0];
+    cleanMessage2 = cleanMessage2.split(": 403")[0];
+    cleanMessage2 = cleanMessage2.split(": 404")[0];
+    cleanMessage2 = cleanMessage2.split(": 500")[0];
+    cleanMessage2 = cleanMessage2.replace(/See more:.*$/g, "").trim();
+    if (cleanMessage2.includes("{") || cleanMessage2.includes("'") || cleanMessage2.length > 60) {
+      return "Configuration error. Please check your setup.";
+    }
+    return cleanMessage2 || "An error occurred. Please check your configuration.";
   };
   const cleanMessage = parseMessage(message);
   const Icon = icon || defaultIcons[severity];
   const themeConfigs = {
     [import_shared8.Severity.INFO]: {
-      bg: "linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)",
+      bg: "rgba(239, 246, 255, 0.95)",
       border: "#93c5fd",
       text: "#1e40af",
       icon: "#3b82f6",
@@ -1194,7 +1306,7 @@ function UsageBanner({
       primaryBtnHover: "#2563eb"
     },
     [import_shared8.Severity.WARNING]: {
-      bg: "linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)",
+      bg: "rgba(255, 251, 235, 0.95)",
       border: "#fbbf24",
       text: "#92400e",
       icon: "#f59e0b",
@@ -1202,7 +1314,7 @@ function UsageBanner({
       primaryBtnHover: "#d97706"
     },
     [import_shared8.Severity.CRITICAL]: {
-      bg: "linear-gradient(135deg, #fef2f2 0%, #fecaca 100%)",
+      bg: "rgba(254, 242, 242, 0.95)",
       border: "#f87171",
       text: "#991b1b",
       icon: "#ef4444",
@@ -1216,24 +1328,26 @@ function UsageBanner({
     {
       style: {
         position: "fixed",
-        bottom: "20px",
+        bottom: "24px",
         left: "50%",
         transform: "translateX(-50%)",
-        maxWidth: "min(95vw, 680px)",
-        width: "100%",
+        width: "400px",
+        maxWidth: "90vw",
         zIndex: 1e4,
-        animation: "bannerSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
+        animation: "bannerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
           @keyframes bannerSlideIn {
             from {
               opacity: 0;
-              transform: translateX(-50%) translateY(10px);
+              transform: translateX(-50%) translateY(20px);
+              scale: 0.95;
             }
             to {
               opacity: 1;
               transform: translateX(-50%) translateY(0);
+              scale: 1;
             }
           }
         ` }),
@@ -1241,17 +1355,16 @@ function UsageBanner({
           "div",
           {
             style: {
-              display: "flex",
-              alignItems: "flex-start",
-              gap: "14px",
-              borderRadius: "16px",
+              borderRadius: "12px",
               border: `1px solid ${themeConfig.border}`,
               background: themeConfig.bg,
-              padding: "18px 20px",
-              boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+              padding: "14px",
+              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
               position: "relative",
-              backdropFilter: "blur(10px)",
-              WebkitBackdropFilter: "blur(10px)"
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              boxSizing: "border-box",
+              overflow: "hidden"
             },
             children: [
               onClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1260,35 +1373,23 @@ function UsageBanner({
                   onClick: onClose,
                   style: {
                     position: "absolute",
-                    top: "12px",
-                    right: "12px",
-                    background: "rgba(255, 255, 255, 0.8)",
+                    top: "8px",
+                    right: "8px",
+                    background: "rgba(255, 255, 255, 0.9)",
                     border: "none",
                     color: themeConfig.text,
                     cursor: "pointer",
-                    fontSize: "18px",
+                    fontSize: "16px",
                     lineHeight: "1",
-                    padding: "6px",
-                    borderRadius: "8px",
-                    opacity: 0.7,
-                    transition: "all 0.2s ease",
+                    padding: "4px",
+                    borderRadius: "4px",
+                    width: "20px",
+                    height: "20px",
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "center",
-                    width: "28px",
-                    height: "28px"
+                    justifyContent: "center"
                   },
                   title: "Close",
-                  onMouseOver: (e) => {
-                    e.currentTarget.style.opacity = "1";
-                    e.currentTarget.style.background = "rgba(255, 255, 255, 1)";
-                    e.currentTarget.style.transform = "scale(1.05)";
-                  },
-                  onMouseOut: (e) => {
-                    e.currentTarget.style.opacity = "0.7";
-                    e.currentTarget.style.background = "rgba(255, 255, 255, 0.8)";
-                    e.currentTarget.style.transform = "scale(1)";
-                  },
                   children: "\xD7"
                 }
               ),
@@ -1296,106 +1397,92 @@ function UsageBanner({
                 "div",
                 {
                   style: {
-                    color: themeConfig.icon,
-                    flexShrink: 0,
-                    marginTop: "1px",
-                    padding: "6px",
-                    borderRadius: "10px",
-                    background: "rgba(255, 255, 255, 0.7)",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    color: themeConfig.text,
+                    lineHeight: "1.4",
+                    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+                    paddingRight: onClose ? "30px" : "0",
+                    marginBottom: actions ? "12px" : "0",
+                    wordBreak: "break-word",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    display: "-webkit-box",
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: "vertical"
                   },
-                  children: Icon
+                  children: cleanMessage
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, paddingRight: onClose ? "40px" : "0" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                  "div",
-                  {
-                    style: {
-                      fontSize: "15px",
-                      fontWeight: 600,
-                      color: themeConfig.text,
-                      lineHeight: "1.5",
-                      marginBottom: actions ? "12px" : "0",
-                      fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-                    },
-                    children: cleanMessage
-                  }
-                ),
-                actions && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      gap: "10px",
-                      flexWrap: "wrap"
-                    },
-                    children: [
-                      actions.secondary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "button",
-                        {
-                          onClick: actions.secondary.onClick,
-                          style: {
-                            borderRadius: "10px",
-                            padding: "8px 16px",
-                            fontSize: "14px",
-                            fontWeight: 500,
-                            color: themeConfig.text,
-                            backgroundColor: "rgba(255, 255, 255, 0.8)",
-                            border: `1.5px solid ${themeConfig.border}`,
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-                          },
-                          onMouseOver: (e) => {
-                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
-                            e.currentTarget.style.transform = "translateY(-1px)";
-                            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
-                          },
-                          onMouseOut: (e) => {
-                            e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
-                            e.currentTarget.style.transform = "translateY(0)";
-                            e.currentTarget.style.boxShadow = "none";
-                          },
-                          children: actions.secondary.label
-                        }
-                      ),
-                      actions.primary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "button",
-                        {
-                          onClick: actions.primary.onClick,
-                          style: {
-                            borderRadius: "10px",
-                            padding: "8px 16px",
-                            fontSize: "14px",
-                            fontWeight: 600,
-                            color: "#fff",
-                            backgroundColor: themeConfig.primaryBtn,
-                            border: "none",
-                            cursor: "pointer",
-                            transition: "all 0.2s ease",
-                            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-                            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-                          },
-                          onMouseOver: (e) => {
-                            e.currentTarget.style.backgroundColor = themeConfig.primaryBtnHover;
-                            e.currentTarget.style.transform = "translateY(-1px)";
-                            e.currentTarget.style.boxShadow = "0 6px 16px rgba(0, 0, 0, 0.2)";
-                          },
-                          onMouseOut: (e) => {
-                            e.currentTarget.style.backgroundColor = themeConfig.primaryBtn;
-                            e.currentTarget.style.transform = "translateY(0)";
-                            e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
-                          },
-                          children: actions.primary.label
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] })
+              actions && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    gap: "8px",
+                    flexWrap: "wrap"
+                  },
+                  children: [
+                    actions.secondary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "button",
+                      {
+                        onClick: actions.secondary.onClick,
+                        style: {
+                          borderRadius: "8px",
+                          padding: "6px 12px",
+                          fontSize: "13px",
+                          fontWeight: 500,
+                          color: themeConfig.text,
+                          backgroundColor: "rgba(255, 255, 255, 0.9)",
+                          border: `1px solid ${themeConfig.border}`,
+                          cursor: "pointer",
+                          transition: "all 0.2s ease",
+                          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+                        },
+                        onMouseOver: (e) => {
+                          e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 1)";
+                          e.currentTarget.style.transform = "translateY(-1px)";
+                        },
+                        onMouseOut: (e) => {
+                          e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.9)";
+                          e.currentTarget.style.transform = "translateY(0)";
+                        },
+                        children: actions.secondary.label
+                      }
+                    ),
+                    actions.primary && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "button",
+                      {
+                        onClick: actions.primary.onClick,
+                        style: {
+                          borderRadius: "8px",
+                          padding: "6px 12px",
+                          fontSize: "13px",
+                          fontWeight: 600,
+                          color: "#fff",
+                          backgroundColor: themeConfig.primaryBtn,
+                          border: "none",
+                          cursor: "pointer",
+                          transition: "all 0.2s ease",
+                          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+                          fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+                        },
+                        onMouseOver: (e) => {
+                          e.currentTarget.style.backgroundColor = themeConfig.primaryBtnHover;
+                          e.currentTarget.style.transform = "translateY(-1px)";
+                          e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.2)";
+                        },
+                        onMouseOut: (e) => {
+                          e.currentTarget.style.backgroundColor = themeConfig.primaryBtn;
+                          e.currentTarget.style.transform = "translateY(0)";
+                          e.currentTarget.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.15)";
+                        },
+                        children: actions.primary.label
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
@@ -1811,18 +1898,25 @@ ${nonDocumentStrings}`;
     publicApiKey: copilotApiConfig.publicApiKey,
     headers,
     credentials: copilotApiConfig.credentials,
-    showDevConsole: (_b = props.showDevConsole) != null ? _b : false
+    showDevConsole: (_b = props.showDevConsole) != null ? _b : false,
+    onError: props.onError
   });
   const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = (0, import_react10.useState)({});
-  const addChatSuggestionConfiguration = (id, suggestion) => {
-    setChatSuggestionConfiguration((prev) => __spreadProps(__spreadValues({}, prev), { [id]: suggestion }));
-  };
-  const removeChatSuggestionConfiguration = (id) => {
-    setChatSuggestionConfiguration((prev) => {
-      const _a2 = prev, { [id]: _ } = _a2, rest = __objRest(_a2, [__restKey(id)]);
-      return rest;
-    });
-  };
+  const addChatSuggestionConfiguration = (0, import_react10.useCallback)(
+    (id, suggestion) => {
+      setChatSuggestionConfiguration((prev) => __spreadProps(__spreadValues({}, prev), { [id]: suggestion }));
+    },
+    [setChatSuggestionConfiguration]
+  );
+  const removeChatSuggestionConfiguration = (0, import_react10.useCallback)(
+    (id) => {
+      setChatSuggestionConfiguration((prev) => {
+        const _a2 = prev, { [id]: _ } = _a2, rest = __objRest(_a2, [__restKey(id)]);
+        return rest;
+      });
+    },
+    [setChatSuggestionConfiguration]
+  );
   const [availableAgents, setAvailableAgents] = (0, import_react10.useState)([]);
   const [coagentStates, setCoagentStates] = (0, import_react10.useState)({});
   const coagentStatesRef = (0, import_react10.useRef)({});
@@ -1901,6 +1995,42 @@ ${nonDocumentStrings}`;
   const removeLangGraphInterruptAction = (0, import_react10.useCallback)(() => {
     setLangGraphInterruptAction(null);
   }, []);
+  const memoizedChildren = (0, import_react10.useMemo)(() => children, [children]);
+  const agentLock = (0, import_react10.useMemo)(() => {
+    var _a2;
+    return (_a2 = props.agent) != null ? _a2 : null;
+  }, [props.agent]);
+  const forwardedParameters = (0, import_react10.useMemo)(
+    () => {
+      var _a2;
+      return (_a2 = props.forwardedParameters) != null ? _a2 : {};
+    },
+    [props.forwardedParameters]
+  );
+  const updateExtensions = (0, import_react10.useCallback)(
+    (newExtensions) => {
+      setExtensions((prev) => {
+        const resolved = typeof newExtensions === "function" ? newExtensions(prev) : newExtensions;
+        const isSameLength = Object.keys(resolved).length === Object.keys(prev).length;
+        const isEqual = isSameLength && // @ts-ignore
+        Object.entries(resolved).every(([key, value]) => prev[key] === value);
+        return isEqual ? prev : resolved;
+      });
+    },
+    [setExtensions]
+  );
+  const updateAuthStates = (0, import_react10.useCallback)(
+    (newAuthStates) => {
+      setAuthStates((prev) => {
+        const resolved = typeof newAuthStates === "function" ? newAuthStates(prev) : newAuthStates;
+        const isSameLength = Object.keys(resolved).length === Object.keys(prev).length;
+        const isEqual = isSameLength && // @ts-ignore
+        Object.entries(resolved).every(([key, value]) => prev[key] === value);
+        return isEqual ? prev : resolved;
+      });
+    },
+    [setAuthStates]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     CopilotContext.Provider,
     {
@@ -1938,8 +2068,8 @@ ${nonDocumentStrings}`;
         agentSession,
         setAgentSession,
         runtimeClient,
-        forwardedParameters: props.forwardedParameters || {},
-        agentLock: props.agent || null,
+        forwardedParameters,
+        agentLock,
         threadId: internalThreadId,
         setThreadId,
         runId,
@@ -1948,14 +2078,15 @@ ${nonDocumentStrings}`;
         availableAgents,
         authConfig_c: props.authConfig_c,
         authStates_c: authStates,
-        setAuthStates_c: setAuthStates,
+        setAuthStates_c: updateAuthStates,
         extensions,
-        setExtensions,
+        setExtensions: updateExtensions,
         langGraphInterruptAction,
         setLangGraphInterruptAction,
-        removeLangGraphInterruptAction
+        removeLangGraphInterruptAction,
+        onError: props.onError
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopilotMessages, { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopilotMessages, { children: memoizedChildren })
     }
   );
 }
@@ -2006,6 +2137,7 @@ var import_runtime_client_gql7 = require("@copilotkit/runtime-client-gql");
 
 // src/hooks/use-chat.ts
 var import_react11 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_shared12 = require("@copilotkit/shared");
 var import_runtime_client_gql6 = require("@copilotkit/runtime-client-gql");
 
@@ -2064,6 +2196,35 @@ function useChat(options) {
   } = options;
   const runChatCompletionRef = (0, import_react11.useRef)();
   const addErrorToast = useErrorToast();
+  const { setBannerError } = useToast();
+  const { onError } = useCopilotContext();
+  const traceUIError = (error, originalError) => __async(this, null, function* () {
+    if (!onError || !(copilotConfig == null ? void 0 : copilotConfig.publicApiKey))
+      return;
+    try {
+      const traceEvent = {
+        type: "error",
+        timestamp: Date.now(),
+        context: {
+          source: "ui",
+          request: {
+            operation: "useChatCompletion",
+            url: copilotConfig.chatApiEndpoint,
+            startTime: Date.now()
+          },
+          technical: {
+            environment: "browser",
+            userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+            stackTrace: originalError instanceof Error ? originalError.stack : void 0
+          }
+        },
+        error
+      };
+      yield onError(traceEvent);
+    } catch (traceError) {
+      console.error("Error in use-chat onError handler:", traceError);
+    }
+  });
   const agentSessionRef = (0, import_react11.useRef)(agentSession);
   agentSessionRef.current = agentSession;
   const runIdRef = (0, import_react11.useRef)(runId);
@@ -2083,7 +2244,7 @@ function useChat(options) {
   const pendingAppendsRef = (0, import_react11.useRef)([]);
   const runChatCompletion = useAsyncCallback(
     (previousMessages) => __async(this, null, function* () {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
       setIsLoading(true);
       const interruptEvent = langGraphInterruptAction == null ? void 0 : langGraphInterruptAction.event;
       if ((interruptEvent == null ? void 0 : interruptEvent.name) === import_runtime_client_gql6.MetaEventName.LangGraphInterruptEvent && (interruptEvent == null ? void 0 : interruptEvent.value) && !(interruptEvent == null ? void 0 : interruptEvent.response) && agentSessionRef.current) {
@@ -2215,20 +2376,53 @@ function useChat(options) {
           messages2 = (0, import_runtime_client_gql6.convertGqlOutputToMessages)(
             (0, import_runtime_client_gql6.filterAdjacentAgentStateMessages)(rawMessagesResponse)
           );
-          if (messages2.length === 0) {
-            continue;
-          }
           newMessages = [];
           if (((_k = value.generateCopilotResponse.status) == null ? void 0 : _k.__typename) === "FailedResponseStatus" && value.generateCopilotResponse.status.reason === "GUARDRAILS_VALIDATION_FAILED") {
+            const guardrailsReason = ((_l = value.generateCopilotResponse.status.details) == null ? void 0 : _l.guardrailsReason) || "";
             newMessages = [
               new import_runtime_client_gql6.TextMessage({
                 role: import_runtime_client_gql6.MessageRole.Assistant,
-                content: ((_l = value.generateCopilotResponse.status.details) == null ? void 0 : _l.guardrailsReason) || ""
+                content: guardrailsReason
               })
             ];
+            const guardrailsError = new import_shared12.CopilotKitError({
+              message: `Guardrails validation failed: ${guardrailsReason}`,
+              code: import_shared12.CopilotKitErrorCode.MISUSE
+            });
+            yield traceUIError(guardrailsError, {
+              statusReason: value.generateCopilotResponse.status.reason,
+              statusDetails: value.generateCopilotResponse.status.details
+            });
             setMessages([...previousMessages, ...newMessages]);
             break;
-          } else {
+          }
+          if (((_m = value.generateCopilotResponse.status) == null ? void 0 : _m.__typename) === "FailedResponseStatus" && value.generateCopilotResponse.status.reason === "UNKNOWN_ERROR") {
+            const errorMessage = ((_n = value.generateCopilotResponse.status.details) == null ? void 0 : _n.description) || "An unknown error occurred";
+            const statusDetails = value.generateCopilotResponse.status.details;
+            const originalError = (statusDetails == null ? void 0 : statusDetails.originalError) || (statusDetails == null ? void 0 : statusDetails.error);
+            const originalCode = (originalError == null ? void 0 : originalError.code) || ((_o = originalError == null ? void 0 : originalError.extensions) == null ? void 0 : _o.code);
+            const originalSeverity = (originalError == null ? void 0 : originalError.severity) || ((_p = originalError == null ? void 0 : originalError.extensions) == null ? void 0 : _p.severity);
+            const originalVisibility = (originalError == null ? void 0 : originalError.visibility) || ((_q = originalError == null ? void 0 : originalError.extensions) == null ? void 0 : _q.visibility);
+            let errorCode = import_shared12.CopilotKitErrorCode.NETWORK_ERROR;
+            if (originalCode && Object.values(import_shared12.CopilotKitErrorCode).includes(originalCode)) {
+              errorCode = originalCode;
+            }
+            const structuredError = new import_shared12.CopilotKitError({
+              message: errorMessage,
+              code: errorCode,
+              severity: originalSeverity,
+              visibility: originalVisibility
+            });
+            setBannerError(structuredError);
+            yield traceUIError(structuredError, {
+              statusReason: value.generateCopilotResponse.status.reason,
+              statusDetails: value.generateCopilotResponse.status.details,
+              originalErrorCode: originalCode,
+              preservedStructure: !!originalCode
+            });
+            setIsLoading(false);
+            break;
+          } else if (messages2.length > 0) {
             newMessages = [...messages2];
             for (const message of messages2) {
               if (message.isAgentStateMessage() && !message.active && !executedCoAgentStateRenders.includes(message.id) && onCoAgentStateRender) {
@@ -2290,6 +2484,39 @@ function useChat(options) {
           newMessages
         );
         let didExecuteAction = false;
+        const executeActionFromMessage = (currentAction, actionMessage) => __async(this, null, function* () {
+          var _a2;
+          const isInterruptAction = interruptMessages.find((m) => m.id === actionMessage.id);
+          followUp = (_a2 = currentAction == null ? void 0 : currentAction.followUp) != null ? _a2 : !isInterruptAction;
+          if (currentAction == null ? void 0 : currentAction._setActivatingMessageId) {
+            currentAction._setActivatingMessageId(actionMessage.id);
+          }
+          const resultMessage = yield executeAction({
+            onFunctionCall,
+            message: actionMessage,
+            chatAbortControllerRef,
+            onError: (error) => {
+              addErrorToast([error]);
+              console.error(`Failed to execute action ${actionMessage.name}: ${error}`);
+            },
+            setMessages,
+            getFinalMessages: () => finalMessages,
+            isRenderAndWait: (currentAction == null ? void 0 : currentAction._isRenderAndWait) || false
+          });
+          didExecuteAction = true;
+          const messageIndex = finalMessages.findIndex((msg) => msg.id === actionMessage.id);
+          finalMessages.splice(messageIndex + 1, 0, resultMessage);
+          if (currentAction == null ? void 0 : currentAction._isRenderAndWait) {
+            const messagesForImmediateUpdate = [...finalMessages];
+            (0, import_react_dom2.flushSync)(() => {
+              setMessages(messagesForImmediateUpdate);
+            });
+          }
+          if (currentAction == null ? void 0 : currentAction._setActivatingMessageId) {
+            currentAction._setActivatingMessageId(null);
+          }
+          return resultMessage;
+        });
         if (onFunctionCall) {
           const lastMessages = [];
           for (let i = finalMessages.length - 1; i >= 0; i--) {
@@ -2306,37 +2533,28 @@ function useChat(options) {
               (action2) => action2.name === message.name
             );
             const currentResultMessagePairedFeAction = message.isResultMessage() ? getPairedFeAction(actions, message) : null;
-            const executeActionFromMessage = (action2, message2) => __async(this, null, function* () {
-              var _a2;
-              const isInterruptAction = interruptMessages.find((m) => m.id === message2.id);
-              followUp = (_a2 = action2 == null ? void 0 : action2.followUp) != null ? _a2 : !isInterruptAction;
-              const resultMessage = yield executeAction({
-                onFunctionCall,
-                previousMessages,
-                message: message2,
-                chatAbortControllerRef,
-                onError: (error) => {
-                  addErrorToast([error]);
-                  console.error(`Failed to execute action ${message2.name}: ${error}`);
-                }
-              });
-              didExecuteAction = true;
-              const messageIndex = finalMessages.findIndex((msg) => msg.id === message2.id);
-              finalMessages.splice(messageIndex + 1, 0, resultMessage);
-              return resultMessage;
-            });
             if (action && message.isActionExecutionMessage()) {
-              const resultMessage = yield executeActionFromMessage(action, message);
-              const pairedFeAction = getPairedFeAction(actions, resultMessage);
-              if (pairedFeAction) {
-                const newExecutionMessage = new import_runtime_client_gql6.ActionExecutionMessage({
-                  name: pairedFeAction.name,
-                  arguments: (0, import_shared12.parseJson)(resultMessage.result, resultMessage.result),
-                  status: message.status,
-                  createdAt: message.createdAt,
-                  parentMessageId: message.parentMessageId
-                });
-                yield executeActionFromMessage(pairedFeAction, newExecutionMessage);
+              const isRenderAndWaitAction = (action == null ? void 0 : action._isRenderAndWait) || false;
+              const alreadyProcessed = isRenderAndWaitAction && finalMessages.some(
+                (fm) => fm.isResultMessage() && fm.actionExecutionId === message.id
+              );
+              if (alreadyProcessed) {
+              } else {
+                const resultMessage = yield executeActionFromMessage(
+                  action,
+                  message
+                );
+                const pairedFeAction = getPairedFeAction(actions, resultMessage);
+                if (pairedFeAction) {
+                  const newExecutionMessage = new import_runtime_client_gql6.ActionExecutionMessage({
+                    name: pairedFeAction.name,
+                    arguments: (0, import_shared12.parseJson)(resultMessage.result, resultMessage.result),
+                    status: message.status,
+                    createdAt: message.createdAt,
+                    parentMessageId: message.parentMessageId
+                  });
+                  yield executeActionFromMessage(pairedFeAction, newExecutionMessage);
+                }
               }
             } else if (message.isResultMessage() && currentResultMessagePairedFeAction) {
               const newExecutionMessage = new import_runtime_client_gql6.ActionExecutionMessage({
@@ -2354,16 +2572,12 @@ function useChat(options) {
           }
           setMessages(finalMessages);
         }
-        if (
-          // if followUp is not explicitly false
-          followUp !== false && // and we executed an action
-          (didExecuteAction || // the last message is a server side result
-          !isAgentRun && finalMessages.length && finalMessages[finalMessages.length - 1].isResultMessage()) && // the user did not stop generation
-          !((_m = chatAbortControllerRef.current) == null ? void 0 : _m.signal.aborted)
-        ) {
+        if (followUp !== false && (didExecuteAction || // the last message is a server side result
+        !isAgentRun && finalMessages.length && finalMessages[finalMessages.length - 1].isResultMessage()) && // the user did not stop generation
+        !((_r = chatAbortControllerRef.current) == null ? void 0 : _r.signal.aborted)) {
           yield new Promise((resolve) => setTimeout(resolve, 10));
           return yield runChatCompletionRef.current(finalMessages);
-        } else if ((_n = chatAbortControllerRef.current) == null ? void 0 : _n.signal.aborted) {
+        } else if ((_s = chatAbortControllerRef.current) == null ? void 0 : _s.signal.aborted) {
           const repairedMessages = finalMessages.filter((message, actionExecutionIndex) => {
             if (message.isActionExecutionMessage()) {
               return finalMessages.find(
@@ -2374,7 +2588,7 @@ function useChat(options) {
           });
           const repairedMessageIds = repairedMessages.map((message) => message.id);
           setMessages(repairedMessages);
-          if ((_o = agentSessionRef.current) == null ? void 0 : _o.nodeName) {
+          if ((_t = agentSessionRef.current) == null ? void 0 : _t.nodeName) {
             setAgentSession({
               threadId: agentSessionRef.current.threadId,
               agentName: agentSessionRef.current.agentName,
@@ -2468,21 +2682,35 @@ function useChat(options) {
     [isLoading, messages, setMessages, runChatCompletionAndHandleFunctionCall]
   );
   const reload = useAsyncCallback(
-    (messageId) => __async(this, null, function* () {
+    (reloadMessageId) => __async(this, null, function* () {
       if (isLoading || messages.length === 0) {
         return;
       }
-      const index = messages.findIndex((msg) => msg.id === messageId);
-      if (index === -1) {
-        console.warn(`Message with id ${messageId} not found`);
+      const reloadMessageIndex = messages.findIndex((msg) => msg.id === reloadMessageId);
+      if (reloadMessageIndex === -1) {
+        console.warn(`Message with id ${reloadMessageId} not found`);
         return;
       }
-      let newMessages = messages.slice(0, index);
-      if (newMessages.length > 0 && newMessages[newMessages.length - 1].isAgentStateMessage()) {
-        newMessages = newMessages.slice(0, newMessages.length - 1);
+      const reloadMessageRole = messages[reloadMessageIndex].role;
+      if (reloadMessageRole !== import_runtime_client_gql6.MessageRole.Assistant) {
+        console.warn(`Regenerate cannot be performed on ${reloadMessageRole} role`);
+        return;
       }
-      setMessages(newMessages);
-      return runChatCompletionAndHandleFunctionCall(newMessages);
+      let historyCutoff = [];
+      if (messages.length > 2) {
+        const lastUserMessageBeforeRegenerate = messages.slice(0, reloadMessageIndex).reverse().find(
+          (msg) => (
+            // @ts-expect-error -- message has role
+            msg.role === import_runtime_client_gql6.MessageRole.User
+          )
+        );
+        const indexOfLastUserMessageBeforeRegenerate = messages.findIndex(
+          (msg) => msg.id === lastUserMessageBeforeRegenerate.id
+        );
+        historyCutoff = messages.slice(0, indexOfLastUserMessageBeforeRegenerate + 1);
+      }
+      setMessages(historyCutoff);
+      return runChatCompletionAndHandleFunctionCall(historyCutoff);
     }),
     [isLoading, messages, setMessages, runChatCompletionAndHandleFunctionCall]
   );
@@ -2517,20 +2745,31 @@ function constructFinalMessages(syncedMessages, previousMessages, newMessages) {
 function executeAction(_0) {
   return __async(this, arguments, function* ({
     onFunctionCall,
-    previousMessages,
     message,
     chatAbortControllerRef,
-    onError
+    onError,
+    setMessages,
+    getFinalMessages,
+    isRenderAndWait
   }) {
     let result;
     let error = null;
+    const currentMessagesForHandler = getFinalMessages();
+    const handlerReturnedPromise = onFunctionCall({
+      messages: currentMessagesForHandler,
+      name: message.name,
+      args: message.arguments
+    });
+    if (isRenderAndWait) {
+      const currentMessagesForRender = getFinalMessages();
+      (0, import_react_dom2.flushSync)(() => {
+        setMessages([...currentMessagesForRender]);
+      });
+    }
     try {
       result = yield Promise.race([
-        onFunctionCall({
-          messages: previousMessages,
-          name: message.name,
-          args: message.arguments
-        }),
+        handlerReturnedPromise,
+        // Await the promise returned by the handler
         new Promise(
           (resolve) => {
             var _a;
@@ -2797,6 +3036,7 @@ function useCopilotAction(action, dependencies) {
   const { setAction, removeAction, actions, chatComponentsCache } = useCopilotContext();
   const idRef = (0, import_react13.useRef)((0, import_shared13.randomId)());
   const renderAndWaitRef = (0, import_react13.useRef)(null);
+  const activatingMessageIdRef = (0, import_react13.useRef)(null);
   const { addToast } = useToast();
   action = __spreadValues({}, action);
   if (
@@ -2804,30 +3044,48 @@ function useCopilotAction(action, dependencies) {
     isFrontendAction(action) && // check if renderAndWaitForResponse is set
     (action.renderAndWait || action.renderAndWaitForResponse)
   ) {
+    action._isRenderAndWait = true;
     const renderAndWait = action.renderAndWait || action.renderAndWaitForResponse;
     action.renderAndWait = void 0;
     action.renderAndWaitForResponse = void 0;
+    action._setActivatingMessageId = (id) => {
+      activatingMessageIdRef.current = id;
+    };
     action.handler = useAsyncCallback(() => __async(this, null, function* () {
+      const currentActivatingId = activatingMessageIdRef.current;
       let resolve;
       let reject;
       const promise = new Promise((resolvePromise, rejectPromise) => {
         resolve = resolvePromise;
         reject = rejectPromise;
       });
-      renderAndWaitRef.current = { promise, resolve, reject };
-      return yield promise;
+      renderAndWaitRef.current = {
+        promise,
+        resolve,
+        reject,
+        messageId: currentActivatingId
+      };
+      const result = yield promise;
+      return result;
     }), []);
     action.render = (props) => {
+      const currentRenderMessageId = props.messageId;
       let status = props.status;
-      if (props.status === "executing" && !renderAndWaitRef.current) {
-        status = "inProgress";
+      if (props.status === "executing") {
+        if (!renderAndWaitRef.current || !renderAndWaitRef.current.promise) {
+          status = "inProgress";
+        } else if (renderAndWaitRef.current.messageId !== currentRenderMessageId && activatingMessageIdRef.current !== currentRenderMessageId) {
+          status = "inProgress";
+        }
       }
       const waitProps = {
         status,
         args: props.args,
         result: props.result,
-        handler: status === "executing" ? renderAndWaitRef.current.resolve : void 0,
-        respond: status === "executing" ? renderAndWaitRef.current.resolve : void 0
+        // handler and respond should only be provided if this is the truly active instance
+        // and its promise infrastructure is ready.
+        handler: status === "executing" && renderAndWaitRef.current && renderAndWaitRef.current.messageId === currentRenderMessageId ? renderAndWaitRef.current.resolve : void 0,
+        respond: status === "executing" && renderAndWaitRef.current && renderAndWaitRef.current.messageId === currentRenderMessageId ? renderAndWaitRef.current.resolve : void 0
       };
       const isNoArgsRenderWait = (_fn) => {
         var _a;
@@ -3070,6 +3328,9 @@ function useCoAgent(options) {
         threadId,
         agentName: name
       });
+      if (result.error) {
+        return;
+      }
       const newState = (_b = (_a = result.data) == null ? void 0 : _a.loadAgentState) == null ? void 0 : _b.state;
       if (newState === lastLoadedState.current)
         return;