@copilotkit/react-core 1.55.0-next.9 → 1.55.1-next.0

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

@@ -97,6 +97,269 @@ export function useToast() {
   return context;
 }
 
+function formatBannerMessage(message: string): string {
+  // Try to extract the useful message from JSON first
+  const jsonMatch = message.match(/'message':\s*'([^']+)'/);
+  if (jsonMatch) {
+    return jsonMatch[1];
+  }
+
+  // Strip technical garbage but keep the meaningful message
+  let cleaned = message.split(" - ")[0];
+  cleaned = cleaned.split(": Error code")[0];
+  cleaned = cleaned.replace(/:\s*\d{3}$/, "");
+  cleaned = cleaned.replace(/See more:.*$/g, "");
+  cleaned = cleaned.trim();
+
+  return cleaned || "An error occurred.";
+}
+
+function extractUrl(message: string): { url: string; text: string } | null {
+  const markdownMatch = /\[([^\]]+)\]\(([^)]+)\)/.exec(message);
+  if (markdownMatch) {
+    return { url: markdownMatch[2], text: "See More" };
+  }
+  const plainMatch = /(https?:\/\/[^\s)]+)/.exec(message);
+  if (plainMatch) {
+    return {
+      url: plainMatch[0].replace(/[.,;:'"]*$/, ""),
+      text: "See More",
+    };
+  }
+  return null;
+}
+
+function BannerErrorDisplay({
+  bannerError,
+  onDismiss,
+}: {
+  bannerError: CopilotKitError;
+  onDismiss: () => void;
+}) {
+  const [detailsExpanded, setDetailsExpanded] = useState(false);
+  const severity = getErrorSeverity(bannerError);
+  const colors = getErrorColors(severity);
+
+  // Extract optional error details attached by CopilotListeners
+  const details = (bannerError as any).details as
+    | {
+        code?: string;
+        context?: Record<string, any>;
+        stack?: string;
+        originalMessage?: string;
+      }
+    | undefined;
+
+  const link = extractUrl(bannerError.message);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        bottom: "20px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 9999,
+        backgroundColor: colors.background,
+        border: `1px solid ${colors.border}`,
+        borderLeft: `4px solid ${colors.border}`,
+        borderRadius: "8px",
+        padding: "12px 16px",
+        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",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: "10px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            flex: 1,
+            minWidth: 0,
+          }}
+        >
+          <div
+            style={{
+              width: "12px",
+              height: "12px",
+              borderRadius: "50%",
+              backgroundColor: colors.border,
+              flexShrink: 0,
+            }}
+          />
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "10px",
+              flex: 1,
+              minWidth: 0,
+            }}
+          >
+            <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",
+              }}
+            >
+              {formatBannerMessage(bannerError.message)}
+            </div>
+
+            {link && (
+              <button
+                onClick={() =>
+                  window.open(link.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)";
+                }}
+              >
+                {link.text}
+              </button>
+            )}
+
+            {details && (
+              <button
+                onClick={() => setDetailsExpanded(!detailsExpanded)}
+                style={{
+                  background: "transparent",
+                  border: `1px solid ${colors.border}`,
+                  borderRadius: "5px",
+                  padding: "4px 10px",
+                  fontSize: "11px",
+                  fontWeight: "500",
+                  cursor: "pointer",
+                  color: colors.text,
+                  flexShrink: 0,
+                  transition: "all 0.2s ease",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "transparent";
+                }}
+              >
+                {detailsExpanded ? "Hide Details" : "Show Details"}
+              </button>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={onDismiss}
+          style={{
+            background: "transparent",
+            border: "none",
+            color: colors.text,
+            cursor: "pointer",
+            padding: "2px",
+            borderRadius: "3px",
+            fontSize: "14px",
+            lineHeight: "1",
+            opacity: 0.6,
+            transition: "all 0.2s ease",
+            flexShrink: 0,
+          }}
+          title="Dismiss"
+          onMouseEnter={(e) => {
+            e.currentTarget.style.opacity = "1";
+            e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.opacity = "0.6";
+            e.currentTarget.style.background = "transparent";
+          }}
+        >
+          x
+        </button>
+      </div>
+
+      {detailsExpanded && details && (
+        <div
+          style={{
+            marginTop: "10px",
+            padding: "10px",
+            background: "rgba(0, 0, 0, 0.04)",
+            borderRadius: "6px",
+            fontSize: "11px",
+            fontFamily: "monospace",
+            color: colors.text,
+            lineHeight: "1.5",
+            maxHeight: "200px",
+            overflowY: "auto",
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-all",
+          }}
+        >
+          {details.code && (
+            <div>
+              <strong>Code:</strong> {details.code}
+            </div>
+          )}
+          {details.originalMessage && (
+            <div style={{ marginTop: "4px" }}>
+              <strong>Message:</strong> {details.originalMessage}
+            </div>
+          )}
+          {details.context && Object.keys(details.context).length > 0 && (
+            <div style={{ marginTop: "4px" }}>
+              <strong>Context:</strong>{" "}
+              {JSON.stringify(details.context, null, 2)}
+            </div>
+          )}
+          {details.stack && (
+            <div style={{ marginTop: "4px", opacity: 0.7 }}>
+              <strong>Stack:</strong>
+              {"\n"}
+              {details.stack}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function ToastProvider({
   enabled,
   children,
@@ -169,200 +432,12 @@ export function ToastProvider({
   return (
     <ToastContext.Provider value={value}>
       {/* Banner Error Display */}
-      {bannerError &&
-        (() => {
-          const severity = getErrorSeverity(bannerError);
-          const colors = getErrorColors(severity);
-
-          return (
-            <div
-              style={{
-                position: "fixed",
-                bottom: "20px",
-                left: "50%",
-                transform: "translateX(-50%)",
-                zIndex: 9999,
-                backgroundColor: colors.background,
-                border: `1px solid ${colors.border}`,
-                borderLeft: `4px solid ${colors.border}`,
-                borderRadius: "8px",
-                padding: "12px 16px",
-                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",
-              }}
-            >
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  gap: "10px",
-                }}
-              >
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    flex: 1,
-                    minWidth: 0,
-                  }}
-                >
-                  <div
-                    style={{
-                      width: "12px",
-                      height: "12px",
-                      borderRadius: "50%",
-                      backgroundColor: colors.border,
-                      flexShrink: 0,
-                    }}
-                  />
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "10px",
-                      flex: 1,
-                      minWidth: 0,
-                    }}
-                  >
-                    <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",
-                      }}
-                    >
-                      {(() => {
-                        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
-                        }
-
-                        // 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.";
-                      })()}
-                    </div>
-
-                    {(() => {
-                      const message = bannerError.message;
-                      const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-                      const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
-
-                      // Extract the first URL found
-                      let url = null;
-                      let buttonText = "See More";
-
-                      // Check for markdown links first
-                      const markdownMatch = markdownLinkRegex.exec(message);
-                      if (markdownMatch) {
-                        url = markdownMatch[2];
-                        buttonText = "See More";
-                      } else {
-                        // Check for plain URLs
-                        const urlMatch = plainUrlRegex.exec(message);
-                        if (urlMatch) {
-                          url = urlMatch[0].replace(/[.,;:'"]*$/, ""); // Remove trailing punctuation
-                          buttonText = "See More";
-                        }
-                      }
-
-                      if (!url) return null;
-
-                      return (
-                        <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)";
-                          }}
-                        >
-                          {buttonText}
-                        </button>
-                      );
-                    })()}
-                  </div>
-                </div>
-                <button
-                  onClick={() => setBannerError(null)}
-                  style={{
-                    background: "transparent",
-                    border: "none",
-                    color: colors.text,
-                    cursor: "pointer",
-                    padding: "2px",
-                    borderRadius: "3px",
-                    fontSize: "14px",
-                    lineHeight: "1",
-                    opacity: 0.6,
-                    transition: "all 0.2s ease",
-                    flexShrink: 0,
-                  }}
-                  title="Dismiss"
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.opacity = "1";
-                    e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.opacity = "0.6";
-                    e.currentTarget.style.background = "transparent";
-                  }}
-                >
-                  ×
-                </button>
-              </div>
-            </div>
-          );
-        })()}
+      {bannerError && (
+        <BannerErrorDisplay
+          bannerError={bannerError}
+          onDismiss={() => setBannerError(null)}
+        />
+      )}
 
       {/* Toast Display - Deprecated: All errors now show as banners */}
       {children}

