@copilotkit/react-core 0.0.0-0.0.0-max-changeset-10101010101010-20260109191632

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

@@ -0,0 +1,363 @@
+import { GraphQLError } from "@copilotkit/runtime-client-gql";
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { PartialBy, CopilotKitError, Severity } from "@copilotkit/shared";
+
+interface Toast {
+  id: string;
+  message: string | React.ReactNode;
+  type: "info" | "success" | "warning" | "error";
+  duration?: number;
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  addToast: (toast: PartialBy<Toast, "id">) => void;
+  addGraphQLErrorsToast: (errors: GraphQLError[]) => void;
+  removeToast: (id: string) => void;
+  enabled: boolean;
+  // Banner management
+  bannerError: CopilotKitError | null;
+  setBannerError: (error: CopilotKitError | null) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+// Helper functions for error banner styling
+type ErrorSeverity = "critical" | "warning" | "info";
+
+interface ErrorColors {
+  background: string;
+  border: string;
+  text: string;
+  icon: string;
+}
+
+function getErrorSeverity(error: CopilotKitError): ErrorSeverity {
+  // Use structured error severity if available
+  if (error.severity) {
+    switch (error.severity) {
+      case Severity.CRITICAL:
+        return "critical";
+      case Severity.WARNING:
+        return "warning";
+      case Severity.INFO:
+        return "info";
+      default:
+        return "info";
+    }
+  }
+
+  // Fallback: Check for API key errors which should always be critical
+  const message = error.message.toLowerCase();
+  if (
+    message.includes("api key") ||
+    message.includes("401") ||
+    message.includes("unauthorized") ||
+    message.includes("authentication") ||
+    message.includes("incorrect api key")
+  ) {
+    return "critical";
+  }
+
+  // Default to info level
+  return "info";
+}
+
+function getErrorColors(severity: ErrorSeverity): ErrorColors {
+  switch (severity) {
+    case "critical":
+      return {
+        background: "#fee2e2",
+        border: "#dc2626",
+        text: "#7f1d1d",
+        icon: "#dc2626",
+      };
+    case "warning":
+      return {
+        background: "#fef3c7",
+        border: "#d97706",
+        text: "#78350f",
+        icon: "#d97706",
+      };
+    case "info":
+      return {
+        background: "#dbeafe",
+        border: "#2563eb",
+        text: "#1e3a8a",
+        icon: "#2563eb",
+      };
+  }
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+
+export function ToastProvider({
+  enabled,
+  children,
+}: {
+  enabled: boolean;
+  children: React.ReactNode;
+}) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [bannerError, setBannerErrorState] = useState<CopilotKitError | null>(null);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const addToast = useCallback(
+    (toast: PartialBy<Toast, "id">) => {
+      // Respect the enabled flag for ALL toasts
+      if (!enabled) {
+        return;
+      }
+
+      const id = toast.id ?? Math.random().toString(36).substring(2, 9);
+
+      setToasts((currentToasts) => {
+        if (currentToasts.find((toast) => toast.id === id)) return currentToasts;
+        return [...currentToasts, { ...toast, id }];
+      });
+
+      if (toast.duration) {
+        setTimeout(() => {
+          removeToast(id);
+        }, toast.duration);
+      }
+    },
+    [enabled, removeToast],
+  );
+
+  const setBannerError = useCallback(
+    (error: CopilotKitError | null) => {
+      // Respect the enabled flag for ALL errors
+      if (!enabled && error !== null) {
+        return;
+      }
+      setBannerErrorState(error);
+    },
+    [enabled],
+  );
+
+  const addGraphQLErrorsToast = useCallback((errors: GraphQLError[]) => {
+    // DEPRECATED: All errors now route to banners for consistency
+    console.warn("addGraphQLErrorsToast is deprecated. All errors now show as banners.");
+    // Function kept for backward compatibility - does nothing
+  }, []);
+
+  const value = {
+    toasts,
+    addToast,
+    addGraphQLErrorsToast,
+    removeToast,
+    enabled,
+    bannerError,
+    setBannerError,
+  };
+
+  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>
+          );
+        })()}
+
+      {/* Toast Display - Deprecated: All errors now show as banners */}
+      {children}
+    </ToastContext.Provider>
+  );
+}
+
+// Toast component removed - all errors now show as banners for consistency

