@copilotkit/react-core 1.57.3 → 1.58.0

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

@@ -1,448 +0,0 @@
-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;
-}
-
-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,
-}: {
-  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 && (
-        <BannerErrorDisplay
-          bannerError={bannerError}
-          onDismiss={() => setBannerError(null)}
-        />
-      )}
-
-      {/* 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

@@ -1,266 +0,0 @@
-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)}
-    />
-  );
-}