@copilotkit/react-core 1.71.1 → 1.72.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{copilotkit-DCIXZawe.d.cts → copilotkit-DoHSqB_u.d.cts} +10 -82
- package/dist/copilotkit-DoHSqB_u.d.cts.map +1 -0
- package/dist/{copilotkit-ChjzWqn6.d.mts → copilotkit-DsMFLrpY.d.mts} +10 -82
- package/dist/copilotkit-DsMFLrpY.d.mts.map +1 -0
- package/dist/{copilotkit-BkVEkUS0.cjs → copilotkit-gopQXrTQ.cjs} +74 -390
- package/dist/copilotkit-gopQXrTQ.cjs.map +1 -0
- package/dist/{copilotkit-D5BTo0YG.mjs → copilotkit-qK-Q3rmE.mjs} +72 -370
- package/dist/copilotkit-qK-Q3rmE.mjs.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.umd.js +65 -371
- package/dist/index.umd.js.map +1 -1
- package/dist/v2/index.cjs +20 -4
- package/dist/v2/index.d.cts +1 -1
- package/dist/v2/index.d.mts +1 -1
- package/dist/v2/index.mjs +1 -1
- package/dist/v2/index.umd.js +94 -378
- package/dist/v2/index.umd.js.map +1 -1
- package/package.json +8 -10
- package/dist/copilotkit-BkVEkUS0.cjs.map +0 -1
- package/dist/copilotkit-ChjzWqn6.d.mts.map +0 -1
- package/dist/copilotkit-D5BTo0YG.mjs.map +0 -1
- package/dist/copilotkit-DCIXZawe.d.cts.map +0 -1
package/dist/v2/index.umd.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
(function(global, factory) {
|
|
4
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('zod'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('react-dom'), require('@tanstack/react-virtual'), require('use-stick-to-bottom'), require('@copilotkit/web-components/threads-drawer')) :
|
|
5
|
-
typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', 'zod', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', 'react-dom', '@tanstack/react-virtual', 'use-stick-to-bottom', '@copilotkit/web-components/threads-drawer'], factory) :
|
|
6
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCoreV2 = {}), global.src_v2_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.Zod,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global.ReactDOM,global._tanstack_react_virtual,global.useStickToBottom,global._copilotkit_web_components_threads_drawer));
|
|
7
|
-
})(this, function(exports, src_v2_index_css, _copilotkit_core, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkit_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, zod, _copilotkit_a2ui_renderer, zod_to_json_schema, react_dom, _tanstack_react_virtual, use_stick_to_bottom, _copilotkit_web_components_threads_drawer) {
|
|
4
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('./index.css'), require('@copilotkit/core'), require('@ag-ui/client'), require('react'), require('tailwind-merge'), require('lucide-react'), require('@copilotkit/shared'), require('react/jsx-runtime'), require('@radix-ui/react-slot'), require('class-variance-authority'), require('clsx'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-dropdown-menu'), require('streamdown'), require('zod'), require('@copilotkit/mcp-apps-renderer/activity'), require('@copilotkit/a2ui-renderer'), require('zod-to-json-schema'), require('react-dom'), require('@tanstack/react-virtual'), require('use-stick-to-bottom'), require('@copilotkit/web-components/threads-drawer')) :
|
|
5
|
+
typeof define === 'function' && define.amd ? define(['exports', './index.css', '@copilotkit/core', '@ag-ui/client', 'react', 'tailwind-merge', 'lucide-react', '@copilotkit/shared', 'react/jsx-runtime', '@radix-ui/react-slot', 'class-variance-authority', 'clsx', '@radix-ui/react-tooltip', '@radix-ui/react-dropdown-menu', 'streamdown', 'zod', '@copilotkit/mcp-apps-renderer/activity', '@copilotkit/a2ui-renderer', 'zod-to-json-schema', 'react-dom', '@tanstack/react-virtual', 'use-stick-to-bottom', '@copilotkit/web-components/threads-drawer'], factory) :
|
|
6
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.CopilotKitReactCoreV2 = {}), global.src_v2_index_css,global.CopilotKitCore,global.AgUIClient,global.React,global.tailwindMerge,global.lucideReact,global.CopilotKitShared,global.ReactJsxRuntime,global.RadixReactSlot,global.classVarianceAuthority,global.clsx,global.RadixReactTooltip,global.RadixReactDropdownMenu,global.streamdown,global.Zod,global.CopilotKitMcpAppsRendererActivity,global.CopilotKitA2UIRenderer,global.zod_to_json_schema,global.ReactDOM,global._tanstack_react_virtual,global.useStickToBottom,global._copilotkit_web_components_threads_drawer));
|
|
7
|
+
})(this, function(exports, src_v2_index_css, _copilotkit_core, _ag_ui_client, react, tailwind_merge, lucide_react, _copilotkit_shared, react_jsx_runtime, _radix_ui_react_slot, class_variance_authority, clsx, _radix_ui_react_tooltip, _radix_ui_react_dropdown_menu, streamdown, zod, _copilotkit_mcp_apps_renderer_activity, _copilotkit_a2ui_renderer, zod_to_json_schema, react_dom, _tanstack_react_virtual, use_stick_to_bottom, _copilotkit_web_components_threads_drawer) {
|
|
8
8
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
9
9
|
//#region \0rolldown/runtime.js
|
|
10
10
|
var __create = Object.create;
|
|
@@ -1969,197 +1969,17 @@ _radix_ui_react_dropdown_menu = __toESM(_radix_ui_react_dropdown_menu);
|
|
|
1969
1969
|
//#endregion
|
|
1970
1970
|
//#region src/v2/components/MCPAppsActivityRenderer.tsx
|
|
1971
1971
|
/**
|
|
1972
|
-
* Run an MCP app `ui/message` follow-up, scoped to the thread it was enqueued
|
|
1973
|
-
* for (issue #5819).
|
|
1974
|
-
*
|
|
1975
|
-
* The MCP request queue delays follow-up work until the agent is idle. There is
|
|
1976
|
-
* a single shared registry agent per id, and switching threads overwrites its
|
|
1977
|
-
* `threadId`/`messages` in place. So if the host switches threads while a
|
|
1978
|
-
* follow-up is queued, running it now would execute against — and stream into —
|
|
1979
|
-
* the now-foreground thread.
|
|
1980
|
-
*
|
|
1981
|
-
* - **Same thread** (the common case): run on the shared agent, unchanged.
|
|
1982
|
-
* - **Thread changed**: the shared agent has moved on, so the follow-up can no
|
|
1983
|
-
* longer run in its originating thread's context. Drop it rather than leak it
|
|
1984
|
-
* into the current thread. (The MCP app already received its `ui/message` ack
|
|
1985
|
-
* at enqueue time; only the optional agent turn is skipped.)
|
|
1986
|
-
*
|
|
1987
|
-
* @internal exported for testing.
|
|
1988
|
-
*/
|
|
1989
|
-
async function ɵrunMcpFollowUp({ host, agent, capturedThreadId }) {
|
|
1990
|
-
const currentThreadId = agent.threadId || "default";
|
|
1991
|
-
const originThreadId = capturedThreadId || "default";
|
|
1992
|
-
if (currentThreadId === originThreadId) return host.runAgent({ agent });
|
|
1993
|
-
console.warn(`[MCPAppsRenderer] ui/message follow-up dropped: the thread changed (${originThreadId} → ${currentThreadId}) between enqueue and execution, so running it would leak into the now-foreground thread.`);
|
|
1994
|
-
return {
|
|
1995
|
-
result: void 0,
|
|
1996
|
-
newMessages: []
|
|
1997
|
-
};
|
|
1998
|
-
}
|
|
1999
|
-
function buildSandboxHTML(extraCspDomains) {
|
|
2000
|
-
const baseScriptSrc = "'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: http://localhost:* https://localhost:*";
|
|
2001
|
-
const baseFrameSrc = "* blob: data: http://localhost:* https://localhost:*";
|
|
2002
|
-
const extra = extraCspDomains?.length ? " " + extraCspDomains.join(" ") : "";
|
|
2003
|
-
return `<!doctype html>
|
|
2004
|
-
<html>
|
|
2005
|
-
<head>
|
|
2006
|
-
<meta charset="utf-8" />
|
|
2007
|
-
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: blob: 'unsafe-inline'; media-src * blob: data:; font-src * blob: data:; script-src ${baseScriptSrc + extra}; style-src * blob: data: 'unsafe-inline'; connect-src *; frame-src ${baseFrameSrc + extra}; base-uri 'self';" />
|
|
2008
|
-
<style>html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden}*{box-sizing:border-box}iframe{background-color:transparent;border:none;padding:0;overflow:hidden;width:100%;height:100%}</style>
|
|
2009
|
-
</head>
|
|
2010
|
-
<body>
|
|
2011
|
-
<script>
|
|
2012
|
-
if(window.self===window.top){throw new Error("This file must be used in an iframe.")}
|
|
2013
|
-
const inner=document.createElement("iframe");
|
|
2014
|
-
inner.style="width:100%;height:100%;border:none;";
|
|
2015
|
-
inner.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms");
|
|
2016
|
-
document.body.appendChild(inner);
|
|
2017
|
-
window.addEventListener("message",async(event)=>{
|
|
2018
|
-
if(event.source===window.parent){
|
|
2019
|
-
if(event.data&&event.data.method==="ui/notifications/sandbox-resource-ready"){
|
|
2020
|
-
const{html,sandbox}=event.data.params;
|
|
2021
|
-
if(typeof sandbox==="string")inner.setAttribute("sandbox",sandbox);
|
|
2022
|
-
if(typeof html==="string")inner.srcdoc=html;
|
|
2023
|
-
}else if(inner&&inner.contentWindow){
|
|
2024
|
-
inner.contentWindow.postMessage(event.data,"*");
|
|
2025
|
-
}
|
|
2026
|
-
}else if(event.source===inner.contentWindow){
|
|
2027
|
-
window.parent.postMessage(event.data,"*");
|
|
2028
|
-
}
|
|
2029
|
-
});
|
|
2030
|
-
window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-ready",params:{}},"*");
|
|
2031
|
-
<\/script>
|
|
2032
|
-
</body>
|
|
2033
|
-
</html>`;
|
|
2034
|
-
}
|
|
2035
|
-
/**
|
|
2036
|
-
* Queue for serializing MCP app requests to an agent.
|
|
2037
|
-
* Ensures requests wait for the agent to stop running and are processed one at a time.
|
|
2038
|
-
*/
|
|
2039
|
-
var MCPAppsRequestQueue = class {
|
|
2040
|
-
constructor() {
|
|
2041
|
-
this.queues = /* @__PURE__ */ new Map();
|
|
2042
|
-
this.processing = /* @__PURE__ */ new Map();
|
|
2043
|
-
}
|
|
2044
|
-
/**
|
|
2045
|
-
* Add a request to the queue for a specific agent thread.
|
|
2046
|
-
* Returns a promise that resolves when the request completes.
|
|
2047
|
-
*/
|
|
2048
|
-
async enqueue(agent, request) {
|
|
2049
|
-
const threadId = agent.threadId || "default";
|
|
2050
|
-
return new Promise((resolve, reject) => {
|
|
2051
|
-
let queue = this.queues.get(threadId);
|
|
2052
|
-
if (!queue) {
|
|
2053
|
-
queue = [];
|
|
2054
|
-
this.queues.set(threadId, queue);
|
|
2055
|
-
}
|
|
2056
|
-
queue.push({
|
|
2057
|
-
execute: request,
|
|
2058
|
-
resolve,
|
|
2059
|
-
reject
|
|
2060
|
-
});
|
|
2061
|
-
this.processQueue(threadId, agent);
|
|
2062
|
-
});
|
|
2063
|
-
}
|
|
2064
|
-
async processQueue(threadId, agent) {
|
|
2065
|
-
if (this.processing.get(threadId)) return;
|
|
2066
|
-
this.processing.set(threadId, true);
|
|
2067
|
-
try {
|
|
2068
|
-
const queue = this.queues.get(threadId);
|
|
2069
|
-
if (!queue) return;
|
|
2070
|
-
while (queue.length > 0) {
|
|
2071
|
-
const item = queue[0];
|
|
2072
|
-
try {
|
|
2073
|
-
await this.waitForAgentIdle(agent);
|
|
2074
|
-
const result = await item.execute();
|
|
2075
|
-
item.resolve(result);
|
|
2076
|
-
} catch (error) {
|
|
2077
|
-
item.reject(error instanceof Error ? error : new Error(String(error)));
|
|
2078
|
-
}
|
|
2079
|
-
queue.shift();
|
|
2080
|
-
}
|
|
2081
|
-
} finally {
|
|
2082
|
-
this.processing.set(threadId, false);
|
|
2083
|
-
}
|
|
2084
|
-
}
|
|
2085
|
-
waitForAgentIdle(agent) {
|
|
2086
|
-
return new Promise((resolve) => {
|
|
2087
|
-
if (!agent.isRunning) {
|
|
2088
|
-
resolve();
|
|
2089
|
-
return;
|
|
2090
|
-
}
|
|
2091
|
-
let done = false;
|
|
2092
|
-
const finish = () => {
|
|
2093
|
-
if (done) return;
|
|
2094
|
-
done = true;
|
|
2095
|
-
clearInterval(checkInterval);
|
|
2096
|
-
sub.unsubscribe();
|
|
2097
|
-
resolve();
|
|
2098
|
-
};
|
|
2099
|
-
const sub = agent.subscribe({
|
|
2100
|
-
onRunFinalized: finish,
|
|
2101
|
-
onRunFailed: finish
|
|
2102
|
-
});
|
|
2103
|
-
const checkInterval = setInterval(() => {
|
|
2104
|
-
if (!agent.isRunning) finish();
|
|
2105
|
-
}, 500);
|
|
2106
|
-
});
|
|
2107
|
-
}
|
|
2108
|
-
};
|
|
2109
|
-
const mcpAppsRequestQueue = new MCPAppsRequestQueue();
|
|
2110
|
-
const MCP_OPEN_LINK_BLOCKED_SCHEMES = new Set([
|
|
2111
|
-
"javascript:",
|
|
2112
|
-
"data:",
|
|
2113
|
-
"vbscript:",
|
|
2114
|
-
"blob:",
|
|
2115
|
-
"file:"
|
|
2116
|
-
]);
|
|
2117
|
-
/**
|
|
2118
|
-
* Activity type for MCP Apps events - must match the middleware's MCPAppsActivityType
|
|
2119
|
-
*/
|
|
2120
|
-
const MCPAppsActivityType = "mcp-apps";
|
|
2121
|
-
const MCPAppsActivityContentSchema = zod.z.object({
|
|
2122
|
-
result: zod.z.object({
|
|
2123
|
-
content: zod.z.array(zod.z.any()).optional(),
|
|
2124
|
-
structuredContent: zod.z.any().optional(),
|
|
2125
|
-
isError: zod.z.boolean().optional()
|
|
2126
|
-
}),
|
|
2127
|
-
resourceUri: zod.z.string(),
|
|
2128
|
-
serverHash: zod.z.string(),
|
|
2129
|
-
serverId: zod.z.string().optional(),
|
|
2130
|
-
toolInput: zod.z.record(zod.z.string(), zod.z.unknown()).optional()
|
|
2131
|
-
});
|
|
2132
|
-
/**
|
|
2133
1972
|
* MCP Apps Extension Activity Renderer
|
|
2134
1973
|
*
|
|
2135
1974
|
* Renders MCP Apps UI in a sandboxed iframe with full protocol support.
|
|
2136
|
-
* Fetches resource content on-demand via proxied MCP requests.
|
|
1975
|
+
* Fetches resource content on-demand via proxied MCP requests. The React shell
|
|
1976
|
+
* owns the iframe; `bindMcpApp` owns the protocol.
|
|
2137
1977
|
*/
|
|
2138
|
-
/**
|
|
2139
|
-
* Permissive `ui/message` schema. ext-apps restricts the request to
|
|
2140
|
-
* `role: "user"` with no `followUp`, but CopilotKit intentionally extends
|
|
2141
|
-
* `ui/message` with `role` ("user" | "assistant") and `followUp` (documented
|
|
2142
|
-
* behavior with dedicated tests). We register our own handler (instead of the
|
|
2143
|
-
* bridge's strict `onmessage`) so those extensions survive the migration.
|
|
2144
|
-
*
|
|
2145
|
-
* Going forward, widgets SHOULD pass the extensions under
|
|
2146
|
-
* `params._meta.copilotkit`; the top-level `role`/`followUp` fields are the
|
|
2147
|
-
* legacy channel, kept for backward compatibility and slated for deprecation.
|
|
2148
|
-
*/
|
|
2149
|
-
const CopilotKitUiMessageSchema = zod.z.object({
|
|
2150
|
-
method: zod.z.literal("ui/message"),
|
|
2151
|
-
params: zod.z.object({
|
|
2152
|
-
role: zod.z.string().optional(),
|
|
2153
|
-
content: zod.z.array(zod.z.any()).optional(),
|
|
2154
|
-
followUp: zod.z.boolean().optional(),
|
|
2155
|
-
_meta: zod.z.record(zod.z.string(), zod.z.any()).optional()
|
|
2156
|
-
}).passthrough()
|
|
2157
|
-
});
|
|
2158
1978
|
const MCPAppsActivityRenderer = function MCPAppsActivityRenderer({ content, agent }) {
|
|
2159
1979
|
const { copilotkit } = useCopilotKit();
|
|
2160
1980
|
const containerRef = (0, react.useRef)(null);
|
|
2161
1981
|
const iframeRef = (0, react.useRef)(null);
|
|
2162
|
-
const
|
|
1982
|
+
const sessionRef = (0, react.useRef)(null);
|
|
2163
1983
|
const [error, setError] = (0, react.useState)(null);
|
|
2164
1984
|
const [isLoading, setIsLoading] = (0, react.useState)(true);
|
|
2165
1985
|
const [iframeSize, setIframeSize] = (0, react.useState)({});
|
|
@@ -2168,207 +1988,81 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
|
|
|
2168
1988
|
contentRef.current = content;
|
|
2169
1989
|
const agentRef = (0, react.useRef)(agent);
|
|
2170
1990
|
agentRef.current = agent;
|
|
2171
|
-
const bridgeRef = (0, react.useRef)(null);
|
|
2172
|
-
const fetchStateRef = (0, react.useRef)({
|
|
2173
|
-
inProgress: false,
|
|
2174
|
-
promise: null,
|
|
2175
|
-
resourceUri: null
|
|
2176
|
-
});
|
|
2177
1991
|
(0, react.useEffect)(() => {
|
|
2178
|
-
const
|
|
2179
|
-
if (
|
|
2180
|
-
fetchStateRef.current.promise?.then((resource) => {
|
|
2181
|
-
if (resource) {
|
|
2182
|
-
setFetchedResource(resource);
|
|
2183
|
-
setIsLoading(false);
|
|
2184
|
-
}
|
|
2185
|
-
}).catch((err) => {
|
|
2186
|
-
setError(err instanceof Error ? err : new Error(String(err)));
|
|
2187
|
-
setIsLoading(false);
|
|
2188
|
-
});
|
|
2189
|
-
return;
|
|
2190
|
-
}
|
|
1992
|
+
const container = containerRef.current;
|
|
1993
|
+
if (!container) return;
|
|
2191
1994
|
if (!agent) {
|
|
2192
1995
|
setError(/* @__PURE__ */ new Error("No agent available to fetch resource"));
|
|
2193
1996
|
setIsLoading(false);
|
|
2194
1997
|
return;
|
|
2195
1998
|
}
|
|
2196
|
-
fetchStateRef.current.inProgress = true;
|
|
2197
|
-
fetchStateRef.current.resourceUri = resourceUri;
|
|
2198
|
-
const fetchPromise = (async () => {
|
|
2199
|
-
try {
|
|
2200
|
-
const resource = (await mcpAppsRequestQueue.enqueue(agent, () => agent.runAgent({ forwardedProps: { __proxiedMCPRequest: {
|
|
2201
|
-
serverHash,
|
|
2202
|
-
serverId,
|
|
2203
|
-
method: "resources/read",
|
|
2204
|
-
params: { uri: resourceUri }
|
|
2205
|
-
} } }))).result?.contents?.[0];
|
|
2206
|
-
if (!resource) throw new Error("No resource content in response");
|
|
2207
|
-
return resource;
|
|
2208
|
-
} catch (err) {
|
|
2209
|
-
console.error("[MCPAppsRenderer] Failed to fetch resource:", err);
|
|
2210
|
-
throw err;
|
|
2211
|
-
} finally {
|
|
2212
|
-
fetchStateRef.current.inProgress = false;
|
|
2213
|
-
}
|
|
2214
|
-
})();
|
|
2215
|
-
fetchStateRef.current.promise = fetchPromise;
|
|
2216
|
-
fetchPromise.then((resource) => {
|
|
2217
|
-
if (resource) {
|
|
2218
|
-
setFetchedResource(resource);
|
|
2219
|
-
setIsLoading(false);
|
|
2220
|
-
}
|
|
2221
|
-
}).catch((err) => {
|
|
2222
|
-
setError(err instanceof Error ? err : new Error(String(err)));
|
|
2223
|
-
setIsLoading(false);
|
|
2224
|
-
});
|
|
2225
|
-
}, [agent, content]);
|
|
2226
|
-
(0, react.useEffect)(() => {
|
|
2227
|
-
if (isLoading || !fetchedResource) return;
|
|
2228
|
-
const container = containerRef.current;
|
|
2229
|
-
if (!container) return;
|
|
2230
1999
|
let mounted = true;
|
|
2231
|
-
|
|
2232
|
-
|
|
2000
|
+
setIsLoading(true);
|
|
2001
|
+
setError(null);
|
|
2002
|
+
const iframe = document.createElement("iframe");
|
|
2003
|
+
iframe.style.width = "100%";
|
|
2004
|
+
iframe.style.height = "100px";
|
|
2005
|
+
iframe.style.border = "none";
|
|
2006
|
+
iframe.style.backgroundColor = "transparent";
|
|
2007
|
+
iframe.style.display = "block";
|
|
2008
|
+
container.appendChild(iframe);
|
|
2009
|
+
iframeRef.current = iframe;
|
|
2233
2010
|
const setup = async () => {
|
|
2234
2011
|
try {
|
|
2235
|
-
const
|
|
2236
|
-
throw new Error("MCP Apps require '@
|
|
2012
|
+
const mod = await import("@copilotkit/mcp-apps-renderer").catch((importErr) => {
|
|
2013
|
+
throw new Error("MCP Apps require '@copilotkit/mcp-apps-renderer' and its '@modelcontextprotocol/ext-apps' dependency. Reinstall your dependencies if this package is missing.", { cause: importErr });
|
|
2237
2014
|
});
|
|
2238
|
-
if (!mounted) return;
|
|
2239
|
-
const { AppBridge, PostMessageTransport } = bridgeModule;
|
|
2240
|
-
const iframe = document.createElement("iframe");
|
|
2241
|
-
createdIframe = iframe;
|
|
2242
|
-
iframe.style.width = "100%";
|
|
2243
|
-
iframe.style.height = "100px";
|
|
2244
|
-
iframe.style.border = "none";
|
|
2245
|
-
iframe.style.backgroundColor = "transparent";
|
|
2246
|
-
iframe.style.display = "block";
|
|
2247
|
-
iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
|
|
2248
|
-
iframe.setAttribute("data-testid", "mcp-app-iframe");
|
|
2249
|
-
iframe.setAttribute("title", "Interactive MCP application");
|
|
2250
|
-
const cspDomains = fetchedResource._meta?.ui?.csp?.resourceDomains;
|
|
2251
|
-
iframe.srcdoc = buildSandboxHTML(cspDomains);
|
|
2252
|
-
iframeRef.current = iframe;
|
|
2253
|
-
container.appendChild(iframe);
|
|
2254
|
-
const win = iframe.contentWindow;
|
|
2255
|
-
if (!win) throw new Error("Sandbox iframe has no contentWindow");
|
|
2256
|
-
let html;
|
|
2257
|
-
if (fetchedResource.text) html = fetchedResource.text;
|
|
2258
|
-
else if (fetchedResource.blob) html = atob(fetchedResource.blob);
|
|
2259
|
-
else throw new Error("Resource has no text or blob content");
|
|
2260
|
-
bridge = new AppBridge(null, {
|
|
2261
|
-
name: "CopilotKit MCP Apps Host",
|
|
2262
|
-
version: "1.0.0"
|
|
2263
|
-
}, {
|
|
2264
|
-
openLinks: {},
|
|
2265
|
-
logging: {},
|
|
2266
|
-
message: { text: {} }
|
|
2267
|
-
}, { hostContext: {
|
|
2268
|
-
theme: "light",
|
|
2269
|
-
platform: "web"
|
|
2270
|
-
} });
|
|
2271
|
-
bridge.onsandboxready = () => {
|
|
2272
|
-
bridge?.sendSandboxResourceReady({ html });
|
|
2273
|
-
};
|
|
2274
|
-
bridge.setRequestHandler(CopilotKitUiMessageSchema, async (req) => {
|
|
2275
|
-
const currentAgent = agentRef.current;
|
|
2276
|
-
if (!currentAgent) {
|
|
2277
|
-
console.warn("[MCPAppsRenderer] ui/message: No agent available");
|
|
2278
|
-
return { isError: false };
|
|
2279
|
-
}
|
|
2280
|
-
try {
|
|
2281
|
-
const params = req.params;
|
|
2282
|
-
const ck = params._meta?.copilotkit ?? {};
|
|
2283
|
-
const role = ck.role || params.role || "user";
|
|
2284
|
-
const textContent = params.content?.filter((c) => c.type === "text" && c.text).map((c) => c.text).join("\n") || "";
|
|
2285
|
-
if (textContent) currentAgent.addMessage({
|
|
2286
|
-
id: crypto.randomUUID(),
|
|
2287
|
-
role,
|
|
2288
|
-
content: textContent
|
|
2289
|
-
});
|
|
2290
|
-
if ((ck.followUp ?? params.followUp ?? role === "user") && textContent) {
|
|
2291
|
-
const capturedThreadId = currentAgent.threadId || "default";
|
|
2292
|
-
mcpAppsRequestQueue.enqueue(currentAgent, () => ɵrunMcpFollowUp({
|
|
2293
|
-
host: copilotkit,
|
|
2294
|
-
agent: currentAgent,
|
|
2295
|
-
capturedThreadId
|
|
2296
|
-
})).catch((err) => console.error("[MCPAppsRenderer] ui/message agent run failed:", err));
|
|
2297
|
-
}
|
|
2298
|
-
return { isError: false };
|
|
2299
|
-
} catch (err) {
|
|
2300
|
-
console.error("[MCPAppsRenderer] ui/message error:", err);
|
|
2301
|
-
return { isError: true };
|
|
2302
|
-
}
|
|
2303
|
-
});
|
|
2304
|
-
bridge.onopenlink = async ({ url }) => {
|
|
2305
|
-
let parsed;
|
|
2306
|
-
try {
|
|
2307
|
-
parsed = new URL(url);
|
|
2308
|
-
} catch {
|
|
2309
|
-
console.warn("[MCPAppsRenderer] ui/open-link rejected: unparseable url");
|
|
2310
|
-
return { isError: true };
|
|
2311
|
-
}
|
|
2312
|
-
if (MCP_OPEN_LINK_BLOCKED_SCHEMES.has(parsed.protocol)) {
|
|
2313
|
-
console.warn("[MCPAppsRenderer] ui/open-link rejected: blocked scheme", parsed.protocol);
|
|
2314
|
-
return { isError: true };
|
|
2315
|
-
}
|
|
2316
|
-
window.open(url, "_blank", "noopener,noreferrer");
|
|
2317
|
-
return { isError: false };
|
|
2318
|
-
};
|
|
2319
|
-
bridge.oncalltool = async (params) => {
|
|
2320
|
-
const { serverHash, serverId } = contentRef.current;
|
|
2321
|
-
const currentAgent = agentRef.current;
|
|
2322
|
-
if (!serverHash) throw new Error("No server hash available for proxying");
|
|
2323
|
-
if (!currentAgent) throw new Error("No agent available for proxying");
|
|
2324
|
-
return (await mcpAppsRequestQueue.enqueue(currentAgent, () => currentAgent.runAgent({ forwardedProps: { __proxiedMCPRequest: {
|
|
2325
|
-
serverHash,
|
|
2326
|
-
serverId,
|
|
2327
|
-
method: "tools/call",
|
|
2328
|
-
params
|
|
2329
|
-
} } }))).result || { content: [] };
|
|
2330
|
-
};
|
|
2331
|
-
bridge.onsizechange = (p) => {
|
|
2332
|
-
if (!mounted) return;
|
|
2333
|
-
const { width, height } = p || {};
|
|
2334
|
-
setIframeSize({
|
|
2335
|
-
width: typeof width === "number" ? width : void 0,
|
|
2336
|
-
height: typeof height === "number" ? height : void 0
|
|
2337
|
-
});
|
|
2338
|
-
};
|
|
2339
|
-
bridge.oninitialized = () => {
|
|
2340
|
-
if (mounted) setIframeReady(true);
|
|
2341
|
-
};
|
|
2342
|
-
bridge.onloggingmessage = (p) => {
|
|
2343
|
-
console.log("[MCPAppsRenderer] App log:", p);
|
|
2344
|
-
};
|
|
2345
|
-
const transport = new PostMessageTransport(win, win);
|
|
2346
|
-
await bridge.connect(transport);
|
|
2347
2015
|
if (!mounted) {
|
|
2348
|
-
|
|
2016
|
+
iframe.remove();
|
|
2349
2017
|
return;
|
|
2350
2018
|
}
|
|
2351
|
-
|
|
2019
|
+
const session = mod.bindMcpApp({
|
|
2020
|
+
iframe,
|
|
2021
|
+
getContent: () => contentRef.current,
|
|
2022
|
+
getAgent: () => agentRef.current,
|
|
2023
|
+
host: copilotkit,
|
|
2024
|
+
hooks: {
|
|
2025
|
+
onResource: (resource) => {
|
|
2026
|
+
if (!mounted) return;
|
|
2027
|
+
setFetchedResource(resource);
|
|
2028
|
+
setIsLoading(false);
|
|
2029
|
+
},
|
|
2030
|
+
onSizeChanged: (size) => {
|
|
2031
|
+
if (mounted) setIframeSize(size);
|
|
2032
|
+
},
|
|
2033
|
+
onError: (err) => {
|
|
2034
|
+
if (!mounted) return;
|
|
2035
|
+
setError(err);
|
|
2036
|
+
setIsLoading(false);
|
|
2037
|
+
}
|
|
2038
|
+
}
|
|
2039
|
+
});
|
|
2040
|
+
sessionRef.current = session;
|
|
2041
|
+
const current = contentRef.current;
|
|
2042
|
+
if (current.toolInput) session.sendToolInput(current.toolInput);
|
|
2043
|
+
if (current.result) session.sendToolResult(current.result);
|
|
2352
2044
|
} catch (err) {
|
|
2353
2045
|
console.error("[MCPAppsRenderer] Setup error:", err);
|
|
2354
|
-
if (mounted)
|
|
2046
|
+
if (mounted) {
|
|
2047
|
+
setError(err instanceof Error ? err : new Error(String(err)));
|
|
2048
|
+
setIsLoading(false);
|
|
2049
|
+
}
|
|
2355
2050
|
}
|
|
2356
2051
|
};
|
|
2357
2052
|
setup();
|
|
2358
2053
|
return () => {
|
|
2359
2054
|
mounted = false;
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
createdIframe.remove();
|
|
2364
|
-
createdIframe = null;
|
|
2365
|
-
}
|
|
2055
|
+
sessionRef.current?.teardown();
|
|
2056
|
+
sessionRef.current = null;
|
|
2057
|
+
iframe.remove();
|
|
2366
2058
|
iframeRef.current = null;
|
|
2367
2059
|
};
|
|
2368
2060
|
}, [
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2061
|
+
agent,
|
|
2062
|
+
copilotkit,
|
|
2063
|
+
content.resourceUri,
|
|
2064
|
+
content.serverHash,
|
|
2065
|
+
content.serverId
|
|
2372
2066
|
]);
|
|
2373
2067
|
(0, react.useEffect)(() => {
|
|
2374
2068
|
if (iframeRef.current) {
|
|
@@ -2380,11 +2074,11 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
|
|
|
2380
2074
|
}
|
|
2381
2075
|
}, [iframeSize]);
|
|
2382
2076
|
(0, react.useEffect)(() => {
|
|
2383
|
-
if (
|
|
2384
|
-
}, [
|
|
2077
|
+
if (content.toolInput) sessionRef.current?.sendToolInput(content.toolInput);
|
|
2078
|
+
}, [content.toolInput]);
|
|
2385
2079
|
(0, react.useEffect)(() => {
|
|
2386
|
-
if (
|
|
2387
|
-
}, [
|
|
2080
|
+
if (content.result) sessionRef.current?.sendToolResult(content.result);
|
|
2081
|
+
}, [content.result]);
|
|
2388
2082
|
const borderStyle = fetchedResource?._meta?.ui?.prefersBorder === true ? {
|
|
2389
2083
|
borderRadius: "8px",
|
|
2390
2084
|
backgroundColor: "#f9f9f9",
|
|
@@ -3771,8 +3465,8 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
|
|
|
3771
3465
|
}, [rawCatalog, catalogToggleVersion]);
|
|
3772
3466
|
const builtInActivityRenderers = (0, react.useMemo)(() => {
|
|
3773
3467
|
const renderers = [{
|
|
3774
|
-
activityType: MCPAppsActivityType,
|
|
3775
|
-
content: MCPAppsActivityContentSchema,
|
|
3468
|
+
activityType: _copilotkit_mcp_apps_renderer_activity.MCPAppsActivityType,
|
|
3469
|
+
content: _copilotkit_mcp_apps_renderer_activity.MCPAppsActivityContentSchema,
|
|
3776
3470
|
render: MCPAppsActivityRenderer
|
|
3777
3471
|
}];
|
|
3778
3472
|
if (openGenUIActive) renderers.push({
|
|
@@ -6876,9 +6570,15 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
|
|
|
6876
6570
|
className: cn("cpk:max-w-[400px] cpk:w-full cpk:rounded-lg", className)
|
|
6877
6571
|
});
|
|
6878
6572
|
});
|
|
6879
|
-
const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ source, filename, className }) {
|
|
6880
|
-
|
|
6881
|
-
|
|
6573
|
+
const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ src, source, filename, className }) {
|
|
6574
|
+
const label = filename || source.mimeType || "Document attachment";
|
|
6575
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
|
|
6576
|
+
href: src,
|
|
6577
|
+
download: filename ?? "",
|
|
6578
|
+
target: "_blank",
|
|
6579
|
+
rel: "noopener noreferrer",
|
|
6580
|
+
"aria-label": label,
|
|
6581
|
+
className: cn("cpk:inline-flex cpk:max-w-full cpk:items-center cpk:gap-2 cpk:px-3 cpk:py-2 cpk:border cpk:border-border cpk:rounded-lg cpk:bg-muted", className),
|
|
6882
6582
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
6883
6583
|
className: "cpk:text-xs cpk:font-bold cpk:uppercase",
|
|
6884
6584
|
children: (0, _copilotkit_shared.getDocumentIcon)(source.mimeType ?? "")
|
|
@@ -6905,6 +6605,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
|
|
|
6905
6605
|
className
|
|
6906
6606
|
});
|
|
6907
6607
|
case "document": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentAttachment, {
|
|
6608
|
+
src,
|
|
6908
6609
|
source,
|
|
6909
6610
|
filename,
|
|
6910
6611
|
className
|
|
@@ -6978,7 +6679,7 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
|
|
|
6978
6679
|
...props,
|
|
6979
6680
|
children: [
|
|
6980
6681
|
mediaParts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
6981
|
-
className: "cpk:flex cpk:flex-row cpk:flex-wrap cpk:justify-end cpk:gap-2 cpk:mb-2",
|
|
6682
|
+
className: "cpk:flex cpk:flex-row cpk:flex-wrap cpk:max-w-full cpk:justify-end cpk:gap-2 cpk:mb-2",
|
|
6982
6683
|
children: mediaParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotChatAttachmentRenderer, {
|
|
6983
6684
|
type: part.type,
|
|
6984
6685
|
source: part.source,
|
|
@@ -12650,9 +12351,19 @@ exports.INTELLIGENCE_TURN_HEAD = INTELLIGENCE_TURN_HEAD;
|
|
|
12650
12351
|
exports.INTERRUPT_EVENT_NAME = INTERRUPT_EVENT_NAME;
|
|
12651
12352
|
exports.IntelligenceIndicator = IntelligenceIndicator;
|
|
12652
12353
|
exports.IntelligenceIndicatorView = IntelligenceIndicatorView;
|
|
12653
|
-
exports
|
|
12354
|
+
Object.defineProperty(exports, 'MCPAppsActivityContentSchema', {
|
|
12355
|
+
enumerable: true,
|
|
12356
|
+
get: function () {
|
|
12357
|
+
return _copilotkit_mcp_apps_renderer_activity.MCPAppsActivityContentSchema;
|
|
12358
|
+
}
|
|
12359
|
+
});
|
|
12654
12360
|
exports.MCPAppsActivityRenderer = MCPAppsActivityRenderer;
|
|
12655
|
-
exports
|
|
12361
|
+
Object.defineProperty(exports, 'MCPAppsActivityType', {
|
|
12362
|
+
enumerable: true,
|
|
12363
|
+
get: function () {
|
|
12364
|
+
return _copilotkit_mcp_apps_renderer_activity.MCPAppsActivityType;
|
|
12365
|
+
}
|
|
12366
|
+
});
|
|
12656
12367
|
exports.OpenGenerativeUIActivityRenderer = OpenGenerativeUIActivityRenderer;
|
|
12657
12368
|
exports.OpenGenerativeUIActivityType = OpenGenerativeUIActivityType;
|
|
12658
12369
|
exports.OpenGenerativeUIContentSchema = OpenGenerativeUIContentSchema;
|
|
@@ -12694,7 +12405,12 @@ exports.useRenderToolCall = useRenderToolCall;
|
|
|
12694
12405
|
exports.useSandboxFunctions = useSandboxFunctions;
|
|
12695
12406
|
exports.useSuggestions = useSuggestions;
|
|
12696
12407
|
exports.useThreads = useThreads;
|
|
12697
|
-
exports
|
|
12408
|
+
Object.defineProperty(exports, 'ɵrunMcpFollowUp', {
|
|
12409
|
+
enumerable: true,
|
|
12410
|
+
get: function () {
|
|
12411
|
+
return _copilotkit_mcp_apps_renderer_activity.ɵrunMcpFollowUp;
|
|
12412
|
+
}
|
|
12413
|
+
});
|
|
12698
12414
|
Object.keys(_copilotkit_core).forEach(function (k) {
|
|
12699
12415
|
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
12700
12416
|
enumerable: true,
|