@epam/ai-dial-mcp-apps 1.3.0-dev.16 → 1.3.0-dev.161

package/index.css

@@ -1,2 +1,3 @@
 ._preview_19as4_11{background:var(--mcpapp-preview-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--mcpapp-preview-border,var(--stroke-tertiary,#e0e6f0))}._previewHeader_19as4_23{border-bottom-color:var(--mcpapp-preview-header-border,var(--stroke-tertiary,#e0e6f0))}
-/*$vite$:1*/.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.ms-2{margin-inline-start:.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.h-3{height:.75rem}.min-h-10{min-height:2.5rem}.min-h-\[200px\]{min-height:200px}.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-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-s{border-inline-start-width:1px}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-center{text-align:center}.align-middle{vertical-align:middle}.text-error{color:var(--text-error,#ae2f2f)}.text-primary{color:var(--text-primary,#161b2d)}.text-secondary{color:var(--text-secondary,#57647a)}
+/*$vite$:1*//*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@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}.text-error{color:var(--text-error,#ae2f2f)}.text-primary{color:var(--text-primary,#161b2d)}.text-secondary{color:var(--text-secondary,#57647a)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

package/index.d.ts

@@ -3,7 +3,7 @@ export { useMcpAppInlinePreview, type McpAppInlinePreviewState, } from './hooks/
 export { useMcpAppResponseCache } from './hooks/useMcpAppResponseCache/useMcpAppResponseCache';
 export type { McpDeploymentKind, McpAppToolDiscovery, McpAppToolRef, McpAppToolCallSeed, FetchMcpAppResourceHtml, CallMcpAppTool, CachedMcpAppResponse, McpAppResponseCache, McpAppHostAdapter, } from './models/mcp-apps';
 export { McpAppInlinePreviewStatus } from './models/mcp-apps';
-export { collectToolCallNames, findMcpAppForMessage, mcpAppCanvasKey, computeMcpAppSeedKey, resolveMcpAppToolCallSeed, resolveMcpAppToolResult, } from './utils/mcp-app';
+export { collectToolCallNames, findMcpAppForMessage, mcpAppCanvasKey, computeMcpAppSeedKey, resolveMcpAppToolCallSeed, resolveMcpAppToolResult, sanitizeToolName, } from './utils/mcp-app';
 export { MCP_APPS_CLASS } from './constants/public-class-names';
 export type { McpAppInlinePreviewColors } from './models/mcp-apps';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -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,GACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC"}
+{"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,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC"}

package/index.js

@@ -40,15 +40,18 @@ var C = {
 		}
 	}
 	return t;
-}, D = (e) => {
+}, D = /[^a-zA-Z0-9_-]+/g, O = 64, k = (e) => {
+	let t = e.replace(D, "_");
+	return t !== "" && !/^[a-zA-Z_]/.test(t) && (t = `_${t}`), t.slice(0, O);
+}, A = (e) => {
 	let t = /* @__PURE__ */ new Set();
 	for (let n of e) for (let e of E(n.custom_content?.state).values()) t.add(e.name);
 	return t;
-}, O = (e, t, r) => {
+}, j = (e, t, r) => {
 	if (t.length === 0 || e.role !== n.Assistant) return;
 	let i = new Set([...E(e.custom_content?.state).values()].map((e) => e.name));
 	return t.find((e) => i.has(e.toolName)) || t.find((e) => e.discovery === "direct") || (r ? t[0] : void 0);
-}, k = (e) => `${e}:mcp-app`, A = (e) => e == null ? void 0 : JSON.stringify(e.toolInput ?? null), j = (e, t) => {
+}, M = (e) => `${e}:mcp-app`, N = (e) => e == null ? void 0 : JSON.stringify(e.toolInput ?? null), P = (e, t) => {
 	let n = e.custom_content?.state;
 	if (!n) return;
 	let r = [...E(n).values()].reverse().find((e) => e.name === t);
@@ -59,20 +62,20 @@ var C = {
 			text: r.result
 		}] }
 	};
-}, M = async (e, t, n) => {
-	if (!(e.discovery === "direct" || t?.toolInput != null)) return t?.toolResult;
+}, F = async (e, t, n) => {
+	if (e.discovery !== "direct" && t?.toolInput == null) return t?.toolResult;
 	try {
 		return await n(e.toolsetId, e.mcpToolName, t?.toolInput ?? {}, e.kind);
 	} catch {
 		return t?.toolResult;
 	}
-}, N = (t, n, r, i, a, o) => {
+}, I = (t, n, r, i, a, o) => {
 	let { hostContext: s, hostInfo: c, sandboxUrl: l, fetchResourceHtml: u, callTool: d } = a, [f, p] = y(), [m, _] = y(), [v, b] = y(() => t == null || l == null ? w.Unavailable : w.Loading), [x, S] = y(0), C = h(() => {
 		r.invalidate(i), S((e) => e + 1);
 	}, [r, i]), T = h(async (e) => {
-		if (!(t == null || l == null)) try {
-			let a = A(n), { html: o, toolResult: s } = await r.getOrFetch(i, a, async () => {
-				let [e, r] = await Promise.all([u(t.toolsetId, t.resourceUri), M(t, n, d)]);
+		if (t != null && l != null) try {
+			let a = N(n), { html: o, toolResult: s } = await r.getOrFetch(i, a, async () => {
+				let [e, r] = await Promise.all([u(t.toolsetId, t.resourceUri), F(t, n, d)]);
 				return {
 					html: e,
 					toolResult: r
@@ -131,26 +134,26 @@ var C = {
 			onRequestDisplayMode: o
 		}
 	};
-}, P = {
+}, L = {
 	preview: "_preview_19as4_11",
 	previewHeader: "_previewHeader_19as4_23"
-}, F = m(({ match: e, toolCall: n, cache: m, cacheKey: _, hostAdapter: v, onExpand: T, expandAriaLabel: E, reloadAriaLabel: D, actionsGroupAriaLabel: O = "MCP app actions", loadErrorLabel: k, isOpenedInCanvas: A = !1, openedInCanvasLabel: j, colors: M }) => {
-	let [F, I] = y(void 0);
+}, R = m(({ match: e, toolCall: n, cache: m, cacheKey: _, hostAdapter: v, onExpand: T, expandAriaLabel: E, reloadAriaLabel: D, actionsGroupAriaLabel: O = "MCP app actions", loadErrorLabel: k, isOpenedInCanvas: A = !1, openedInCanvasLabel: j, colors: M }) => {
+	let [N, P] = y(void 0);
 	g(() => {
-		I(void 0);
+		P(void 0);
 	}, [_]);
-	let L = h((e) => e === "fullscreen" ? (T(), "fullscreen") : "inline", [T]), R = r({
+	let F = h((e) => e === "fullscreen" ? (T(), "fullscreen") : "inline", [T]), R = r({
 		"--mcpapp-preview-bg": M?.previewBackground,
 		"--mcpapp-preview-border": M?.previewBorder,
 		"--mcpapp-preview-header-border": M?.previewHeaderBorder
-	}), { status: z, content: B, reload: V, attemptId: H } = N(e, n, m, _, v, L);
+	}), { status: z, content: B, reload: V, attemptId: H } = I(e, n, m, _, v, F);
 	return z === w.Unavailable ? null : /* @__PURE__ */ S("div", {
 		style: R,
-		className: u(P.preview, "flex w-full min-w-0 flex-col overflow-hidden rounded-xl border", C.preview),
+		className: u(L.preview, "flex w-full min-w-0 flex-col overflow-hidden rounded-xl border", C.preview),
 		children: [/* @__PURE__ */ S("div", {
-			className: u(P.previewHeader, "flex min-h-10 items-center justify-between gap-2 border-b px-4 py-2", C.previewHeader),
+			className: u(L.previewHeader, "flex min-h-10 items-center justify-between gap-2 border-b px-4 py-2", C.previewHeader),
 			children: [/* @__PURE__ */ x(s, {
-				text: F == null ? /* @__PURE__ */ x("span", {
+				text: N == null ? /* @__PURE__ */ x("span", {
 					className: "dial-tiny-lead-semi-text",
 					children: e.mcpToolName
 				}) : /* @__PURE__ */ S(b, { children: [
@@ -160,15 +163,15 @@ var C = {
 					}),
 					/* @__PURE__ */ x("span", {
 						"aria-hidden": !0,
-						className: "border-current mx-1.5 inline-block h-3 w-0 border-s align-middle"
+						className: "mx-1.5 inline-block h-3 w-0 border-s border-current align-middle"
 					}),
 					/* @__PURE__ */ x("span", {
 						className: "dial-tiny-lead-semi-text",
-						children: F.name
+						children: N.name
 					}),
-					F.version && /* @__PURE__ */ x("span", {
+					N.version && /* @__PURE__ */ x("span", {
 						className: "dial-caption-text ms-2",
-						children: F.version
+						children: N.version
 					})
 				] }),
 				className: "text-secondary"
@@ -197,7 +200,7 @@ var C = {
 				})]
 			})]
 		}), /* @__PURE__ */ x("div", {
-			className: "relative min-h-[200px] w-full",
+			className: "relative min-h-[100px] w-full",
 			children: A ? /* @__PURE__ */ x("div", {
 				role: "status",
 				"aria-live": "polite",
@@ -227,23 +230,23 @@ var C = {
 				z === w.Ready && B && /* @__PURE__ */ x(t, {
 					content: B,
 					errorLabel: k,
-					onAppInfo: I
+					onAppInfo: P
 				}, H)
 			] })
 		})]
 	});
-}), I = 900 * 1e3, L = (e) => {
+}), z = 9e5, B = (e) => {
 	let t = v(/* @__PURE__ */ new Map()), n = v(/* @__PURE__ */ new Map());
 	return _(() => {
 		let r = (t) => `${e}:${t}`, i = (e, t) => `${r(e)}::${t ?? ""}`, a = (e, n) => {
 			let i = t.current.get(r(e));
-			if (i != null && i.seedKey === n && !(Date.now() - i.cachedAt > I)) return {
+			if (i != null && i.seedKey === n && !(Date.now() - i.cachedAt > z)) return {
 				html: i.html,
 				toolResult: i.toolResult
 			};
 		}, o = (e, n, i) => {
 			let a = Date.now();
-			for (let [e, n] of t.current) a - n.cachedAt > I && t.current.delete(e);
+			for (let [e, n] of t.current) a - n.cachedAt > z && t.current.delete(e);
 			t.current.set(r(e), {
 				...n,
 				seedKey: i,
@@ -270,4 +273,4 @@ var C = {
 	}, [e]);
 };
 //#endregion
-export { C as MCP_APPS_CLASS, F as McpAppInlinePreview, w as McpAppInlinePreviewStatus, D as collectToolCallNames, A as computeMcpAppSeedKey, O as findMcpAppForMessage, k as mcpAppCanvasKey, j as resolveMcpAppToolCallSeed, M as resolveMcpAppToolResult, N as useMcpAppInlinePreview, L as useMcpAppResponseCache };
+export { C as MCP_APPS_CLASS, R as McpAppInlinePreview, w as McpAppInlinePreviewStatus, A as collectToolCallNames, N as computeMcpAppSeedKey, j as findMcpAppForMessage, M as mcpAppCanvasKey, P as resolveMcpAppToolCallSeed, F as resolveMcpAppToolResult, k as sanitizeToolName, I as useMcpAppInlinePreview, B as useMcpAppResponseCache };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-mcp-apps",
   "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",
-  "version": "1.3.0-dev.16",
+  "version": "1.3.0-dev.161",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -20,11 +20,11 @@
     "@tabler/icons-react": "^3.44.0",
     "@mcp-ui/client": "^7.1.1",
     "@modelcontextprotocol/sdk": "^1.32.1",
-    "@epam/ai-dial-attachment-canvas": "1.3.0-dev.16"
+    "@epam/ai-dial-attachment-canvas": "1.3.0-dev.161"
   },
   "peerDependencies": {
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.16",
-    "@epam/ai-dial-ui-kit": "^0.15.1",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.161",
+    "@epam/ai-dial-ui-kit": "^0.16.0-dev.33",
     "react": "^19.2.8"
   },
   "repository": {

package/utils/mcp-app.d.ts

@@ -1,6 +1,20 @@
 import { Message } from '@epam/ai-dial-chat-shared';
 import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
 import { CallMcpAppTool, McpAppToolCallSeed, McpAppToolRef } from '../models/mcp-apps';
+/**
+ * Reproduces the tool-name sanitization QuickApps applies to
+ * `${toolsetName}_${toolName}` before sending a tool to the LLM
+ * (`sanitize_toolname` in `epam/ai-dial-quickapps-backend`,
+ * `src/quickapp/common/utils.py`): every run of characters outside
+ * `[a-zA-Z0-9_-]` becomes a single `_`, a name not starting with a letter or `_`
+ * gets a leading `_`, and the result is cut to 64 characters.
+ *
+ * Temporary heuristic: the host has no toolset id on a tool call, so it can only
+ * correlate a call with a toolset by guessing this name. Replace it once MCP Apps
+ * are fully supported and the orchestrator reports the toolset a call belongs to.
+ * @param input - raw `${toolsetName}_${toolName}` (or `${toolsetName}_` prefix)
+ */
+export declare const sanitizeToolName: (input: string) => string;
 /**
  * Collects every real tool-call name seen across `messages`' `custom_content.state`
  * (in whichever known orchestrator shape is present). Used to discover an MCP-capable

package/utils/mcp-app.d.ts.map

@@ -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;AA2D5B;;;;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"}
+{"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"}