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

package/dist/components/copilot-provider/index.js

@@ -161,8 +161,7 @@ var emptyCopilotContext = {
   },
   langGraphInterruptAction: null,
   setLangGraphInterruptAction: () => null,
-  removeLangGraphInterruptAction: () => null,
-  onTrace: void 0
+  removeLangGraphInterruptAction: () => null
 };
 var CopilotContext = import_react.default.createContext(emptyCopilotContext);
 function useCopilotContext() {
@@ -517,14 +516,12 @@ function ToastProvider({
             border: `1px solid ${colors.border}`,
             borderLeft: `4px solid ${colors.border}`,
             borderRadius: "8px",
-            padding: "12px 16px",
+            padding: "10px 14px",
             fontSize: "13px",
             boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
             backdropFilter: "blur(8px)",
-            maxWidth: "min(90vw, 700px)",
-            width: "100%",
-            boxSizing: "border-box",
-            overflow: "hidden"
+            maxWidth: "500px",
+            minWidth: "350px"
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
             "div",
@@ -536,125 +533,94 @@ function ToastProvider({
                 gap: "10px"
               },
               children: [
-                /* @__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
+                /* @__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) + "...";
                           }
+                          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";
                         }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                        "div",
+                      }
+                      if (!url)
+                        return null;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
                         {
+                          onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
                           style: {
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "10px",
-                            flex: 1,
-                            minWidth: 0
+                            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)";
                           },
-                          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
-                                }
-                              );
-                            })()
-                          ]
+                          onMouseLeave: (e) => {
+                            e.currentTarget.style.opacity = "1";
+                            e.currentTarget.style.transform = "translateY(0)";
+                          },
+                          children: buttonText
                         }
-                      )
-                    ]
-                  }
-                ),
+                      );
+                    })()
+                  ] })
+                ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "button",
                   {
@@ -707,38 +673,8 @@ 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, onTrace, copilotApiConfig } = useCopilotContext();
+  const { threadId, agentSession, runtimeClient, showDevConsole } = useCopilotContext();
   const { setBannerError } = useToast();
-  const traceUIError = (0, import_react6.useCallback)(
-    (error, originalError) => __async(this, null, function* () {
-      if (!onTrace || !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 onTrace(traceEvent);
-      } catch (traceError) {
-        console.error("Error in CopilotMessages onTrace handler:", traceError);
-      }
-    }),
-    [onTrace, copilotApiConfig.publicApiKey, copilotApiConfig.chatApiEndpoint]
-  );
   const createStructuredError2 = (gqlError) => {
     const extensions = gqlError.extensions;
     const originalError = extensions == null ? void 0 : extensions.originalError;
@@ -783,14 +719,12 @@ 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);
@@ -804,11 +738,10 @@ function CopilotMessages({ children }) {
             code: import_shared4.CopilotKitErrorCode.UNKNOWN
           });
           setBannerError(fallbackError);
-          traceUIError(fallbackError, error);
         }
       }
     },
-    [setBannerError, showDevConsole, traceUIError]
+    [setBannerError, showDevConsole]
   );
   (0, import_react6.useEffect)(() => {
     if (!threadId || threadId === lastLoadedThreadId.current)
@@ -843,7 +776,6 @@ function CopilotMessages({ children }) {
     });
     void fetchMessages();
   }, [threadId, agentSession == null ? void 0 : agentSession.agentName, runtimeClient]);
-  const memoizedChildren = (0, import_react6.useMemo)(() => children, [children]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     CopilotMessagesContext.Provider,
     {
@@ -851,7 +783,7 @@ function CopilotMessages({ children }) {
         messages,
         setMessages
       },
-      children: memoizedChildren
+      children
     }
   );
 }
@@ -862,35 +794,8 @@ var import_react7 = require("react");
 var import_shared5 = require("@copilotkit/shared");
 var useCopilotRuntimeClient = (options) => {
   const { setBannerError } = useToast();
-  const _a = options, { showDevConsole, onTrace } = _a, runtimeOptions = __objRest(_a, ["showDevConsole", "onTrace"]);
+  const _a = options, { showDevConsole } = _a, runtimeOptions = __objRest(_a, ["showDevConsole"]);
   const lastStructuredErrorRef = (0, import_react7.useRef)(null);
-  const traceUIError = (error, originalError) => __async(void 0, null, function* () {
-    if (!onTrace || !runtimeOptions.publicApiKey)
-      return;
-    try {
-      const traceEvent = {
-        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 onTrace(traceEvent);
-    } catch (traceError) {
-      console.error("Error in onTrace handler:", traceError);
-    }
-  });
   const runtimeClient = (0, import_react7.useMemo)(() => {
     return new import_runtime_client_gql2.CopilotRuntimeClient(__spreadProps(__spreadValues({}, runtimeOptions), {
       handleGQLErrors: (error) => {
@@ -918,14 +823,12 @@ 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);
@@ -939,7 +842,6 @@ var useCopilotRuntimeClient = (options) => {
               code: import_shared5.CopilotKitErrorCode.UNKNOWN
             });
             setBannerError(fallbackError);
-            traceUIError(fallbackError, error);
           }
         }
       },
@@ -952,7 +854,7 @@ var useCopilotRuntimeClient = (options) => {
         setBannerError(warningError);
       }
     }));
-  }, [runtimeOptions, setBannerError, showDevConsole, onTrace]);
+  }, [runtimeOptions, setBannerError, showDevConsole]);
   return runtimeClient;
 };
 function createStructuredError(gqlError) {
@@ -1045,8 +947,8 @@ var defaultIcons = {
     "svg",
     {
       viewBox: "0 0 24 24",
-      width: "16",
-      height: "16",
+      width: "18",
+      height: "18",
       stroke: "currentColor",
       strokeWidth: "2.5",
       fill: "none",
@@ -1063,8 +965,8 @@ var defaultIcons = {
     "svg",
     {
       viewBox: "0 0 24 24",
-      width: "16",
-      height: "16",
+      width: "18",
+      height: "18",
       stroke: "currentColor",
       strokeWidth: "2.5",
       fill: "none",
@@ -1081,8 +983,8 @@ var defaultIcons = {
     "svg",
     {
       viewBox: "0 0 24 24",
-      width: "16",
-      height: "16",
+      width: "18",
+      height: "18",
       stroke: "currentColor",
       strokeWidth: "2.5",
       fill: "none",
@@ -1107,33 +1009,19 @@ function UsageBanner({
     return null;
   }
   const parseMessage = (rawMessage) => {
-    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.";
-    }
-    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.";
+    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;
     }
-    return cleanMessage2 || "An error occurred. Please check your configuration.";
+    return rawMessage;
   };
   const cleanMessage = parseMessage(message);
   const Icon = icon || defaultIcons[severity];
   const themeConfigs = {
     [import_shared7.Severity.INFO]: {
-      bg: "rgba(239, 246, 255, 0.95)",
+      bg: "linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)",
       border: "#93c5fd",
       text: "#1e40af",
       icon: "#3b82f6",
@@ -1141,7 +1029,7 @@ function UsageBanner({
       primaryBtnHover: "#2563eb"
     },
     [import_shared7.Severity.WARNING]: {
-      bg: "rgba(255, 251, 235, 0.95)",
+      bg: "linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)",
       border: "#fbbf24",
       text: "#92400e",
       icon: "#f59e0b",
@@ -1149,7 +1037,7 @@ function UsageBanner({
       primaryBtnHover: "#d97706"
     },
     [import_shared7.Severity.CRITICAL]: {
-      bg: "rgba(254, 242, 242, 0.95)",
+      bg: "linear-gradient(135deg, #fef2f2 0%, #fecaca 100%)",
       border: "#f87171",
       text: "#991b1b",
       icon: "#ef4444",
@@ -1163,26 +1051,24 @@ function UsageBanner({
     {
       style: {
         position: "fixed",
-        bottom: "24px",
+        bottom: "20px",
         left: "50%",
         transform: "translateX(-50%)",
-        width: "400px",
-        maxWidth: "90vw",
+        maxWidth: "min(95vw, 680px)",
+        width: "100%",
         zIndex: 1e4,
-        animation: "bannerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)"
+        animation: "bannerSlideIn 0.4s 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(20px);
-              scale: 0.95;
+              transform: translateX(-50%) translateY(10px);
             }
             to {
               opacity: 1;
               transform: translateX(-50%) translateY(0);
-              scale: 1;
             }
           }
         ` }),
@@ -1190,16 +1076,17 @@ function UsageBanner({
           "div",
           {
             style: {
-              borderRadius: "12px",
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "14px",
+              borderRadius: "16px",
               border: `1px solid ${themeConfig.border}`,
               background: themeConfig.bg,
-              padding: "14px",
-              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
+              padding: "18px 20px",
+              boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
               position: "relative",
-              backdropFilter: "blur(12px)",
-              WebkitBackdropFilter: "blur(12px)",
-              boxSizing: "border-box",
-              overflow: "hidden"
+              backdropFilter: "blur(10px)",
+              WebkitBackdropFilter: "blur(10px)"
             },
             children: [
               onClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1208,23 +1095,35 @@ function UsageBanner({
                   onClick: onClose,
                   style: {
                     position: "absolute",
-                    top: "8px",
-                    right: "8px",
-                    background: "rgba(255, 255, 255, 0.9)",
+                    top: "12px",
+                    right: "12px",
+                    background: "rgba(255, 255, 255, 0.8)",
                     border: "none",
                     color: themeConfig.text,
                     cursor: "pointer",
-                    fontSize: "16px",
+                    fontSize: "18px",
                     lineHeight: "1",
-                    padding: "4px",
-                    borderRadius: "4px",
-                    width: "20px",
-                    height: "20px",
+                    padding: "6px",
+                    borderRadius: "8px",
+                    opacity: 0.7,
+                    transition: "all 0.2s ease",
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "center"
+                    justifyContent: "center",
+                    width: "28px",
+                    height: "28px"
                   },
                   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"
                 }
               ),
@@ -1232,92 +1131,106 @@ function UsageBanner({
                 "div",
                 {
                   style: {
-                    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: cleanMessage
-                }
-              ),
-              actions && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                "div",
-                {
-                  style: {
+                    color: themeConfig.icon,
+                    flexShrink: 0,
+                    marginTop: "1px",
+                    padding: "6px",
+                    borderRadius: "10px",
+                    background: "rgba(255, 255, 255, 0.7)",
                     display: "flex",
-                    gap: "8px",
-                    flexWrap: "wrap"
+                    alignItems: "center",
+                    justifyContent: "center"
                   },
-                  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
-                      }
-                    )
-                  ]
+                  children: Icon
                 }
-              )
+              ),
+              /* @__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
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         )
@@ -1721,8 +1634,7 @@ ${nonDocumentStrings}`;
     publicApiKey: copilotApiConfig.publicApiKey,
     headers,
     credentials: copilotApiConfig.credentials,
-    showDevConsole: (_b = props.showDevConsole) != null ? _b : false,
-    onTrace: props.onTrace
+    showDevConsole: (_b = props.showDevConsole) != null ? _b : false
   });
   const [chatSuggestionConfiguration, setChatSuggestionConfiguration] = (0, import_react10.useState)({});
   const addChatSuggestionConfiguration = (id, suggestion) => {
@@ -1812,7 +1724,6 @@ ${nonDocumentStrings}`;
   const removeLangGraphInterruptAction = (0, import_react10.useCallback)(() => {
     setLangGraphInterruptAction(null);
   }, []);
-  const memoizedChildren = (0, import_react10.useMemo)(() => children, [children]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     CopilotContext.Provider,
     {
@@ -1865,10 +1776,9 @@ ${nonDocumentStrings}`;
         setExtensions,
         langGraphInterruptAction,
         setLangGraphInterruptAction,
-        removeLangGraphInterruptAction,
-        onTrace: props.onTrace
+        removeLangGraphInterruptAction
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopilotMessages, { children: memoizedChildren })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopilotMessages, { children })
     }
   );
 }