@epam/ai-dial-mcp-apps 1.3.0-dev.29 → 1.3.0-dev.294
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/components/McpAppInlinePreview/McpAppInlinePreview.d.ts +3 -1
- package/components/McpAppInlinePreview/McpAppInlinePreview.d.ts.map +1 -1
- package/index.css +3 -2
- package/index.d.ts +2 -2
- package/index.d.ts.map +1 -1
- package/index.js +124 -110
- package/models/mcp-apps.d.ts +20 -1
- package/models/mcp-apps.d.ts.map +1 -1
- package/package.json +6 -7
- package/utils/mcp-app.d.ts +14 -0
- package/utils/mcp-app.d.ts.map +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { McpAppHostAdapter, McpAppInlinePreviewColors, McpAppResponseCache, McpAppToolCallSeed, McpAppToolRef } from '../../models/mcp-apps';
|
|
1
|
+
import { McpAppHostAdapter, McpAppInlinePreviewColors, McpAppInlinePreviewTypography, McpAppResponseCache, McpAppToolCallSeed, McpAppToolRef } from '../../models/mcp-apps';
|
|
2
2
|
/** Props for the `McpAppInlinePreview` component. */
|
|
3
3
|
export interface McpAppInlinePreviewProps {
|
|
4
4
|
/** Matched MCP App tool to preview. */
|
|
@@ -32,6 +32,8 @@ export interface McpAppInlinePreviewProps {
|
|
|
32
32
|
openedInCanvasLabel: string;
|
|
33
33
|
/** Color overrides applied as CSS custom properties on the preview's root. */
|
|
34
34
|
colors?: McpAppInlinePreviewColors;
|
|
35
|
+
/** Typography class overrides; each field has a kit scale default. */
|
|
36
|
+
typography?: McpAppInlinePreviewTypography;
|
|
35
37
|
}
|
|
36
38
|
/** Renders a compact, always-visible preview of a message's matched MCP App — see `McpAppInlinePreviewProps`. */
|
|
37
39
|
export declare const McpAppInlinePreview: import('react').NamedExoticComponent<McpAppInlinePreviewProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"McpAppInlinePreview.d.ts","sourceRoot":"","sources":["../../../src/components/McpAppInlinePreview/McpAppInlinePreview.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"McpAppInlinePreview.d.ts","sourceRoot":"","sources":["../../../src/components/McpAppInlinePreview/McpAppInlinePreview.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC9B,KAAK,6BAA6B,EAClC,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAG/B,qDAAqD;AACrD,MAAM,WAAW,wBAAwB;IACvC,uCAAuC;IACvC,KAAK,EAAE,aAAa,CAAC;IACrB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,uIAAuI;IACvI,KAAK,EAAE,mBAAmB,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,WAAW,EAAE,iBAAiB,CAAC;IAC/B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,wDAAwD;IACxD,eAAe,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,eAAe,EAAE,MAAM,CAAC;IACxB,uFAAuF;IACvF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;IACvB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4EAA4E;IAC5E,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,sEAAsE;IACtE,UAAU,CAAC,EAAE,6BAA6B,CAAC;CAC5C;AA0MD,iHAAiH;AACjH,eAAO,MAAM,mBAAmB,gEAAgC,CAAC"}
|
package/index.css
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
.
|
|
2
|
-
/*$vite$:1
|
|
1
|
+
._preview_1xqr3_10{background:var(--mcpapp-preview-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--mcpapp-preview-border,var(--stroke-tertiary,#e0e6f0))}._previewHeader_1xqr3_22{border-bottom-color:var(--mcpapp-preview-header-border,var(--stroke-tertiary,#e0e6f0))}._headerText_1xqr3_26{color:var(--mcpapp-header-text,var(--text-secondary,#57647a))}._placeholderText_1xqr3_30{color:var(--mcpapp-placeholder-text,var(--text-secondary,#57647a))}._errorIcon_1xqr3_34{color:var(--mcpapp-error-icon,var(--text-error,#ae2f2f))}._errorText_1xqr3_38{color:var(--mcpapp-error-text,var(--text-primary,#161b2d))}
|
|
2
|
+
/*$vite$:1*//*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
3
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.mx-1\.5{margin-inline:.375rem}.ms-2{margin-inline-start:.5rem}.block{display:block}.flex{display:flex}.inline{display:inline}.inline-block{display:inline-block}.h-3{height:.75rem}.min-h-10{min-height:2.5rem}.min-h-\[100px\]{min-height:100px}.w-0{width:0}.w-full{width:100%}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-current{border-color:currentColor}.p-4{padding:1rem}.px-4{padding-inline:1rem}.py-2{padding-block:.5rem}.text-center{text-align:center}.align-middle{vertical-align:middle}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
|
package/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export { useMcpAppInlinePreview, type McpAppInlinePreviewState, } from './hooks/
|
|
|
3
3
|
export { useMcpAppResponseCache } from './hooks/useMcpAppResponseCache/useMcpAppResponseCache';
|
|
4
4
|
export type { McpDeploymentKind, McpAppToolDiscovery, McpAppToolRef, McpAppToolCallSeed, FetchMcpAppResourceHtml, CallMcpAppTool, CachedMcpAppResponse, McpAppResponseCache, McpAppHostAdapter, } from './models/mcp-apps';
|
|
5
5
|
export { McpAppInlinePreviewStatus } from './models/mcp-apps';
|
|
6
|
-
export { collectToolCallNames, findMcpAppForMessage, mcpAppCanvasKey, computeMcpAppSeedKey, resolveMcpAppToolCallSeed, resolveMcpAppToolResult, } from './utils/mcp-app';
|
|
6
|
+
export { collectToolCallNames, findMcpAppForMessage, mcpAppCanvasKey, computeMcpAppSeedKey, resolveMcpAppToolCallSeed, resolveMcpAppToolResult, sanitizeToolName, } from './utils/mcp-app';
|
|
7
7
|
export { MCP_APPS_CLASS } from './constants/public-class-names';
|
|
8
|
-
export type { McpAppInlinePreviewColors } from './models/mcp-apps';
|
|
8
|
+
export type { McpAppInlinePreviewColors, McpAppInlinePreviewTypography, } from './models/mcp-apps';
|
|
9
9
|
//# sourceMappingURL=index.d.ts.map
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,GAC9B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,GAC9B,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAC;AAC/F,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,oBAAoB,EACpB,yBAAyB,EACzB,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,YAAY,EACV,yBAAyB,EACzB,6BAA6B,GAC9B,MAAM,mBAAmB,CAAC"}
|
package/index.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { AttachmentContentType as e, McpAppCanvasRenderer as t } from "@epam/ai-dial-attachment-canvas";
|
|
2
2
|
import { MessageRole as n, buildCssVars as r } from "@epam/ai-dial-chat-shared";
|
|
3
|
-
import { DIAL_ICON_SIZE as i, DIAL_KIT_ICON_STROKE as a, ElementSize as o, EllipsisTooltip as s, GhostIconButton as c,
|
|
4
|
-
import { IconAlertTriangle as
|
|
5
|
-
import { memo as
|
|
6
|
-
import { Fragment as
|
|
3
|
+
import { DIAL_ICON_SIZE as i, DIAL_KIT_ICON_STROKE as a, ElementSize as o, EllipsisTooltip as s, GhostIconButton as c, LiveRegion as l, LiveRegionElement as u, Spinner as d, mergeClasses as f } from "@epam/ai-dial-ui-kit";
|
|
4
|
+
import { IconAlertTriangle as p, IconArrowsMaximize as m, IconRefresh as h } from "@tabler/icons-react";
|
|
5
|
+
import { memo as g, useCallback as _, useEffect as v, useMemo as y, useRef as b, useState as x } from "react";
|
|
6
|
+
import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
|
|
7
7
|
//#region src/constants/public-class-names.ts
|
|
8
|
-
var
|
|
8
|
+
var T = {
|
|
9
9
|
preview: "dial-mcp-apps-preview",
|
|
10
10
|
previewHeader: "dial-mcp-apps-preview-header"
|
|
11
|
-
},
|
|
11
|
+
}, E = /* @__PURE__ */ function(e) {
|
|
12
12
|
return e.Loading = "loading", e.Ready = "ready", e.Error = "error", e.Unavailable = "unavailable", e;
|
|
13
|
-
}({}),
|
|
13
|
+
}({}), D = (e) => {
|
|
14
14
|
try {
|
|
15
15
|
let t = JSON.parse(e);
|
|
16
16
|
return typeof t == "object" && t ? t : {};
|
|
17
17
|
} catch {
|
|
18
18
|
return {};
|
|
19
19
|
}
|
|
20
|
-
},
|
|
20
|
+
}, O = (e) => {
|
|
21
21
|
let t = /* @__PURE__ */ new Map();
|
|
22
22
|
for (let n of e?.tool_messages ?? []) {
|
|
23
23
|
for (let e of n.tool_calls ?? []) t.set(e.id, {
|
|
@@ -32,7 +32,7 @@ var C = {
|
|
|
32
32
|
for (let n of e?.tool_execution_history ?? []) {
|
|
33
33
|
for (let e of n.tool_calls ?? []) t.set(e.id, {
|
|
34
34
|
name: e.function.name,
|
|
35
|
-
args:
|
|
35
|
+
args: D(e.function.arguments)
|
|
36
36
|
});
|
|
37
37
|
if (n.role === "tool" && n.tool_call_id) {
|
|
38
38
|
let e = t.get(n.tool_call_id);
|
|
@@ -40,18 +40,21 @@ var C = {
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
return t;
|
|
43
|
-
},
|
|
43
|
+
}, k = /[^a-zA-Z0-9_-]+/g, A = 64, j = (e) => {
|
|
44
|
+
let t = e.replace(k, "_");
|
|
45
|
+
return t !== "" && !/^[a-zA-Z_]/.test(t) && (t = `_${t}`), t.slice(0, A);
|
|
46
|
+
}, M = (e) => {
|
|
44
47
|
let t = /* @__PURE__ */ new Set();
|
|
45
|
-
for (let n of e) for (let e of
|
|
48
|
+
for (let n of e) for (let e of O(n.custom_content?.state).values()) t.add(e.name);
|
|
46
49
|
return t;
|
|
47
|
-
},
|
|
50
|
+
}, N = (e, t, r) => {
|
|
48
51
|
if (t.length === 0 || e.role !== n.Assistant) return;
|
|
49
|
-
let i = new Set([...
|
|
52
|
+
let i = new Set([...O(e.custom_content?.state).values()].map((e) => e.name));
|
|
50
53
|
return t.find((e) => i.has(e.toolName)) || t.find((e) => e.discovery === "direct") || (r ? t[0] : void 0);
|
|
51
|
-
},
|
|
54
|
+
}, P = (e) => `${e}:mcp-app`, F = (e) => e == null ? void 0 : JSON.stringify(e.toolInput ?? null), I = (e, t) => {
|
|
52
55
|
let n = e.custom_content?.state;
|
|
53
56
|
if (!n) return;
|
|
54
|
-
let r = [...
|
|
57
|
+
let r = [...O(n).values()].reverse().find((e) => e.name === t);
|
|
55
58
|
if (r) return {
|
|
56
59
|
toolInput: r.args,
|
|
57
60
|
toolResult: r.result == null ? void 0 : { content: [{
|
|
@@ -59,29 +62,29 @@ var C = {
|
|
|
59
62
|
text: r.result
|
|
60
63
|
}] }
|
|
61
64
|
};
|
|
62
|
-
},
|
|
63
|
-
if (
|
|
65
|
+
}, L = async (e, t, n) => {
|
|
66
|
+
if (e.discovery !== "direct" && t?.toolInput == null) return t?.toolResult;
|
|
64
67
|
try {
|
|
65
68
|
return await n(e.toolsetId, e.mcpToolName, t?.toolInput ?? {}, e.kind);
|
|
66
69
|
} catch {
|
|
67
70
|
return t?.toolResult;
|
|
68
71
|
}
|
|
69
|
-
},
|
|
70
|
-
let { hostContext: s, hostInfo: c, sandboxUrl: l, fetchResourceHtml: u, callTool: d } = a, [f, p] =
|
|
72
|
+
}, R = (t, n, r, i, a, o) => {
|
|
73
|
+
let { hostContext: s, hostInfo: c, sandboxUrl: l, fetchResourceHtml: u, callTool: d } = a, [f, p] = x(), [m, h] = x(), [g, y] = x(() => t == null || l == null ? E.Unavailable : E.Loading), [b, S] = x(0), C = _(() => {
|
|
71
74
|
r.invalidate(i), S((e) => e + 1);
|
|
72
|
-
}, [r, i]),
|
|
73
|
-
if (
|
|
74
|
-
let a =
|
|
75
|
-
let [e, r] = await Promise.all([u(t.toolsetId, t.resourceUri),
|
|
75
|
+
}, [r, i]), w = _(async (e) => {
|
|
76
|
+
if (t != null && l != null) try {
|
|
77
|
+
let a = F(n), { html: o, toolResult: s } = await r.getOrFetch(i, a, async () => {
|
|
78
|
+
let [e, r] = await Promise.all([u(t.toolsetId, t.resourceUri), L(t, n, d)]);
|
|
76
79
|
return {
|
|
77
80
|
html: e,
|
|
78
81
|
toolResult: r
|
|
79
82
|
};
|
|
80
83
|
});
|
|
81
84
|
if (e()) return;
|
|
82
|
-
p(o),
|
|
85
|
+
p(o), h(s), y(E.Ready);
|
|
83
86
|
} catch {
|
|
84
|
-
e() ||
|
|
87
|
+
e() || y(E.Error);
|
|
85
88
|
}
|
|
86
89
|
}, [
|
|
87
90
|
t,
|
|
@@ -92,33 +95,33 @@ var C = {
|
|
|
92
95
|
u,
|
|
93
96
|
d
|
|
94
97
|
]);
|
|
95
|
-
|
|
98
|
+
v(() => {
|
|
96
99
|
if (t == null || l == null) {
|
|
97
|
-
|
|
100
|
+
y(E.Unavailable);
|
|
98
101
|
return;
|
|
99
102
|
}
|
|
100
103
|
let e = !1;
|
|
101
|
-
return
|
|
104
|
+
return y(E.Loading), w(() => e), () => {
|
|
102
105
|
e = !0;
|
|
103
106
|
};
|
|
104
107
|
}, [
|
|
105
108
|
t,
|
|
106
109
|
l,
|
|
107
|
-
|
|
108
|
-
|
|
110
|
+
w,
|
|
111
|
+
b
|
|
109
112
|
]);
|
|
110
|
-
let
|
|
113
|
+
let T = _(async (e, n) => {
|
|
111
114
|
if (t == null) throw Error(`Tool call "${e}" failed: no matching MCP App`);
|
|
112
115
|
return d(t.toolsetId, e, n, t.kind);
|
|
113
116
|
}, [t, d]);
|
|
114
|
-
return
|
|
115
|
-
status:
|
|
117
|
+
return g !== E.Ready || t == null || l == null || f == null ? {
|
|
118
|
+
status: g,
|
|
116
119
|
reload: C,
|
|
117
|
-
attemptId:
|
|
120
|
+
attemptId: b
|
|
118
121
|
} : {
|
|
119
|
-
status:
|
|
122
|
+
status: g,
|
|
120
123
|
reload: C,
|
|
121
|
-
attemptId:
|
|
124
|
+
attemptId: b,
|
|
122
125
|
content: {
|
|
123
126
|
type: e.McpApp,
|
|
124
127
|
html: f,
|
|
@@ -127,123 +130,134 @@ var C = {
|
|
|
127
130
|
toolResult: m,
|
|
128
131
|
hostContext: s,
|
|
129
132
|
hostInfo: c,
|
|
130
|
-
onToolCall:
|
|
133
|
+
onToolCall: T,
|
|
131
134
|
onRequestDisplayMode: o
|
|
132
135
|
}
|
|
133
136
|
};
|
|
134
|
-
},
|
|
135
|
-
preview: "
|
|
136
|
-
previewHeader: "
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
let
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
137
|
+
}, z = {
|
|
138
|
+
preview: "_preview_1xqr3_10",
|
|
139
|
+
previewHeader: "_previewHeader_1xqr3_22",
|
|
140
|
+
headerText: "_headerText_1xqr3_26",
|
|
141
|
+
placeholderText: "_placeholderText_1xqr3_30",
|
|
142
|
+
errorIcon: "_errorIcon_1xqr3_34",
|
|
143
|
+
errorText: "_errorText_1xqr3_38"
|
|
144
|
+
}, B = g(({ match: e, toolCall: n, cache: g, cacheKey: y, hostAdapter: b, onExpand: D, expandAriaLabel: O, reloadAriaLabel: k, actionsGroupAriaLabel: A = "MCP app actions", loadErrorLabel: j, isOpenedInCanvas: M = !1, openedInCanvasLabel: N, colors: P, typography: F }) => {
|
|
145
|
+
let { headerNameClassName: I = "dial-tiny-lead-semi-text", versionClassName: L = "dial-caption-text", messageClassName: B = "dial-body-text" } = F ?? {}, [V, H] = x(void 0);
|
|
146
|
+
v(() => {
|
|
147
|
+
H(void 0);
|
|
148
|
+
}, [y]);
|
|
149
|
+
let U = _((e) => e === "fullscreen" ? (D(), "fullscreen") : "inline", [D]), W = r({
|
|
150
|
+
"--mcpapp-preview-bg": P?.previewBackground,
|
|
151
|
+
"--mcpapp-preview-border": P?.previewBorder,
|
|
152
|
+
"--mcpapp-preview-header-border": P?.previewHeaderBorder,
|
|
153
|
+
"--mcpapp-header-text": P?.headerText,
|
|
154
|
+
"--mcpapp-placeholder-text": P?.placeholderText,
|
|
155
|
+
"--mcpapp-error-icon": P?.errorIcon,
|
|
156
|
+
"--mcpapp-error-text": P?.errorText
|
|
157
|
+
}), { status: G, content: K, reload: q, attemptId: J } = R(e, n, g, y, b, U);
|
|
158
|
+
return G === E.Unavailable ? null : /* @__PURE__ */ w("div", {
|
|
159
|
+
style: W,
|
|
160
|
+
className: f(z.preview, "flex w-full min-w-0 flex-col overflow-hidden rounded-xl border", T.preview),
|
|
161
|
+
children: [/* @__PURE__ */ w("div", {
|
|
162
|
+
className: f(z.previewHeader, "flex min-h-10 items-center justify-between gap-2 border-b px-4 py-2", T.previewHeader),
|
|
163
|
+
children: [/* @__PURE__ */ C(s, {
|
|
164
|
+
text: V == null ? /* @__PURE__ */ C("span", {
|
|
165
|
+
className: I,
|
|
155
166
|
children: e.mcpToolName
|
|
156
|
-
}) : /* @__PURE__ */ S
|
|
157
|
-
/* @__PURE__ */
|
|
158
|
-
className:
|
|
167
|
+
}) : /* @__PURE__ */ w(S, { children: [
|
|
168
|
+
/* @__PURE__ */ C("span", {
|
|
169
|
+
className: I,
|
|
159
170
|
children: e.mcpToolName
|
|
160
171
|
}),
|
|
161
|
-
/* @__PURE__ */
|
|
172
|
+
/* @__PURE__ */ C("span", {
|
|
162
173
|
"aria-hidden": !0,
|
|
163
|
-
className: "
|
|
174
|
+
className: "mx-1.5 inline-block h-3 w-0 border-s border-current align-middle"
|
|
164
175
|
}),
|
|
165
|
-
/* @__PURE__ */
|
|
166
|
-
className:
|
|
167
|
-
children:
|
|
176
|
+
/* @__PURE__ */ C("span", {
|
|
177
|
+
className: I,
|
|
178
|
+
children: V.name
|
|
168
179
|
}),
|
|
169
|
-
|
|
170
|
-
className: "
|
|
171
|
-
children:
|
|
180
|
+
V.version && /* @__PURE__ */ C("span", {
|
|
181
|
+
className: f(L, "ms-2"),
|
|
182
|
+
children: V.version
|
|
172
183
|
})
|
|
173
184
|
] }),
|
|
174
|
-
className:
|
|
175
|
-
}), /* @__PURE__ */
|
|
185
|
+
className: z.headerText
|
|
186
|
+
}), /* @__PURE__ */ w("div", {
|
|
176
187
|
role: "toolbar",
|
|
177
|
-
"aria-label":
|
|
188
|
+
"aria-label": A,
|
|
178
189
|
className: "flex shrink-0 items-center gap-1",
|
|
179
|
-
children: [/* @__PURE__ */
|
|
180
|
-
icon: /* @__PURE__ */
|
|
190
|
+
children: [/* @__PURE__ */ C(c, {
|
|
191
|
+
icon: /* @__PURE__ */ C(h, {
|
|
181
192
|
size: i.SM,
|
|
182
193
|
stroke: a,
|
|
183
194
|
"aria-hidden": !0
|
|
184
195
|
}),
|
|
185
|
-
"aria-label":
|
|
196
|
+
"aria-label": k,
|
|
186
197
|
size: o.Small,
|
|
187
|
-
onClick:
|
|
188
|
-
}), /* @__PURE__ */
|
|
189
|
-
icon: /* @__PURE__ */
|
|
198
|
+
onClick: q
|
|
199
|
+
}), /* @__PURE__ */ C(c, {
|
|
200
|
+
icon: /* @__PURE__ */ C(m, {
|
|
190
201
|
size: i.SM,
|
|
191
202
|
stroke: a,
|
|
192
203
|
"aria-hidden": !0
|
|
193
204
|
}),
|
|
194
|
-
"aria-label":
|
|
205
|
+
"aria-label": O,
|
|
195
206
|
size: o.Small,
|
|
196
|
-
onClick:
|
|
207
|
+
onClick: D
|
|
197
208
|
})]
|
|
198
209
|
})]
|
|
199
|
-
}), /* @__PURE__ */
|
|
200
|
-
className: "relative min-h-[
|
|
201
|
-
children:
|
|
202
|
-
|
|
203
|
-
|
|
210
|
+
}), /* @__PURE__ */ w("div", {
|
|
211
|
+
className: "relative min-h-[100px] w-full",
|
|
212
|
+
children: [/* @__PURE__ */ C(l, {
|
|
213
|
+
visuallyHidden: !0,
|
|
214
|
+
as: u.Span,
|
|
215
|
+
children: M ? N : ""
|
|
216
|
+
}), M ? /* @__PURE__ */ C("div", {
|
|
217
|
+
"aria-hidden": !0,
|
|
204
218
|
className: "absolute inset-0 flex items-center justify-center p-4",
|
|
205
|
-
children: /* @__PURE__ */
|
|
206
|
-
className: "
|
|
207
|
-
children:
|
|
219
|
+
children: /* @__PURE__ */ C("span", {
|
|
220
|
+
className: f(B, "text-center", z.placeholderText),
|
|
221
|
+
children: N
|
|
208
222
|
})
|
|
209
|
-
}) : /* @__PURE__ */ S
|
|
210
|
-
|
|
223
|
+
}) : /* @__PURE__ */ w(S, { children: [
|
|
224
|
+
G === E.Loading && /* @__PURE__ */ C("div", {
|
|
211
225
|
className: "absolute inset-0 flex items-center justify-center",
|
|
212
|
-
children: /* @__PURE__ */
|
|
226
|
+
children: /* @__PURE__ */ C(d, {})
|
|
213
227
|
}),
|
|
214
|
-
|
|
228
|
+
G === E.Error && /* @__PURE__ */ w("div", {
|
|
215
229
|
className: "absolute inset-0 flex flex-col items-center justify-center gap-2 p-4",
|
|
216
|
-
children: [/* @__PURE__ */
|
|
230
|
+
children: [/* @__PURE__ */ C(p, {
|
|
217
231
|
size: 40,
|
|
218
232
|
stroke: a,
|
|
219
233
|
"aria-hidden": !0,
|
|
220
|
-
className:
|
|
221
|
-
}), /* @__PURE__ */
|
|
222
|
-
role: "
|
|
223
|
-
className: "
|
|
224
|
-
children:
|
|
234
|
+
className: z.errorIcon
|
|
235
|
+
}), /* @__PURE__ */ C("p", {
|
|
236
|
+
role: "status",
|
|
237
|
+
className: f(B, "text-center", z.errorText),
|
|
238
|
+
children: j
|
|
225
239
|
})]
|
|
226
240
|
}),
|
|
227
|
-
|
|
228
|
-
content:
|
|
229
|
-
errorLabel:
|
|
230
|
-
onAppInfo:
|
|
231
|
-
},
|
|
232
|
-
] })
|
|
241
|
+
G === E.Ready && K && /* @__PURE__ */ C(t, {
|
|
242
|
+
content: K,
|
|
243
|
+
errorLabel: j,
|
|
244
|
+
onAppInfo: H
|
|
245
|
+
}, J)
|
|
246
|
+
] })]
|
|
233
247
|
})]
|
|
234
248
|
});
|
|
235
|
-
}),
|
|
236
|
-
let t =
|
|
237
|
-
return
|
|
249
|
+
}), V = 9e5, H = (e) => {
|
|
250
|
+
let t = b(/* @__PURE__ */ new Map()), n = b(/* @__PURE__ */ new Map());
|
|
251
|
+
return y(() => {
|
|
238
252
|
let r = (t) => `${e}:${t}`, i = (e, t) => `${r(e)}::${t ?? ""}`, a = (e, n) => {
|
|
239
253
|
let i = t.current.get(r(e));
|
|
240
|
-
if (i != null && i.seedKey === n && !(Date.now() - i.cachedAt >
|
|
254
|
+
if (i != null && i.seedKey === n && !(Date.now() - i.cachedAt > V)) return {
|
|
241
255
|
html: i.html,
|
|
242
256
|
toolResult: i.toolResult
|
|
243
257
|
};
|
|
244
258
|
}, o = (e, n, i) => {
|
|
245
259
|
let a = Date.now();
|
|
246
|
-
for (let [e, n] of t.current) a - n.cachedAt >
|
|
260
|
+
for (let [e, n] of t.current) a - n.cachedAt > V && t.current.delete(e);
|
|
247
261
|
t.current.set(r(e), {
|
|
248
262
|
...n,
|
|
249
263
|
seedKey: i,
|
|
@@ -270,4 +284,4 @@ var C = {
|
|
|
270
284
|
}, [e]);
|
|
271
285
|
};
|
|
272
286
|
//#endregion
|
|
273
|
-
export {
|
|
287
|
+
export { T as MCP_APPS_CLASS, B as McpAppInlinePreview, E as McpAppInlinePreviewStatus, M as collectToolCallNames, F as computeMcpAppSeedKey, N as findMcpAppForMessage, P as mcpAppCanvasKey, I as resolveMcpAppToolCallSeed, L as resolveMcpAppToolResult, j as sanitizeToolName, R as useMcpAppInlinePreview, H as useMcpAppResponseCache };
|
package/models/mcp-apps.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { McpAppCanvasContent } from '@epam/ai-dial-attachment-canvas';
|
|
2
2
|
import { CallToolResult, Implementation } from '@modelcontextprotocol/sdk/types.js';
|
|
3
|
+
type McpUiHostContext = NonNullable<McpAppCanvasContent['hostContext']>;
|
|
3
4
|
/** Which of the host's two MCP proxy routes a deployment id resolves through — a plain toolset, or an application that is itself an MCP server. */
|
|
4
5
|
export type McpDeploymentKind = 'toolset' | 'application';
|
|
5
6
|
/**
|
|
@@ -112,5 +113,23 @@ export interface McpAppInlinePreviewColors {
|
|
|
112
113
|
previewBorder?: string;
|
|
113
114
|
/** Divider under the header strip. Fallback: `--stroke-tertiary`. */
|
|
114
115
|
previewHeaderBorder?: string;
|
|
116
|
+
/** Text color of the header strip's app or tool name. Fallback: `--text-secondary`. */
|
|
117
|
+
headerText?: string;
|
|
118
|
+
/** Text color of the "opened in canvas" placeholder. Fallback: `--text-secondary`. */
|
|
119
|
+
placeholderText?: string;
|
|
120
|
+
/** Color of the load-error icon. Fallback: `--text-error`. */
|
|
121
|
+
errorIcon?: string;
|
|
122
|
+
/** Text color of the load-error message. Fallback: `--text-primary`. */
|
|
123
|
+
errorText?: string;
|
|
115
124
|
}
|
|
125
|
+
/** Typography class overrides for `McpAppInlinePreview`. */
|
|
126
|
+
export interface McpAppInlinePreviewTypography {
|
|
127
|
+
/** Typography class of the header strip's tool and app names. Defaults to `'dial-tiny-lead-semi-text'`. */
|
|
128
|
+
headerNameClassName?: string;
|
|
129
|
+
/** Typography class of the app version beside its name. Defaults to `'dial-caption-text'`. */
|
|
130
|
+
versionClassName?: string;
|
|
131
|
+
/** Typography class of the "opened in canvas" and load-error messages. Defaults to `'dial-body-text'`. */
|
|
132
|
+
messageClassName?: string;
|
|
133
|
+
}
|
|
134
|
+
export {};
|
|
116
135
|
//# sourceMappingURL=mcp-apps.d.ts.map
|
package/models/mcp-apps.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-apps.d.ts","sourceRoot":"","sources":["../../src/models/mcp-apps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"mcp-apps.d.ts","sourceRoot":"","sources":["../../src/models/mcp-apps.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@epam/ai-dial-mcp-apps",
|
|
3
3
|
"description": "Host-agnostic MCP Apps building blocks — tool-call/message matching, the response cache, and the inline preview hook/component shared by the full-width canvas and inline surfaces",
|
|
4
|
-
"version": "1.3.0-dev.
|
|
4
|
+
"version": "1.3.0-dev.294",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./index.js",
|
|
@@ -17,14 +17,13 @@
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@tabler/icons-react": "^3.
|
|
21
|
-
"@
|
|
22
|
-
"@
|
|
23
|
-
"@epam/ai-dial-attachment-canvas": "1.3.0-dev.29"
|
|
20
|
+
"@tabler/icons-react": "^3.50.0",
|
|
21
|
+
"@modelcontextprotocol/sdk": "^1.32.2",
|
|
22
|
+
"@epam/ai-dial-attachment-canvas": "1.3.0-dev.294"
|
|
24
23
|
},
|
|
25
24
|
"peerDependencies": {
|
|
26
|
-
"@epam/ai-dial-chat-shared": "1.3.0-dev.
|
|
27
|
-
"@epam/ai-dial-ui-kit": "^0.
|
|
25
|
+
"@epam/ai-dial-chat-shared": "1.3.0-dev.294",
|
|
26
|
+
"@epam/ai-dial-ui-kit": "^0.16.0-dev.67",
|
|
28
27
|
"react": "^19.2.8"
|
|
29
28
|
},
|
|
30
29
|
"repository": {
|
package/utils/mcp-app.d.ts
CHANGED
|
@@ -1,6 +1,20 @@
|
|
|
1
1
|
import { Message } from '@epam/ai-dial-chat-shared';
|
|
2
2
|
import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
|
|
3
3
|
import { CallMcpAppTool, McpAppToolCallSeed, McpAppToolRef } from '../models/mcp-apps';
|
|
4
|
+
/**
|
|
5
|
+
* Reproduces the tool-name sanitization QuickApps applies to
|
|
6
|
+
* `${toolsetName}_${toolName}` before sending a tool to the LLM
|
|
7
|
+
* (`sanitize_toolname` in `epam/ai-dial-quickapps-backend`,
|
|
8
|
+
* `src/quickapp/common/utils.py`): every run of characters outside
|
|
9
|
+
* `[a-zA-Z0-9_-]` becomes a single `_`, a name not starting with a letter or `_`
|
|
10
|
+
* gets a leading `_`, and the result is cut to 64 characters.
|
|
11
|
+
*
|
|
12
|
+
* Temporary heuristic: the host has no toolset id on a tool call, so it can only
|
|
13
|
+
* correlate a call with a toolset by guessing this name. Replace it once MCP Apps
|
|
14
|
+
* are fully supported and the orchestrator reports the toolset a call belongs to.
|
|
15
|
+
* @param input - raw `${toolsetName}_${toolName}` (or `${toolsetName}_` prefix)
|
|
16
|
+
*/
|
|
17
|
+
export declare const sanitizeToolName: (input: string) => string;
|
|
4
18
|
/**
|
|
5
19
|
* Collects every real tool-call name seen across `messages`' `custom_content.state`
|
|
6
20
|
* (in whichever known orchestrator shape is present). Used to discover an MCP-capable
|
package/utils/mcp-app.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcp-app.d.ts","sourceRoot":"","sources":["../../src/utils/mcp-app.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,OAAO,EAEb,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,aAAa,EACd,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"mcp-app.d.ts","sourceRoot":"","sources":["../../src/utils/mcp-app.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,OAAO,EAEb,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,aAAa,EACd,MAAM,oBAAoB,CAAC;AA8D5B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,KAAG,MAMhD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,UAAU,OAAO,EAAE,KAAG,GAAG,CAAC,MAAM,CAUpE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,oBAAoB,GAC/B,SAAS,OAAO,EAChB,aAAa,aAAa,EAAE,EAC5B,aAAa,OAAO,KACnB,aAAa,GAAG,SAclB,CAAC;AAEF,qMAAqM;AACrM,eAAO,MAAM,eAAe,GAAI,cAAc,MAAM,KAAG,MAC5B,CAAC;AAE5B;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,UAAU,kBAAkB,GAAG,SAAS,KACvC,MAAM,GAAG,SAC+D,CAAC;AAE5E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,yBAAyB,GACpC,SAAS,OAAO,EAChB,UAAU,MAAM,KACf,kBAAkB,GAAG,SAgBvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,aAAa,EACpB,MAAM,kBAAkB,GAAG,SAAS,EACpC,UAAU,cAAc,KACvB,OAAO,CAAC,cAAc,GAAG,SAAS,CAgBpC,CAAC"}
|