{"version":3,"file":"copilotkit-DMFu29Kx.cjs","names":["React","DEFAULT_AGENT_ID","twMerge","React","Slot","TooltipPrimitive","DropdownMenuPrimitive","ChevronRightIcon","Square","Loader2","ArrowUp","Mic","X","Check","Plus","React","z","z","React","ToolCallStatus","z","DEFAULT_SURFACE_ID","A2UIProvider","A2UIRenderer","z","z","A2UI_SCHEMA_CONTEXT_DESCRIPTION","A2UI_DEFAULT_GENERATION_GUIDELINES","A2UI_DEFAULT_DESIGN_GUIDELINES","CopilotKitCore","COPILOT_CLOUD_CHAT_URL","viewerTheme","z","React","ToolCallStatus","DEFAULT_AGENT_ID","HttpAgent","DEFAULT_AGENT_ID","CopilotKitCoreRuntimeConnectionStatus","ProxiedCopilotRuntimeAgent","DEFAULT_AGENT_ID","EMPTY_DEPS","React","DEFAULT_AGENT_ID","DEFAULT_AGENT_ID","useThreads","ɵselectThreads","ɵselectThreadsIsLoading","ɵselectThreadsError","ɵselectHasNextPage","ɵselectIsFetchingNextPage","CopilotKitCoreRuntimeConnectionStatus","React","Streamdown","Check","Copy","ThumbsUp","ThumbsDown","Volume2","RefreshCw","X","Check","Copy","Edit","ChevronLeft","ChevronRight","ChevronRight","Streamdown","React","Loader2","React","React","React","CopilotChatAssistantMessage","CopilotChatUserMessage","CopilotChatReasoningMessage","Play","React","Upload","CopilotChatInput","StickToBottom","ChevronDown","TranscriptionErrorCode","DEFAULT_AGENT_ID","HttpAgent","TranscriptionErrorCode","MessageCircle","X","React","X","CopilotChatView","CopilotChatView","CopilotChatView","CopilotPopupView","CopilotChatView","emptyCopilotContext","React","setsHaveIntersection","React","Severity","ErrorVisibility","CopilotKitApiDiscoveryError","CopilotKitRemoteEndpointDiscoveryError","CopilotKitAgentDiscoveryError","CopilotKitError","CopilotKitErrorCode","Severity","CopilotKitErrorCode","COPILOT_CLOUD_API_URL","COPILOT_CLOUD_PUBLIC_API_KEY_HEADER","ReactMarkdown","React","CopilotKitError","CopilotKitLowLevelError","CopilotKitV2Provider","COPILOT_CLOUD_CHAT_URL","COPILOT_CLOUD_PUBLIC_API_KEY_HEADER","React","ConfigurationError","MissingPublicApiKeyError"],"sources":["../src/v2/lib/slots.tsx","../src/v2/providers/CopilotChatConfigurationProvider.tsx","../src/v2/lib/utils.ts","../src/v2/components/ui/button.tsx","../src/v2/components/ui/tooltip.tsx","../src/v2/components/ui/dropdown-menu.tsx","../src/v2/components/chat/CopilotChatAudioRecorder.tsx","../src/v2/components/chat/CopilotChatInput.tsx","../src/v2/hooks/useKatexStyles.ts","../src/v2/components/CopilotKitInspector.tsx","../src/v2/components/license-warning-banner.tsx","../src/v2/components/MCPAppsActivityRenderer.tsx","../src/v2/providers/SandboxFunctionsContext.ts","../src/v2/lib/processPartialHtml.ts","../src/v2/components/OpenGenerativeUIRenderer.tsx","../src/v2/a2ui/A2UIMessageRenderer.tsx","../src/v2/types/defineToolCallRenderer.ts","../src/v2/a2ui/A2UIToolCallRenderer.tsx","../src/v2/hooks/use-agent-context.tsx","../src/v2/a2ui/A2UICatalogContext.tsx","../src/v2/lib/react-core.ts","../src/v2/providers/CopilotKitProvider.tsx","../src/v2/hooks/use-render-tool-call.tsx","../src/v2/hooks/use-agent.tsx","../src/v2/hooks/use-render-custom-messages.tsx","../src/v2/hooks/use-render-activity-message.tsx","../src/v2/hooks/use-frontend-tool.tsx","../src/v2/hooks/use-component.tsx","../src/v2/hooks/use-render-tool.tsx","../src/v2/hooks/use-default-render-tool.tsx","../src/v2/hooks/use-human-in-the-loop.tsx","../src/v2/hooks/use-capabilities.tsx","../src/v2/hooks/use-suggestions.tsx","../src/v2/hooks/use-configure-suggestions.tsx","../src/v2/hooks/use-interrupt.tsx","../src/v2/hooks/use-threads.tsx","../src/v2/hooks/use-attachments.tsx","../src/v2/components/chat/CopilotChatToolCallsView.tsx","../src/v2/components/chat/CopilotChatAssistantMessage.tsx","../src/v2/components/chat/Lightbox.tsx","../src/v2/components/chat/CopilotChatAttachmentRenderer.tsx","../src/v2/components/chat/CopilotChatUserMessage.tsx","../src/v2/components/chat/CopilotChatReasoningMessage.tsx","../src/v2/components/chat/CopilotChatSuggestionPill.tsx","../src/v2/components/chat/CopilotChatSuggestionView.tsx","../src/v2/components/chat/scroll-element-context.ts","../src/v2/components/chat/CopilotChatMessageView.tsx","../src/v2/components/chat/CopilotChatAttachmentQueue.tsx","../src/v2/hooks/use-keyboard-height.tsx","../src/v2/components/chat/normalize-auto-scroll.ts","../src/v2/components/chat/last-user-message-context.ts","../src/v2/hooks/use-pin-to-send.ts","../src/v2/components/chat/CopilotChatView.tsx","../src/v2/lib/transcription-client.ts","../src/v2/components/chat/CopilotChat.tsx","../src/v2/components/chat/CopilotChatToggleButton.tsx","../src/v2/components/chat/CopilotModalHeader.tsx","../src/v2/components/chat/CopilotSidebarView.tsx","../src/v2/components/chat/CopilotPopupView.tsx","../src/v2/components/chat/CopilotSidebar.tsx","../src/v2/components/chat/CopilotPopup.tsx","../src/v2/components/WildcardToolCallRender.tsx","../src/context/copilot-context.tsx","../src/hooks/use-tree.ts","../src/hooks/use-flat-category-store.ts","../src/context/copilot-messages-context.tsx","../src/components/toast/toast-provider.tsx","../src/utils/dev-console.ts","../src/components/copilot-provider/copilot-messages.tsx","../src/components/usage-banner.tsx","../src/lib/status-checker.ts","../src/components/toast/exclamation-mark-icon.tsx","../src/components/error-boundary/error-utils.tsx","../src/components/error-boundary/error-boundary.tsx","../src/context/coagent-state-renders-context.tsx","../src/context/threads-context.tsx","../src/hooks/use-coagent-state-render-bridge.helpers.ts","../src/hooks/use-coagent-state-render-registry.ts","../src/hooks/use-coagent-state-render-bridge.tsx","../src/components/CopilotListeners.tsx","../src/components/copilot-provider/copilotkit.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\n/** Existing union (unchanged) */\nexport type SlotValue> =\n | C\n | string\n | Partial>;\n\n/**\n * Shallow equality comparison for objects.\n */\nexport function shallowEqual>(\n obj1: T,\n obj2: T,\n): boolean {\n const keys1 = Object.keys(obj1);\n const keys2 = Object.keys(obj2);\n\n if (keys1.length !== keys2.length) return false;\n\n for (const key of keys1) {\n if (obj1[key] !== obj2[key]) return false;\n }\n\n return true;\n}\n\n/**\n * Returns true only for plain JS objects (`{}`), excluding arrays, Dates,\n * class instances, and other exotic objects that happen to have typeof \"object\".\n */\nfunction isPlainObject(obj: unknown): obj is Record {\n return (\n obj !== null &&\n typeof obj === \"object\" &&\n Object.prototype.toString.call(obj) === \"[object Object]\"\n );\n}\n\n/**\n * Returns the same reference as long as the value is shallowly equal to the\n * previous render's value.\n *\n * - Identical references bail out immediately (O(1)).\n * - Plain objects ({}) are shallow-compared key-by-key.\n * - Arrays, Dates, class instances, functions, and primitives are compared by\n * reference only — shallowEqual is never called on non-plain objects, which\n * avoids incorrect equality for e.g. [1,2] vs [1,2] (different arrays).\n *\n * Typical use: stabilize inline slot props so MemoizedSlotWrapper's shallow\n * equality check isn't defeated by a new object reference on every render.\n */\nexport function useShallowStableRef(value: T): T {\n const ref = useRef(value);\n\n // 1. Identical reference — bail early, no comparison needed.\n if (ref.current === value) return ref.current;\n\n // 2. Both are plain objects — shallow-compare to detect structural equality.\n if (isPlainObject(ref.current) && isPlainObject(value)) {\n if (shallowEqual(ref.current, value)) return ref.current;\n }\n\n // 3. Different values (or non-comparable types) — update the ref.\n ref.current = value;\n return ref.current;\n}\n\n/** Utility: concrete React elements for every slot */\ntype SlotElements = { [K in keyof S]: React.ReactElement };\n\nexport type WithSlots<\n S extends Record>,\n Rest = {},\n> = {\n /** Per‑slot overrides */\n [K in keyof S]?: SlotValue;\n} & {\n children?: (props: SlotElements & Rest) => React.ReactNode;\n} & Omit;\n\n/**\n * Check if a value is a React component type (function, class, forwardRef, memo, etc.)\n */\nexport function isReactComponentType(\n value: unknown,\n): value is React.ComponentType {\n if (typeof value === \"function\") {\n return true;\n }\n // forwardRef, memo, lazy have $$typeof but are not valid elements\n if (\n value &&\n typeof value === \"object\" &&\n \"$$typeof\" in value &&\n !React.isValidElement(value)\n ) {\n return true;\n }\n return false;\n}\n\n/**\n * Internal function to render a slot value as a React element (non-memoized).\n */\nfunction renderSlotElement(\n slot: SlotValue> | undefined,\n DefaultComponent: React.ComponentType,\n props: Record,\n): React.ReactElement {\n if (typeof slot === \"string\") {\n // When slot is a string, treat it as a className and merge with existing className\n const existingClassName = props.className as string | undefined;\n return React.createElement(DefaultComponent, {\n ...props,\n className: twMerge(existingClassName, slot),\n });\n }\n\n // Check if slot is a React component type (function, forwardRef, memo, etc.)\n if (isReactComponentType(slot)) {\n return React.createElement(slot, props);\n }\n\n // If slot is a plain object (not a React element), treat it as props override\n if (slot && typeof slot === \"object\" && !React.isValidElement(slot)) {\n return React.createElement(DefaultComponent, {\n ...props,\n ...slot,\n });\n }\n\n return React.createElement(DefaultComponent, props);\n}\n\n/**\n * Internal memoized wrapper component for renderSlot.\n * Uses forwardRef to support ref forwarding.\n */\nconst MemoizedSlotWrapper = React.memo(\n React.forwardRef(function MemoizedSlotWrapper(props, ref) {\n const { $slot, $component, ...rest } = props;\n const propsWithRef: Record =\n ref !== null ? { ...rest, ref } : rest;\n return renderSlotElement($slot, $component, propsWithRef);\n }),\n (prev: any, next: any) => {\n // Compare slot and component references\n if (prev.$slot !== next.$slot) return false;\n if (prev.$component !== next.$component) return false;\n\n // Shallow compare remaining props (ref is handled separately by React)\n const { $slot: _ps, $component: _pc, ...prevRest } = prev;\n const { $slot: _ns, $component: _nc, ...nextRest } = next;\n return shallowEqual(\n prevRest as Record,\n nextRest as Record,\n );\n },\n);\n\n/**\n * Renders a slot value as a memoized React element.\n * Automatically prevents unnecessary re-renders using shallow prop comparison.\n * Supports ref forwarding.\n *\n * @example\n * renderSlot(customInput, CopilotChatInput, { onSubmit: handleSubmit })\n */\nexport function renderSlot<\n C extends React.ComponentType,\n P = React.ComponentProps,\n>(\n slot: SlotValue | undefined,\n DefaultComponent: C,\n props: P,\n): React.ReactElement {\n return React.createElement(MemoizedSlotWrapper, {\n ...props,\n $slot: slot,\n $component: DefaultComponent,\n } as any);\n}\n","import React, {\n createContext,\n useCallback,\n useContext,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DEFAULT_AGENT_ID, randomUUID } from \"@copilotkit/shared\";\nimport { useShallowStableRef } from \"../lib/slots\";\n\n// Default labels\nexport const CopilotChatDefaultLabels = {\n chatInputPlaceholder: \"Type a message...\",\n chatInputToolbarStartTranscribeButtonLabel: \"Transcribe\",\n chatInputToolbarCancelTranscribeButtonLabel: \"Cancel\",\n chatInputToolbarFinishTranscribeButtonLabel: \"Finish\",\n chatInputToolbarAddButtonLabel: \"Add attachments\",\n chatInputToolbarToolsButtonLabel: \"Tools\",\n assistantMessageToolbarCopyCodeLabel: \"Copy\",\n assistantMessageToolbarCopyCodeCopiedLabel: \"Copied\",\n assistantMessageToolbarCopyMessageLabel: \"Copy\",\n assistantMessageToolbarThumbsUpLabel: \"Good response\",\n assistantMessageToolbarThumbsDownLabel: \"Bad response\",\n assistantMessageToolbarReadAloudLabel: \"Read aloud\",\n assistantMessageToolbarRegenerateLabel: \"Regenerate\",\n userMessageToolbarCopyMessageLabel: \"Copy\",\n userMessageToolbarEditMessageLabel: \"Edit\",\n chatDisclaimerText:\n \"AI can make mistakes. Please verify important information.\",\n chatToggleOpenLabel: \"Open chat\",\n chatToggleCloseLabel: \"Close chat\",\n modalHeaderTitle: \"CopilotKit Chat\",\n welcomeMessageText: \"How can I help you today?\",\n};\n\nexport type CopilotChatLabels = typeof CopilotChatDefaultLabels;\n\n// Define the full configuration interface\nexport interface CopilotChatConfigurationValue {\n labels: CopilotChatLabels;\n agentId: string;\n threadId: string;\n isModalOpen: boolean;\n setModalOpen: (open: boolean) => void;\n // True when the current threadId was chosen by the caller rather than\n // silently minted inside the provider chain. Consumers that only make\n // sense against a real backend thread (e.g. /connect, suppressing the\n // welcome screen on switch) gate on this instead of `!!threadId`.\n hasExplicitThreadId: boolean;\n}\n\n// Create the configuration context\nconst CopilotChatConfiguration =\n createContext(null);\n\n// Provider props interface\nexport interface CopilotChatConfigurationProviderProps {\n children: ReactNode;\n labels?: Partial;\n agentId?: string;\n threadId?: string;\n // Lets internal wrappers (e.g. the v1 CopilotKit bridge, which pipes a\n // ThreadsProvider-minted UUID through as `threadId`) declare that the\n // threadId they are supplying is NOT a caller choice. When omitted, the\n // provider infers explicitness from whether the `threadId` prop itself\n // was supplied.\n hasExplicitThreadId?: boolean;\n isModalDefaultOpen?: boolean;\n}\n\n// Provider component\nexport const CopilotChatConfigurationProvider: React.FC<\n CopilotChatConfigurationProviderProps\n> = ({\n children,\n labels,\n agentId,\n threadId,\n hasExplicitThreadId,\n isModalDefaultOpen,\n}) => {\n const parentConfig = useContext(CopilotChatConfiguration);\n\n // Stabilize labels references so that inline objects (new reference on every\n // parent render) don't invalidate mergedLabels and churn the context value.\n // parentConfig?.labels is already stabilized by the parent provider's own\n // useShallowStableRef, so we only need to stabilize the local labels prop.\n const stableLabels = useShallowStableRef(labels);\n const mergedLabels: CopilotChatLabels = useMemo(\n () => ({\n ...CopilotChatDefaultLabels,\n ...parentConfig?.labels,\n ...stableLabels,\n }),\n [stableLabels, parentConfig?.labels],\n );\n\n const resolvedAgentId = agentId ?? parentConfig?.agentId ?? DEFAULT_AGENT_ID;\n\n const resolvedThreadId = useMemo(() => {\n if (threadId) {\n return threadId;\n }\n if (parentConfig?.threadId) {\n return parentConfig.threadId;\n }\n return randomUUID();\n }, [threadId, parentConfig?.threadId]);\n\n // If a caller passed `hasExplicitThreadId`, trust it verbatim (lets the v1\n // bridge mark an auto-minted UUID as non-explicit). Otherwise infer: a\n // threadId supplied as a prop here is by definition a caller choice.\n const ownHasExplicitThreadId =\n hasExplicitThreadId !== undefined ? hasExplicitThreadId : !!threadId;\n const resolvedHasExplicitThreadId =\n ownHasExplicitThreadId || !!parentConfig?.hasExplicitThreadId;\n\n const resolvedDefaultOpen = isModalDefaultOpen ?? true;\n\n const [internalModalOpen, setInternalModalOpen] =\n useState(resolvedDefaultOpen);\n\n const hasExplicitDefault = isModalDefaultOpen !== undefined;\n\n // When this provider owns its modal state, wrap the setter so that changes\n // propagate upward to any ancestor provider. This allows an outer\n // CopilotChatConfigurationProvider (e.g. a user's layout-level provider) to\n // observe open/close events that originate deep in the tree — fixing the\n // \"outer hook always returns true\" regression (CPK-7152 Behavior B).\n const setAndSync = useCallback(\n (open: boolean) => {\n setInternalModalOpen(open);\n parentConfig?.setModalOpen(open);\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [parentConfig?.setModalOpen],\n );\n\n // Sync parent → child: when an ancestor's modal state is changed externally\n // (e.g. the user calls setModalOpen from an outer hook), reflect that change\n // in our own state so the sidebar/popup responds accordingly.\n // Skip the initial mount so that our own isModalDefaultOpen is respected and\n // not immediately overwritten by the parent's current value.\n const isMounted = useRef(false);\n useEffect(() => {\n if (!hasExplicitDefault) return;\n if (!isMounted.current) {\n isMounted.current = true;\n return;\n }\n if (parentConfig?.isModalOpen === undefined) return;\n setInternalModalOpen(parentConfig.isModalOpen);\n }, [parentConfig?.isModalOpen, hasExplicitDefault]);\n\n const resolvedIsModalOpen = hasExplicitDefault\n ? internalModalOpen\n : (parentConfig?.isModalOpen ?? internalModalOpen);\n const resolvedSetModalOpen = hasExplicitDefault\n ? setAndSync\n : (parentConfig?.setModalOpen ?? setInternalModalOpen);\n\n const configurationValue: CopilotChatConfigurationValue = useMemo(\n () => ({\n labels: mergedLabels,\n agentId: resolvedAgentId,\n threadId: resolvedThreadId,\n hasExplicitThreadId: resolvedHasExplicitThreadId,\n isModalOpen: resolvedIsModalOpen,\n setModalOpen: resolvedSetModalOpen,\n }),\n [\n mergedLabels,\n resolvedAgentId,\n resolvedThreadId,\n resolvedHasExplicitThreadId,\n resolvedIsModalOpen,\n resolvedSetModalOpen,\n ],\n );\n\n return (\n \n {children}\n \n );\n};\n\n// Hook to use the full configuration\nexport const useCopilotChatConfiguration =\n (): CopilotChatConfigurationValue | null => {\n const configuration = useContext(CopilotChatConfiguration);\n return configuration;\n };\n","import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({ prefix: \"cpk\" });\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"cpk:inline-flex cpk:items-center cpk:justify-center cpk:gap-2 cpk:whitespace-nowrap cpk:rounded-md cpk:text-sm cpk:font-medium cpk:transition-all cpk:disabled:pointer-events-none cpk:disabled:opacity-50 cpk:[&_svg]:pointer-events-none cpk:[&_svg:not([class*='size-'])]:size-4 cpk:shrink-0 cpk:[&_svg]:shrink-0 cpk:outline-none cpk:focus-visible:border-ring cpk:focus-visible:ring-ring/50 cpk:focus-visible:ring-[3px] cpk:aria-invalid:ring-destructive/20 cpk:dark:aria-invalid:ring-destructive/40 cpk:aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default:\n \"cpk:bg-primary cpk:text-primary-foreground cpk:shadow-xs cpk:hover:bg-primary/90\",\n destructive:\n \"cpk:bg-destructive cpk:text-white cpk:shadow-xs cpk:hover:bg-destructive/90 cpk:focus-visible:ring-destructive/20 cpk:dark:focus-visible:ring-destructive/40 cpk:dark:bg-destructive/60\",\n outline:\n \"cpk:border cpk:bg-background cpk:shadow-xs cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:bg-input/30 cpk:dark:border-input cpk:dark:hover:bg-input/50\",\n secondary:\n \"cpk:bg-secondary cpk:text-secondary-foreground cpk:shadow-xs cpk:hover:bg-secondary/80\",\n ghost:\n \"cpk:hover:bg-accent cpk:hover:text-accent-foreground cpk:dark:hover:bg-accent/50 cpk:cursor-pointer\",\n link: \"cpk:text-primary cpk:underline-offset-4 cpk:hover:underline\",\n assistantMessageToolbarButton: [\n \"cpk:cursor-pointer\",\n // Background and text\n \"cpk:p-0 cpk:text-[rgb(93,93,93)] cpk:hover:bg-[#E8E8E8]\",\n // Dark mode - lighter gray for better contrast\n \"cpk:dark:text-[rgb(243,243,243)] cpk:dark:hover:bg-[#303030]\",\n // Shape and sizing\n \"cpk:h-8 cpk:w-8\",\n // Interactions\n \"cpk:transition-colors\",\n // Hover states\n \"cpk:hover:text-[rgb(93,93,93)]\",\n \"cpk:dark:hover:text-[rgb(243,243,243)]\",\n ],\n chatInputToolbarPrimary: [\n \"cpk:cursor-pointer\",\n // Background and text\n \"cpk:bg-black cpk:text-white\",\n // Dark mode\n \"cpk:dark:bg-white cpk:dark:text-black cpk:dark:focus-visible:outline-white\",\n // Shape and sizing\n \"cpk:rounded-full\",\n // Interactions\n \"cpk:transition-colors\",\n // Focus states\n \"cpk:focus:outline-none\",\n // Hover states\n \"cpk:hover:opacity-70 cpk:disabled:hover:opacity-100\",\n // Disabled states\n \"cpk:disabled:cursor-not-allowed cpk:disabled:bg-[#00000014] cpk:disabled:text-[rgb(13,13,13)]\",\n \"cpk:dark:disabled:bg-[#454545] cpk:dark:disabled:text-white \",\n ],\n chatInputToolbarSecondary: [\n \"cpk:cursor-pointer\",\n // Background and text\n \"cpk:bg-transparent cpk:text-[#444444]\",\n // Dark mode\n \"cpk:dark:text-white cpk:dark:border-[#404040]\",\n // Shape and sizing\n \"cpk:rounded-full\",\n // Interactions\n \"cpk:transition-colors\",\n // Focus states\n \"cpk:focus:outline-none\",\n // Hover states\n \"cpk:hover:bg-[#f8f8f8] cpk:hover:text-[#333333]\",\n \"cpk:dark:hover:bg-[#404040] cpk:dark:hover:text-[#FFFFFF]\",\n // Disabled states\n \"cpk:disabled:cursor-not-allowed cpk:disabled:opacity-50\",\n \"cpk:disabled:hover:bg-transparent cpk:disabled:hover:text-[#444444]\",\n \"cpk:dark:disabled:hover:bg-transparent cpk:dark:disabled:hover:text-[#CCCCCC]\",\n ],\n },\n size: {\n default: \"cpk:h-9 cpk:px-4 cpk:py-2 cpk:has-[>svg]:px-3\",\n sm: \"cpk:h-8 cpk:rounded-md cpk:gap-1.5 cpk:px-3 cpk:has-[>svg]:px-2.5\",\n lg: \"cpk:h-10 cpk:rounded-md cpk:px-6 cpk:has-[>svg]:px-4\",\n icon: \"cpk:size-9\",\n chatInputToolbarIcon: [\n // Shape and sizing\n \"cpk:h-9 cpk:w-9 cpk:rounded-full\",\n ],\n chatInputToolbarIconLabel: [\n // Shape and sizing\n \"cpk:h-9 cpk:px-3 cpk:rounded-full\",\n // Layout\n \"cpk:gap-2\",\n // Typography\n \"cpk:font-normal\",\n ],\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nconst Button = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean;\n }\n>(function Button(\n { className, variant, size, asChild = false, ...props },\n ref,\n) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n \n );\n});\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction Tooltip({\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction TooltipContent({\n className,\n sideOffset = 0,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n \n );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n );\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n","import {\n useRef,\n useEffect,\n useImperativeHandle,\n forwardRef,\n useCallback,\n useState,\n} from \"react\";\nimport { twMerge } from \"tailwind-merge\";\n\n/** Finite-state machine for every recorder implementation */\nexport type AudioRecorderState = \"idle\" | \"recording\" | \"processing\";\n\n/** Error subclass so callers can `instanceof`-guard recorder failures */\nexport class AudioRecorderError extends Error {\n constructor(message: string) {\n super(message);\n this.name = \"AudioRecorderError\";\n }\n}\n\nexport interface AudioRecorderRef {\n state: AudioRecorderState;\n start: () => Promise;\n stop: () => Promise;\n dispose: () => void;\n}\n\nexport const CopilotChatAudioRecorder = forwardRef<\n AudioRecorderRef,\n React.HTMLAttributes\n>((props, ref) => {\n const { className, ...divProps } = props;\n const canvasRef = useRef(null);\n\n // Recording state\n const [recorderState, setRecorderState] =\n useState(\"idle\");\n const mediaRecorderRef = useRef(null);\n const audioChunksRef = useRef([]);\n const streamRef = useRef(null);\n const analyserRef = useRef(null);\n const audioContextRef = useRef(null);\n const animationIdRef = useRef(null);\n\n // Amplitude history buffer for scrolling waveform\n const amplitudeHistoryRef = useRef([]);\n const frameCountRef = useRef(0);\n const scrollOffsetRef = useRef(0);\n const smoothedAmplitudeRef = useRef(0);\n const fadeOpacityRef = useRef(0);\n\n // Clean up all resources\n const cleanup = useCallback(() => {\n if (animationIdRef.current) {\n cancelAnimationFrame(animationIdRef.current);\n animationIdRef.current = null;\n }\n if (\n mediaRecorderRef.current &&\n mediaRecorderRef.current.state !== \"inactive\"\n ) {\n try {\n mediaRecorderRef.current.stop();\n } catch {\n // Ignore errors during cleanup\n }\n }\n if (streamRef.current) {\n streamRef.current.getTracks().forEach((track) => track.stop());\n streamRef.current = null;\n }\n if (audioContextRef.current && audioContextRef.current.state !== \"closed\") {\n audioContextRef.current.close().catch(() => {\n // Ignore close errors\n });\n audioContextRef.current = null;\n }\n mediaRecorderRef.current = null;\n analyserRef.current = null;\n audioChunksRef.current = [];\n amplitudeHistoryRef.current = [];\n frameCountRef.current = 0;\n scrollOffsetRef.current = 0;\n smoothedAmplitudeRef.current = 0;\n fadeOpacityRef.current = 0;\n }, []);\n\n // Start recording\n const start = useCallback(async () => {\n if (recorderState !== \"idle\") {\n throw new AudioRecorderError(\"Recorder is already active\");\n }\n\n try {\n // Request microphone access\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n streamRef.current = stream;\n\n // Set up audio context for visualization\n const audioContext = new AudioContext();\n audioContextRef.current = audioContext;\n const source = audioContext.createMediaStreamSource(stream);\n const analyser = audioContext.createAnalyser();\n analyser.fftSize = 2048; // Higher resolution for time-domain waveform\n source.connect(analyser);\n analyserRef.current = analyser;\n\n // Determine best MIME type for recording\n const mimeType = MediaRecorder.isTypeSupported(\"audio/webm;codecs=opus\")\n ? \"audio/webm;codecs=opus\"\n : MediaRecorder.isTypeSupported(\"audio/webm\")\n ? \"audio/webm\"\n : MediaRecorder.isTypeSupported(\"audio/mp4\")\n ? \"audio/mp4\"\n : \"\";\n\n const options: MediaRecorderOptions = mimeType ? { mimeType } : {};\n const mediaRecorder = new MediaRecorder(stream, options);\n mediaRecorderRef.current = mediaRecorder;\n audioChunksRef.current = [];\n\n mediaRecorder.ondataavailable = (event) => {\n if (event.data.size > 0) {\n audioChunksRef.current.push(event.data);\n }\n };\n\n // Start recording with timeslice to collect data periodically\n mediaRecorder.start(100);\n setRecorderState(\"recording\");\n } catch (error) {\n cleanup();\n if (error instanceof Error && error.name === \"NotAllowedError\") {\n throw new AudioRecorderError(\"Microphone permission denied\");\n }\n if (error instanceof Error && error.name === \"NotFoundError\") {\n throw new AudioRecorderError(\"No microphone found\");\n }\n throw new AudioRecorderError(\n error instanceof Error ? error.message : \"Failed to start recording\",\n );\n }\n }, [recorderState, cleanup]);\n\n // Stop recording and return audio blob\n const stop = useCallback((): Promise => {\n return new Promise((resolve, reject) => {\n const mediaRecorder = mediaRecorderRef.current;\n if (!mediaRecorder || recorderState !== \"recording\") {\n reject(new AudioRecorderError(\"No active recording\"));\n return;\n }\n\n setRecorderState(\"processing\");\n\n mediaRecorder.onstop = () => {\n const mimeType = mediaRecorder.mimeType || \"audio/webm\";\n const audioBlob = new Blob(audioChunksRef.current, { type: mimeType });\n\n // Clean up but keep the blob\n cleanup();\n setRecorderState(\"idle\");\n resolve(audioBlob);\n };\n\n mediaRecorder.onerror = () => {\n cleanup();\n setRecorderState(\"idle\");\n reject(new AudioRecorderError(\"Recording failed\"));\n };\n\n mediaRecorder.stop();\n });\n }, [recorderState, cleanup]);\n\n // Calculate RMS amplitude from time-domain data\n const calculateAmplitude = (dataArray: Uint8Array): number => {\n let sum = 0;\n for (let i = 0; i < dataArray.length; i++) {\n // Normalize to -1 to 1 range (128 is center/silence)\n const sample = (dataArray[i] ?? 128) / 128 - 1;\n sum += sample * sample;\n }\n return Math.sqrt(sum / dataArray.length);\n };\n\n // Canvas rendering with animation\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n // Configuration\n const barWidth = 2;\n const barGap = 1;\n const barSpacing = barWidth + barGap;\n const scrollSpeed = 1 / 3; // Pixels per frame\n\n const draw = () => {\n const rect = canvas.getBoundingClientRect();\n const dpr = window.devicePixelRatio || 1;\n\n // Update canvas dimensions if container resized\n if (\n canvas.width !== rect.width * dpr ||\n canvas.height !== rect.height * dpr\n ) {\n canvas.width = rect.width * dpr;\n canvas.height = rect.height * dpr;\n ctx.scale(dpr, dpr);\n }\n\n // Calculate how many bars fit in the canvas (plus extra for smooth scrolling)\n const maxBars = Math.floor(rect.width / barSpacing) + 2;\n\n // Get current amplitude if recording\n if (analyserRef.current && recorderState === \"recording\") {\n // Pre-fill history with zeros on first frame so line is visible immediately\n if (amplitudeHistoryRef.current.length === 0) {\n amplitudeHistoryRef.current = new Array(maxBars).fill(0);\n }\n\n // Fade in the waveform smoothly\n if (fadeOpacityRef.current < 1) {\n fadeOpacityRef.current = Math.min(1, fadeOpacityRef.current + 0.03);\n }\n\n // Smooth scrolling - increment offset every frame\n scrollOffsetRef.current += scrollSpeed;\n\n // Sample amplitude every frame for smoothing\n const bufferLength = analyserRef.current.fftSize;\n const dataArray = new Uint8Array(bufferLength);\n analyserRef.current.getByteTimeDomainData(dataArray);\n const rawAmplitude = calculateAmplitude(dataArray);\n\n // Smoothing: gradual attack and decay\n const attackSpeed = 0.12; // Smooth rise\n const decaySpeed = 0.08; // Smooth fade out\n const speed =\n rawAmplitude > smoothedAmplitudeRef.current\n ? attackSpeed\n : decaySpeed;\n smoothedAmplitudeRef.current +=\n (rawAmplitude - smoothedAmplitudeRef.current) * speed;\n\n // When offset reaches a full bar width, add a new sample and reset offset\n if (scrollOffsetRef.current >= barSpacing) {\n scrollOffsetRef.current -= barSpacing;\n amplitudeHistoryRef.current.push(smoothedAmplitudeRef.current);\n\n // Trim history to fit canvas\n if (amplitudeHistoryRef.current.length > maxBars) {\n amplitudeHistoryRef.current =\n amplitudeHistoryRef.current.slice(-maxBars);\n }\n }\n }\n\n // Clear canvas\n ctx.clearRect(0, 0, rect.width, rect.height);\n\n // Get current foreground color\n const computedStyle = getComputedStyle(canvas);\n ctx.fillStyle = computedStyle.color;\n ctx.globalAlpha = fadeOpacityRef.current;\n\n const centerY = rect.height / 2;\n const maxAmplitude = rect.height / 2 - 2; // Leave some padding\n\n const history = amplitudeHistoryRef.current;\n\n // Only draw when recording (history has data)\n if (history.length > 0) {\n const offset = scrollOffsetRef.current;\n const edgeFadeWidth = 12; // Pixels to fade at each edge\n\n for (let i = 0; i < history.length; i++) {\n const amplitude = history[i] ?? 0;\n // Scale amplitude (RMS is typically 0-0.5 for normal speech)\n const scaledAmplitude = Math.min(amplitude * 4, 1);\n const barHeight = Math.max(2, scaledAmplitude * maxAmplitude * 2);\n\n // Position: right-aligned with smooth scroll offset\n const x = rect.width - (history.length - i) * barSpacing - offset;\n const y = centerY - barHeight / 2;\n\n // Only draw if visible\n if (x + barWidth > 0 && x < rect.width) {\n // Calculate edge fade opacity\n let edgeOpacity = 1;\n if (x < edgeFadeWidth) {\n // Fade out on left edge\n edgeOpacity = Math.max(0, x / edgeFadeWidth);\n } else if (x > rect.width - edgeFadeWidth) {\n // Fade in on right edge\n edgeOpacity = Math.max(0, (rect.width - x) / edgeFadeWidth);\n }\n\n ctx.globalAlpha = fadeOpacityRef.current * edgeOpacity;\n ctx.fillRect(x, y, barWidth, barHeight);\n }\n }\n }\n\n animationIdRef.current = requestAnimationFrame(draw);\n };\n\n draw();\n\n return () => {\n if (animationIdRef.current) {\n cancelAnimationFrame(animationIdRef.current);\n }\n };\n }, [recorderState]);\n\n // Cleanup on unmount\n useEffect(() => {\n return cleanup;\n }, [cleanup]);\n\n // Expose AudioRecorder API via ref\n useImperativeHandle(\n ref,\n () => ({\n get state() {\n return recorderState;\n },\n start,\n stop,\n dispose: cleanup,\n }),\n [recorderState, start, stop, cleanup],\n );\n\n return (\n \n \n \n );\n});\n\nCopilotChatAudioRecorder.displayName = \"CopilotChatAudioRecorder\";\n","import React, {\n useState,\n useRef,\n KeyboardEvent,\n ChangeEvent,\n useEffect,\n useLayoutEffect,\n forwardRef,\n useImperativeHandle,\n useCallback,\n useMemo,\n} from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Plus, Mic, ArrowUp, X, Check, Square, Loader2 } from \"lucide-react\";\n\nimport {\n CopilotChatLabels,\n useCopilotChatConfiguration,\n CopilotChatDefaultLabels,\n} from \"../../providers/CopilotChatConfigurationProvider\";\nimport { Button } from \"../../components/ui/button\";\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"../../components/ui/tooltip\";\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n DropdownMenuSeparator,\n} from \"../../components/ui/dropdown-menu\";\n\nimport { CopilotChatAudioRecorder } from \"./CopilotChatAudioRecorder\";\nimport { renderSlot, WithSlots } from \"../../lib/slots\";\nimport { cn } from \"../../lib/utils\";\n\nexport type CopilotChatInputMode = \"input\" | \"transcribe\" | \"processing\";\n\nexport type ToolsMenuItem = {\n label: string;\n} & (\n | {\n action: () => void;\n items?: never;\n }\n | {\n action?: never;\n items: (ToolsMenuItem | \"-\")[];\n }\n);\n\ntype CopilotChatInputSlots = {\n textArea: typeof CopilotChatInput.TextArea;\n sendButton: typeof CopilotChatInput.SendButton;\n startTranscribeButton: typeof CopilotChatInput.StartTranscribeButton;\n cancelTranscribeButton: typeof CopilotChatInput.CancelTranscribeButton;\n finishTranscribeButton: typeof CopilotChatInput.FinishTranscribeButton;\n addMenuButton: typeof CopilotChatInput.AddMenuButton;\n audioRecorder: typeof CopilotChatAudioRecorder;\n disclaimer: typeof CopilotChatInput.Disclaimer;\n};\n\ntype CopilotChatInputRestProps = {\n mode?: CopilotChatInputMode;\n toolsMenu?: (ToolsMenuItem | \"-\")[];\n autoFocus?: boolean;\n onSubmitMessage?: (value: string) => void;\n onStop?: () => void;\n isRunning?: boolean;\n onStartTranscribe?: () => void;\n onCancelTranscribe?: () => void;\n onFinishTranscribe?: () => void;\n onFinishTranscribeWithAudio?: (audioBlob: Blob) => Promise;\n onAddFile?: () => void;\n value?: string;\n onChange?: (value: string) => void;\n /** Positioning mode for the input container. Default: 'static' */\n positioning?: \"static\" | \"absolute\";\n /** Keyboard height in pixels for mobile keyboard handling */\n keyboardHeight?: number;\n /** Ref for the outer positioning container */\n containerRef?: React.Ref;\n /** Whether to show the disclaimer. Default: true for absolute positioning, false for static */\n showDisclaimer?: boolean;\n /**\n * Set to `true` when the input sits at the bottom of its container as a\n * flex-last-child (visible position is driven by layout, not CSS\n * positioning). Triggers reservation of bottom space for the fixed\n * CopilotKit license banner via the\n * `--copilotkit-license-banner-offset` CSS var so the two don't overlap.\n *\n * Not needed when `positioning === \"absolute\"`; that mode already pins the\n * input to the bottom and picks up the same reservation automatically.\n * Leave unset (default `false`) for inputs rendered mid-layout such as the\n * welcome screen, where the banner offset would push the input off-center.\n */\n bottomAnchored?: boolean;\n} & Omit, \"onChange\">;\n\ntype CopilotChatInputBaseProps = WithSlots<\n CopilotChatInputSlots,\n CopilotChatInputRestProps\n>;\n\ntype CopilotChatInputChildrenArgs = CopilotChatInputBaseProps extends {\n children?: infer C;\n}\n ? C extends (props: infer P) => React.ReactNode\n ? P\n : never\n : never;\n\nexport type CopilotChatInputProps = Omit<\n CopilotChatInputBaseProps,\n \"children\"\n> & {\n children?: (props: CopilotChatInputChildrenArgs) => React.ReactNode;\n};\n\nconst SLASH_MENU_MAX_VISIBLE_ITEMS = 5;\nconst SLASH_MENU_ITEM_HEIGHT_PX = 40;\n\nexport function CopilotChatInput({\n mode = \"input\",\n onSubmitMessage,\n onStop,\n isRunning = false,\n onStartTranscribe,\n onCancelTranscribe,\n onFinishTranscribe,\n onFinishTranscribeWithAudio,\n onAddFile,\n onChange,\n value,\n toolsMenu,\n autoFocus = false,\n positioning = \"static\",\n keyboardHeight = 0,\n containerRef,\n showDisclaimer,\n bottomAnchored = false,\n textArea,\n sendButton,\n startTranscribeButton,\n cancelTranscribeButton,\n finishTranscribeButton,\n addMenuButton,\n audioRecorder,\n disclaimer,\n children,\n className,\n ...props\n}: CopilotChatInputProps) {\n const isControlled = value !== undefined;\n const [internalValue, setInternalValue] = useState(() => value ?? \"\");\n\n useEffect(() => {\n if (!isControlled && value !== undefined) {\n setInternalValue(value);\n }\n }, [isControlled, value]);\n\n const resolvedValue = isControlled ? (value ?? \"\") : internalValue;\n\n const [layout, setLayout] = useState<\"compact\" | \"expanded\">(\"compact\");\n const ignoreResizeRef = useRef(false);\n const resizeEvaluationRafRef = useRef(null);\n const isExpanded = mode === \"input\" && layout === \"expanded\";\n const [commandQuery, setCommandQuery] = useState(null);\n const [slashHighlightIndex, setSlashHighlightIndex] = useState(0);\n\n const inputRef = useRef(null);\n const gridRef = useRef(null);\n const addButtonContainerRef = useRef(null);\n const actionsContainerRef = useRef(null);\n const audioRecorderRef =\n useRef>(null);\n const slashMenuRef = useRef(null);\n const config = useCopilotChatConfiguration();\n const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n const previousModalStateRef = useRef(undefined);\n const measurementCanvasRef = useRef(null);\n const measurementsRef = useRef({\n singleLineHeight: 0,\n maxHeight: 0,\n paddingLeft: 0,\n paddingRight: 0,\n });\n\n // Cached container dimensions — invalidated on resize, lazily repopulated on next layout pass.\n // Eliminates getComputedStyle(grid) + 2x getBoundingClientRect per compact-layout evaluation.\n const containerCacheRef = useRef<{\n compactWidth: number;\n } | null>(null);\n\n const commandItems = useMemo(() => {\n const entries: ToolsMenuItem[] = [];\n const seen = new Set();\n\n const pushItem = (item: ToolsMenuItem | \"-\") => {\n if (item === \"-\") {\n return;\n }\n\n if (item.items && item.items.length > 0) {\n for (const nested of item.items) {\n pushItem(nested);\n }\n return;\n }\n\n if (!seen.has(item.label)) {\n seen.add(item.label);\n entries.push(item);\n }\n };\n\n if (onAddFile) {\n pushItem({\n label: labels.chatInputToolbarAddButtonLabel,\n action: onAddFile,\n });\n }\n\n if (toolsMenu && toolsMenu.length > 0) {\n for (const item of toolsMenu) {\n pushItem(item);\n }\n }\n\n return entries;\n }, [labels.chatInputToolbarAddButtonLabel, onAddFile, toolsMenu]);\n\n const filteredCommands = useMemo(() => {\n if (commandQuery === null) {\n return [] as ToolsMenuItem[];\n }\n\n if (commandItems.length === 0) {\n return [] as ToolsMenuItem[];\n }\n\n const query = commandQuery.trim().toLowerCase();\n if (query.length === 0) {\n return commandItems;\n }\n\n const startsWith: ToolsMenuItem[] = [];\n const contains: ToolsMenuItem[] = [];\n for (const item of commandItems) {\n const label = item.label.toLowerCase();\n if (label.startsWith(query)) {\n startsWith.push(item);\n } else if (label.includes(query)) {\n contains.push(item);\n }\n }\n\n return [...startsWith, ...contains];\n }, [commandItems, commandQuery]);\n\n useEffect(() => {\n if (!autoFocus) {\n previousModalStateRef.current = config?.isModalOpen;\n return;\n }\n\n if (config?.isModalOpen && !previousModalStateRef.current) {\n inputRef.current?.focus({ preventScroll: true });\n }\n\n previousModalStateRef.current = config?.isModalOpen;\n }, [config?.isModalOpen, autoFocus]);\n\n useEffect(() => {\n if (commandItems.length === 0 && commandQuery !== null) {\n setCommandQuery(null);\n }\n }, [commandItems.length, commandQuery]);\n\n const previousCommandQueryRef = useRef(null);\n\n useEffect(() => {\n if (\n commandQuery !== null &&\n commandQuery !== previousCommandQueryRef.current &&\n filteredCommands.length > 0\n ) {\n setSlashHighlightIndex(0);\n }\n\n previousCommandQueryRef.current = commandQuery;\n }, [commandQuery, filteredCommands.length]);\n\n useEffect(() => {\n if (commandQuery === null) {\n setSlashHighlightIndex(0);\n return;\n }\n\n if (filteredCommands.length === 0) {\n setSlashHighlightIndex(-1);\n } else if (\n slashHighlightIndex < 0 ||\n slashHighlightIndex >= filteredCommands.length\n ) {\n setSlashHighlightIndex(0);\n }\n }, [commandQuery, filteredCommands, slashHighlightIndex]);\n\n // Handle recording based on mode changes\n useEffect(() => {\n const recorder = audioRecorderRef.current;\n if (!recorder) {\n return;\n }\n\n if (mode === \"transcribe\") {\n // Start recording when entering transcribe mode\n recorder.start().catch(console.error);\n } else {\n // Stop recording when leaving transcribe mode\n if (recorder.state === \"recording\") {\n recorder.stop().catch(console.error);\n }\n }\n }, [mode]);\n\n useEffect(() => {\n if (mode !== \"input\") {\n setLayout(\"compact\");\n setCommandQuery(null);\n }\n }, [mode]);\n\n const updateSlashState = useCallback(\n (value: string) => {\n if (commandItems.length === 0) {\n setCommandQuery((prev) => (prev === null ? prev : null));\n return;\n }\n\n if (value.startsWith(\"/\")) {\n const firstLine = value.split(/\\r?\\n/, 1)[0] ?? \"\";\n const query = firstLine.slice(1);\n setCommandQuery((prev) => (prev === query ? prev : query));\n } else {\n setCommandQuery((prev) => (prev === null ? prev : null));\n }\n },\n [commandItems.length],\n );\n\n useEffect(() => {\n updateSlashState(resolvedValue);\n }, [resolvedValue, updateSlashState]);\n\n // Handlers\n const handleChange = (e: ChangeEvent) => {\n const nextValue = e.target.value;\n if (!isControlled) {\n setInternalValue(nextValue);\n }\n onChange?.(nextValue);\n updateSlashState(nextValue);\n };\n\n const clearInputValue = useCallback(() => {\n if (!isControlled) {\n setInternalValue(\"\");\n }\n\n if (onChange) {\n onChange(\"\");\n }\n }, [isControlled, onChange]);\n\n const runCommand = useCallback(\n (item: ToolsMenuItem) => {\n clearInputValue();\n\n item.action?.();\n\n setCommandQuery(null);\n setSlashHighlightIndex(0);\n\n requestAnimationFrame(() => {\n inputRef.current?.focus();\n });\n },\n [clearInputValue],\n );\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // Skip key handling during IME composition (e.g. CJK input).\n // The compositionend event will fire separately when composition ends.\n if (e.nativeEvent.isComposing || e.keyCode === 229) {\n return;\n }\n\n if (commandQuery !== null && mode === \"input\") {\n if (e.key === \"ArrowDown\") {\n if (filteredCommands.length > 0) {\n e.preventDefault();\n setSlashHighlightIndex((prev) => {\n if (filteredCommands.length === 0) {\n return prev;\n }\n const next = prev === -1 ? 0 : (prev + 1) % filteredCommands.length;\n return next;\n });\n }\n return;\n }\n\n if (e.key === \"ArrowUp\") {\n if (filteredCommands.length > 0) {\n e.preventDefault();\n setSlashHighlightIndex((prev) => {\n if (filteredCommands.length === 0) {\n return prev;\n }\n if (prev === -1) {\n return filteredCommands.length - 1;\n }\n return prev <= 0 ? filteredCommands.length - 1 : prev - 1;\n });\n }\n return;\n }\n\n if (e.key === \"Enter\") {\n const selected =\n slashHighlightIndex >= 0\n ? filteredCommands[slashHighlightIndex]\n : undefined;\n if (selected) {\n e.preventDefault();\n runCommand(selected);\n return;\n }\n }\n\n if (e.key === \"Escape\") {\n e.preventDefault();\n setCommandQuery(null);\n return;\n }\n }\n\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n if (isProcessing) {\n onStop?.();\n } else {\n send();\n }\n }\n };\n\n const send = () => {\n if (!onSubmitMessage) {\n return;\n }\n const trimmed = resolvedValue.trim();\n if (!trimmed) {\n return;\n }\n\n onSubmitMessage(trimmed);\n\n // Always clear the input after sending, including controlled mode.\n // In controlled mode, onChange(\"\") notifies the parent to reset its state.\n if (!isControlled) {\n setInternalValue(\"\");\n }\n onChange?.(\"\");\n\n if (inputRef.current) {\n inputRef.current.focus();\n }\n };\n\n const BoundTextArea = renderSlot(textArea, CopilotChatInput.TextArea, {\n ref: inputRef,\n value: resolvedValue,\n onChange: handleChange,\n onKeyDown: handleKeyDown,\n onCompositionStart: () => {\n isComposingRef.current = true;\n },\n onCompositionEnd: () => {\n isComposingRef.current = false;\n },\n autoFocus: autoFocus,\n className: twMerge(\n \"cpk:w-full cpk:py-3\",\n isExpanded ? \"cpk:px-5\" : \"cpk:pr-5\",\n ),\n });\n\n const isProcessing = mode !== \"transcribe\" && isRunning;\n const canSend = resolvedValue.trim().length > 0 && !!onSubmitMessage;\n const canStop = !!onStop;\n\n const handleSendButtonClick = () => {\n if (isProcessing) {\n onStop?.();\n return;\n }\n send();\n };\n\n const BoundAudioRecorder = renderSlot(\n audioRecorder,\n CopilotChatAudioRecorder,\n {\n ref: audioRecorderRef,\n },\n );\n\n const BoundSendButton = renderSlot(sendButton, CopilotChatInput.SendButton, {\n onClick: handleSendButtonClick,\n disabled: isProcessing ? !canStop : !canSend,\n children:\n isProcessing && canStop ? (\n \n ) : undefined,\n });\n\n const BoundStartTranscribeButton = renderSlot(\n startTranscribeButton,\n CopilotChatInput.StartTranscribeButton,\n {\n onClick: onStartTranscribe,\n },\n );\n\n const BoundCancelTranscribeButton = renderSlot(\n cancelTranscribeButton,\n CopilotChatInput.CancelTranscribeButton,\n {\n onClick: onCancelTranscribe,\n },\n );\n\n // Handler for finish button - stops recording and passes audio blob\n const handleFinishTranscribe = useCallback(async () => {\n const recorder = audioRecorderRef.current;\n if (recorder && recorder.state === \"recording\") {\n try {\n const audioBlob = await recorder.stop();\n if (onFinishTranscribeWithAudio) {\n await onFinishTranscribeWithAudio(audioBlob);\n }\n } catch (error) {\n console.error(\"Failed to stop recording:\", error);\n }\n }\n // Always call the original handler to reset mode\n onFinishTranscribe?.();\n }, [onFinishTranscribe, onFinishTranscribeWithAudio]);\n\n const BoundFinishTranscribeButton = renderSlot(\n finishTranscribeButton,\n CopilotChatInput.FinishTranscribeButton,\n {\n onClick: handleFinishTranscribe,\n },\n );\n\n const BoundAddMenuButton = renderSlot(\n addMenuButton,\n CopilotChatInput.AddMenuButton,\n {\n disabled: mode === \"transcribe\",\n onAddFile,\n toolsMenu,\n },\n );\n\n const BoundDisclaimer = renderSlot(\n disclaimer,\n CopilotChatInput.Disclaimer,\n {},\n );\n\n // Determine whether to show disclaimer based on prop or positioning default\n const shouldShowDisclaimer = showDisclaimer ?? positioning === \"absolute\";\n\n if (children) {\n const childProps = {\n textArea: BoundTextArea,\n audioRecorder: BoundAudioRecorder,\n sendButton: BoundSendButton,\n startTranscribeButton: BoundStartTranscribeButton,\n cancelTranscribeButton: BoundCancelTranscribeButton,\n finishTranscribeButton: BoundFinishTranscribeButton,\n addMenuButton: BoundAddMenuButton,\n disclaimer: BoundDisclaimer,\n onSubmitMessage,\n onStop,\n isRunning,\n onStartTranscribe,\n onCancelTranscribe,\n onFinishTranscribe,\n onAddFile,\n mode,\n toolsMenu,\n autoFocus,\n positioning,\n keyboardHeight,\n showDisclaimer: shouldShowDisclaimer,\n containerRef,\n } as CopilotChatInputChildrenArgs;\n\n return (\n
\n {children(childProps)}\n
\n );\n }\n\n const handleContainerClick = (e: React.MouseEvent) => {\n // Don't focus if clicking on buttons or other interactive elements\n const target = e.target as HTMLElement;\n if (\n target.tagName !== \"BUTTON\" &&\n !target.closest(\"button\") &&\n inputRef.current &&\n mode === \"input\"\n ) {\n inputRef.current.focus();\n }\n };\n\n // Track whether an IME composition is active so we can avoid\n // resetting textarea.value during measurement (which would break\n // the composition session).\n const isComposingRef = useRef(false);\n\n const ensureMeasurements = useCallback(() => {\n const textarea = inputRef.current;\n if (!textarea || isComposingRef.current) {\n return;\n }\n\n const previousValue = textarea.value;\n const previousHeight = textarea.style.height;\n\n textarea.style.height = \"auto\";\n\n const computedStyle = window.getComputedStyle(textarea);\n const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n const paddingTop = parseFloat(computedStyle.paddingTop) || 0;\n const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;\n\n textarea.value = \"\";\n const singleLineHeight = textarea.scrollHeight;\n textarea.value = previousValue;\n\n const contentHeight = singleLineHeight - paddingTop - paddingBottom;\n const maxHeight = contentHeight * 5 + paddingTop + paddingBottom;\n\n measurementsRef.current = {\n singleLineHeight,\n maxHeight,\n paddingLeft,\n paddingRight,\n };\n\n textarea.style.height = previousHeight;\n textarea.style.maxHeight = `${maxHeight}px`;\n }, []);\n\n const adjustTextareaHeight = useCallback(() => {\n const textarea = inputRef.current;\n if (!textarea) {\n return 0;\n }\n\n if (measurementsRef.current.singleLineHeight === 0) {\n ensureMeasurements();\n }\n\n const { maxHeight } = measurementsRef.current;\n if (maxHeight) {\n textarea.style.maxHeight = `${maxHeight}px`;\n }\n\n textarea.style.height = \"auto\";\n const scrollHeight = textarea.scrollHeight;\n if (maxHeight) {\n textarea.style.height = `${Math.min(scrollHeight, maxHeight)}px`;\n } else {\n textarea.style.height = `${scrollHeight}px`;\n }\n\n return scrollHeight;\n }, [ensureMeasurements]);\n\n const updateLayout = useCallback((nextLayout: \"compact\" | \"expanded\") => {\n setLayout((prev) => {\n if (prev === nextLayout) {\n return prev;\n }\n ignoreResizeRef.current = true;\n return nextLayout;\n });\n }, []);\n\n const updateContainerCache = useCallback((): {\n compactWidth: number;\n } | null => {\n const grid = gridRef.current;\n const addContainer = addButtonContainerRef.current;\n const actionsContainer = actionsContainerRef.current;\n if (!grid || !addContainer || !actionsContainer) return null;\n\n const gridStyles = window.getComputedStyle(grid);\n const paddingLeft = parseFloat(gridStyles.paddingLeft) || 0;\n const paddingRight = parseFloat(gridStyles.paddingRight) || 0;\n const columnGap = parseFloat(gridStyles.columnGap) || 0;\n const gridAvailableWidth = grid.clientWidth - paddingLeft - paddingRight;\n\n if (gridAvailableWidth <= 0) return null;\n\n const addWidth = addContainer.getBoundingClientRect().width;\n const actionsWidth = actionsContainer.getBoundingClientRect().width;\n const compactWidth = Math.max(\n gridAvailableWidth - addWidth - actionsWidth - columnGap * 2,\n 0,\n );\n\n if (compactWidth <= 0) return null;\n\n const result = { compactWidth };\n containerCacheRef.current = result;\n return result;\n }, []);\n\n const evaluateLayout = useCallback(() => {\n if (mode !== \"input\") {\n updateLayout(\"compact\");\n return;\n }\n\n if (\n typeof window !== \"undefined\" &&\n typeof window.matchMedia === \"function\"\n ) {\n const isMobileViewport = window.matchMedia(\"(max-width: 767px)\").matches;\n if (isMobileViewport) {\n ensureMeasurements();\n adjustTextareaHeight();\n updateLayout(\"expanded\");\n return;\n }\n }\n\n const textarea = inputRef.current;\n const grid = gridRef.current;\n const addContainer = addButtonContainerRef.current;\n const actionsContainer = actionsContainerRef.current;\n\n if (!textarea || !grid || !addContainer || !actionsContainer) {\n return;\n }\n\n if (measurementsRef.current.singleLineHeight === 0) {\n ensureMeasurements();\n }\n\n const scrollHeight = adjustTextareaHeight();\n const baseline = measurementsRef.current.singleLineHeight;\n const hasExplicitBreak = resolvedValue.includes(\"\\n\");\n const renderedMultiline =\n baseline > 0 ? scrollHeight > baseline + 1 : false;\n let shouldExpand = hasExplicitBreak || renderedMultiline;\n\n if (!shouldExpand) {\n // Use cached container dimensions (lazily populated on first access, invalidated on resize).\n const cache = containerCacheRef.current ?? updateContainerCache();\n\n if (cache && cache.compactWidth > 0) {\n const compactInnerWidth = Math.max(\n cache.compactWidth -\n (measurementsRef.current.paddingLeft || 0) -\n (measurementsRef.current.paddingRight || 0),\n 0,\n );\n\n if (compactInnerWidth > 0) {\n // Read font fresh each evaluation — getComputedStyle for style-only\n // properties is cheap and avoids stale values after CSS/theme changes.\n const textareaStyles = window.getComputedStyle(textarea);\n let font = textareaStyles.font;\n if (!font) {\n const {\n fontStyle,\n fontVariant,\n fontWeight,\n fontSize,\n lineHeight,\n fontFamily,\n } = textareaStyles;\n if (fontSize && fontFamily) {\n font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;\n }\n }\n\n if (font?.trim()) {\n const canvas =\n measurementCanvasRef.current ?? document.createElement(\"canvas\");\n if (!measurementCanvasRef.current) {\n measurementCanvasRef.current = canvas;\n }\n\n const context = canvas.getContext(\"2d\");\n if (context) {\n context.font = font;\n\n const lines =\n resolvedValue.length > 0 ? resolvedValue.split(\"\\n\") : [\"\"];\n let longestWidth = 0;\n for (const line of lines) {\n const metrics = context.measureText(line || \" \");\n if (metrics.width > longestWidth) {\n longestWidth = metrics.width;\n }\n }\n\n if (longestWidth > compactInnerWidth) {\n shouldExpand = true;\n }\n } else if (process.env.NODE_ENV !== \"production\") {\n console.warn(\n \"[CopilotChatInput] canvas.getContext('2d') returned null. \" +\n \"Text-width-based expansion will be unavailable.\",\n );\n }\n } else if (process.env.NODE_ENV !== \"production\") {\n console.warn(\n \"[CopilotChatInput] Could not resolve textarea font for layout measurement. \" +\n \"Text-width-based expansion will be skipped until the next evaluation.\",\n );\n }\n }\n }\n }\n\n const nextLayout = shouldExpand ? \"expanded\" : \"compact\";\n updateLayout(nextLayout);\n }, [\n adjustTextareaHeight,\n ensureMeasurements,\n mode,\n resolvedValue,\n updateContainerCache,\n updateLayout,\n ]);\n\n useLayoutEffect(() => {\n evaluateLayout();\n }, [evaluateLayout]);\n\n useEffect(() => {\n if (typeof ResizeObserver === \"undefined\") {\n return;\n }\n\n const textarea = inputRef.current;\n const grid = gridRef.current;\n const addContainer = addButtonContainerRef.current;\n const actionsContainer = actionsContainerRef.current;\n\n if (!textarea || !grid || !addContainer || !actionsContainer) {\n return;\n }\n\n const containerTargets = new Set([\n grid,\n addContainer,\n actionsContainer,\n ]);\n\n const scheduleEvaluation = (invalidateCache: boolean) => {\n if (ignoreResizeRef.current) {\n ignoreResizeRef.current = false;\n // Self-inflicted resize from a layout toggle — container dimensions\n // are unchanged, so keep the cache warm.\n return;\n }\n\n if (invalidateCache) {\n containerCacheRef.current = null;\n }\n\n if (typeof window === \"undefined\") {\n evaluateLayout();\n return;\n }\n\n if (resizeEvaluationRafRef.current !== null) {\n cancelAnimationFrame(resizeEvaluationRafRef.current);\n }\n\n resizeEvaluationRafRef.current = window.requestAnimationFrame(() => {\n resizeEvaluationRafRef.current = null;\n evaluateLayout();\n });\n };\n\n // Single observer for all elements — inspect entry.target to decide\n // whether to invalidate the container dimension cache. Container\n // targets (grid, buttons) changing size means compactWidth may have\n // changed; textarea height changes (typing) do not affect it.\n const observer = new ResizeObserver((entries) => {\n let shouldInvalidate = false;\n for (const entry of entries) {\n if (containerTargets.has(entry.target)) {\n shouldInvalidate = true;\n break;\n }\n }\n scheduleEvaluation(shouldInvalidate);\n });\n\n observer.observe(grid);\n observer.observe(addContainer);\n observer.observe(actionsContainer);\n observer.observe(textarea);\n\n return () => {\n observer.disconnect();\n if (\n typeof window !== \"undefined\" &&\n resizeEvaluationRafRef.current !== null\n ) {\n cancelAnimationFrame(resizeEvaluationRafRef.current);\n resizeEvaluationRafRef.current = null;\n }\n };\n }, [evaluateLayout]);\n\n const slashMenuVisible = commandQuery !== null && commandItems.length > 0;\n\n useEffect(() => {\n if (!slashMenuVisible || slashHighlightIndex < 0) {\n return;\n }\n\n const active = slashMenuRef.current?.querySelector(\n `[data-slash-index=\"${slashHighlightIndex}\"]`,\n );\n active?.scrollIntoView({ block: \"nearest\" });\n }, [slashMenuVisible, slashHighlightIndex]);\n\n const slashMenu = slashMenuVisible ? (\n \n {filteredCommands.length === 0 ? (\n
\n No commands found\n
\n ) : (\n filteredCommands.map((item, index) => {\n const isActive = index === slashHighlightIndex;\n return (\n setSlashHighlightIndex(index)}\n onMouseDown={(event) => {\n event.preventDefault();\n runCommand(item);\n }}\n >\n {item.label}\n \n );\n })\n )}\n \n ) : null;\n\n // The input pill (inner component)\n const inputPill = (\n \n \n \n {BoundAddMenuButton}\n \n \n {mode === \"transcribe\" ? (\n BoundAudioRecorder\n ) : mode === \"processing\" ? (\n
\n \n
\n ) : (\n <>\n {BoundTextArea}\n {slashMenu}\n \n )}\n \n \n {mode === \"transcribe\" ? (\n <>\n {onCancelTranscribe && BoundCancelTranscribeButton}\n {onFinishTranscribe && BoundFinishTranscribeButton}\n \n ) : (\n <>\n {onStartTranscribe && BoundStartTranscribeButton}\n {BoundSendButton}\n \n )}\n \n \n \n );\n\n return (\n 0 ? `translateY(-${keyboardHeight}px)` : undefined,\n transition: \"transform 0.2s ease-out\",\n // Reserve room when the fixed license banner is visible so it doesn't\n // overlap the input. Applied only for bottom-anchored inputs (either\n // `positioning === \"absolute\"`, or an explicitly-flagged flex-last-child\n // input in run state). The welcome-screen input sits mid-layout and\n // must stay still when the banner is present.\n ...(positioning === \"absolute\" || bottomAnchored\n ? { paddingBottom: \"var(--copilotkit-license-banner-offset, 0px)\" }\n : {}),\n }}\n {...props}\n >\n
\n {inputPill}\n
\n {shouldShowDisclaimer && BoundDisclaimer}\n \n );\n}\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nexport namespace CopilotChatInput {\n export const SendButton: React.FC<\n React.ButtonHTMLAttributes\n > = ({ className, children, ...props }) => (\n
\n \n {children ?? }\n \n
\n );\n\n export const ToolbarButton: React.FC<\n React.ButtonHTMLAttributes & {\n icon: React.ReactNode;\n labelKey: keyof CopilotChatLabels;\n defaultClassName?: string;\n }\n > = ({ icon, labelKey, defaultClassName, className, ...props }) => {\n const config = useCopilotChatConfiguration();\n const labels = config?.labels ?? CopilotChatDefaultLabels;\n return (\n \n \n \n {icon}\n \n \n \n

{labels[labelKey]}

\n \n \n );\n };\n\n export const StartTranscribeButton: React.FC<\n React.ButtonHTMLAttributes\n > = (props) => (\n }\n labelKey=\"chatInputToolbarStartTranscribeButtonLabel\"\n defaultClassName=\"cpk:mr-2\"\n {...props}\n />\n );\n\n export const CancelTranscribeButton: React.FC<\n React.ButtonHTMLAttributes\n > = (props) => (\n }\n labelKey=\"chatInputToolbarCancelTranscribeButtonLabel\"\n defaultClassName=\"cpk:mr-2\"\n {...props}\n />\n );\n\n export const FinishTranscribeButton: React.FC<\n React.ButtonHTMLAttributes\n > = (props) => (\n }\n labelKey=\"chatInputToolbarFinishTranscribeButtonLabel\"\n defaultClassName=\"cpk:mr-[10px]\"\n {...props}\n />\n );\n\n export const AddMenuButton: React.FC<\n React.ButtonHTMLAttributes & {\n toolsMenu?: (ToolsMenuItem | \"-\")[];\n onAddFile?: () => void;\n }\n > = ({ className, toolsMenu, onAddFile, disabled, ...props }) => {\n const config = useCopilotChatConfiguration();\n const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n // Defer Radix UI rendering until after hydration to avoid ID mismatches\n const [mounted, setMounted] = useState(false);\n useEffect(() => setMounted(true), []);\n\n const menuItems = useMemo<(ToolsMenuItem | \"-\")[]>(() => {\n const items: (ToolsMenuItem | \"-\")[] = [];\n\n if (onAddFile) {\n items.push({\n label: labels.chatInputToolbarAddButtonLabel,\n action: onAddFile,\n });\n }\n\n if (toolsMenu && toolsMenu.length > 0) {\n if (items.length > 0) {\n items.push(\"-\");\n }\n\n for (const item of toolsMenu) {\n if (item === \"-\") {\n if (items.length === 0 || items[items.length - 1] === \"-\") {\n continue;\n }\n items.push(item);\n } else {\n items.push(item);\n }\n }\n\n while (items.length > 0 && items[items.length - 1] === \"-\") {\n items.pop();\n }\n }\n\n return items;\n }, [onAddFile, toolsMenu, labels.chatInputToolbarAddButtonLabel]);\n\n const renderMenuItems = useCallback(\n (items: (ToolsMenuItem | \"-\")[]): React.ReactNode =>\n items.map((item, index) => {\n if (item === \"-\") {\n return ;\n }\n\n if (item.items && item.items.length > 0) {\n return (\n \n {item.label}\n \n {renderMenuItems(item.items)}\n \n \n );\n }\n\n return (\n \n {item.label}\n \n );\n }),\n [],\n );\n\n const hasMenuItems = menuItems.length > 0;\n const isDisabled = disabled || !hasMenuItems;\n\n const button = (\n \n \n \n );\n\n // Render plain button during SSR; Radix wrappers only after hydration\n if (!mounted) return button;\n\n return (\n \n \n \n {button}\n \n \n

\n Add attachments\n \n /\n \n

\n \n \n {hasMenuItems && (\n \n {renderMenuItems(menuItems)}\n \n )}\n \n );\n };\n\n export type TextAreaProps = React.TextareaHTMLAttributes;\n\n export const TextArea = forwardRef(\n function TextArea(\n { style, className, autoFocus, placeholder, ...props },\n ref,\n ) {\n const internalTextareaRef = useRef(null);\n const config = useCopilotChatConfiguration();\n const labels = config?.labels ?? CopilotChatDefaultLabels;\n\n useImperativeHandle(\n ref,\n () => internalTextareaRef.current as HTMLTextAreaElement,\n );\n\n useEffect(() => {\n if (autoFocus) {\n internalTextareaRef.current?.focus({ preventScroll: true });\n }\n }, [autoFocus]);\n\n return (\n \n );\n },\n );\n\n export const AudioRecorder = CopilotChatAudioRecorder;\n\n export const Disclaimer: React.FC> = ({\n className,\n ...props\n }) => {\n const config = useCopilotChatConfiguration();\n const labels = config?.labels ?? CopilotChatDefaultLabels;\n return (\n \n {labels.chatDisclaimerText}\n \n );\n };\n}\n\nCopilotChatInput.TextArea.displayName = \"CopilotChatInput.TextArea\";\nCopilotChatInput.SendButton.displayName = \"CopilotChatInput.SendButton\";\nCopilotChatInput.ToolbarButton.displayName = \"CopilotChatInput.ToolbarButton\";\nCopilotChatInput.StartTranscribeButton.displayName =\n \"CopilotChatInput.StartTranscribeButton\";\nCopilotChatInput.CancelTranscribeButton.displayName =\n \"CopilotChatInput.CancelTranscribeButton\";\nCopilotChatInput.FinishTranscribeButton.displayName =\n \"CopilotChatInput.FinishTranscribeButton\";\nCopilotChatInput.AddMenuButton.displayName = \"CopilotChatInput.AddMenuButton\";\nCopilotChatInput.Disclaimer.displayName = \"CopilotChatInput.Disclaimer\";\n\nexport default CopilotChatInput;\n","\"use client\";\n\nimport { useEffect } from \"react\";\n\nlet injected = false;\n\n/**\n * Dynamically injects KaTeX CSS at runtime to avoid the Next.js\n * \"Global CSS cannot be imported from within node_modules\" build error.\n *\n * Uses a singleton flag so the stylesheet is only injected once.\n */\nexport function useKatexStyles(): void {\n useEffect(() => {\n if (injected || typeof document === \"undefined\") return;\n injected = true;\n\n // Dynamic import defers CSS loading to runtime, bypassing\n // Next.js static analysis that rejects global CSS from node_modules.\n\n void import(\"katex/dist/katex.min.css\").catch(() => {\n console.warn(\n \"[CopilotKit] Failed to load katex styles — math content may render without formatting\",\n );\n });\n }, []);\n}\n","import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport type { CopilotKitCore } from \"@copilotkit/core\";\nimport type { Anchor } from \"@copilotkit/web-inspector\";\n\ntype CopilotKitInspectorBaseProps = {\n core?: CopilotKitCore | null;\n defaultAnchor?: Anchor;\n [key: string]: unknown;\n};\n\ntype InspectorComponent = React.ComponentType;\n\nexport interface CopilotKitInspectorProps extends CopilotKitInspectorBaseProps {}\n\nexport const CopilotKitInspector: React.FC = ({\n core,\n ...rest\n}) => {\n const [InspectorComponent, setInspectorComponent] =\n React.useState(null);\n\n React.useEffect(() => {\n let mounted = true;\n\n // Load the web component only on the client to keep SSR output stable.\n import(\"@copilotkit/web-inspector\").then((mod) => {\n mod.defineWebInspector?.();\n\n const Component = createComponent({\n tagName: mod.WEB_INSPECTOR_TAG,\n elementClass: mod.WebInspectorElement,\n react: React,\n }) as InspectorComponent;\n\n if (mounted) {\n setInspectorComponent(() => Component);\n }\n });\n\n return () => {\n mounted = false;\n };\n }, []);\n\n // During SSR (and until the client finishes loading), render nothing to keep markup consistent.\n if (!InspectorComponent) return null;\n\n return ;\n};\n\nCopilotKitInspector.displayName = \"CopilotKitInspector\";\n","import React, { useEffect } from \"react\";\n\n// Total reserved vertical space for the fixed license banner: banner height\n// (~36px) + bottom offset (8px) + visual gap above the chat input (~8px).\nconst LICENSE_BANNER_OFFSET_PX = 52;\nconst LICENSE_BANNER_OFFSET_VAR = \"--copilotkit-license-banner-offset\";\n\ninterface LicenseWarningBannerProps {\n type:\n | \"no_license\"\n | \"expired\"\n | \"expiring\"\n | \"invalid\"\n | \"feature_unlicensed\";\n featureName?: string;\n expiryDate?: string;\n graceRemaining?: number;\n onDismiss?: () => void;\n}\n\nconst BANNER_STYLES: Record = {\n base: {\n position: \"fixed\",\n bottom: \"8px\",\n left: \"50%\",\n transform: \"translateX(-50%)\",\n zIndex: 99999,\n display: \"inline-flex\",\n alignItems: \"center\",\n gap: \"12px\",\n whiteSpace: \"nowrap\",\n padding: \"8px 16px\",\n fontSize: \"13px\",\n fontFamily:\n \"-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif\",\n borderRadius: \"6px\",\n boxShadow: \"0 2px 8px rgba(0, 0, 0, 0.15)\",\n },\n info: {\n backgroundColor: \"#eff6ff\",\n border: \"1px solid #93c5fd\",\n color: \"#1e40af\",\n },\n warning: {\n backgroundColor: \"#fffbeb\",\n border: \"1px solid #fbbf24\",\n color: \"#92400e\",\n },\n critical: {\n backgroundColor: \"#fef2f2\",\n border: \"1px solid #fca5a5\",\n color: \"#991b1b\",\n },\n};\n\nfunction getSeverityStyle(severity: string): React.CSSProperties {\n switch (severity) {\n case \"warning\":\n return BANNER_STYLES.warning;\n case \"critical\":\n return BANNER_STYLES.critical;\n default:\n return BANNER_STYLES.info;\n }\n}\n\nfunction BannerShell({\n severity,\n message,\n actionLabel,\n actionUrl,\n onDismiss,\n}: {\n severity: string;\n message: string;\n actionLabel: string;\n actionUrl: string;\n onDismiss?: () => void;\n}) {\n // Publish the banner's reserved bottom offset so the chat input can lift\n // itself above it via padding-bottom: var(--copilotkit-license-banner-offset).\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n root.style.setProperty(\n LICENSE_BANNER_OFFSET_VAR,\n `${LICENSE_BANNER_OFFSET_PX}px`,\n );\n return () => {\n root.style.removeProperty(LICENSE_BANNER_OFFSET_VAR);\n };\n }, []);\n\n return (\n
\n {message}\n
\n \n {actionLabel}\n \n {onDismiss && (\n \n ×\n \n )}\n
\n
\n );\n}\n\nexport function LicenseWarningBanner({\n type,\n featureName,\n expiryDate,\n graceRemaining,\n onDismiss,\n}: LicenseWarningBannerProps) {\n switch (type) {\n case \"no_license\":\n return (\n \n );\n case \"feature_unlicensed\":\n return (\n \n );\n case \"expiring\":\n return (\n \n );\n case \"expired\":\n return (\n \n );\n case \"invalid\":\n return (\n \n );\n default:\n return null;\n }\n}\n\nexport function InlineFeatureWarning({ featureName }: { featureName: string }) {\n return (\n \n ⚠ The "{featureName}" feature requires a CopilotKit license.{\" \"}\n \n Get one at copilotkit.ai/pricing\n \n \n );\n}\n","\"use client\";\n\nimport React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport { z } from \"zod\";\nimport type { AbstractAgent, RunAgentResult } from \"@ag-ui/client\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\n\n// Protocol version supported\nconst PROTOCOL_VERSION = \"2025-06-18\";\n\n// Build sandbox proxy HTML with optional extra CSP domains from resource metadata\nfunction buildSandboxHTML(extraCspDomains?: string[]): string {\n const baseScriptSrc =\n \"'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: http://localhost:* https://localhost:*\";\n const baseFrameSrc = \"* blob: data: http://localhost:* https://localhost:*\";\n const extra = extraCspDomains?.length ? \" \" + extraCspDomains.join(\" \") : \"\";\n const scriptSrc = baseScriptSrc + extra;\n const frameSrc = baseFrameSrc + extra;\n\n return `\n\n\n\n\n\n\n\n\n\n`;\n}\n\n/**\n * Queue for serializing MCP app requests to an agent.\n * Ensures requests wait for the agent to stop running and are processed one at a time.\n */\nclass MCPAppsRequestQueue {\n private queues = new Map<\n string,\n Array<{\n execute: () => Promise;\n resolve: (result: RunAgentResult) => void;\n reject: (error: Error) => void;\n }>\n >();\n private processing = new Map();\n\n /**\n * Add a request to the queue for a specific agent thread.\n * Returns a promise that resolves when the request completes.\n */\n async enqueue(\n agent: AbstractAgent,\n request: () => Promise,\n ): Promise {\n const threadId = agent.threadId || \"default\";\n\n return new Promise((resolve, reject) => {\n // Get or create queue for this thread\n let queue = this.queues.get(threadId);\n if (!queue) {\n queue = [];\n this.queues.set(threadId, queue);\n }\n\n // Add request to queue\n queue.push({ execute: request, resolve, reject });\n\n // Start processing if not already running\n this.processQueue(threadId, agent);\n });\n }\n\n private async processQueue(\n threadId: string,\n agent: AbstractAgent,\n ): Promise {\n // If already processing this queue, return\n if (this.processing.get(threadId)) {\n return;\n }\n\n this.processing.set(threadId, true);\n\n try {\n const queue = this.queues.get(threadId);\n if (!queue) return;\n\n while (queue.length > 0) {\n const item = queue[0]!;\n\n try {\n // Wait for any active run to complete before processing\n await this.waitForAgentIdle(agent);\n\n // Execute the request\n const result = await item.execute();\n item.resolve(result);\n } catch (error) {\n item.reject(\n error instanceof Error ? error : new Error(String(error)),\n );\n }\n\n // Remove processed item\n queue.shift();\n }\n } finally {\n this.processing.set(threadId, false);\n }\n }\n\n private waitForAgentIdle(agent: AbstractAgent): Promise {\n return new Promise((resolve) => {\n if (!agent.isRunning) {\n resolve();\n return;\n }\n\n let done = false;\n const finish = () => {\n if (done) return;\n done = true;\n clearInterval(checkInterval);\n sub.unsubscribe();\n resolve();\n };\n\n const sub = agent.subscribe({\n onRunFinalized: finish,\n onRunFailed: finish,\n });\n\n // Fallback for reconnect scenarios where events don't fire\n const checkInterval = setInterval(() => {\n if (!agent.isRunning) finish();\n }, 500);\n });\n }\n}\n\n// Global queue instance for all MCP app requests\nconst mcpAppsRequestQueue = new MCPAppsRequestQueue();\n\n/**\n * Activity type for MCP Apps events - must match the middleware's MCPAppsActivityType\n */\nexport const MCPAppsActivityType = \"mcp-apps\";\n\n// Zod schema for activity content validation (middleware 0.0.2 format)\nexport const MCPAppsActivityContentSchema = z.object({\n result: z.object({\n content: z.array(z.any()).optional(),\n structuredContent: z.any().optional(),\n isError: z.boolean().optional(),\n }),\n // Resource URI to fetch (e.g., \"ui://server/dashboard\")\n resourceUri: z.string(),\n // MD5 hash of server config (renamed from serverId in 0.0.1)\n serverHash: z.string(),\n // Optional stable server ID from config (takes precedence over serverHash)\n serverId: z.string().optional(),\n // Original tool input arguments\n toolInput: z.record(z.unknown()).optional(),\n});\n\nexport type MCPAppsActivityContent = z.infer<\n typeof MCPAppsActivityContentSchema\n>;\n\n// Type for the resource fetched from the server\ninterface FetchedResource {\n uri: string;\n mimeType?: string;\n text?: string;\n blob?: string;\n _meta?: {\n ui?: {\n prefersBorder?: boolean;\n csp?: {\n connectDomains?: string[];\n resourceDomains?: string[];\n };\n };\n };\n}\n\ninterface JSONRPCRequest {\n jsonrpc: \"2.0\";\n id: string | number;\n method: string;\n params?: Record;\n}\n\ninterface JSONRPCResponse {\n jsonrpc: \"2.0\";\n id: string | number;\n result?: unknown;\n error?: { code: number; message: string };\n}\n\ninterface JSONRPCNotification {\n jsonrpc: \"2.0\";\n method: string;\n params?: Record;\n}\n\ntype JSONRPCMessage = JSONRPCRequest | JSONRPCResponse | JSONRPCNotification;\n\nfunction isRequest(msg: JSONRPCMessage): msg is JSONRPCRequest {\n return \"id\" in msg && \"method\" in msg;\n}\n\nfunction isNotification(msg: JSONRPCMessage): msg is JSONRPCNotification {\n return !(\"id\" in msg) && \"method\" in msg;\n}\n\n/**\n * Props for the activity renderer component\n */\ninterface MCPAppsActivityRendererProps {\n activityType: string;\n content: MCPAppsActivityContent;\n message: unknown; // ActivityMessage from @ag-ui/core\n agent: AbstractAgent | undefined;\n}\n\n/**\n * MCP Apps Extension Activity Renderer\n *\n * Renders MCP Apps UI in a sandboxed iframe with full protocol support.\n * Fetches resource content on-demand via proxied MCP requests.\n */\nexport const MCPAppsActivityRenderer: React.FC =\n function MCPAppsActivityRenderer({ content, agent }) {\n const { copilotkit } = useCopilotKit();\n const containerRef = useRef(null);\n const iframeRef = useRef(null);\n const [iframeReady, setIframeReady] = useState(false);\n const [error, setError] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [iframeSize, setIframeSize] = useState<{\n width?: number;\n height?: number;\n }>({});\n const [fetchedResource, setFetchedResource] =\n useState(null);\n\n // Use refs for values that shouldn't trigger re-renders but need latest values\n const contentRef = useRef(content);\n contentRef.current = content;\n\n // Store agent in a ref for use in async handlers\n const agentRef = useRef(agent);\n agentRef.current = agent;\n\n // Ref to track fetch state - survives StrictMode remounts\n const fetchStateRef = useRef<{\n inProgress: boolean;\n promise: Promise | null;\n resourceUri: string | null;\n }>({ inProgress: false, promise: null, resourceUri: null });\n\n // Callback to send a message to the iframe\n const sendToIframe = useCallback((msg: JSONRPCMessage) => {\n if (iframeRef.current?.contentWindow) {\n console.log(\"[MCPAppsRenderer] Sending to iframe:\", msg);\n iframeRef.current.contentWindow.postMessage(msg, \"*\");\n }\n }, []);\n\n // Callback to send a JSON-RPC response\n const sendResponse = useCallback(\n (id: string | number, result: unknown) => {\n sendToIframe({\n jsonrpc: \"2.0\",\n id,\n result,\n });\n },\n [sendToIframe],\n );\n\n // Callback to send a JSON-RPC error response\n const sendErrorResponse = useCallback(\n (id: string | number, code: number, message: string) => {\n sendToIframe({\n jsonrpc: \"2.0\",\n id,\n error: { code, message },\n });\n },\n [sendToIframe],\n );\n\n // Callback to send a notification\n const sendNotification = useCallback(\n (method: string, params?: Record) => {\n sendToIframe({\n jsonrpc: \"2.0\",\n method,\n params: params || {},\n });\n },\n [sendToIframe],\n );\n\n // Effect 0: Fetch the resource content on mount\n // Uses ref-based deduplication to handle React StrictMode double-mounting\n useEffect(() => {\n const { resourceUri, serverHash, serverId } = content;\n\n // Check if we already have a fetch in progress for this resource\n // This handles StrictMode double-mounting - second mount reuses first mount's promise\n if (\n fetchStateRef.current.inProgress &&\n fetchStateRef.current.resourceUri === resourceUri\n ) {\n // Reuse the existing promise\n fetchStateRef.current.promise\n ?.then((resource) => {\n if (resource) {\n setFetchedResource(resource);\n setIsLoading(false);\n }\n })\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(String(err)));\n setIsLoading(false);\n });\n return;\n }\n\n if (!agent) {\n setError(new Error(\"No agent available to fetch resource\"));\n setIsLoading(false);\n return;\n }\n\n // Mark fetch as in progress\n fetchStateRef.current.inProgress = true;\n fetchStateRef.current.resourceUri = resourceUri;\n\n // Create the fetch promise using the queue to serialize requests\n const fetchPromise = (async (): Promise => {\n try {\n // Use queue to wait for agent to be idle and serialize requests\n const runResult = await mcpAppsRequestQueue.enqueue(agent, () =>\n agent.runAgent({\n forwardedProps: {\n __proxiedMCPRequest: {\n serverHash,\n serverId, // optional, takes precedence if provided\n method: \"resources/read\",\n params: { uri: resourceUri },\n },\n },\n }),\n );\n\n // Extract resource from result\n // The response format is: { contents: [{ uri, mimeType, text?, blob?, _meta? }] }\n const resultData = runResult.result as\n | { contents?: FetchedResource[] }\n | undefined;\n const resource = resultData?.contents?.[0];\n\n if (!resource) {\n throw new Error(\"No resource content in response\");\n }\n\n return resource;\n } catch (err) {\n console.error(\"[MCPAppsRenderer] Failed to fetch resource:\", err);\n throw err;\n } finally {\n // Mark fetch as complete\n fetchStateRef.current.inProgress = false;\n }\n })();\n\n // Store the promise for potential reuse\n fetchStateRef.current.promise = fetchPromise;\n\n // Handle the result\n fetchPromise\n .then((resource) => {\n if (resource) {\n setFetchedResource(resource);\n setIsLoading(false);\n }\n })\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(String(err)));\n setIsLoading(false);\n });\n\n // No cleanup needed - we want the fetch to complete even if StrictMode unmounts\n }, [agent, content]);\n\n // Effect 1: Setup sandbox proxy iframe and communication (after resource is fetched)\n useEffect(() => {\n // Wait for resource to be fetched\n if (isLoading || !fetchedResource) {\n return;\n }\n\n // Capture container reference at effect start (refs are cleared during unmount)\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n let mounted = true;\n let messageHandler: ((event: MessageEvent) => void) | null = null;\n let initialListener: ((event: MessageEvent) => void) | null = null;\n let createdIframe: HTMLIFrameElement | null = null;\n\n const setup = async () => {\n try {\n // Create sandbox proxy iframe\n const iframe = document.createElement(\"iframe\");\n createdIframe = iframe; // Track for cleanup\n iframe.style.width = \"100%\";\n iframe.style.height = \"100px\"; // Start small, will be resized by size-changed notification\n iframe.style.border = \"none\";\n iframe.style.backgroundColor = \"transparent\";\n iframe.style.display = \"block\";\n iframe.setAttribute(\n \"sandbox\",\n \"allow-scripts allow-same-origin allow-forms\",\n );\n\n // Wait for sandbox proxy to be ready\n const sandboxReady = new Promise((resolve) => {\n initialListener = (event: MessageEvent) => {\n if (event.source === iframe.contentWindow) {\n if (\n event.data?.method === \"ui/notifications/sandbox-proxy-ready\"\n ) {\n if (initialListener) {\n window.removeEventListener(\"message\", initialListener);\n initialListener = null;\n }\n resolve();\n }\n }\n };\n window.addEventListener(\"message\", initialListener);\n });\n\n // Check mounted before adding to DOM (handles StrictMode double-mount)\n if (!mounted) {\n if (initialListener) {\n window.removeEventListener(\"message\", initialListener);\n initialListener = null;\n }\n return;\n }\n\n // Build sandbox HTML with CSP domains from resource metadata\n const cspDomains = fetchedResource._meta?.ui?.csp?.resourceDomains;\n iframe.srcdoc = buildSandboxHTML(cspDomains);\n iframeRef.current = iframe;\n container.appendChild(iframe);\n\n // Wait for sandbox proxy to signal ready\n await sandboxReady;\n if (!mounted) return;\n\n console.log(\"[MCPAppsRenderer] Sandbox proxy ready\");\n\n // Setup message handler for JSON-RPC messages from the inner iframe\n messageHandler = async (event: MessageEvent) => {\n if (event.source !== iframe.contentWindow) return;\n\n const msg = event.data as JSONRPCMessage;\n if (!msg || typeof msg !== \"object\" || msg.jsonrpc !== \"2.0\")\n return;\n\n console.log(\"[MCPAppsRenderer] Received from iframe:\", msg);\n\n // Handle requests (need response)\n if (isRequest(msg)) {\n switch (msg.method) {\n case \"ui/initialize\": {\n // Respond with host capabilities\n sendResponse(msg.id, {\n protocolVersion: PROTOCOL_VERSION,\n hostInfo: {\n name: \"CopilotKit MCP Apps Host\",\n version: \"1.0.0\",\n },\n hostCapabilities: {\n openLinks: {},\n logging: {},\n },\n hostContext: {\n theme: \"light\",\n platform: \"web\",\n },\n });\n break;\n }\n\n case \"ui/message\": {\n // Add message to CopilotKit chat and optionally invoke agent\n const currentAgent = agentRef.current;\n\n if (!currentAgent) {\n console.warn(\n \"[MCPAppsRenderer] ui/message: No agent available\",\n );\n sendResponse(msg.id, { isError: false });\n break;\n }\n\n try {\n const params = msg.params as {\n role?: string;\n content?: Array<{ type: string; text?: string }>;\n followUp?: boolean;\n };\n\n const role =\n (params.role as \"user\" | \"assistant\") || \"user\";\n\n // Extract text content from the message\n const textContent =\n params.content\n ?.filter((c) => c.type === \"text\" && c.text)\n .map((c) => c.text)\n .join(\"\\n\") || \"\";\n\n if (textContent) {\n currentAgent.addMessage({\n id: crypto.randomUUID(),\n role,\n content: textContent,\n });\n }\n\n // Acknowledge the message immediately — don't block on agent run\n sendResponse(msg.id, { isError: false });\n\n // Determine whether to invoke the agent after adding message.\n // followUp: true → always invoke agent\n // followUp: false → display-only, skip agent\n // not specified → invoke for user messages, skip for assistant\n const shouldFollowUp = params.followUp ?? role === \"user\";\n\n if (shouldFollowUp && textContent) {\n // Use copilotkit.runAgent to go through RunHandler — provides\n // frontend tools, context, tool execution, and abort support.\n // Fire-and-forget: errors are handled by RunHandler's error emission.\n mcpAppsRequestQueue\n .enqueue(currentAgent, () =>\n copilotkit.runAgent({ agent: currentAgent }),\n )\n .catch((err) =>\n console.error(\n \"[MCPAppsRenderer] ui/message agent run failed:\",\n err,\n ),\n );\n }\n } catch (err) {\n console.error(\"[MCPAppsRenderer] ui/message error:\", err);\n sendResponse(msg.id, { isError: true });\n }\n break;\n }\n\n case \"ui/open-link\": {\n // Open URL in new tab\n const url = msg.params?.url as string | undefined;\n if (url) {\n window.open(url, \"_blank\", \"noopener,noreferrer\");\n sendResponse(msg.id, { isError: false });\n } else {\n sendErrorResponse(msg.id, -32602, \"Missing url parameter\");\n }\n break;\n }\n\n case \"tools/call\": {\n // Proxy tool call to MCP server via agent.runAgent()\n const { serverHash, serverId } = contentRef.current;\n const currentAgent = agentRef.current;\n\n if (!serverHash) {\n sendErrorResponse(\n msg.id,\n -32603,\n \"No server hash available for proxying\",\n );\n break;\n }\n\n if (!currentAgent) {\n sendErrorResponse(\n msg.id,\n -32603,\n \"No agent available for proxying\",\n );\n break;\n }\n\n try {\n // Use queue to wait for agent to be idle and serialize requests\n const runResult = await mcpAppsRequestQueue.enqueue(\n currentAgent,\n () =>\n currentAgent.runAgent({\n forwardedProps: {\n __proxiedMCPRequest: {\n serverHash,\n serverId, // optional, takes precedence if provided\n method: \"tools/call\",\n params: msg.params,\n },\n },\n }),\n );\n\n // The result from runAgent contains the MCP response\n sendResponse(msg.id, runResult.result || {});\n } catch (err) {\n console.error(\"[MCPAppsRenderer] tools/call error:\", err);\n sendErrorResponse(msg.id, -32603, String(err));\n }\n break;\n }\n\n default:\n sendErrorResponse(\n msg.id,\n -32601,\n `Method not found: ${msg.method}`,\n );\n }\n }\n\n // Handle notifications (no response needed)\n if (isNotification(msg)) {\n switch (msg.method) {\n case \"ui/notifications/initialized\": {\n console.log(\"[MCPAppsRenderer] Inner iframe initialized\");\n if (mounted) {\n setIframeReady(true);\n }\n break;\n }\n\n case \"ui/notifications/size-changed\": {\n const { width, height } = msg.params || {};\n console.log(\"[MCPAppsRenderer] Size change:\", {\n width,\n height,\n });\n if (mounted) {\n setIframeSize({\n width: typeof width === \"number\" ? width : undefined,\n height: typeof height === \"number\" ? height : undefined,\n });\n }\n break;\n }\n\n case \"notifications/message\": {\n // Logging notification from the app\n console.log(\"[MCPAppsRenderer] App log:\", msg.params);\n break;\n }\n }\n }\n };\n\n window.addEventListener(\"message\", messageHandler);\n\n // Extract HTML content from fetched resource\n let html: string;\n if (fetchedResource.text) {\n html = fetchedResource.text;\n } else if (fetchedResource.blob) {\n html = atob(fetchedResource.blob);\n } else {\n throw new Error(\"Resource has no text or blob content\");\n }\n\n // Send the resource content to the sandbox proxy\n sendNotification(\"ui/notifications/sandbox-resource-ready\", { html });\n } catch (err) {\n console.error(\"[MCPAppsRenderer] Setup error:\", err);\n if (mounted) {\n setError(err instanceof Error ? err : new Error(String(err)));\n }\n }\n };\n\n setup();\n\n return () => {\n mounted = false;\n // Clean up initial listener if still active\n if (initialListener) {\n window.removeEventListener(\"message\", initialListener);\n initialListener = null;\n }\n if (messageHandler) {\n window.removeEventListener(\"message\", messageHandler);\n }\n // Remove the iframe we created (using tracked reference, not DOM query)\n // This works even if containerRef.current is null during unmount\n if (createdIframe) {\n createdIframe.remove();\n createdIframe = null;\n }\n iframeRef.current = null;\n };\n }, [\n isLoading,\n fetchedResource,\n sendNotification,\n sendResponse,\n sendErrorResponse,\n ]);\n\n // Effect 2: Update iframe size when it changes\n useEffect(() => {\n if (iframeRef.current) {\n if (iframeSize.width !== undefined) {\n // Use minWidth with min() to allow expansion but cap at 100%\n iframeRef.current.style.minWidth = `min(${iframeSize.width}px, 100%)`;\n iframeRef.current.style.width = \"100%\";\n }\n if (iframeSize.height !== undefined) {\n iframeRef.current.style.height = `${iframeSize.height}px`;\n }\n }\n }, [iframeSize]);\n\n // Effect 3: Send tool input when iframe ready\n useEffect(() => {\n if (iframeReady && content.toolInput) {\n console.log(\"[MCPAppsRenderer] Sending tool input:\", content.toolInput);\n sendNotification(\"ui/notifications/tool-input\", {\n arguments: content.toolInput,\n });\n }\n }, [iframeReady, content.toolInput, sendNotification]);\n\n // Effect 4: Send tool result when iframe ready\n useEffect(() => {\n if (iframeReady && content.result) {\n console.log(\"[MCPAppsRenderer] Sending tool result:\", content.result);\n sendNotification(\"ui/notifications/tool-result\", content.result);\n }\n }, [iframeReady, content.result, sendNotification]);\n\n // Determine border styling based on prefersBorder metadata from fetched resource\n // true = show border/background, false = none, undefined = host decides (we default to none)\n const prefersBorder = fetchedResource?._meta?.ui?.prefersBorder;\n const borderStyle =\n prefersBorder === true\n ? {\n borderRadius: \"8px\",\n backgroundColor: \"#f9f9f9\",\n border: \"1px solid #e0e0e0\",\n }\n : {};\n\n return (\n \n {isLoading && (\n
Loading...
\n )}\n {error && (\n
\n Error: {error.message}\n
\n )}\n \n );\n };\n","import { createContext, useContext } from \"react\";\nimport type { SandboxFunction } from \"../types/sandbox-function\";\n\nexport const SandboxFunctionsContext = createContext<\n readonly SandboxFunction[]\n>([]);\n\nexport function useSandboxFunctions(): readonly SandboxFunction[] {\n return useContext(SandboxFunctionsContext);\n}\n","/**\n * Extracts all complete `` +\n html.slice(headCloseIdx)\n );\n }\n return `${html}`;\n}\n\nconst OpenGenerativeUIActivityRendererInner = React.memo(\n function OpenGenerativeUIActivityRendererInner({ content }: InnerProps) {\n const initialHeight = content.initialHeight ?? 200;\n const [autoHeight, setAutoHeight] = useState(null);\n const sandboxFunctions = useSandboxFunctions();\n\n const localApi = useMemo(() => {\n const api: Record = {};\n for (const fn of sandboxFunctions) {\n api[fn.name] = fn.handler;\n }\n return api;\n }, [sandboxFunctions]);\n\n // Join html chunks only when streaming is complete\n const fullHtml =\n content.htmlComplete && content.html?.length\n ? content.html.join(\"\")\n : undefined;\n\n // CSS from the dedicated parameter (available once cssComplete)\n const css = content.cssComplete ? content.css : undefined;\n\n // Derived state for preview streaming — gate on cssComplete so we\n // show the placeholder until styles are ready.\n const cssReady = !!content.cssComplete;\n const partialHtml =\n !content.htmlComplete && content.html?.length\n ? content.html.join(\"\")\n : undefined;\n const previewBody = partialHtml\n ? processPartialHtml(partialHtml)\n : undefined;\n const previewStyles = partialHtml ? extractCompleteStyles(partialHtml) : \"\";\n const hasPreview = cssReady && !!previewBody?.trim();\n const hasVisibleSandbox = !!fullHtml || hasPreview;\n\n const containerRef = useRef(null);\n const sandboxRef = useRef<{\n run: (code: string | Function) => Promise;\n destroy: () => void;\n iframe: HTMLIFrameElement;\n } | null>(null);\n const previewSandboxRef = useRef<{\n run: (code: string | Function) => Promise;\n destroy: () => void;\n iframe: HTMLIFrameElement;\n } | null>(null);\n const previewReadyRef = useRef(false);\n const sandboxReadyRef = useRef(false);\n const executedIndexRef = useRef(0);\n const pendingQueueRef = useRef([]);\n const jsFunctionsInjectedRef = useRef(false);\n\n // Effect 0 — Preview sandbox creation\n useEffect(() => {\n const container = containerRef.current;\n if (!container || fullHtml || !hasPreview || previewSandboxRef.current)\n return;\n\n let cancelled = false;\n\n import(\"@jetbrains/websandbox\")\n .then((mod: any) => {\n if (cancelled) return;\n\n const Websandbox = mod.default?.default ?? mod.default;\n const sandbox = Websandbox.create(\n {},\n {\n frameContainer: container,\n frameContent: \"\",\n allowAdditionalAttributes: \"\",\n },\n );\n previewSandboxRef.current = sandbox;\n\n sandbox.iframe.style.width = \"100%\";\n sandbox.iframe.style.height = \"100%\";\n sandbox.iframe.style.border = \"none\";\n sandbox.iframe.style.backgroundColor = \"transparent\";\n\n sandbox.promise.then(() => {\n if (cancelled) return;\n previewReadyRef.current = true;\n\n // Prevent scrollbars inside preview iframe\n sandbox.run(`\n var s = document.createElement('style');\n s.textContent = 'html, body { overflow: hidden !important; }';\n document.head.appendChild(s);\n `);\n\n // Inject CSS from the dedicated parameter + any inline styles from HTML\n const headParts: string[] = [];\n if (css) headParts.push(``);\n if (previewStyles) headParts.push(previewStyles);\n if (headParts.length) {\n sandbox.run(\n `document.head.innerHTML = ${JSON.stringify(headParts.join(\"\"))}`,\n );\n }\n if (previewBody) {\n sandbox.run(\n `document.body.innerHTML = ${JSON.stringify(previewBody)}`,\n );\n }\n });\n })\n .catch((err: unknown) => {\n console.error(\n \"[OpenGenerativeUI] Failed to load sandbox module:\",\n err,\n );\n });\n\n return () => {\n cancelled = true;\n };\n }, [hasPreview, fullHtml]); // eslint-disable-line react-hooks/exhaustive-deps\n\n // Effect 0b — Preview content updates (body + styles)\n useEffect(() => {\n if (!previewSandboxRef.current || !previewReadyRef.current) return;\n const headParts: string[] = [];\n if (css) headParts.push(``);\n if (previewStyles) headParts.push(previewStyles);\n if (headParts.length) {\n previewSandboxRef.current.run(\n `document.head.innerHTML = ${JSON.stringify(headParts.join(\"\"))}`,\n );\n }\n if (!previewBody) return;\n previewSandboxRef.current.run(\n `document.body.innerHTML = ${JSON.stringify(previewBody)}`,\n );\n }, [previewBody, previewStyles, css]);\n\n // Effect 1 — Final sandbox lifecycle (depends on fullHtml)\n useEffect(() => {\n const container = containerRef.current;\n if (!container || !fullHtml) return;\n\n // Destroy preview sandbox when transitioning to final\n if (previewSandboxRef.current) {\n previewSandboxRef.current.destroy();\n previewSandboxRef.current = null;\n previewReadyRef.current = false;\n }\n\n let cancelled = false;\n\n // Reset state for new html\n executedIndexRef.current = 0;\n jsFunctionsInjectedRef.current = false;\n sandboxReadyRef.current = false;\n pendingQueueRef.current = [];\n\n // Dynamic import to avoid SSR issues (websandbox references `self` at module level)\n const htmlContent = css ? injectCssIntoHtml(fullHtml, css) : fullHtml;\n import(\"@jetbrains/websandbox\")\n .then((mod: any) => {\n if (cancelled) return;\n\n // websandbox ships a UMD bundle with its own webpack `default` export.\n // Consumer bundlers (e.g. Next.js webpack) wrap CJS under another `.default`,\n // resulting in mod.default.default for the actual Websandbox class.\n const Websandbox = mod.default?.default ?? mod.default;\n const sandbox = Websandbox.create(localApi, {\n frameContainer: container,\n frameContent: ensureHead(htmlContent),\n allowAdditionalAttributes: \"\",\n });\n sandboxRef.current = sandbox;\n\n // Style the iframe to fill container\n sandbox.iframe.style.width = \"100%\";\n sandbox.iframe.style.height = \"100%\";\n sandbox.iframe.style.border = \"none\";\n sandbox.iframe.style.backgroundColor = \"transparent\";\n\n sandbox.promise.then(() => {\n if (cancelled) return;\n sandboxReadyRef.current = true;\n\n // Prevent scrollbars — the container auto-sizes to fit content\n sandbox.run(`\n var s = document.createElement('style');\n s.textContent = 'html, body { overflow: hidden !important; }';\n document.head.appendChild(s);\n `);\n\n // Flush pending queue\n const queue = pendingQueueRef.current;\n pendingQueueRef.current = [];\n for (const code of queue) {\n sandbox.run(code);\n }\n });\n })\n .catch((err: unknown) => {\n console.error(\n \"[OpenGenerativeUI] Failed to load sandbox module:\",\n err,\n );\n });\n\n return () => {\n cancelled = true;\n // Destroy preview sandbox if it still exists\n if (previewSandboxRef.current) {\n previewSandboxRef.current.destroy();\n previewSandboxRef.current = null;\n previewReadyRef.current = false;\n }\n if (sandboxRef.current) {\n sandboxRef.current.destroy();\n sandboxRef.current = null;\n }\n sandboxReadyRef.current = false;\n setAutoHeight(null);\n };\n }, [fullHtml, css, localApi]);\n\n // Effect 2 — jsFunctions injection (depends on content.jsFunctions)\n useEffect(() => {\n if (!content.jsFunctions || jsFunctionsInjectedRef.current) return;\n jsFunctionsInjectedRef.current = true;\n\n const sandbox = sandboxRef.current;\n if (sandboxReadyRef.current && sandbox) {\n sandbox.run(content.jsFunctions);\n } else {\n pendingQueueRef.current.push(content.jsFunctions);\n }\n }, [content.jsFunctions]);\n\n // Effect 3 — jsExpressions execution (depends on content.jsExpressions?.length)\n useEffect(() => {\n const expressions = content.jsExpressions;\n if (!expressions || expressions.length === 0) return;\n\n const startIndex = executedIndexRef.current;\n if (startIndex >= expressions.length) return;\n\n const newExprs = expressions.slice(startIndex);\n executedIndexRef.current = expressions.length;\n\n const sandbox = sandboxRef.current;\n if (sandboxReadyRef.current && sandbox) {\n (async () => {\n for (const expr of newExprs) {\n await sandbox.run(expr);\n }\n })();\n } else {\n pendingQueueRef.current.push(...newExprs);\n }\n }, [content.jsExpressions?.length]);\n\n // Effect 4 — One-shot height measurement (fires once when generation completes)\n // Uses body.scrollHeight (not documentElement.scrollHeight) because the latter\n // is clamped to the iframe viewport and can never shrink below the current size.\n const generationDone = content.generating === false;\n useEffect(() => {\n const sandbox = sandboxRef.current;\n if (!generationDone || !sandbox) return;\n\n let handled = false;\n const onMessage = (e: MessageEvent) => {\n if (handled) return;\n if (\n e.source === sandbox.iframe.contentWindow &&\n e.data?.type === \"__ck_resize\"\n ) {\n handled = true;\n setAutoHeight(e.data.height);\n window.removeEventListener(\"message\", onMessage);\n }\n };\n window.addEventListener(\"message\", onMessage);\n\n const measureOnce = `\n (function() {\n var s = document.createElement('style');\n s.textContent = 'body { height: auto !important; min-height: 0 !important; }';\n document.head.appendChild(s);\n var h = document.body.scrollHeight;\n var cs = getComputedStyle(document.body);\n h += parseFloat(cs.marginTop) || 0;\n h += parseFloat(cs.marginBottom) || 0;\n s.remove();\n parent.postMessage({ type: \"__ck_resize\", height: Math.ceil(h) }, \"*\");\n })();\n `;\n\n if (sandboxReadyRef.current) {\n sandbox.run(measureOnce);\n } else {\n pendingQueueRef.current.push(measureOnce);\n }\n\n return () => {\n window.removeEventListener(\"message\", onMessage);\n };\n }, [generationDone]);\n\n const height = autoHeight ?? initialHeight;\n\n const isGenerating = content.generating !== false;\n\n return (\n \n {isGenerating && (\n \n \n \n \n \n \n \n )}\n \n );\n },\n (prev, next) => prev.content === next.content,\n);\n\n/**\n * Frontend tool renderer for generateSandboxedUi.\n * Displays placeholder messages while the UI is being generated.\n */\nexport const OpenGenerativeUIToolRenderer: React.FC<\n | {\n name: string;\n args: Partial;\n status: ToolCallStatus.InProgress;\n result: undefined;\n }\n | {\n name: string;\n args: GenerateSandboxedUiArgs;\n status: ToolCallStatus.Executing;\n result: undefined;\n }\n | {\n name: string;\n args: GenerateSandboxedUiArgs;\n status: ToolCallStatus.Complete;\n result: string;\n }\n> = function OpenGenerativeUIToolRenderer(props) {\n const [visibleMessageIndex, setVisibleMessageIndex] = useState(0);\n const prevMessageCountRef = useRef(0);\n\n const messages = props.args.placeholderMessages;\n\n // Cycle through placeholder messages\n useEffect(() => {\n if (!messages || messages.length === 0) return;\n\n // When a new message streams in, jump to it immediately\n if (messages.length !== prevMessageCountRef.current) {\n prevMessageCountRef.current = messages.length;\n setVisibleMessageIndex(messages.length - 1);\n }\n\n // Auto-cycle every 3s while still in progress\n if (props.status === ToolCallStatus.Complete) return;\n const timer = setInterval(() => {\n setVisibleMessageIndex((i) => (i + 1) % messages.length);\n }, 5000);\n return () => clearInterval(timer);\n }, [messages?.length, props.status]);\n\n // Don't render anything once complete — the activity renderer handles the UI\n if (props.status === ToolCallStatus.Complete) return null;\n\n if (!messages || messages.length === 0) return null;\n\n return (\n \n {messages[visibleMessageIndex] ?? messages[0]}\n \n );\n};\n","import { useCopilotKit } from \"../providers\";\nimport type { ReactActivityMessageRenderer } from \"../types/react-activity-message-renderer\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { z } from \"zod\";\nimport {\n A2UIProvider,\n useA2UIActions,\n useA2UIError,\n A2UIRenderer,\n initializeDefaultCatalog,\n injectStyles,\n DEFAULT_SURFACE_ID,\n} from \"@copilotkit/a2ui-renderer\";\nimport type { Theme, A2UIClientEventMessage } from \"@copilotkit/a2ui-renderer\";\n\n/**\n * The container key used to wrap A2UI operations for explicit detection.\n * Must match A2UI_OPERATIONS_KEY in @ag-ui/a2ui-middleware and copilotkit.a2ui (Python).\n */\nconst A2UI_OPERATIONS_KEY = \"a2ui_operations\";\n\n// Initialize the React renderer's component catalog and styles once\nlet initialized = false;\nfunction ensureInitialized() {\n if (!initialized) {\n initializeDefaultCatalog();\n injectStyles();\n initialized = true;\n }\n}\n\n/**\n * User action with dataContextPath, as dispatched by A2UI components.\n */\nexport type A2UIUserAction = {\n name: string;\n sourceComponentId: string;\n surfaceId: string;\n timestamp: string;\n context?: Record;\n dataContextPath?: string;\n};\n\nexport type A2UIMessageRendererOptions = {\n theme: Theme;\n /** Optional component catalog to pass to A2UIProvider */\n catalog?: any;\n /** Optional custom loading component shown while A2UI surface is generating. */\n loadingComponent?: React.ComponentType;\n};\n\nexport function createA2UIMessageRenderer(\n options: A2UIMessageRendererOptions,\n): ReactActivityMessageRenderer {\n const { theme, catalog, loadingComponent } = options;\n\n return {\n activityType: \"a2ui-surface\",\n content: z.any(),\n render: ({ content, agent }) => {\n ensureInitialized();\n\n const [operations, setOperations] = useState([]);\n const { copilotkit } = useCopilotKit();\n\n const lastContentRef = useRef(null);\n useEffect(() => {\n // Skip if same content reference\n if (content === lastContentRef.current) return;\n lastContentRef.current = content;\n\n const incoming = content?.[A2UI_OPERATIONS_KEY];\n if (!content || !Array.isArray(incoming)) {\n setOperations([]);\n return;\n }\n\n setOperations(incoming);\n }, [content]);\n\n // Group operations by surface ID\n const groupedOperations = useMemo(() => {\n const groups = new Map();\n\n for (const operation of operations) {\n const surfaceId =\n getOperationSurfaceId(operation) ?? DEFAULT_SURFACE_ID;\n\n if (!groups.has(surfaceId)) {\n groups.set(surfaceId, []);\n }\n groups.get(surfaceId)!.push(operation);\n }\n\n return groups;\n }, [operations]);\n\n if (!groupedOperations.size) {\n // Show loading state while A2UI surface is being generated\n const LoadingComponent = loadingComponent ?? DefaultA2UILoading;\n return ;\n }\n\n return (\n
\n {Array.from(groupedOperations.entries()).map(([surfaceId, ops]) => (\n \n ))}\n
\n );\n },\n };\n}\n\ntype ReactSurfaceHostProps = {\n surfaceId: string;\n operations: any[];\n theme: Theme;\n agent: any;\n copilotkit: any;\n /** Optional component catalog to pass to A2UIProvider */\n catalog?: any;\n};\n\n/**\n * Renders a single A2UI surface using the React renderer.\n * Wraps A2UIProvider + A2UIRenderer and bridges actions back to CopilotKit.\n */\nfunction ReactSurfaceHost({\n surfaceId,\n operations,\n theme,\n agent,\n copilotkit,\n catalog,\n}: ReactSurfaceHostProps) {\n // Bridge: when the React renderer dispatches an action, forward to CopilotKit\n const handleAction = useCallback(\n async (message: A2UIClientEventMessage) => {\n if (!agent) return;\n\n const action = message.userAction as A2UIUserAction | undefined;\n\n try {\n copilotkit.setProperties({\n ...copilotkit.properties,\n a2uiAction: message,\n });\n\n await copilotkit.runAgent({ agent });\n } finally {\n if (copilotkit.properties) {\n const { a2uiAction, ...rest } = copilotkit.properties;\n copilotkit.setProperties(rest);\n }\n }\n },\n [agent, copilotkit],\n );\n\n return (\n
\n \n \n \n \n
\n );\n}\n\n/**\n * Renders the A2UI surface, or an error message if processing failed.\n * Must be a child of A2UIProvider to access the error state.\n */\nfunction A2UISurfaceOrError({ surfaceId }: { surfaceId: string }) {\n const error = useA2UIError();\n if (error) {\n return (\n
\n A2UI render error: {error}\n
\n );\n }\n return ;\n}\n\n/**\n * Processes A2UI operations into the provider's message processor.\n * Must be a child of A2UIProvider to access the actions context.\n */\nfunction SurfaceMessageProcessor({\n surfaceId,\n operations,\n}: {\n surfaceId: string;\n operations: any[];\n}) {\n const { processMessages, getSurface } = useA2UIActions();\n const lastHashRef = useRef(\"\");\n useEffect(() => {\n // Skip if operations haven't actually changed (deep compare via hash).\n // ACTIVITY_DELTA + ACTIVITY_SNAPSHOT can trigger multiple renders with\n // the same logical content but different object references.\n const hash = JSON.stringify(operations);\n if (hash === lastHashRef.current) return;\n lastHashRef.current = hash;\n\n // Filter out createSurface if the surface already exists — the\n // MessageProcessor throws on duplicate createSurface, but content\n // snapshots always include the full operation list.\n const existing = getSurface(surfaceId);\n const ops = existing\n ? operations.filter((op) => !op?.createSurface)\n : operations;\n\n // Error handling is done inside A2UIProvider.processMessages\n processMessages(ops);\n }, [processMessages, getSurface, surfaceId, operations]);\n\n return null;\n}\n\n/**\n * Default loading component shown while an A2UI surface is generating.\n * Displays an animated shimmer skeleton.\n */\nfunction DefaultA2UILoading() {\n return (\n \n
\n \n \n Generating UI...\n \n
\n
\n {[0.8, 0.6, 0.4].map((width, i) => (\n \n ))}\n
\n \n \n );\n}\n\nfunction getOperationSurfaceId(operation: any): string | null {\n if (!operation || typeof operation !== \"object\") {\n return null;\n }\n\n if (typeof operation.surfaceId === \"string\") {\n return operation.surfaceId;\n }\n\n // v0.9 message keys\n return (\n operation?.createSurface?.surfaceId ??\n operation?.updateComponents?.surfaceId ??\n operation?.updateDataModel?.surfaceId ??\n operation?.deleteSurface?.surfaceId ??\n null\n );\n}\n","import React from \"react\";\nimport { z } from \"zod\";\nimport type { StandardSchemaV1, InferSchemaOutput } from \"@copilotkit/shared\";\nimport { ReactToolCallRenderer } from \"./react-tool-call-renderer\";\nimport { ToolCallStatus } from \"@copilotkit/core\";\n\n/**\n * Helper to define a type-safe tool call renderer entry.\n * - Accepts a single object whose keys match ReactToolCallRenderer's fields: { name, args, render, agentId? }.\n * - Derives `args` type from the provided schema (any Standard Schema V1 compatible library).\n * - Ensures the render function param type exactly matches ReactToolCallRenderer[\"render\"]'s param.\n * - For wildcard tools (name: \"*\"), args is optional and defaults to z.any()\n */\ntype RenderProps =\n | {\n name: string;\n toolCallId: string;\n args: Partial;\n status: ToolCallStatus.InProgress;\n result: undefined;\n }\n | {\n name: string;\n toolCallId: string;\n args: T;\n status: ToolCallStatus.Executing;\n result: undefined;\n }\n | {\n name: string;\n toolCallId: string;\n args: T;\n status: ToolCallStatus.Complete;\n result: string;\n };\n\n// Overload for wildcard tools without args\nexport function defineToolCallRenderer(def: {\n name: \"*\";\n render: (props: RenderProps) => React.ReactElement;\n agentId?: string;\n}): ReactToolCallRenderer;\n\n// Overload for regular tools with args\nexport function defineToolCallRenderer(def: {\n name: string;\n args: S;\n render: (props: RenderProps>) => React.ReactElement;\n agentId?: string;\n}): ReactToolCallRenderer>;\n\n// Implementation\nexport function defineToolCallRenderer(def: {\n name: string;\n args?: S;\n render: (props: any) => React.ReactElement;\n agentId?: string;\n}): ReactToolCallRenderer {\n // For wildcard tools, default to z.any() if no args provided\n const argsSchema = def.name === \"*\" && !def.args ? z.any() : def.args;\n\n return {\n name: def.name,\n args: argsSchema,\n render: def.render as React.ComponentType,\n ...(def.agentId ? { agentId: def.agentId } : {}),\n };\n}\n","import React, { useEffect, useRef } from \"react\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { defineToolCallRenderer } from \"../types/defineToolCallRenderer\";\nimport { z } from \"zod\";\n\n/**\n * Tool name used by the dynamic A2UI generation secondary LLM.\n * This renderer is auto-registered when A2UI is enabled.\n */\nexport const RENDER_A2UI_TOOL_NAME = \"render_a2ui\";\n\ninterface A2UIProgressProps {\n parameters: unknown;\n}\n\n/**\n * Built-in progress indicator for dynamic A2UI generation.\n * Shows a skeleton wireframe that progressively reveals as tokens stream in.\n *\n * Registered automatically when A2UI is enabled. Users can override by\n * providing their own `useRenderTool({ name: \"render_a2ui\", ... })`.\n */\nfunction A2UIProgressIndicator({ parameters }: A2UIProgressProps) {\n const lastRef = useRef({ time: 0, tokens: 0 });\n const now = Date.now();\n\n let { tokens } = lastRef.current;\n if (now - lastRef.current.time > 200) {\n const chars = JSON.stringify(parameters ?? {}).length;\n tokens = Math.round(chars / 4);\n lastRef.current = { time: now, tokens };\n }\n\n const phase = tokens < 50 ? 0 : tokens < 200 ? 1 : tokens < 400 ? 2 : 3;\n\n return (\n
\n \n {/* Top bar */}\n \n
\n \n \n \n
\n = 1 ? 1 : 0.4}\n transition=\"opacity 0.5s\"\n />\n
\n\n {/* Skeleton lines */}\n
\n = 0}>\n \n \n \n = 0} delay={0.1}>\n \n \n \n \n = 1} delay={0.15}>\n \n \n \n \n \n = 1} delay={0.2}>\n \n \n \n \n = 2} delay={0.25}>\n \n \n \n \n \n = 2} delay={0.3}>\n \n \n \n = 3} delay={0.35}>\n \n \n \n \n \n \n
\n\n {/* Shimmer */}\n \n \n\n {/* Label */}\n \n \n Building interface\n \n {tokens > 0 && (\n \n ~{tokens.toLocaleString()} tokens\n \n )}\n \n\n \n \n );\n}\n\n// --- Primitives ---\n\nfunction Dot() {\n return (\n \n );\n}\n\nfunction Spacer() {\n return
;\n}\n\nfunction Bar({\n w,\n h,\n bg,\n anim,\n opacity,\n transition,\n}: {\n w: number;\n h: number;\n bg: string;\n anim?: number;\n opacity?: number;\n transition?: string;\n}) {\n return (\n \n );\n}\n\nfunction Row({\n children,\n show,\n delay = 0,\n}: {\n children: React.ReactNode;\n show: boolean;\n delay?: number;\n}) {\n return (\n \n {children}\n
\n );\n}\n\n// --- Hook entry point ---\n\n/**\n * Registers the built-in `render_a2ui` tool call renderer via the props-based\n * `setRenderToolCalls` mechanism (not `useRenderTool`).\n *\n * This ensures user-registered `useRenderTool({ name: \"render_a2ui\", ... })`\n * hooks automatically override the built-in, since the merge logic in\n * react-core.ts gives hook-based entries priority over prop-based entries.\n */\nexport function A2UIBuiltInToolCallRenderer(): null {\n const { copilotkit } = useCopilotKit();\n\n useEffect(() => {\n const renderer = defineToolCallRenderer({\n name: RENDER_A2UI_TOOL_NAME,\n args: z.any(),\n render: ({ status, args: parameters }) => {\n if (status === \"complete\") return <>;\n const params = parameters as any;\n // Hide skeleton once the A2UI surface has enough data to render.\n // For data-bound surfaces: items array is populated.\n // For dashboard-style surfaces: components array has multiple entries\n // (meaning the streaming path is emitting activity snapshots).\n const items = params?.items;\n if (Array.isArray(items) && items.length > 0) return <>;\n const components = params?.components;\n if (Array.isArray(components) && components.length > 2) return <>;\n return ;\n },\n });\n\n // Register via props-based mechanism so useRenderTool hooks take priority\n const existing = (copilotkit as any)._renderToolCalls ?? [];\n copilotkit.setRenderToolCalls([\n ...existing.filter((rc: any) => rc.name !== RENDER_A2UI_TOOL_NAME),\n renderer,\n ]);\n }, [copilotkit]);\n\n return null;\n}\n","import { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { useLayoutEffect, useMemo } from \"react\";\n\n/**\n * Represents any value that can be serialized to JSON.\n */\nexport type JsonSerializable =\n | string\n | number\n | boolean\n | null\n | JsonSerializable[]\n | { [key: string]: JsonSerializable };\n\n/**\n * Context configuration for useAgentContext.\n * Accepts any JSON-serializable value which will be converted to a string.\n */\nexport interface AgentContextInput {\n /** A human-readable description of what this context represents */\n description: string;\n /** The context value - will be converted to a JSON string if not already a string */\n value: JsonSerializable;\n}\n\nexport function useAgentContext(context: AgentContextInput) {\n const { description, value } = context;\n const { copilotkit } = useCopilotKit();\n\n const stringValue = useMemo(() => {\n if (typeof value === \"string\") {\n return value;\n }\n return JSON.stringify(value);\n }, [value]);\n\n useLayoutEffect(() => {\n if (!copilotkit) return;\n\n const id = copilotkit.addContext({ description, value: stringValue });\n return () => {\n copilotkit.removeContext(id);\n };\n }, [description, stringValue, copilotkit]);\n}\n","\"use client\";\n\nimport {\n buildCatalogContextValue,\n A2UI_SCHEMA_CONTEXT_DESCRIPTION,\n extractCatalogComponentSchemas,\n} from \"@copilotkit/a2ui-renderer\";\nimport {\n A2UI_DEFAULT_GENERATION_GUIDELINES,\n A2UI_DEFAULT_DESIGN_GUIDELINES,\n} from \"@copilotkit/shared\";\nimport { useAgentContext } from \"../hooks/use-agent-context\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { useLayoutEffect, useMemo } from \"react\";\n\n/**\n * Renders agent context describing the available A2UI catalog and custom components.\n * Only mount this component when A2UI is enabled.\n *\n * When `includeSchema` is true, the full component schemas (JSON Schema) are also\n * sent as context using the same description key as the A2UI middleware, so the\n * middleware can optionally overwrite it with a server-side schema.\n */\nexport function A2UICatalogContext({\n catalog,\n includeSchema,\n}: {\n catalog?: any;\n includeSchema?: boolean;\n}) {\n const contextValue = buildCatalogContextValue(catalog);\n\n useAgentContext({\n description:\n \"A2UI catalog capabilities: available catalog IDs and custom component definitions the client can render.\",\n value: contextValue,\n });\n\n // When includeSchema is true, send full component schemas in the same format\n // as the A2UI middleware so it can overwrite with a server-side schema if needed.\n const { copilotkit } = useCopilotKit();\n const schemaValue = useMemo(\n () =>\n includeSchema !== false\n ? JSON.stringify(extractCatalogComponentSchemas(catalog))\n : null,\n [catalog, includeSchema],\n );\n\n useLayoutEffect(() => {\n if (!copilotkit || !schemaValue) return;\n const ids: string[] = [];\n ids.push(\n copilotkit.addContext({\n description: A2UI_SCHEMA_CONTEXT_DESCRIPTION,\n value: schemaValue,\n }),\n );\n ids.push(\n copilotkit.addContext({\n description:\n \"A2UI generation guidelines — protocol rules, tool arguments, path rules, data model format, and form/two-way-binding instructions.\",\n value: A2UI_DEFAULT_GENERATION_GUIDELINES,\n }),\n );\n ids.push(\n copilotkit.addContext({\n description:\n \"A2UI design guidelines — visual design rules, component hierarchy tips, and action handler patterns.\",\n value: A2UI_DEFAULT_DESIGN_GUIDELINES,\n }),\n );\n return () => {\n for (const id of ids) copilotkit.removeContext(id);\n };\n }, [copilotkit, schemaValue]);\n\n return null;\n}\n","import React from \"react\";\nimport { ReactActivityMessageRenderer, ReactToolCallRenderer } from \"../types\";\nimport { ReactCustomMessageRenderer } from \"../types/react-custom-message-renderer\";\nimport {\n CopilotKitCore,\n type CopilotKitCoreConfig,\n type CopilotKitCoreSubscriber,\n type CopilotKitCoreSubscription,\n} from \"@copilotkit/core\";\n\nexport interface CopilotKitCoreReactConfig extends CopilotKitCoreConfig {\n // Add any additional configuration properties specific to the React implementation\n renderToolCalls?: ReactToolCallRenderer[];\n renderActivityMessages?: ReactActivityMessageRenderer[];\n\n // Add custom message renderers\n renderCustomMessages?: ReactCustomMessageRenderer[];\n}\n\nexport interface CopilotKitCoreReactSubscriber extends CopilotKitCoreSubscriber {\n onRenderToolCallsChanged?: (event: {\n copilotkit: CopilotKitCore;\n renderToolCalls: ReactToolCallRenderer[];\n }) => void | Promise;\n onInterruptElementChanged?: (event: {\n copilotkit: CopilotKitCore;\n interruptElement: React.ReactElement | null;\n }) => void | Promise;\n}\n\nexport class CopilotKitCoreReact extends CopilotKitCore {\n private _renderToolCalls: ReactToolCallRenderer[] = [];\n private _hookRenderToolCalls: Map> =\n new Map();\n private _cachedMergedRenderToolCalls: ReactToolCallRenderer[] | null =\n null;\n private _renderCustomMessages: ReactCustomMessageRenderer[] = [];\n private _renderActivityMessages: ReactActivityMessageRenderer[] = [];\n private _interruptElement: React.ReactElement | null = null;\n\n constructor(config: CopilotKitCoreReactConfig) {\n super(config);\n this._renderToolCalls = config.renderToolCalls ?? [];\n this._renderCustomMessages = config.renderCustomMessages ?? [];\n this._renderActivityMessages = config.renderActivityMessages ?? [];\n }\n\n get renderCustomMessages(): Readonly {\n return this._renderCustomMessages;\n }\n\n get renderActivityMessages(): Readonly>[] {\n return this._renderActivityMessages;\n }\n\n get renderToolCalls(): Readonly>[] {\n if (this._hookRenderToolCalls.size === 0) {\n return this._renderToolCalls;\n }\n if (this._cachedMergedRenderToolCalls) {\n return this._cachedMergedRenderToolCalls;\n }\n // Merge: hook entries override prop entries with the same key\n const merged = new Map>();\n for (const rc of this._renderToolCalls) {\n merged.set(`${rc.agentId ?? \"\"}:${rc.name}`, rc);\n }\n for (const [key, rc] of this._hookRenderToolCalls) {\n merged.set(key, rc);\n }\n this._cachedMergedRenderToolCalls = Array.from(merged.values());\n return this._cachedMergedRenderToolCalls;\n }\n\n setRenderActivityMessages(\n renderers: ReactActivityMessageRenderer[],\n ): void {\n this._renderActivityMessages = renderers;\n }\n\n setRenderCustomMessages(renderers: ReactCustomMessageRenderer[]): void {\n this._renderCustomMessages = renderers;\n }\n\n setRenderToolCalls(renderToolCalls: ReactToolCallRenderer[]): void {\n this._renderToolCalls = renderToolCalls;\n this._cachedMergedRenderToolCalls = null;\n this._notifyRenderToolCallsChanged();\n }\n\n addHookRenderToolCall(entry: ReactToolCallRenderer): void {\n const key = `${entry.agentId ?? \"\"}:${entry.name}`;\n this._hookRenderToolCalls.set(key, entry);\n this._cachedMergedRenderToolCalls = null;\n this._notifyRenderToolCallsChanged();\n }\n\n removeHookRenderToolCall(name: string, agentId?: string): void {\n const key = `${agentId ?? \"\"}:${name}`;\n if (this._hookRenderToolCalls.delete(key)) {\n this._cachedMergedRenderToolCalls = null;\n this._notifyRenderToolCallsChanged();\n }\n }\n\n private _notifyRenderToolCallsChanged(): void {\n void this.notifySubscribers((subscriber) => {\n const reactSubscriber = subscriber as CopilotKitCoreReactSubscriber;\n if (reactSubscriber.onRenderToolCallsChanged) {\n reactSubscriber.onRenderToolCallsChanged({\n copilotkit: this,\n renderToolCalls: this.renderToolCalls,\n });\n }\n }, \"Subscriber onRenderToolCallsChanged error:\");\n }\n\n get interruptElement(): React.ReactElement | null {\n return this._interruptElement;\n }\n\n setInterruptElement(element: React.ReactElement | null): void {\n this._interruptElement = element;\n void this.notifySubscribers((subscriber) => {\n const reactSubscriber = subscriber as CopilotKitCoreReactSubscriber;\n reactSubscriber.onInterruptElementChanged?.({\n copilotkit: this,\n interruptElement: this._interruptElement,\n });\n }, \"Subscriber onInterruptElementChanged error:\");\n }\n\n // Override to accept React-specific subscriber type\n subscribe(\n subscriber: CopilotKitCoreReactSubscriber,\n ): CopilotKitCoreSubscription {\n return super.subscribe(subscriber);\n }\n\n /**\n * Wait for pending React state updates before the follow-up agent run.\n *\n * When a frontend tool handler calls setState(), React 18 batches the update\n * and schedules a commit via its internal scheduler (MessageChannel). The\n * useAgentContext hook registers context via useLayoutEffect, which runs\n * synchronously after React commits that batch.\n *\n * Awaiting a zero-delay timeout yields to the macrotask queue. React's\n * MessageChannel task runs first, committing the pending state and running\n * useLayoutEffect (which updates the context store). The follow-up runAgent\n * call then reads fresh context.\n */\n async waitForPendingFrameworkUpdates(): Promise {\n await new Promise((resolve) => setTimeout(resolve, 0));\n }\n}\n","\"use client\";\n\nimport type { AbstractAgent } from \"@ag-ui/client\";\nimport type { FrontendTool } from \"@copilotkit/core\";\nimport type React from \"react\";\nimport {\n createContext,\n useContext,\n type ReactNode,\n useMemo,\n useEffect,\n useLayoutEffect,\n useReducer,\n useRef,\n useState,\n} from \"react\";\nimport { z } from \"zod\";\nimport { CopilotKitInspector } from \"../components/CopilotKitInspector\";\nimport type { Anchor } from \"@copilotkit/web-inspector\";\nimport { LicenseWarningBanner } from \"../components/license-warning-banner\";\nimport {\n createLicenseContextValue,\n type LicenseContextValue,\n type DebugConfig,\n} from \"@copilotkit/shared\";\nimport type { CopilotKitCoreErrorCode } from \"@copilotkit/core\";\nimport {\n MCPAppsActivityContentSchema,\n MCPAppsActivityRenderer,\n MCPAppsActivityType,\n} from \"../components/MCPAppsActivityRenderer\";\nimport {\n OpenGenerativeUIActivityType,\n OpenGenerativeUIContentSchema,\n OpenGenerativeUIActivityRenderer,\n OpenGenerativeUIToolRenderer,\n GenerateSandboxedUiArgsSchema,\n} from \"../components/OpenGenerativeUIRenderer\";\nimport { createA2UIMessageRenderer } from \"../a2ui/A2UIMessageRenderer\";\nimport { A2UIBuiltInToolCallRenderer } from \"../a2ui/A2UIToolCallRenderer\";\nimport { A2UICatalogContext } from \"../a2ui/A2UICatalogContext\";\nimport { viewerTheme } from \"@copilotkit/a2ui-renderer\";\nimport type { Theme as A2UITheme } from \"@copilotkit/a2ui-renderer\";\nimport { CopilotKitCoreReact } from \"../lib/react-core\";\nimport type {\n ReactActivityMessageRenderer,\n ReactToolCallRenderer,\n} from \"../types\";\nimport type { ReactFrontendTool } from \"../types/frontend-tool\";\nimport type { ReactHumanInTheLoop } from \"../types/human-in-the-loop\";\nimport type { ReactCustomMessageRenderer } from \"../types/react-custom-message-renderer\";\nimport type { SandboxFunction } from \"../types/sandbox-function\";\nimport { SandboxFunctionsContext } from \"./SandboxFunctionsContext\";\nimport { schemaToJsonSchema } from \"@copilotkit/shared\";\nimport { zodToJsonSchema } from \"zod-to-json-schema\";\n\nconst HEADER_NAME = \"X-CopilotCloud-Public-Api-Key\";\nconst COPILOT_CLOUD_CHAT_URL = \"https://api.cloud.copilotkit.ai/copilotkit/v1\";\n\nconst DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui:\n\n- Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces.\n- Neutral base palette: white backgrounds, zinc/slate gray text (#09090b for headings, #71717a for secondary text). One accent color for interactive elements.\n- Use system font stacks (system-ui, -apple-system, sans-serif) at readable sizes (14px body, 600 weight for headings). Tight line-heights.\n- Small, consistent border-radius (6–8px). Cards and containers use border, not shadow, for separation.\n- Buttons: solid fill for primary (dark bg, white text), outline for secondary (border + transparent bg). Subtle hover state (slight opacity or background shift).\n- Use CSS Grid or Flexbox for layout. Ensure the UI looks good at any width.\n- Minimal transitions (150ms) for hover/focus states only. No decorative animations.\n- Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;\n\nconst GENERATE_SANDBOXED_UI_DESCRIPTION =\n \"Generate sandboxed UI. \" +\n \"IMPORTANT: The generated code runs in a sandboxed iframe WITHOUT same-origin access. \" +\n \"Do NOT use localStorage, sessionStorage, document.cookie, IndexedDB, or fetch/XMLHttpRequest to same-origin URLs. \" +\n \"To communicate with the host application, use Websandbox.connection.remote.(args) which returns a Promise.\\n\\n\" +\n \"You CAN use external libraries from CDNs by including