package/src/components/usage-banner.tsx

@@ -0,0 +1,259 @@
+import {
+  Severity,
+  CopilotKitError,
+  ErrorVisibility,
+  CopilotKitErrorCode,
+} from "@copilotkit/shared";
+import React from "react";
+
+interface UsageBannerProps {
+  severity?: Severity;
+  message?: string | React.ReactNode;
+  onClose?: () => void;
+  actions?: {
+    primary?: {
+      label: string;
+      onClick: () => void;
+    };
+    secondary?: {
+      label: string;
+      onClick: () => void;
+    };
+  };
+}
+
+export function UsageBanner({
+  severity = Severity.CRITICAL,
+  message = "",
+  onClose,
+  actions,
+}: UsageBannerProps) {
+  if (!message || !severity) {
+    return null;
+  }
+
+  const themes = {
+    [Severity.INFO]: {
+      bg: "#f8fafc",
+      border: "#e2e8f0",
+      text: "#475569",
+      accent: "#3b82f6",
+    },
+    [Severity.WARNING]: {
+      bg: "#fffbeb",
+      border: "#fbbf24",
+      text: "#92400e",
+      accent: "#f59e0b",
+    },
+    [Severity.CRITICAL]: {
+      bg: "#fef2f2",
+      border: "#fecaca",
+      text: "#dc2626",
+      accent: "#ef4444",
+    },
+  };
+
+  const theme = themes[severity];
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes slideUp {
+            from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+            to { opacity: 1; transform: translateX(-50%) translateY(0); }
+          }
+          
+          .usage-banner {
+            position: fixed;
+            bottom: 24px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: min(600px, calc(100vw - 32px));
+            z-index: 10000;
+            animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+          }
+          
+          .banner-content {
+            background: linear-gradient(135deg, ${theme.bg} 0%, ${theme.bg}f5 100%);
+            border: 1px solid ${theme.border};
+            border-radius: 12px;
+            padding: 18px 20px;
+            box-shadow: 
+              0 4px 24px rgba(0, 0, 0, 0.08),
+              0 2px 8px rgba(0, 0, 0, 0.04),
+              inset 0 1px 0 rgba(255, 255, 255, 0.7);
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+            backdrop-filter: blur(12px);
+            position: relative;
+            overflow: hidden;
+          }
+          
+          .banner-content::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, ${theme.accent}40, transparent);
+          }
+          
+          .banner-message {
+            color: ${theme.text};
+            font-size: 14px;
+            line-height: 1.5;
+            font-weight: 500;
+            flex: 1;
+            letter-spacing: -0.01em;
+          }
+          
+          .close-btn {
+            background: rgba(0, 0, 0, 0.05);
+            border: none;
+            color: ${theme.text};
+            cursor: pointer;
+            padding: 0;
+            border-radius: 6px;
+            opacity: 0.6;
+            transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+            font-size: 14px;
+            line-height: 1;
+            flex-shrink: 0;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          
+          .close-btn:hover {
+            opacity: 1;
+            background: rgba(0, 0, 0, 0.08);
+            transform: scale(1.05);
+          }
+          
+          .btn-primary {
+            background: linear-gradient(135deg, ${theme.accent} 0%, ${theme.accent}e6 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 10px 18px;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+            font-family: inherit;
+            flex-shrink: 0;
+            box-shadow: 
+              0 2px 8px ${theme.accent}30,
+              inset 0 1px 0 rgba(255, 255, 255, 0.2);
+            letter-spacing: -0.01em;
+          }
+          
+          .btn-primary:hover {
+            transform: translateY(-1px) scale(1.02);
+            box-shadow: 
+              0 4px 12px ${theme.accent}40,
+              inset 0 1px 0 rgba(255, 255, 255, 0.25);
+          }
+          
+          .btn-primary:active {
+            transform: translateY(0) scale(0.98);
+            transition: all 0.08s cubic-bezier(0.16, 1, 0.3, 1);
+          }
+          
+          @media (max-width: 640px) {
+            .usage-banner {
+              width: calc(100vw - 24px);
+            }
+            
+            .banner-content {
+              padding: 16px;
+              gap: 12px;
+            }
+            
+            .banner-message {
+              font-size: 13px;
+              line-height: 1.45;
+            }
+            
+            .btn-primary {
+              padding: 8px 14px;
+              font-size: 12px;
+            }
+            
+            .close-btn {
+              width: 22px;
+              height: 22px;
+              font-size: 12px;
+            }
+          }
+        `}
+      </style>
+
+      <div className="usage-banner">
+        <div className="banner-content">
+          <div className="banner-message">{message}</div>
+          {actions?.primary && (
+            <button className="btn-primary" onClick={actions.primary.onClick}>
+              {actions.primary.label}
+            </button>
+          )}
+          {onClose && (
+            <button className="close-btn" onClick={onClose} title="Close">
+              ×
+            </button>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+// Get action button based on error type
+export const getErrorActions = (error: CopilotKitError) => {
+  switch (error.code) {
+    case CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR:
+      return {
+        primary: {
+          label: "Show me how",
+          onClick: () =>
+            window.open(
+              "https://docs.copilotkit.ai/premium#how-do-i-get-access-to-premium-features",
+              "_blank",
+              "noopener,noreferrer",
+            ),
+        },
+      };
+    case CopilotKitErrorCode.UPGRADE_REQUIRED_ERROR:
+      return {
+        primary: {
+          label: "Upgrade",
+          onClick: () =>
+            window.open("https://cloud.copilotkit.ai", "_blank", "noopener,noreferrer"),
+        },
+      };
+    default:
+      return undefined;
+  }
+};
+
+export function renderCopilotKitUsage(error: CopilotKitError, onClose?: () => void) {
+  // Route based on error visibility level
+  if (error.visibility !== ErrorVisibility.BANNER) {
+    return null;
+  }
+
+  return (
+    <UsageBanner
+      severity={error.severity || Severity.CRITICAL}
+      message={error.message}
+      onClose={onClose}
+      actions={getErrorActions(error)}
+    />
+  );
+}

package/src/context/coagent-state-renders-context.tsx

@@ -0,0 +1,76 @@
+import React, {
+  createContext,
+  useContext,
+  useCallback,
+  useState,
+  useRef,
+  ReactNode,
+  RefObject,
+} from "react";
+import { CoAgentStateRender } from "../types/coagent-action";
+
+interface StateRenderClaim {
+  stateRenderId: string;
+  stateSnapshot?: any;
+  runId?: string;
+  locked?: boolean;
+}
+
+type ClaimsRef = Record<string, StateRenderClaim>;
+
+export interface CoAgentStateRendersContextValue {
+  coAgentStateRenders: Record<string, CoAgentStateRender<any>>;
+  setCoAgentStateRender: (id: string, stateRender: CoAgentStateRender<any>) => void;
+  removeCoAgentStateRender: (id: string) => void;
+  claimsRef: RefObject<ClaimsRef>;
+}
+
+const CoAgentStateRendersContext = createContext<CoAgentStateRendersContextValue | undefined>(
+  undefined,
+);
+
+export function CoAgentStateRendersProvider({ children }: { children: ReactNode }) {
+  const [coAgentStateRenders, setCoAgentStateRenders] = useState<
+    Record<string, CoAgentStateRender<any>>
+  >({});
+
+  const setCoAgentStateRender = useCallback((id: string, stateRender: CoAgentStateRender<any>) => {
+    setCoAgentStateRenders((prevPoints) => ({
+      ...prevPoints,
+      [id]: stateRender,
+    }));
+  }, []);
+
+  const removeCoAgentStateRender = useCallback((id: string) => {
+    setCoAgentStateRenders((prevPoints) => {
+      const newPoints = { ...prevPoints };
+      delete newPoints[id];
+      return newPoints;
+    });
+  }, []);
+
+  const claimsRef = useRef<ClaimsRef>({});
+
+  return (
+    <CoAgentStateRendersContext.Provider
+      value={{
+        coAgentStateRenders,
+        setCoAgentStateRender,
+        removeCoAgentStateRender,
+        claimsRef,
+      }}
+    >
+      {children}
+    </CoAgentStateRendersContext.Provider>
+  );
+}
+
+export function useCoAgentStateRenders() {
+  const context = useContext(CoAgentStateRendersContext);
+  if (!context) {
+    throw new Error("useCoAgentStateRenders must be used within CoAgentStateRendersProvider");
+  }
+  return context;
+}
+
+export { CoAgentStateRendersContext };