@copilotkit/react-core 2.0.0-next.1 → 2.0.0-rc.0

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

@@ -1,363 +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;
-}
-
-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

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

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

@@ -1,76 +0,0 @@
-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 };