"use client"; import type { AbstractAgent } from "@ag-ui/client"; import type { FrontendTool } from "@copilotkit/core"; import type React from "react"; import { createContext, useContext, type ReactNode, useMemo, useEffect, useLayoutEffect, useReducer, useRef, useState, } from "react"; import { z } from "zod"; import { CopilotKitInspector } from "../components/CopilotKitInspector"; import type { Anchor } from "@copilotkit/web-inspector"; import { LicenseWarningBanner } from "../components/license-warning-banner"; import { createLicenseContextValue, type LicenseContextValue, type DebugConfig, } from "@copilotkit/shared"; import type { CopilotKitCoreErrorCode } from "@copilotkit/core"; import { MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, } from "../components/MCPAppsActivityRenderer"; import { OpenGenerativeUIActivityType, OpenGenerativeUIContentSchema, OpenGenerativeUIActivityRenderer, OpenGenerativeUIToolRenderer, GenerateSandboxedUiArgsSchema, } from "../components/OpenGenerativeUIRenderer"; import { createA2UIMessageRenderer } from "../a2ui/A2UIMessageRenderer"; import { A2UIBuiltInToolCallRenderer } from "../a2ui/A2UIToolCallRenderer"; import { A2UICatalogContext } from "../a2ui/A2UICatalogContext"; import { viewerTheme } from "@copilotkit/a2ui-renderer"; import type { Theme as A2UITheme } from "@copilotkit/a2ui-renderer"; import { CopilotKitCoreReact } from "../lib/react-core"; import type { ReactActivityMessageRenderer, ReactToolCallRenderer, } from "../types"; import type { ReactFrontendTool } from "../types/frontend-tool"; import type { ReactHumanInTheLoop } from "../types/human-in-the-loop"; import type { ReactCustomMessageRenderer } from "../types/react-custom-message-renderer"; import type { SandboxFunction } from "../types/sandbox-function"; import { SandboxFunctionsContext } from "./SandboxFunctionsContext"; import { schemaToJsonSchema } from "@copilotkit/shared"; import { zodToJsonSchema } from "zod-to-json-schema"; const HEADER_NAME = "X-CopilotCloud-Public-Api-Key"; const COPILOT_CLOUD_CHAT_URL = "https://api.cloud.copilotkit.ai/copilotkit/v1"; const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui: - Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces. - Neutral base palette: white backgrounds, zinc/slate gray text (#09090b for headings, #71717a for secondary text). One accent color for interactive elements. - Use system font stacks (system-ui, -apple-system, sans-serif) at readable sizes (14px body, 600 weight for headings). Tight line-heights. - Small, consistent border-radius (6–8px). Cards and containers use border, not shadow, for separation. - Buttons: solid fill for primary (dark bg, white text), outline for secondary (border + transparent bg). Subtle hover state (slight opacity or background shift). - Use CSS Grid or Flexbox for layout. Ensure the UI looks good at any width. - Minimal transitions (150ms) for hover/focus states only. No decorative animations. - Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`; const GENERATE_SANDBOXED_UI_DESCRIPTION = "Generate sandboxed UI. " + "IMPORTANT: The generated code runs in a sandboxed iframe WITHOUT same-origin access. " + "Do NOT use localStorage, sessionStorage, document.cookie, IndexedDB, or fetch/XMLHttpRequest to same-origin URLs. " + "To communicate with the host application, use Websandbox.connection.remote.(args) which returns a Promise.\n\n" + "You CAN use external libraries from CDNs by including