skybridge 0.0.0-dev.f897bad → 0.0.0-dev.f8d2f8c
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/README.md +24 -16
- package/dist/cli/detect-port.js.map +1 -1
- package/dist/cli/header.js +1 -1
- package/dist/cli/header.js.map +1 -1
- package/dist/cli/run-command.js.map +1 -1
- package/dist/cli/telemetry.js.map +1 -1
- package/dist/cli/tunnel-control-server.d.ts +9 -0
- package/dist/cli/tunnel-control-server.js +31 -0
- package/dist/cli/tunnel-control-server.js.map +1 -0
- package/dist/cli/tunnel-control-server.test.js +39 -0
- package/dist/cli/tunnel-control-server.test.js.map +1 -0
- package/dist/cli/tunnel-handler.d.ts +3 -0
- package/dist/cli/tunnel-handler.js +48 -0
- package/dist/cli/tunnel-handler.js.map +1 -0
- package/dist/cli/tunnel-handler.test.js +105 -0
- package/dist/cli/tunnel-handler.test.js.map +1 -0
- package/dist/cli/tunnel.d.ts +57 -0
- package/dist/cli/tunnel.js +154 -0
- package/dist/cli/tunnel.js.map +1 -0
- package/dist/cli/tunnel.test.js +190 -0
- package/dist/cli/tunnel.test.js.map +1 -0
- package/dist/cli/types.d.ts +5 -0
- package/dist/cli/types.js +2 -0
- package/dist/cli/types.js.map +1 -0
- package/dist/cli/use-execute-steps.js.map +1 -1
- package/dist/cli/use-messages.d.ts +3 -0
- package/dist/cli/use-messages.js +11 -0
- package/dist/cli/use-messages.js.map +1 -0
- package/dist/cli/use-nodemon.d.ts +2 -7
- package/dist/cli/use-nodemon.js +18 -21
- package/dist/cli/use-nodemon.js.map +1 -1
- package/dist/cli/use-open-browser.d.ts +1 -0
- package/dist/cli/use-open-browser.js +44 -0
- package/dist/cli/use-open-browser.js.map +1 -0
- package/dist/cli/use-tunnel.d.ts +14 -0
- package/dist/cli/use-tunnel.js +131 -0
- package/dist/cli/use-tunnel.js.map +1 -0
- package/dist/cli/use-typescript-check.d.ts +1 -0
- package/dist/cli/use-typescript-check.js +41 -6
- package/dist/cli/use-typescript-check.js.map +1 -1
- package/dist/commands/build.js +63 -7
- package/dist/commands/build.js.map +1 -1
- package/dist/commands/dev.d.ts +3 -1
- package/dist/commands/dev.js +46 -8
- package/dist/commands/dev.js.map +1 -1
- package/dist/commands/start.js +7 -10
- package/dist/commands/start.js.map +1 -1
- package/dist/commands/telemetry/disable.js.map +1 -1
- package/dist/commands/telemetry/enable.js.map +1 -1
- package/dist/commands/telemetry/status.js.map +1 -1
- package/dist/server/asset-base-url-transform-plugin.d.ts +5 -6
- package/dist/server/asset-base-url-transform-plugin.js +9 -10
- package/dist/server/asset-base-url-transform-plugin.js.map +1 -1
- package/dist/server/asset-base-url-transform-plugin.test.js +41 -13
- package/dist/server/asset-base-url-transform-plugin.test.js.map +1 -1
- package/dist/server/content-helpers.d.ts +27 -0
- package/dist/server/content-helpers.js +46 -0
- package/dist/server/content-helpers.js.map +1 -0
- package/dist/server/content-helpers.test.d.ts +1 -0
- package/dist/server/content-helpers.test.js +70 -0
- package/dist/server/content-helpers.test.js.map +1 -0
- package/dist/server/express.d.ts +7 -5
- package/dist/server/express.js +53 -26
- package/dist/server/express.js.map +1 -1
- package/dist/server/express.test.js +381 -25
- package/dist/server/express.test.js.map +1 -1
- package/dist/server/index.d.ts +5 -3
- package/dist/server/index.js +3 -1
- package/dist/server/index.js.map +1 -1
- package/dist/server/inferUtilityTypes.d.ts +6 -6
- package/dist/server/inferUtilityTypes.js.map +1 -1
- package/dist/server/metric.d.ts +14 -0
- package/dist/server/metric.js +62 -0
- package/dist/server/metric.js.map +1 -0
- package/dist/server/middleware.d.ts +32 -4
- package/dist/server/middleware.js.map +1 -1
- package/dist/server/middleware.test-d.js +41 -18
- package/dist/server/middleware.test-d.js.map +1 -1
- package/dist/server/middleware.test.js +115 -5
- package/dist/server/middleware.test.js.map +1 -1
- package/dist/server/server.d.ts +134 -79
- package/dist/server/server.js +311 -111
- package/dist/server/server.js.map +1 -1
- package/dist/server/templateHelper.d.ts +5 -8
- package/dist/server/templateHelper.js +3 -22
- package/dist/server/templateHelper.js.map +1 -1
- package/dist/server/templates.generated.d.ts +4 -0
- package/dist/server/templates.generated.js +47 -0
- package/dist/server/templates.generated.js.map +1 -0
- package/dist/server/tunnel-proxy-router.d.ts +7 -0
- package/dist/server/tunnel-proxy-router.js +110 -0
- package/dist/server/tunnel-proxy-router.js.map +1 -0
- package/dist/server/tunnel-proxy-router.test.d.ts +1 -0
- package/dist/server/tunnel-proxy-router.test.js +229 -0
- package/dist/server/tunnel-proxy-router.test.js.map +1 -0
- package/dist/server/viewsDevServer.d.ts +14 -0
- package/dist/server/viewsDevServer.js +45 -0
- package/dist/server/viewsDevServer.js.map +1 -0
- package/dist/test/utils.d.ts +13 -21
- package/dist/test/utils.js +42 -37
- package/dist/test/utils.js.map +1 -1
- package/dist/test/view.test.d.ts +1 -0
- package/dist/test/view.test.js +523 -0
- package/dist/test/view.test.js.map +1 -0
- package/dist/version.d.ts +1 -0
- package/dist/version.js +3 -0
- package/dist/version.js.map +1 -0
- package/dist/web/bridges/apps-sdk/adaptor.d.ts +6 -4
- package/dist/web/bridges/apps-sdk/adaptor.js +37 -16
- package/dist/web/bridges/apps-sdk/adaptor.js.map +1 -1
- package/dist/web/bridges/apps-sdk/bridge.js.map +1 -1
- package/dist/web/bridges/apps-sdk/index.js.map +1 -1
- package/dist/web/bridges/apps-sdk/types.d.ts +16 -6
- package/dist/web/bridges/apps-sdk/types.js.map +1 -1
- package/dist/web/bridges/apps-sdk/use-apps-sdk-context.js.map +1 -1
- package/dist/web/bridges/get-adaptor.js.map +1 -1
- package/dist/web/bridges/index.js.map +1 -1
- package/dist/web/bridges/mcp-app/adaptor.d.ts +20 -8
- package/dist/web/bridges/mcp-app/adaptor.js +135 -62
- package/dist/web/bridges/mcp-app/adaptor.js.map +1 -1
- package/dist/web/bridges/mcp-app/bridge.d.ts +13 -30
- package/dist/web/bridges/mcp-app/bridge.js +43 -201
- package/dist/web/bridges/mcp-app/bridge.js.map +1 -1
- package/dist/web/bridges/mcp-app/index.js.map +1 -1
- package/dist/web/bridges/mcp-app/types.js.map +1 -1
- package/dist/web/bridges/mcp-app/use-mcp-app-context.d.ts +5 -3
- package/dist/web/bridges/mcp-app/use-mcp-app-context.js +2 -2
- package/dist/web/bridges/mcp-app/use-mcp-app-context.js.map +1 -1
- package/dist/web/bridges/mcp-app/use-mcp-app-context.test.js +1 -41
- package/dist/web/bridges/mcp-app/use-mcp-app-context.test.js.map +1 -1
- package/dist/web/bridges/types.d.ts +19 -10
- package/dist/web/bridges/types.js.map +1 -1
- package/dist/web/bridges/use-host-context.js.map +1 -1
- package/dist/web/components/modal-provider.js +3 -5
- package/dist/web/components/modal-provider.js.map +1 -1
- package/dist/web/create-store.js +17 -3
- package/dist/web/create-store.js.map +1 -1
- package/dist/web/create-store.test.js +17 -17
- package/dist/web/create-store.test.js.map +1 -1
- package/dist/web/data-llm.d.ts +1 -1
- package/dist/web/data-llm.js +3 -3
- package/dist/web/data-llm.js.map +1 -1
- package/dist/web/data-llm.test.js +23 -22
- package/dist/web/data-llm.test.js.map +1 -1
- package/dist/web/generate-helpers.d.ts +20 -18
- package/dist/web/generate-helpers.js +20 -18
- package/dist/web/generate-helpers.js.map +1 -1
- package/dist/web/generate-helpers.test-d.js +26 -26
- package/dist/web/generate-helpers.test-d.js.map +1 -1
- package/dist/web/generate-helpers.test.js.map +1 -1
- package/dist/web/helpers/state.d.ts +2 -2
- package/dist/web/helpers/state.js +11 -11
- package/dist/web/helpers/state.js.map +1 -1
- package/dist/web/helpers/state.test.js +9 -9
- package/dist/web/helpers/state.test.js.map +1 -1
- package/dist/web/hooks/index.d.ts +1 -1
- package/dist/web/hooks/index.js +1 -1
- package/dist/web/hooks/index.js.map +1 -1
- package/dist/web/hooks/test/utils.js +4 -0
- package/dist/web/hooks/test/utils.js.map +1 -1
- package/dist/web/hooks/use-call-tool.js.map +1 -1
- package/dist/web/hooks/use-call-tool.test-d.js.map +1 -1
- package/dist/web/hooks/use-call-tool.test.js +0 -4
- package/dist/web/hooks/use-call-tool.test.js.map +1 -1
- package/dist/web/hooks/use-display-mode.js.map +1 -1
- package/dist/web/hooks/use-display-mode.test-d.js.map +1 -1
- package/dist/web/hooks/use-display-mode.test.js.map +1 -1
- package/dist/web/hooks/use-files.d.ts +2 -1
- package/dist/web/hooks/use-files.js +1 -0
- package/dist/web/hooks/use-files.js.map +1 -1
- package/dist/web/hooks/use-files.test.js +22 -2
- package/dist/web/hooks/use-files.test.js.map +1 -1
- package/dist/web/hooks/use-layout.js.map +1 -1
- package/dist/web/hooks/use-layout.test.js +3 -3
- package/dist/web/hooks/use-layout.test.js.map +1 -1
- package/dist/web/hooks/use-open-external.js.map +1 -1
- package/dist/web/hooks/use-open-external.test.js +15 -10
- package/dist/web/hooks/use-open-external.test.js.map +1 -1
- package/dist/web/hooks/use-request-modal.d.ts +1 -1
- package/dist/web/hooks/use-request-modal.js +4 -4
- package/dist/web/hooks/use-request-modal.js.map +1 -1
- package/dist/web/hooks/use-request-modal.test.js +5 -1
- package/dist/web/hooks/use-request-modal.test.js.map +1 -1
- package/dist/web/hooks/use-send-follow-up-message.d.ts +2 -1
- package/dist/web/hooks/use-send-follow-up-message.js +2 -2
- package/dist/web/hooks/use-send-follow-up-message.js.map +1 -1
- package/dist/web/hooks/use-set-open-in-app-url.js.map +1 -1
- package/dist/web/hooks/use-set-open-in-app-url.test.js.map +1 -1
- package/dist/web/hooks/use-tool-info.js.map +1 -1
- package/dist/web/hooks/use-tool-info.test-d.js.map +1 -1
- package/dist/web/hooks/use-tool-info.test.js +1 -1
- package/dist/web/hooks/use-tool-info.test.js.map +1 -1
- package/dist/web/hooks/use-user.js +18 -2
- package/dist/web/hooks/use-user.js.map +1 -1
- package/dist/web/hooks/use-user.test.js +29 -1
- package/dist/web/hooks/use-user.test.js.map +1 -1
- package/dist/web/hooks/use-view-state.d.ts +4 -0
- package/dist/web/hooks/use-view-state.js +32 -0
- package/dist/web/hooks/use-view-state.js.map +1 -0
- package/dist/web/hooks/use-view-state.test.d.ts +1 -0
- package/dist/web/hooks/use-view-state.test.js +177 -0
- package/dist/web/hooks/use-view-state.test.js.map +1 -0
- package/dist/web/index.d.ts +1 -2
- package/dist/web/index.js +1 -2
- package/dist/web/index.js.map +1 -1
- package/dist/web/mount-view.d.ts +1 -0
- package/dist/web/{mount-widget.js → mount-view.js} +2 -2
- package/dist/web/mount-view.js.map +1 -0
- package/dist/web/plugin/data-llm.test.js.map +1 -1
- package/dist/web/plugin/plugin.d.ts +4 -1
- package/dist/web/plugin/plugin.js +127 -25
- package/dist/web/plugin/plugin.js.map +1 -1
- package/dist/web/plugin/scan-views.d.ts +16 -0
- package/dist/web/plugin/scan-views.js +88 -0
- package/dist/web/plugin/scan-views.js.map +1 -0
- package/dist/web/plugin/scan-views.test.d.ts +1 -0
- package/dist/web/plugin/scan-views.test.js +99 -0
- package/dist/web/plugin/scan-views.test.js.map +1 -0
- package/dist/web/plugin/transform-data-llm.js +1 -1
- package/dist/web/plugin/transform-data-llm.js.map +1 -1
- package/dist/web/plugin/transform-data-llm.test.js.map +1 -1
- package/dist/web/plugin/validate-view.d.ts +1 -0
- package/dist/web/plugin/validate-view.js +9 -0
- package/dist/web/plugin/validate-view.js.map +1 -0
- package/dist/web/plugin/validate-view.test.d.ts +1 -0
- package/dist/web/plugin/validate-view.test.js +24 -0
- package/dist/web/plugin/validate-view.test.js.map +1 -0
- package/dist/web/proxy.js.map +1 -1
- package/dist/web/types.js.map +1 -1
- package/package.json +30 -20
- package/tsconfig.base.json +5 -0
- package/dist/server/const.d.ts +0 -1
- package/dist/server/const.js +0 -2
- package/dist/server/const.js.map +0 -1
- package/dist/server/templates/development.hbs +0 -67
- package/dist/server/templates/production.hbs +0 -6
- package/dist/server/widgetsDevServer.d.ts +0 -12
- package/dist/server/widgetsDevServer.js +0 -63
- package/dist/server/widgetsDevServer.js.map +0 -1
- package/dist/test/widget.test.js +0 -261
- package/dist/test/widget.test.js.map +0 -1
- package/dist/web/hooks/use-widget-state.d.ts +0 -4
- package/dist/web/hooks/use-widget-state.js +0 -32
- package/dist/web/hooks/use-widget-state.js.map +0 -1
- package/dist/web/hooks/use-widget-state.test.js +0 -64
- package/dist/web/hooks/use-widget-state.test.js.map +0 -1
- package/dist/web/mount-widget.d.ts +0 -1
- package/dist/web/mount-widget.js.map +0 -1
- package/dist/web/plugin/validate-widget.d.ts +0 -5
- package/dist/web/plugin/validate-widget.js +0 -27
- package/dist/web/plugin/validate-widget.js.map +0 -1
- package/dist/web/plugin/validate-widget.test.js +0 -42
- package/dist/web/plugin/validate-widget.test.js.map +0 -1
- /package/dist/{test/widget.test.d.ts → cli/tunnel-control-server.test.d.ts} +0 -0
- /package/dist/{web/hooks/use-widget-state.test.d.ts → cli/tunnel-handler.test.d.ts} +0 -0
- /package/dist/{web/plugin/validate-widget.test.d.ts → cli/tunnel.test.d.ts} +0 -0
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var JsonRpcErrorCode;
|
|
3
|
-
(function (JsonRpcErrorCode) {
|
|
4
|
-
JsonRpcErrorCode[JsonRpcErrorCode["ParseError"] = -32700] = "ParseError";
|
|
5
|
-
JsonRpcErrorCode[JsonRpcErrorCode["InvalidRequest"] = -32600] = "InvalidRequest";
|
|
6
|
-
JsonRpcErrorCode[JsonRpcErrorCode["MethodNotFound"] = -32601] = "MethodNotFound";
|
|
7
|
-
JsonRpcErrorCode[JsonRpcErrorCode["InvalidParams"] = -32602] = "InvalidParams";
|
|
8
|
-
JsonRpcErrorCode[JsonRpcErrorCode["InternalError"] = -32603] = "InternalError";
|
|
9
|
-
})(JsonRpcErrorCode || (JsonRpcErrorCode = {}));
|
|
1
|
+
import { App } from "@modelcontextprotocol/ext-apps";
|
|
10
2
|
export class McpAppBridge {
|
|
11
3
|
static instance = null;
|
|
12
4
|
context = {
|
|
@@ -15,34 +7,58 @@ export class McpAppBridge {
|
|
|
15
7
|
toolResult: null,
|
|
16
8
|
};
|
|
17
9
|
listeners = new Map();
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
constructor(options, requestTimeout = 10_000) {
|
|
25
|
-
this.requestTimeout = requestTimeout;
|
|
26
|
-
this.initialized = false;
|
|
27
|
-
this.appInitializationOptions = {
|
|
28
|
-
appInfo: options.appInfo,
|
|
29
|
-
appCapabilities: {},
|
|
30
|
-
protocolVersion: LATEST_PROTOCOL_VERSION,
|
|
10
|
+
app;
|
|
11
|
+
connectPromise;
|
|
12
|
+
constructor(options) {
|
|
13
|
+
this.app = new App(options.appInfo);
|
|
14
|
+
this.app.ontoolinput = (params) => {
|
|
15
|
+
this.updateContext({ toolInput: params.arguments ?? {} });
|
|
31
16
|
};
|
|
32
|
-
this.
|
|
17
|
+
this.app.ontoolinputpartial = (params) => {
|
|
18
|
+
this.updateContext({ toolInput: params.arguments ?? {} });
|
|
19
|
+
};
|
|
20
|
+
this.app.ontoolresult = (params) => {
|
|
21
|
+
this.updateContext({ toolResult: params });
|
|
22
|
+
};
|
|
23
|
+
this.app.ontoolcancelled = (params) => {
|
|
24
|
+
this.updateContext({ toolCancelled: params });
|
|
25
|
+
};
|
|
26
|
+
this.app.onhostcontextchanged = (params) => {
|
|
27
|
+
this.updateContext(params);
|
|
28
|
+
};
|
|
29
|
+
this.connectPromise = this.connect();
|
|
30
|
+
}
|
|
31
|
+
async connect() {
|
|
32
|
+
try {
|
|
33
|
+
await this.app.connect();
|
|
34
|
+
const hostContext = this.app.getHostContext();
|
|
35
|
+
if (hostContext) {
|
|
36
|
+
this.updateContext(hostContext);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
catch (err) {
|
|
40
|
+
console.error(err);
|
|
41
|
+
}
|
|
33
42
|
}
|
|
34
|
-
|
|
43
|
+
async getApp() {
|
|
44
|
+
await this.connectPromise;
|
|
45
|
+
return this.app;
|
|
46
|
+
}
|
|
47
|
+
static getInstance(options) {
|
|
35
48
|
if (window.skybridge.hostType !== "mcp-app") {
|
|
36
49
|
throw new Error("MCP App Bridge can only be used in the mcp-app runtime");
|
|
37
50
|
}
|
|
38
|
-
if (McpAppBridge.instance &&
|
|
39
|
-
console.warn("McpAppBridge.getInstance: options
|
|
51
|
+
if (McpAppBridge.instance && options) {
|
|
52
|
+
console.warn("McpAppBridge.getInstance: options ignored, instance already exists");
|
|
40
53
|
}
|
|
41
54
|
if (!McpAppBridge.instance) {
|
|
42
55
|
const defaultOptions = {
|
|
43
56
|
appInfo: { name: "skybridge-app", version: "0.0.1" },
|
|
44
57
|
};
|
|
45
|
-
McpAppBridge.instance = new McpAppBridge({
|
|
58
|
+
McpAppBridge.instance = new McpAppBridge({
|
|
59
|
+
...defaultOptions,
|
|
60
|
+
...options,
|
|
61
|
+
});
|
|
46
62
|
}
|
|
47
63
|
return McpAppBridge.instance;
|
|
48
64
|
}
|
|
@@ -63,14 +79,7 @@ export class McpAppBridge {
|
|
|
63
79
|
return this.context[key];
|
|
64
80
|
}
|
|
65
81
|
cleanup = () => {
|
|
66
|
-
window.removeEventListener("message", this.handleMessage);
|
|
67
|
-
this.pendingRequests.forEach((request) => {
|
|
68
|
-
clearTimeout(request.timeout);
|
|
69
|
-
});
|
|
70
|
-
this.pendingRequests.clear();
|
|
71
82
|
this.listeners.clear();
|
|
72
|
-
this.cleanupSizeObserver?.();
|
|
73
|
-
this.cleanupSizeObserver = null;
|
|
74
83
|
};
|
|
75
84
|
static resetInstance() {
|
|
76
85
|
if (McpAppBridge.instance) {
|
|
@@ -78,20 +87,6 @@ export class McpAppBridge {
|
|
|
78
87
|
McpAppBridge.instance = null;
|
|
79
88
|
}
|
|
80
89
|
}
|
|
81
|
-
request({ method, params, }) {
|
|
82
|
-
const id = this.nextId++;
|
|
83
|
-
const { promise, resolve, reject } = Promise.withResolvers();
|
|
84
|
-
this.pendingRequests.set(id, {
|
|
85
|
-
resolve: resolve,
|
|
86
|
-
reject,
|
|
87
|
-
timeout: setTimeout(() => {
|
|
88
|
-
reject(new Error("Request timed out"));
|
|
89
|
-
this.pendingRequests.delete(id);
|
|
90
|
-
}, this.requestTimeout),
|
|
91
|
-
});
|
|
92
|
-
window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, "*");
|
|
93
|
-
return promise;
|
|
94
|
-
}
|
|
95
90
|
emit(key) {
|
|
96
91
|
this.listeners.get(key)?.forEach((listener) => {
|
|
97
92
|
listener();
|
|
@@ -103,158 +98,5 @@ export class McpAppBridge {
|
|
|
103
98
|
this.emit(key);
|
|
104
99
|
}
|
|
105
100
|
}
|
|
106
|
-
init() {
|
|
107
|
-
if (this.initialized) {
|
|
108
|
-
return;
|
|
109
|
-
}
|
|
110
|
-
this.initialized = true;
|
|
111
|
-
if (typeof window === "undefined" || window.parent === window) {
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
|
-
window.addEventListener("message", this.handleMessage);
|
|
115
|
-
this.connect();
|
|
116
|
-
}
|
|
117
|
-
handleMessage = (event) => {
|
|
118
|
-
const data = event.data;
|
|
119
|
-
if (data.jsonrpc !== "2.0") {
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
if ("id" in data) {
|
|
123
|
-
if ("method" in data) {
|
|
124
|
-
this.handleRequest(data);
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
this.handleResponse(data);
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
this.handleNotification(data);
|
|
131
|
-
};
|
|
132
|
-
handleResponse(response) {
|
|
133
|
-
const request = this.pendingRequests.get(response.id);
|
|
134
|
-
if (request) {
|
|
135
|
-
clearTimeout(request.timeout);
|
|
136
|
-
this.pendingRequests.delete(response.id);
|
|
137
|
-
if ("error" in response) {
|
|
138
|
-
request.reject(new Error(response.error.message));
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
request.resolve(response.result);
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
handleNotification = (notification) => {
|
|
145
|
-
switch (notification.method) {
|
|
146
|
-
case "ui/notifications/host-context-changed":
|
|
147
|
-
this.updateContext(notification.params);
|
|
148
|
-
return;
|
|
149
|
-
case "ui/notifications/tool-input-partial":
|
|
150
|
-
this.updateContext({
|
|
151
|
-
toolInput: notification.params.arguments ?? {},
|
|
152
|
-
});
|
|
153
|
-
return;
|
|
154
|
-
case "ui/notifications/tool-input":
|
|
155
|
-
this.updateContext({
|
|
156
|
-
toolInput: notification.params.arguments ?? {},
|
|
157
|
-
});
|
|
158
|
-
return;
|
|
159
|
-
case "ui/notifications/tool-result":
|
|
160
|
-
this.updateContext({
|
|
161
|
-
toolResult: notification.params,
|
|
162
|
-
});
|
|
163
|
-
return;
|
|
164
|
-
case "ui/notifications/tool-cancelled":
|
|
165
|
-
this.updateContext({
|
|
166
|
-
toolCancelled: notification.params,
|
|
167
|
-
});
|
|
168
|
-
return;
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
handleRequest = (request) => {
|
|
172
|
-
switch (request.method) {
|
|
173
|
-
case "ui/resource-teardown":
|
|
174
|
-
this.cleanup();
|
|
175
|
-
window.parent.postMessage({
|
|
176
|
-
jsonrpc: "2.0",
|
|
177
|
-
id: request.id,
|
|
178
|
-
result: {},
|
|
179
|
-
}, "*");
|
|
180
|
-
return;
|
|
181
|
-
default:
|
|
182
|
-
window.parent.postMessage({
|
|
183
|
-
jsonrpc: "2.0",
|
|
184
|
-
id: request.id,
|
|
185
|
-
error: {
|
|
186
|
-
code: JsonRpcErrorCode.MethodNotFound,
|
|
187
|
-
message: "Unsupported Request",
|
|
188
|
-
},
|
|
189
|
-
}, "*");
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
async connect() {
|
|
193
|
-
try {
|
|
194
|
-
const result = await this.request({
|
|
195
|
-
method: "ui/initialize",
|
|
196
|
-
params: this.appInitializationOptions,
|
|
197
|
-
});
|
|
198
|
-
this.updateContext(result.hostContext);
|
|
199
|
-
this.notify({ method: "ui/notifications/initialized" });
|
|
200
|
-
this.cleanupSizeObserver = this.setupSizeChangedNotifications();
|
|
201
|
-
}
|
|
202
|
-
catch (err) {
|
|
203
|
-
console.error(err);
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
notify(notification) {
|
|
207
|
-
window.parent.postMessage({ jsonrpc: "2.0", ...notification }, "*");
|
|
208
|
-
}
|
|
209
|
-
sendSizeChanged(params) {
|
|
210
|
-
this.notify({ method: "ui/notifications/size-changed", params });
|
|
211
|
-
}
|
|
212
|
-
/**
|
|
213
|
-
* Set up automatic size change notifications using ResizeObserver.
|
|
214
|
-
* Based on @modelcontextprotocol/ext-apps App.setupSizeChangedNotifications
|
|
215
|
-
* @see https://github.com/modelcontextprotocol/ext-apps/blob/main/src/app.ts#L940-L989
|
|
216
|
-
*/
|
|
217
|
-
setupSizeChangedNotifications() {
|
|
218
|
-
let scheduled = false;
|
|
219
|
-
let lastWidth = 0;
|
|
220
|
-
let lastHeight = 0;
|
|
221
|
-
const sendBodySizeChanged = () => {
|
|
222
|
-
if (scheduled) {
|
|
223
|
-
return;
|
|
224
|
-
}
|
|
225
|
-
scheduled = true;
|
|
226
|
-
requestAnimationFrame(() => {
|
|
227
|
-
scheduled = false;
|
|
228
|
-
let width;
|
|
229
|
-
let height;
|
|
230
|
-
// In fullscreen mode, use viewport size since the widget should fill
|
|
231
|
-
// the entire available space provided by the host.
|
|
232
|
-
if (this.context.displayMode === "fullscreen") {
|
|
233
|
-
width = window.innerWidth;
|
|
234
|
-
height = window.innerHeight;
|
|
235
|
-
}
|
|
236
|
-
else {
|
|
237
|
-
// Use scrollWidth/scrollHeight to measure actual rendered content size.
|
|
238
|
-
// This works better than fit-content for viewport-based layouts (vw/vh)
|
|
239
|
-
// and fluid elements like maps that want to fill available space.
|
|
240
|
-
const body = document.body;
|
|
241
|
-
width = Math.ceil(body.scrollWidth);
|
|
242
|
-
height = Math.ceil(body.scrollHeight);
|
|
243
|
-
}
|
|
244
|
-
// Only send if size actually changed (prevents feedback loops from
|
|
245
|
-
// style changes)
|
|
246
|
-
if (width !== lastWidth || height !== lastHeight) {
|
|
247
|
-
lastWidth = width;
|
|
248
|
-
lastHeight = height;
|
|
249
|
-
this.sendSizeChanged({ width, height });
|
|
250
|
-
}
|
|
251
|
-
});
|
|
252
|
-
};
|
|
253
|
-
sendBodySizeChanged();
|
|
254
|
-
const resizeObserver = new ResizeObserver(sendBodySizeChanged);
|
|
255
|
-
resizeObserver.observe(document.documentElement);
|
|
256
|
-
resizeObserver.observe(document.body);
|
|
257
|
-
return () => resizeObserver.disconnect();
|
|
258
|
-
}
|
|
259
101
|
}
|
|
260
102
|
//# sourceMappingURL=bridge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bridge.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/bridge.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"bridge.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/bridge.ts"],"names":[],"mappings":"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","sourcesContent":["import { App } from \"@modelcontextprotocol/ext-apps\";\nimport type { Implementation } from \"@modelcontextprotocol/sdk/types.js\";\nimport type { Bridge, Subscribe } from \"../types.js\";\nimport type { McpAppContext, McpAppContextKey } from \"./types.js\";\n\nexport class McpAppBridge implements Bridge<McpAppContext> {\n private static instance: McpAppBridge | null = null;\n public context: McpAppContext = {\n toolInput: null,\n toolCancelled: null,\n toolResult: null,\n };\n private listeners = new Map<McpAppContextKey, Set<() => void>>();\n private app: App;\n private connectPromise: Promise<void>;\n\n constructor(options: { appInfo: Implementation }) {\n this.app = new App(options.appInfo);\n\n this.app.ontoolinput = (params) => {\n this.updateContext({ toolInput: params.arguments ?? {} });\n };\n\n this.app.ontoolinputpartial = (params) => {\n this.updateContext({ toolInput: params.arguments ?? {} });\n };\n\n this.app.ontoolresult = (params) => {\n this.updateContext({ toolResult: params });\n };\n\n this.app.ontoolcancelled = (params) => {\n this.updateContext({ toolCancelled: params });\n };\n\n this.app.onhostcontextchanged = (params) => {\n this.updateContext(params);\n };\n\n this.connectPromise = this.connect();\n }\n\n private async connect() {\n try {\n await this.app.connect();\n const hostContext = this.app.getHostContext();\n if (hostContext) {\n this.updateContext(hostContext);\n }\n } catch (err) {\n console.error(err);\n }\n }\n\n public async getApp(): Promise<App> {\n await this.connectPromise;\n return this.app;\n }\n\n public static getInstance(\n options?: Partial<{ appInfo: Implementation }>,\n ): McpAppBridge {\n if (window.skybridge.hostType !== \"mcp-app\") {\n throw new Error(\"MCP App Bridge can only be used in the mcp-app runtime\");\n }\n if (McpAppBridge.instance && options) {\n console.warn(\n \"McpAppBridge.getInstance: options ignored, instance already exists\",\n );\n }\n if (!McpAppBridge.instance) {\n const defaultOptions = {\n appInfo: { name: \"skybridge-app\", version: \"0.0.1\" },\n };\n McpAppBridge.instance = new McpAppBridge({\n ...defaultOptions,\n ...options,\n });\n }\n return McpAppBridge.instance;\n }\n\n public subscribe(key: McpAppContextKey): Subscribe;\n public subscribe(keys: readonly McpAppContextKey[]): Subscribe;\n public subscribe(\n keyOrKeys: McpAppContextKey | readonly McpAppContextKey[],\n ): Subscribe {\n const keys = Array.isArray(keyOrKeys) ? keyOrKeys : [keyOrKeys];\n return (onChange: () => void) => {\n for (const key of keys) {\n this.listeners.set(\n key,\n new Set([...(this.listeners.get(key) || []), onChange]),\n );\n }\n return () => {\n for (const key of keys) {\n this.listeners.get(key)?.delete(onChange);\n }\n };\n };\n }\n\n public getSnapshot<K extends keyof McpAppContext>(key: K): McpAppContext[K] {\n return this.context[key];\n }\n\n public cleanup = () => {\n this.listeners.clear();\n };\n\n public static resetInstance(): void {\n if (McpAppBridge.instance) {\n McpAppBridge.instance.cleanup();\n McpAppBridge.instance = null;\n }\n }\n\n private emit(key: McpAppContextKey) {\n this.listeners.get(key)?.forEach((listener) => {\n listener();\n });\n }\n\n private updateContext(context: Partial<McpAppContext>) {\n this.context = { ...this.context, ...context };\n for (const key of Object.keys(context)) {\n this.emit(key);\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAM3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { McpAppAdaptor } from \"./adaptor.js\";\nexport { McpAppBridge } from \"./bridge.js\";\nexport type {\n McpAppContext,\n McpAppContextKey,\n McpToolState,\n} from \"./types.js\";\nexport { useMcpAppContext } from \"./use-mcp-app-context.js\";\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/types.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n McpUiHostContext,\n McpUiToolCancelledNotification,\n McpUiToolInputNotification,\n McpUiToolResultNotification,\n} from \"@modelcontextprotocol/ext-apps\";\n\nexport type McpToolState = {\n toolInput: NonNullable<\n McpUiToolInputNotification[\"params\"][\"arguments\"]\n > | null;\n toolResult: McpUiToolResultNotification[\"params\"] | null;\n toolCancelled: McpUiToolCancelledNotification[\"params\"] | null;\n};\n\nexport type McpAppContext = McpUiHostContext & McpToolState;\n\nexport type McpAppContextKey = keyof McpAppContext;\n"]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Implementation } from "@modelcontextprotocol/sdk/types.js";
|
|
2
2
|
import type { McpAppContext } from "./types.js";
|
|
3
|
-
type McpAppInitializationOptions =
|
|
4
|
-
|
|
3
|
+
type McpAppInitializationOptions = {
|
|
4
|
+
appInfo: Implementation;
|
|
5
|
+
};
|
|
6
|
+
export declare function useMcpAppContext<K extends keyof McpAppContext>(key: K, options?: Partial<McpAppInitializationOptions>): McpAppContext[K];
|
|
5
7
|
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useSyncExternalStore } from "react";
|
|
2
2
|
import { McpAppBridge } from "./bridge.js";
|
|
3
|
-
export function useMcpAppContext(key, options
|
|
4
|
-
const bridge = McpAppBridge.getInstance(options
|
|
3
|
+
export function useMcpAppContext(key, options) {
|
|
4
|
+
const bridge = McpAppBridge.getInstance(options);
|
|
5
5
|
return useSyncExternalStore(bridge.subscribe(key), () => bridge.getSnapshot(key));
|
|
6
6
|
}
|
|
7
7
|
//# sourceMappingURL=use-mcp-app-context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-mcp-app-context.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/use-mcp-app-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"use-mcp-app-context.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/use-mcp-app-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,MAAM,UAAU,gBAAgB,CAC9B,GAAM,EACN,OAA8C;IAE9C,MAAM,MAAM,GAAG,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACjD,OAAO,oBAAoB,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CACtD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CACxB,CAAC;AACJ,CAAC","sourcesContent":["import type { Implementation } from \"@modelcontextprotocol/sdk/types.js\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { McpAppBridge } from \"./bridge.js\";\nimport type { McpAppContext } from \"./types.js\";\n\ntype McpAppInitializationOptions = {\n appInfo: Implementation;\n};\n\nexport function useMcpAppContext<K extends keyof McpAppContext>(\n key: K,\n options?: Partial<McpAppInitializationOptions>,\n): McpAppContext[K] {\n const bridge = McpAppBridge.getInstance(options);\n return useSyncExternalStore(bridge.subscribe(key), () =>\n bridge.getSnapshot(key),\n );\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { renderHook, waitFor } from "@testing-library/react";
|
|
2
2
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
3
3
|
import { getMcpAppHostPostMessageMock, MockResizeObserver, } from "../../hooks/test/utils.js";
|
|
4
4
|
import { McpAppBridge } from "./bridge.js";
|
|
@@ -22,45 +22,5 @@ describe("useMcpAppContext", () => {
|
|
|
22
22
|
expect(result.current).toBe("light");
|
|
23
23
|
});
|
|
24
24
|
});
|
|
25
|
-
it("should reject the request after timeout", async () => {
|
|
26
|
-
vi.useFakeTimers();
|
|
27
|
-
const consoleErrorSpy = vi
|
|
28
|
-
.spyOn(console, "error")
|
|
29
|
-
.mockImplementation(() => { });
|
|
30
|
-
const nonRespondingMock = vi.fn();
|
|
31
|
-
vi.stubGlobal("parent", { postMessage: nonRespondingMock });
|
|
32
|
-
renderHook(() => useMcpAppContext("theme", undefined, 100));
|
|
33
|
-
expect(nonRespondingMock).toHaveBeenCalledWith(expect.objectContaining({ method: "ui/initialize" }), "*");
|
|
34
|
-
await act(async () => {
|
|
35
|
-
await vi.advanceTimersByTimeAsync(100);
|
|
36
|
-
});
|
|
37
|
-
expect(consoleErrorSpy).toHaveBeenCalledWith(new Error("Request timed out"));
|
|
38
|
-
consoleErrorSpy.mockRestore();
|
|
39
|
-
vi.useRealTimers();
|
|
40
|
-
});
|
|
41
|
-
it("should send size-changed notification after successful initialization", async () => {
|
|
42
|
-
// Mock body dimensions to non-zero (size-changed only sends when dimensions change)
|
|
43
|
-
Object.defineProperty(document.body, "scrollWidth", {
|
|
44
|
-
value: 800,
|
|
45
|
-
configurable: true,
|
|
46
|
-
});
|
|
47
|
-
Object.defineProperty(document.body, "scrollHeight", {
|
|
48
|
-
value: 600,
|
|
49
|
-
configurable: true,
|
|
50
|
-
});
|
|
51
|
-
const postMessageMock = getMcpAppHostPostMessageMock({ theme: "light" });
|
|
52
|
-
vi.stubGlobal("parent", { postMessage: postMessageMock });
|
|
53
|
-
renderHook(() => useMcpAppContext("theme"));
|
|
54
|
-
await waitFor(() => {
|
|
55
|
-
expect(postMessageMock).toHaveBeenCalledWith(expect.objectContaining({
|
|
56
|
-
jsonrpc: "2.0",
|
|
57
|
-
method: "ui/notifications/size-changed",
|
|
58
|
-
params: expect.objectContaining({
|
|
59
|
-
width: expect.any(Number),
|
|
60
|
-
height: expect.any(Number),
|
|
61
|
-
}),
|
|
62
|
-
}), "*");
|
|
63
|
-
});
|
|
64
|
-
});
|
|
65
25
|
});
|
|
66
26
|
//# sourceMappingURL=use-mcp-app-context.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-mcp-app-context.test.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/use-mcp-app-context.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"use-mcp-app-context.test.js","sourceRoot":"","sources":["../../../../src/web/bridges/mcp-app/use-mcp-app-context.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,EACL,4BAA4B,EAC5B,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,EAAE,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;QACpD,EAAE,CAAC,UAAU,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;QACpD,YAAY,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,EAAE,CAAC,gBAAgB,EAAE,CAAC;QACtB,EAAE,CAAC,aAAa,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC1F,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE;YACtB,WAAW,EAAE,4BAA4B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;SAC9D,CAAC,CAAC;QACH,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC;QAE/D,MAAM,OAAO,CAAC,GAAG,EAAE;YACjB,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { renderHook, waitFor } from \"@testing-library/react\";\nimport { afterEach, beforeEach, describe, expect, it, vi } from \"vitest\";\nimport {\n getMcpAppHostPostMessageMock,\n MockResizeObserver,\n} from \"../../hooks/test/utils.js\";\nimport { McpAppBridge } from \"./bridge.js\";\nimport { useMcpAppContext } from \"./use-mcp-app-context.js\";\n\ndescribe(\"useMcpAppContext\", () => {\n beforeEach(async () => {\n vi.stubGlobal(\"skybridge\", { hostType: \"mcp-app\" });\n vi.stubGlobal(\"ResizeObserver\", MockResizeObserver);\n McpAppBridge.resetInstance();\n });\n\n afterEach(() => {\n vi.unstubAllGlobals();\n vi.clearAllMocks();\n });\n\n it(\"should return the theme value from host context and update on notification\", async () => {\n vi.stubGlobal(\"parent\", {\n postMessage: getMcpAppHostPostMessageMock({ theme: \"light\" }),\n });\n const { result } = renderHook(() => useMcpAppContext(\"theme\"));\n\n await waitFor(() => {\n expect(result.current).toBe(\"light\");\n });\n });\n});\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
|
|
2
2
|
import type { useSyncExternalStore } from "react";
|
|
3
|
-
import type {
|
|
3
|
+
import type { ViewHostType } from "../../server/index.js";
|
|
4
4
|
export type SkybridgeProperties = {
|
|
5
|
-
hostType:
|
|
5
|
+
hostType: ViewHostType;
|
|
6
6
|
serverUrl: string;
|
|
7
7
|
};
|
|
8
8
|
declare global {
|
|
@@ -15,7 +15,6 @@ export type CallToolResponse = {
|
|
|
15
15
|
content: CallToolResult["content"];
|
|
16
16
|
structuredContent: NonNullable<CallToolResult["structuredContent"]>;
|
|
17
17
|
isError: NonNullable<CallToolResult["isError"]>;
|
|
18
|
-
result: string;
|
|
19
18
|
meta?: CallToolResult["_meta"];
|
|
20
19
|
};
|
|
21
20
|
export type DisplayMode = "pip" | "inline" | "fullscreen" | "modal";
|
|
@@ -50,11 +49,11 @@ export interface HostContext {
|
|
|
50
49
|
toolInput: Record<string, unknown> | null;
|
|
51
50
|
toolOutput: Record<string, unknown> | null;
|
|
52
51
|
toolResponseMetadata: Record<string, unknown> | null;
|
|
53
|
-
|
|
52
|
+
display: {
|
|
54
53
|
mode: DisplayMode;
|
|
55
54
|
params?: Record<string, unknown>;
|
|
56
55
|
};
|
|
57
|
-
|
|
56
|
+
viewState: Record<string, unknown> | null;
|
|
58
57
|
}
|
|
59
58
|
export type Subscribe = Parameters<typeof useSyncExternalStore>[0];
|
|
60
59
|
export interface Bridge<Context> {
|
|
@@ -66,14 +65,20 @@ export type HostContextStore<K extends keyof HostContext> = {
|
|
|
66
65
|
subscribe: Subscribe;
|
|
67
66
|
getSnapshot: () => HostContext[K];
|
|
68
67
|
};
|
|
69
|
-
export type
|
|
70
|
-
export type
|
|
68
|
+
export type ViewState = Record<string, unknown>;
|
|
69
|
+
export type SetViewStateAction = ViewState | ((prevState: ViewState | null) => ViewState);
|
|
71
70
|
export type FileMetadata = {
|
|
72
71
|
fileId: string;
|
|
72
|
+
fileName?: string;
|
|
73
|
+
mimeType?: string;
|
|
74
|
+
};
|
|
75
|
+
export type UploadFileOptions = {
|
|
76
|
+
library?: boolean;
|
|
73
77
|
};
|
|
74
78
|
export type RequestModalOptions = {
|
|
75
79
|
title?: string;
|
|
76
80
|
params?: Record<string, unknown>;
|
|
81
|
+
template?: string;
|
|
77
82
|
anchor?: {
|
|
78
83
|
top?: number;
|
|
79
84
|
left?: number;
|
|
@@ -84,19 +89,23 @@ export type RequestModalOptions = {
|
|
|
84
89
|
export type OpenExternalOptions = {
|
|
85
90
|
redirectUrl?: false;
|
|
86
91
|
};
|
|
92
|
+
export type SendFollowUpMessageOptions = {
|
|
93
|
+
scrollToBottom?: boolean;
|
|
94
|
+
};
|
|
87
95
|
export interface Adaptor {
|
|
88
96
|
getHostContextStore<K extends keyof HostContext>(key: K): HostContextStore<K>;
|
|
89
97
|
callTool<ToolArgs extends CallToolArgs = null, ToolResponse extends CallToolResponse = CallToolResponse>(name: string, args: ToolArgs): Promise<ToolResponse>;
|
|
90
98
|
requestDisplayMode(mode: RequestDisplayMode): Promise<{
|
|
91
99
|
mode: RequestDisplayMode;
|
|
92
100
|
}>;
|
|
93
|
-
sendFollowUpMessage(prompt: string): Promise<void>;
|
|
101
|
+
sendFollowUpMessage(prompt: string, options?: SendFollowUpMessageOptions): Promise<void>;
|
|
94
102
|
openExternal(href: string, options?: OpenExternalOptions): void;
|
|
95
|
-
|
|
96
|
-
uploadFile(file: File): Promise<FileMetadata>;
|
|
103
|
+
setViewState(stateOrUpdater: SetViewStateAction): Promise<void>;
|
|
104
|
+
uploadFile(file: File, options?: UploadFileOptions): Promise<FileMetadata>;
|
|
97
105
|
getFileDownloadUrl(file: FileMetadata): Promise<{
|
|
98
106
|
downloadUrl: string;
|
|
99
107
|
}>;
|
|
108
|
+
selectFiles(): Promise<FileMetadata[]>;
|
|
100
109
|
openModal(options: RequestModalOptions): void;
|
|
101
110
|
setOpenInAppUrl(href: string): Promise<void>;
|
|
102
111
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/web/bridges/types.ts"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/web/bridges/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CallToolResult } from \"@modelcontextprotocol/sdk/types.js\";\nimport type { useSyncExternalStore } from \"react\";\nimport type { ViewHostType } from \"../../server/index.js\";\n\nexport type SkybridgeProperties = {\n hostType: ViewHostType;\n serverUrl: string;\n};\n\ndeclare global {\n interface Window {\n skybridge: SkybridgeProperties;\n }\n}\n\nexport type CallToolArgs = Record<string, unknown> | null;\n\nexport type CallToolResponse = {\n content: CallToolResult[\"content\"];\n structuredContent: NonNullable<CallToolResult[\"structuredContent\"]>;\n isError: NonNullable<CallToolResult[\"isError\"]>;\n meta?: CallToolResult[\"_meta\"];\n};\n\nexport type DisplayMode = \"pip\" | \"inline\" | \"fullscreen\" | \"modal\";\nexport type RequestDisplayMode = Exclude<DisplayMode, \"modal\">;\n\nexport type Theme = \"light\" | \"dark\";\n\nexport type DeviceType = \"mobile\" | \"tablet\" | \"desktop\" | \"unknown\";\n\nexport type SafeAreaInsets = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\nexport type SafeArea = {\n insets: SafeAreaInsets;\n};\n\nexport type UserAgent = {\n device: {\n type: DeviceType;\n };\n capabilities: {\n hover: boolean;\n touch: boolean;\n };\n};\n\nexport interface HostContext {\n theme: Theme;\n locale: string;\n displayMode: DisplayMode;\n safeArea: SafeArea;\n maxHeight: number | undefined;\n userAgent: UserAgent;\n toolInput: Record<string, unknown> | null;\n toolOutput: Record<string, unknown> | null;\n toolResponseMetadata: Record<string, unknown> | null;\n display: {\n mode: DisplayMode;\n params?: Record<string, unknown>;\n };\n viewState: Record<string, unknown> | null;\n}\n\nexport type Subscribe = Parameters<typeof useSyncExternalStore>[0];\n\nexport interface Bridge<Context> {\n subscribe(key: keyof Context): Subscribe;\n subscribe(keys: readonly (keyof Context)[]): Subscribe;\n getSnapshot<K extends keyof Context>(key: K): Context[K] | undefined;\n}\n\nexport type HostContextStore<K extends keyof HostContext> = {\n subscribe: Subscribe;\n getSnapshot: () => HostContext[K];\n};\n\nexport type ViewState = Record<string, unknown>;\n\nexport type SetViewStateAction =\n | ViewState\n | ((prevState: ViewState | null) => ViewState);\n\nexport type FileMetadata = {\n fileId: string;\n fileName?: string;\n mimeType?: string;\n};\n\nexport type UploadFileOptions = { library?: boolean };\n\nexport type RequestModalOptions = {\n title?: string;\n params?: Record<string, unknown>;\n template?: string;\n anchor?: { top?: number; left?: number; width?: number; height?: number };\n};\n\nexport type OpenExternalOptions = {\n redirectUrl?: false;\n};\n\nexport type SendFollowUpMessageOptions = { scrollToBottom?: boolean };\n\nexport interface Adaptor {\n getHostContextStore<K extends keyof HostContext>(key: K): HostContextStore<K>;\n callTool<\n ToolArgs extends CallToolArgs = null,\n ToolResponse extends CallToolResponse = CallToolResponse,\n >(name: string, args: ToolArgs): Promise<ToolResponse>;\n requestDisplayMode(mode: RequestDisplayMode): Promise<{\n mode: RequestDisplayMode;\n }>;\n sendFollowUpMessage(\n prompt: string,\n options?: SendFollowUpMessageOptions,\n ): Promise<void>;\n openExternal(href: string, options?: OpenExternalOptions): void;\n setViewState(stateOrUpdater: SetViewStateAction): Promise<void>;\n uploadFile(file: File, options?: UploadFileOptions): Promise<FileMetadata>;\n getFileDownloadUrl(file: FileMetadata): Promise<{ downloadUrl: string }>;\n selectFiles(): Promise<FileMetadata[]>;\n openModal(options: RequestModalOptions): void;\n setOpenInAppUrl(href: string): Promise<void>;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-host-context.js","sourceRoot":"","sources":["../../../src/web/bridges/use-host-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAM,EACU,EAAE;IAClB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;IAE/C,OAAO,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;AAClE,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"use-host-context.js","sourceRoot":"","sources":["../../../src/web/bridges/use-host-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,GAAM,EACU,EAAE;IAClB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,KAAK,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;IAE/C,OAAO,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;AAClE,CAAC,CAAC","sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport { getAdaptor } from \"./get-adaptor.js\";\nimport type { HostContext } from \"./types.js\";\n\nexport const useHostContext = <K extends keyof HostContext>(\n key: K,\n): HostContext[K] => {\n const adaptor = getAdaptor();\n const store = adaptor.getHostContextStore(key);\n\n return useSyncExternalStore(store.subscribe, store.getSnapshot);\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useSyncExternalStore } from "react";
|
|
3
|
-
import { McpAppAdaptor } from "../bridges";
|
|
3
|
+
import { McpAppAdaptor } from "../bridges/index.js";
|
|
4
4
|
const modalStyles = `
|
|
5
5
|
.sb-modal-backdrop {
|
|
6
6
|
position: fixed;
|
|
@@ -21,7 +21,7 @@ const modalStyles = `
|
|
|
21
21
|
`;
|
|
22
22
|
export function ModalProvider({ children }) {
|
|
23
23
|
const adaptor = McpAppAdaptor.getInstance();
|
|
24
|
-
const { mode } = useSyncExternalStore(adaptor.getHostContextStore("
|
|
24
|
+
const { mode } = useSyncExternalStore(adaptor.getHostContextStore("display").subscribe, adaptor.getHostContextStore("display").getSnapshot);
|
|
25
25
|
const isOpen = mode === "modal";
|
|
26
26
|
const handleBackdropClick = (e) => {
|
|
27
27
|
if (e.target === e.currentTarget) {
|
|
@@ -40,8 +40,6 @@ export function ModalProvider({ children }) {
|
|
|
40
40
|
document.addEventListener("keydown", handler);
|
|
41
41
|
return () => document.removeEventListener("keydown", handler);
|
|
42
42
|
}, [isOpen, adaptor]);
|
|
43
|
-
return (_jsxs(_Fragment, { children: [_jsx("style", { children: modalStyles }), isOpen && (
|
|
44
|
-
// biome-ignore lint/a11y/useKeyWithClickEvents: backdrop isn't focusable
|
|
45
|
-
_jsx("div", { role: "dialog", className: "sb-modal-backdrop", onClick: handleBackdropClick })), _jsx("div", { className: isOpen ? "sb-modal-container" : undefined, children: children })] }));
|
|
43
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { children: modalStyles }), isOpen && (_jsx("div", { role: "dialog", className: "sb-modal-backdrop", onClick: handleBackdropClick })), _jsx("div", { className: isOpen ? "sb-modal-container" : undefined, children: children })] }));
|
|
46
44
|
}
|
|
47
45
|
//# sourceMappingURL=modal-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-provider.js","sourceRoot":"","sources":["../../../src/web/components/modal-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"modal-provider.js","sourceRoot":"","sources":["../../../src/web/components/modal-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAA2B;IACjE,MAAM,OAAO,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;IAE5C,MAAM,EAAE,IAAI,EAAE,GAAG,oBAAoB,CACnC,OAAO,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,SAAS,EAChD,OAAO,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,WAAW,CACnD,CAAC;IACF,MAAM,MAAM,GAAG,IAAI,KAAK,OAAO,CAAC;IAEhC,MAAM,mBAAmB,GAAG,CAAC,CAAmB,EAAE,EAAE;QAClD,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC;YACjC,OAAO,CAAC,UAAU,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,CAAC,CAAgB,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,OAAO,CAAC,UAAU,EAAE,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,8BACE,0BAAQ,WAAW,GAAS,EAC3B,MAAM,IAAI,CAET,cACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,mBAAmB,GAC5B,CACH,EACD,cAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,YACtD,QAAQ,GACL,IACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { type ReactNode, useEffect, useSyncExternalStore } from \"react\";\nimport { McpAppAdaptor } from \"../bridges/index.js\";\n\nconst modalStyles = `\n.sb-modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 9998;\n}\n.sb-modal-container {\n border-radius: 12px;\n position: fixed;\n inset: 0;\n margin: auto;\n width: fit-content;\n height: fit-content;\n background: white;\n z-index: 9999;\n}\n`;\n\nexport function ModalProvider({ children }: { children: ReactNode }) {\n const adaptor = McpAppAdaptor.getInstance();\n\n const { mode } = useSyncExternalStore(\n adaptor.getHostContextStore(\"display\").subscribe,\n adaptor.getHostContextStore(\"display\").getSnapshot,\n );\n const isOpen = mode === \"modal\";\n\n const handleBackdropClick = (e: React.MouseEvent) => {\n if (e.target === e.currentTarget) {\n adaptor.closeModal();\n }\n };\n\n useEffect(() => {\n if (!isOpen) {\n return;\n }\n const handler = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n adaptor.closeModal();\n }\n };\n document.addEventListener(\"keydown\", handler);\n return () => document.removeEventListener(\"keydown\", handler);\n }, [isOpen, adaptor]);\n\n return (\n <>\n <style>{modalStyles}</style>\n {isOpen && (\n // biome-ignore lint/a11y/useKeyWithClickEvents: backdrop isn't focusable\n <div\n role=\"dialog\"\n className=\"sb-modal-backdrop\"\n onClick={handleBackdropClick}\n />\n )}\n <div className={isOpen ? \"sb-modal-container\" : undefined}>\n {children}\n </div>\n </>\n );\n}\n"]}
|
package/dist/web/create-store.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { dequal } from "dequal/lite";
|
|
1
2
|
import { create } from "zustand";
|
|
2
3
|
import { getAdaptor } from "./bridges/index.js";
|
|
3
|
-
import { getInitialState,
|
|
4
|
+
import { filterViewContext, getInitialState, injectViewContext, serializeState, } from "./helpers/state.js";
|
|
4
5
|
export function createStore(storeCreator, defaultState) {
|
|
5
6
|
const initialState = getInitialState(defaultState);
|
|
6
7
|
const store = create()((...args) => {
|
|
@@ -10,12 +11,25 @@ export function createStore(storeCreator, defaultState) {
|
|
|
10
11
|
}
|
|
11
12
|
return baseStore;
|
|
12
13
|
});
|
|
14
|
+
// Bidirectional sync between the Zustand store and the adaptor's viewState.
|
|
15
|
+
// Store changes persist to the host; external viewState changes rehydrate the store.
|
|
13
16
|
store.subscribe((state) => {
|
|
14
17
|
const serializedState = serializeState(state);
|
|
15
18
|
if (serializedState !== null && serializedState !== undefined) {
|
|
16
|
-
const stateToPersist =
|
|
19
|
+
const stateToPersist = injectViewContext(serializedState);
|
|
17
20
|
if (stateToPersist !== null) {
|
|
18
|
-
getAdaptor().
|
|
21
|
+
getAdaptor().setViewState(stateToPersist);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
const viewStateStore = getAdaptor().getHostContextStore("viewState");
|
|
26
|
+
viewStateStore.subscribe(() => {
|
|
27
|
+
const externalState = viewStateStore.getSnapshot();
|
|
28
|
+
if (externalState !== null) {
|
|
29
|
+
const filtered = filterViewContext(externalState);
|
|
30
|
+
const current = serializeState(store.getState());
|
|
31
|
+
if (!dequal(filtered, current)) {
|
|
32
|
+
store.setState(filtered);
|
|
19
33
|
}
|
|
20
34
|
}
|
|
21
35
|
});
|