package/src/v2/__tests__/A2UIMessageRenderer.test.tsx

@@ -22,19 +22,25 @@ describe("A2UIMessageRenderer rendering integration", () => {
     });
 
     const content = {
-      operations: [
+      a2ui_operations: [
         {
-          beginRendering: {
+          version: "v0.9",
+          createSurface: {
             surfaceId: "test-surface",
-            root: "root",
-            styles: {},
+            catalogId: "https://a2ui.org/specification/v0_9/basic_catalog.json",
           },
         },
         {
-          surfaceUpdate: {
+          version: "v0.9",
+          updateComponents: {
             surfaceId: "test-surface",
             components: [
-              { id: "root", text: { literalString: "Hello World" } },
+              {
+                id: "root",
+                component: "Text",
+                text: "Hello World",
+                variant: "body",
+              },
             ],
           },
         },
@@ -69,12 +75,27 @@ describe("A2UIMessageRenderer rendering integration", () => {
     let setContent: (content: any) => void;
     const TestWrapper = () => {
       const [content, _setContent] = useState({
-        operations: [
-          { beginRendering: { surfaceId: "test", root: "root", styles: {} } },
+        a2ui_operations: [
           {
-            surfaceUpdate: {
+            version: "v0.9",
+            createSurface: {
               surfaceId: "test",
-              components: [{ id: "root", text: { literalString: "Initial" } }],
+              catalogId:
+                "https://a2ui.org/specification/v0_9/basic_catalog.json",
+            },
+          },
+          {
+            version: "v0.9",
+            updateComponents: {
+              surfaceId: "test",
+              components: [
+                {
+                  id: "root",
+                  component: "Text",
+                  text: "Initial",
+                  variant: "body",
+                },
+              ],
             },
           },
         ],
@@ -94,12 +115,27 @@ describe("A2UIMessageRenderer rendering integration", () => {
 
     await act(async () => {
       setContent({
-        operations: [
-          { beginRendering: { surfaceId: "test", root: "root", styles: {} } },
+        a2ui_operations: [
+          {
+            version: "v0.9",
+            createSurface: {
+              surfaceId: "test",
+              catalogId:
+                "https://a2ui.org/specification/v0_9/basic_catalog.json",
+            },
+          },
           {
-            surfaceUpdate: {
+            version: "v0.9",
+            updateComponents: {
               surfaceId: "test",
-              components: [{ id: "root", text: { literalString: "Updated" } }],
+              components: [
+                {
+                  id: "root",
+                  component: "Text",
+                  text: "Updated",
+                  variant: "body",
+                },
+              ],
             },
           },
         ],
@@ -119,7 +155,7 @@ describe("A2UIMessageRenderer rendering integration", () => {
     const RenderComponent = renderer.render as React.FC<any>;
 
     const TestWrapper = () => (
-      <RenderComponent content={{ operations: [] }} agent={null} />
+      <RenderComponent content={{ a2ui_operations: [] }} agent={null} />
     );
 
     let container: HTMLElement;
@@ -140,19 +176,47 @@ describe("A2UIMessageRenderer rendering integration", () => {
     const RenderComponent = renderer.render as React.FC<any>;
 
     const content = {
-      operations: [
-        { beginRendering: { surfaceId: "s1", root: "r1", styles: {} } },
-        { beginRendering: { surfaceId: "s2", root: "r2", styles: {} } },
+      a2ui_operations: [
+        {
+          version: "v0.9",
+          createSurface: {
+            surfaceId: "s1",
+            catalogId: "https://a2ui.org/specification/v0_9/basic_catalog.json",
+          },
+        },
+        {
+          version: "v0.9",
+          createSurface: {
+            surfaceId: "s2",
+            catalogId: "https://a2ui.org/specification/v0_9/basic_catalog.json",
+          },
+        },
         {
-          surfaceUpdate: {
+          version: "v0.9",
+          updateComponents: {
             surfaceId: "s1",
-            components: [{ id: "r1", text: { literalString: "Surface 1" } }],
+            components: [
+              {
+                id: "root",
+                component: "Text",
+                text: "Surface 1",
+                variant: "body",
+              },
+            ],
           },
         },
         {
-          surfaceUpdate: {
+          version: "v0.9",
+          updateComponents: {
             surfaceId: "s2",
-            components: [{ id: "r2", text: { literalString: "Surface 2" } }],
+            components: [
+              {
+                id: "root",
+                component: "Text",
+                text: "Surface 2",
+                variant: "body",
+              },
+            ],
           },
         },
       ],