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

package/src/components/toast/toast-provider.tsx

@@ -183,14 +183,12 @@ export 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",
               }}
             >
               <div
@@ -201,15 +199,7 @@ export function ToastProvider({
                   gap: "10px",
                 }}
               >
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    flex: 1,
-                    minWidth: 0,
-                  }}
-                >
+                <div style={{ display: "flex", alignItems: "center", gap: "8px", flex: 1 }}>
                   <div
                     style={{
                       width: "12px",
@@ -219,15 +209,7 @@ export function ToastProvider({
                       flexShrink: 0,
                     }}
                   />
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "10px",
-                      flex: 1,
-                      minWidth: 0,
-                    }}
-                  >
+                  <div style={{ display: "flex", alignItems: "center", gap: "10px", flex: 1 }}>
                     <div
                       style={{
                         color: colors.text,
@@ -235,37 +217,30 @@ export function ToastProvider({
                         fontWeight: "400",
                         fontSize: "13px",
                         flex: 1,
-                        wordBreak: "break-all",
+                        wordWrap: "break-word",
                         overflowWrap: "break-word",
-                        maxWidth: "550px",
-                        overflow: "hidden",
-                        display: "-webkit-box",
-                        WebkitLineClamp: 10,
-                        WebkitBoxOrient: "vertical",
+                        hyphens: "auto",
                       }}
                     >
                       {(() => {
-                        let message = bannerError.message;
-
-                        // Try to extract the useful message from JSON first
-                        const jsonMatch = message.match(/'message':\s*'([^']+)'/);
-                        if (jsonMatch) {
-                          return jsonMatch[1]; // Return the actual error message
+                        const message = bannerError.message;
+                        const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+                        const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
+
+                        // Remove URLs and markdown links from the message, keep just the text
+                        let cleanMessage = message
+                          .replace(markdownLinkRegex, "") // Remove [text](url)
+                          .replace(plainUrlRegex, "") // Remove plain URLs
+                          .replace(/See more:\s*/g, "") // Remove "See more:" text
+                          .replace(/\s+/g, " ") // Clean up extra spaces
+                          .trim();
+
+                        // Truncate very long messages for better display
+                        if (cleanMessage.length > 120) {
+                          cleanMessage = cleanMessage.substring(0, 117) + "...";
                         }
 
-                        // Strip technical garbage but keep the meaningful message
-                        message = message.split(" - ")[0]; // Remove everything after " - {"
-                        message = message.split(": Error code")[0]; // Remove ": Error code: 401"
-                        message = message.replace(/:\s*\d{3}$/, ""); // Remove trailing ": 401"
-                        message = message.replace(/See more:.*$/g, ""); // Remove "See more" links
-                        message = message.trim();
-
-                        // If it's still garbage (contains { or '), use fallback
-                        // if (message.includes("{") || message.includes("'")) {
-                        //   return "Configuration error.... Please check your setup.";
-                        // }
-
-                        return message || "Configuration error occurred.";
+                        return cleanMessage;
                       })()}
                     </div>
 
@@ -287,7 +262,7 @@ export function ToastProvider({
                         // Check for plain URLs
                         const urlMatch = plainUrlRegex.exec(message);
                         if (urlMatch) {
-                          url = urlMatch[0].replace(/[.,;:'"]*$/, ""); // Remove trailing punctuation
+                          url = urlMatch[0];
                           buttonText = "See More";
                         }
                       }

package/src/components/usage-banner.tsx

@@ -21,8 +21,8 @@ const defaultIcons: Record<Severity, JSX.Element> = {
   [Severity.CRITICAL]: (
     <svg
       viewBox="0 0 24 24"
-      width="16"
-      height="16"
+      width="18"
+      height="18"
       stroke="currentColor"
       strokeWidth="2.5"
       fill="none"
@@ -37,8 +37,8 @@ const defaultIcons: Record<Severity, JSX.Element> = {
   [Severity.WARNING]: (
     <svg
       viewBox="0 0 24 24"
-      width="16"
-      height="16"
+      width="18"
+      height="18"
       stroke="currentColor"
       strokeWidth="2.5"
       fill="none"
@@ -53,8 +53,8 @@ const defaultIcons: Record<Severity, JSX.Element> = {
   [Severity.INFO]: (
     <svg
       viewBox="0 0 24 24"
-      width="16"
-      height="16"
+      width="18"
+      height="18"
       stroke="currentColor"
       strokeWidth="2.5"
       fill="none"
@@ -79,46 +79,23 @@ export function UsageBanner({
     return null;
   }
 
-  // Enhanced message parsing to clean up technical details
+  // Parse markdown links from message and clean it up
   const parseMessage = (rawMessage: string) => {
-    // console.log("Raw message:", rawMessage); // Debug
-
-    // Super aggressive cleaning - handle common error patterns first
-    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.";
-    }
-
-    // For any other error, extract just the main error type
-    let cleanMessage = rawMessage;
-
-    // Remove everything after the first " - " or ":" followed by technical details
-    cleanMessage = cleanMessage.split(" - ")[0];
-    cleanMessage = cleanMessage.split(": Error code")[0];
-    cleanMessage = cleanMessage.split(": 401")[0];
-    cleanMessage = cleanMessage.split(": 403")[0];
-    cleanMessage = cleanMessage.split(": 404")[0];
-    cleanMessage = cleanMessage.split(": 500")[0];
+    // Extract markdown links: [text](url)
+    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+    const matches = Array.from(rawMessage.matchAll(linkRegex));
 
-    // Remove "See more" links
-    cleanMessage = cleanMessage.replace(/See more:.*$/g, "").trim();
+    if (matches.length > 0) {
+      // Remove "See more:" and markdown links from the main message
+      let cleanMessage = rawMessage
+        .replace(/\.\s*See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, ".")
+        .replace(/See more:\s*\[([^\]]+)\]\(([^)]+)\)/g, "")
+        .trim();
 
-    // If still too technical, just show a generic message
-    if (cleanMessage.includes("{") || cleanMessage.includes("'") || cleanMessage.length > 60) {
-      return "Configuration error. Please check your setup.";
+      return cleanMessage;
     }
 
-    return cleanMessage || "An error occurred. Please check your configuration.";
+    return rawMessage;
   };
 
   const cleanMessage = parseMessage(message);
@@ -126,7 +103,7 @@ export function UsageBanner({
 
   const themeConfigs = {
     [Severity.INFO]: {
-      bg: "rgba(239, 246, 255, 0.95)",
+      bg: "linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%)",
       border: "#93c5fd",
       text: "#1e40af",
       icon: "#3b82f6",
@@ -134,7 +111,7 @@ export function UsageBanner({
       primaryBtnHover: "#2563eb",
     },
     [Severity.WARNING]: {
-      bg: "rgba(255, 251, 235, 0.95)",
+      bg: "linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)",
       border: "#fbbf24",
       text: "#92400e",
       icon: "#f59e0b",
@@ -142,7 +119,7 @@ export function UsageBanner({
       primaryBtnHover: "#d97706",
     },
     [Severity.CRITICAL]: {
-      bg: "rgba(254, 242, 242, 0.95)",
+      bg: "linear-gradient(135deg, #fef2f2 0%, #fecaca 100%)",
       border: "#f87171",
       text: "#991b1b",
       icon: "#ef4444",
@@ -157,13 +134,13 @@ export function UsageBanner({
     <div
       style={{
         position: "fixed",
-        bottom: "24px",
+        bottom: "20px",
         left: "50%",
         transform: "translateX(-50%)",
-        width: "400px",
-        maxWidth: "90vw",
+        maxWidth: "min(95vw, 680px)",
+        width: "100%",
         zIndex: 10000,
-        animation: "bannerSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
+        animation: "bannerSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
       }}
     >
       <style>
@@ -171,29 +148,28 @@ export function UsageBanner({
           @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;
             }
           }
         `}
       </style>
       <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)",
         }}
       >
         {/* Close button */}
@@ -202,117 +178,144 @@ export 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",
+              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)";
+            }}
           >
             ×
           </button>
         )}
 
-        {/* Message */}
+        {/* Icon */}
         <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",
+            color: themeConfig.icon,
+            flexShrink: 0,
+            marginTop: "1px",
+            padding: "6px",
+            borderRadius: "10px",
+            background: "rgba(255, 255, 255, 0.7)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
           }}
         >
-          {cleanMessage}
+          {Icon}
         </div>
 
-        {/* Actions */}
-        {actions && (
+        {/* Content */}
+        <div style={{ flex: 1, paddingRight: onClose ? "40px" : "0" }}>
+          {/* Message */}
           <div
             style={{
-              display: "flex",
-              gap: "8px",
-              flexWrap: "wrap",
+              fontSize: "15px",
+              fontWeight: 600,
+              color: themeConfig.text,
+              lineHeight: "1.5",
+              marginBottom: actions ? "12px" : "0",
+              fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
             }}
           >
-            {actions.secondary && (
-              <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)";
-                }}
-              >
-                {actions.secondary.label}
-              </button>
-            )}
-            {actions.primary && (
-              <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)";
-                }}
-              >
-                {actions.primary.label}
-              </button>
-            )}
+            {cleanMessage}
           </div>
-        )}
+
+          {/* Actions */}
+          {actions && (
+            <div
+              style={{
+                display: "flex",
+                gap: "10px",
+                flexWrap: "wrap",
+              }}
+            >
+              {actions.secondary && (
+                <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";
+                  }}
+                >
+                  {actions.secondary.label}
+                </button>
+              )}
+              {actions.primary && (
+                <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)";
+                  }}
+                >
+                  {actions.primary.label}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

package/src/context/copilot-context.tsx

@@ -1,4 +1,4 @@
-import { CopilotCloudConfig, FunctionCallHandler, CopilotTraceHandler } from "@copilotkit/shared";
+import { CopilotCloudConfig, FunctionCallHandler } from "@copilotkit/shared";
 import {
   ActionRenderProps,
   CatchAllActionRenderProps,
@@ -218,11 +218,6 @@ export interface CopilotContextParams {
   langGraphInterruptAction: LangGraphInterruptAction | null;
   setLangGraphInterruptAction: LangGraphInterruptActionSetter;
   removeLangGraphInterruptAction: () => void;
-
-  /**
-   * Optional trace handler for comprehensive debugging and observability.
-   */
-  onTrace?: CopilotTraceHandler;
 }
 
 const emptyCopilotContext: CopilotContextParams = {
@@ -293,7 +288,6 @@ const emptyCopilotContext: CopilotContextParams = {
   langGraphInterruptAction: null,
   setLangGraphInterruptAction: () => null,
   removeLangGraphInterruptAction: () => null,
-  onTrace: undefined,
 };
 
 export const CopilotContext = React.createContext<CopilotContextParams>(emptyCopilotContext);