@xpert-ai/chatkit-ui 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -1680,6 +1680,9 @@ var en_US_default = {
     loading: "Loading",
     thinking: "Thinking",
     answering: "Answering",
+    mcpApp: {
+      loading: "Loading MCP App"
+    },
     contextCompression: {
       running: "Automatically compressing context",
       success: "Context automatically compressed",
@@ -2070,6 +2073,9 @@ var zh_CN_default = {
     loading: "\u6B63\u5728\u52A0\u8F7D",
     thinking: "\u6B63\u5728\u601D\u8003",
     answering: "\u6B63\u5728\u751F\u6210",
+    mcpApp: {
+      loading: "\u6B63\u5728\u52A0\u8F7D MCP App"
+    },
     contextCompression: {
       running: "\u6B63\u5728\u81EA\u52A8\u538B\u7F29\u4E0A\u4E0B\u6587",
       success: "\u4E0A\u4E0B\u6587\u5DF2\u81EA\u52A8\u538B\u7F29",
@@ -11568,9 +11574,40 @@ var React35 = __toESM(require("react"), 1);
 var import_chatkit_types9 = require("@xpert-ai/chatkit-types");
 var import_lucide_react23 = require("lucide-react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
+var EMPTY_INPUT_SCHEMA = {
+  type: "object",
+  properties: {}
+};
 function isRecord5(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
+function readRecord(value) {
+  return isRecord5(value) ? value : void 0;
+}
+function readNonEmptyRecord(value) {
+  const record = readRecord(value);
+  return record && Object.keys(record).length ? record : void 0;
+}
+function readString3(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function readBoolean(value) {
+  return typeof value === "boolean" ? value : void 0;
+}
+function readLocalizedText(value) {
+  if (typeof value === "string") return value;
+  if (isRecord5(value)) return value;
+  return void 0;
+}
+function readIconDefinition(value) {
+  if (!isRecord5(value)) return void 0;
+  return typeof value.type === "string" && typeof value.value === "string" ? value : void 0;
+}
+function readStringList(value) {
+  if (!Array.isArray(value)) return void 0;
+  const strings = value.filter((item) => typeof item === "string");
+  return strings.length ? strings : void 0;
+}
 function buildXpertApiUrl(apiUrl, path) {
   const normalizedApiUrl = apiUrl.trim();
   if (!normalizedApiUrl) return path;
@@ -11585,7 +11622,7 @@ function appendQuery(path, params) {
   const query = params.toString();
   return query ? `${path}?${query}` : path;
 }
-function buildMcpAppReviveParams(data) {
+function buildMcpAppReviveParams(data, options) {
   const params = new URLSearchParams();
   const add = (key, value) => {
     if (value) {
@@ -11598,15 +11635,16 @@ function buildMcpAppReviveParams(data) {
   add("toolCallId", data.toolCallId);
   add("resourceUri", data.resourceUri);
   add("title", typeof data.title === "string" ? data.title : void 0);
-  add("token", data.appInstanceToken);
+  add("messageId", options?.messageId);
+  add("token", options?.appInstanceToken ?? data.appInstanceToken);
   return params;
 }
-function buildMcpAppEndpointPath(data, endpoint) {
+function buildMcpAppEndpointPath(data, endpoint, options) {
   return appendQuery(
     `/api/xpert-toolset/mcp-apps/${encodeURIComponent(
       data.appInstanceId
     )}/${endpoint}`,
-    buildMcpAppReviveParams(data)
+    buildMcpAppReviveParams(data, options)
   );
 }
 function escapeHtmlAttribute(value) {
@@ -11663,6 +11701,37 @@ function decodeResourceHtml(resource) {
     }
   }
 }
+function normalizeCspMetadata(value) {
+  const raw = readRecord(value);
+  if (!raw) return void 0;
+  const csp = {};
+  const connectDomains = readStringList(raw.connectDomains);
+  const resourceDomains = readStringList(raw.resourceDomains);
+  const frameDomains = readStringList(raw.frameDomains);
+  const baseUriDomains = readStringList(raw.baseUriDomains);
+  if (connectDomains) csp.connectDomains = connectDomains;
+  if (resourceDomains) csp.resourceDomains = resourceDomains;
+  if (frameDomains) csp.frameDomains = frameDomains;
+  if (baseUriDomains) csp.baseUriDomains = baseUriDomains;
+  return Object.keys(csp).length ? csp : void 0;
+}
+function normalizePermissionGrant(value) {
+  return value === true || isRecord5(value) ? value : void 0;
+}
+function normalizePermissionsMetadata(value) {
+  const raw = readRecord(value);
+  if (!raw) return void 0;
+  const permissions = {};
+  const camera = normalizePermissionGrant(raw.camera);
+  const microphone = normalizePermissionGrant(raw.microphone);
+  const geolocation = normalizePermissionGrant(raw.geolocation);
+  const clipboardWrite = normalizePermissionGrant(raw.clipboardWrite);
+  if (camera !== void 0) permissions.camera = camera;
+  if (microphone !== void 0) permissions.microphone = microphone;
+  if (geolocation !== void 0) permissions.geolocation = geolocation;
+  if (clipboardWrite !== void 0) permissions.clipboardWrite = clipboardWrite;
+  return Object.keys(permissions).length ? permissions : void 0;
+}
 function normalizeJsonRpcMessage(value) {
   const data = typeof value === "string" ? (() => {
     try {
@@ -11858,23 +11927,48 @@ function injectMcpAppTheme(html, theme) {
   const style = `<style id="mcp-app-host-theme">:root{color-scheme:${theme.mode};${declarations}}</style>`;
   return injectHeadContent(html, style);
 }
-function buildStandardToolInfo(data, resource) {
-  const raw = resource?.toolInfo ?? {};
-  const rawTitle = isRecord5(raw) && (raw.title !== void 0 || raw.name !== void 0) ? raw.title ?? raw.name : void 0;
-  const rawDescription = isRecord5(raw) && raw.description !== void 0 ? raw.description : void 0;
-  const rawIcon = isRecord5(raw) && raw.icon !== void 0 ? raw.icon : void 0;
-  const originalName = isRecord5(raw) && typeof raw.originalName === "string" ? raw.originalName : data.toolName;
-  const title = rawTitle ?? resource?.title ?? data.title ?? data.toolName;
-  const description = rawDescription ?? resource?.description ?? data.description;
-  const icon = rawIcon ?? resource?.icon ?? data.icon;
+function normalizeInputSchema(value) {
+  const raw = readRecord(value);
+  if (!raw || raw.type !== void 0 && raw.type !== "object") {
+    return EMPTY_INPUT_SCHEMA;
+  }
+  return {
+    ...raw,
+    type: "object",
+    properties: readRecord(raw.properties) ?? {},
+    ...Array.isArray(raw.required) && raw.required.every((item) => typeof item === "string") ? { required: raw.required } : {}
+  };
+}
+function normalizeMcpAppToolInfo(value, data, resource = {}) {
+  const raw = readRecord(value) ?? {};
+  const rawTool = readRecord(raw.tool) ?? {};
+  const rawName = readString3(raw.name);
+  const originalName = readString3(rawTool.name) ?? readString3(raw.originalName) ?? data.toolName;
+  const title = readLocalizedText(rawTool.title) ?? readLocalizedText(raw.title) ?? resource.title ?? data.title ?? data.toolName;
+  const description = readLocalizedText(rawTool.description) ?? readLocalizedText(raw.description) ?? resource.description ?? data.description;
+  const icon = readIconDefinition(rawTool.icon) ?? readIconDefinition(raw.icon) ?? resource.icon ?? data.icon;
   return {
     ...raw,
     id: data.toolCallId,
+    name: rawName ?? data.toolName,
+    originalName,
+    title,
+    ...description ? { description } : {},
+    ...icon ? { icon } : {},
+    serverName: readString3(raw.serverName) ?? data.serverName,
+    toolCallId: readString3(raw.toolCallId) ?? data.toolCallId,
+    toolsetId: readString3(raw.toolsetId) ?? data.toolsetId,
     tool: {
+      ...rawTool,
       name: originalName,
-      title,
-      ...description ? { description } : {},
-      ...icon ? { icon } : {}
+      title: readLocalizedText(rawTool.title) ?? title,
+      inputSchema: normalizeInputSchema(
+        rawTool.inputSchema ?? raw.inputSchema
+      ),
+      ...description ? {
+        description: readLocalizedText(rawTool.description) ?? description
+      } : {},
+      ...icon ? { icon: readIconDefinition(rawTool.icon) ?? icon } : {}
     }
   };
 }
@@ -11911,47 +12005,118 @@ function stringifyToolResult(value) {
     return String(value);
   }
 }
+function createTextContentBlock(text) {
+  return {
+    type: "text",
+    text
+  };
+}
+function normalizeContentBlocks(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter(
+    (item) => isRecord5(item) && typeof item.type === "string"
+  );
+}
+function extractLegacyArtifactMeta(value) {
+  const meta = readRecord(value._meta);
+  if (meta) return meta;
+  const entries = Object.entries(value).filter(
+    ([key]) => key !== "structuredContent" && key !== "isError"
+  );
+  return entries.length ? Object.fromEntries(entries) : void 0;
+}
+function normalizeToolArtifact(value) {
+  if (isRecord5(value)) {
+    return {
+      ...readRecord(value.structuredContent) ? { structuredContent: readRecord(value.structuredContent) } : {},
+      ...readBoolean(value.isError) !== void 0 ? { isError: readBoolean(value.isError) } : {},
+      ...extractLegacyArtifactMeta(value) ? { _meta: extractLegacyArtifactMeta(value) } : {}
+    };
+  }
+  if (!Array.isArray(value)) return {};
+  return value.reduce((result, item) => {
+    const normalized = normalizeToolArtifact(item);
+    return {
+      ...result,
+      ...normalized,
+      _meta: result._meta ?? normalized._meta,
+      structuredContent: result.structuredContent ?? normalized.structuredContent,
+      isError: result.isError ?? normalized.isError
+    };
+  }, {});
+}
 function normalizeCallToolResult(value) {
-  if (isRecord5(value) && Array.isArray(value.content)) {
-    return value;
+  if (value === void 0) {
+    return {
+      content: []
+    };
+  }
+  if (isRecord5(value)) {
+    if (value.toolResult !== void 0 && !Array.isArray(value.content)) {
+      return normalizeCallToolResult(value.toolResult);
+    }
+    const content = normalizeContentBlocks(value.content);
+    const result = {
+      content: content.length ? content : []
+    };
+    const structuredContent = readRecord(value.structuredContent);
+    const isError = readBoolean(value.isError);
+    const meta = readRecord(value._meta);
+    if (structuredContent) result.structuredContent = structuredContent;
+    if (isError !== void 0) result.isError = isError;
+    if (meta) result._meta = meta;
+    return result;
   }
   if (Array.isArray(value) && value.length >= 2) {
     const [content, artifact] = value;
-    const text = typeof content === "string" ? content : stringifyToolResult(content);
-    const normalized = {
+    const artifactFields = normalizeToolArtifact(artifact);
+    return {
       content: [
-        {
-          type: "text",
-          text
-        }
-      ]
+        createTextContentBlock(
+          typeof content === "string" ? content : stringifyToolResult(content)
+        )
+      ],
+      ...artifactFields
     };
-    if (isRecord5(artifact)) {
-      normalized._meta = artifact;
-      if (isRecord5(artifact.structuredContent)) {
-        normalized.structuredContent = artifact.structuredContent;
-      }
-    } else if (Array.isArray(artifact)) {
-      const structured = artifact.find(
-        (item) => isRecord5(item) && isRecord5(item.structuredContent)
-      );
-      const meta = artifact.find(isRecord5);
-      if (structured?.structuredContent) {
-        normalized.structuredContent = structured.structuredContent;
-      }
-      if (meta) {
-        normalized._meta = meta;
-      }
-    }
-    return normalized;
   }
   return {
-    content: [
-      {
-        type: "text",
-        text: stringifyToolResult(value)
-      }
-    ]
+    content: [createTextContentBlock(stringifyToolResult(value))]
+  };
+}
+function normalizeMcpAppResourceResponse(value, data) {
+  const raw = readRecord(value);
+  if (!raw) {
+    throw new Error("MCP App resource response must be an object");
+  }
+  const html = decodeResourceHtml(raw);
+  if (!html) {
+    throw new Error("MCP App resource did not include HTML content");
+  }
+  const resourceInfo = {
+    title: readLocalizedText(raw.title),
+    description: readLocalizedText(raw.description),
+    icon: readIconDefinition(raw.icon)
+  };
+  const toolInput = readNonEmptyRecord(raw.toolInput) ?? data.toolInput ?? readRecord(raw.toolInput) ?? {};
+  const rawToolResult = raw.toolResult ?? data.toolResult;
+  return {
+    uri: readString3(raw.uri),
+    mimeType: readString3(raw.mimeType),
+    html,
+    appInstanceToken: readString3(raw.appInstanceToken),
+    resourceUri: readString3(raw.resourceUri),
+    title: resourceInfo.title,
+    description: resourceInfo.description,
+    icon: resourceInfo.icon,
+    csp: normalizeCspMetadata(raw.csp),
+    permissions: normalizePermissionsMetadata(raw.permissions),
+    domain: readString3(raw.domain),
+    prefersBorder: readBoolean(raw.prefersBorder),
+    toolInfo: normalizeMcpAppToolInfo(raw.toolInfo, data, resourceInfo),
+    toolInput,
+    hasToolResult: rawToolResult !== void 0,
+    toolResult: normalizeCallToolResult(rawToolResult),
+    rawToolResult
   };
 }
 function isHttpUrl(value) {
@@ -11984,6 +12149,7 @@ function isMcpAppComponentData(data) {
 }
 function McpAppMessage({
   data,
+  messageId,
   className
 }) {
   const { i18n: i18n2 } = useChatkitTranslation();
@@ -11998,9 +12164,8 @@ function McpAppMessage({
   const initializedRef = React35.useRef(false);
   const sentInitialResultRef = React35.useRef(false);
   const modelContextRef = React35.useRef(null);
-  const [resource, setResource] = React35.useState(
-    null
-  );
+  const [resource, setResource] = React35.useState(null);
+  const [runtimeAppInstanceToken, setRuntimeAppInstanceToken] = React35.useState(data.appInstanceToken);
   const [srcDoc, setSrcDoc] = React35.useState(null);
   const [height, setHeight] = React35.useState(420);
   const [error, setError] = React35.useState(null);
@@ -12008,16 +12173,21 @@ function McpAppMessage({
   const resourceUrl = React35.useMemo(
     () => buildXpertApiUrl(
       apiUrl,
-      buildMcpAppEndpointPath(data, "resource")
+      buildMcpAppEndpointPath(data, "resource", {
+        messageId
+      })
     ),
-    [apiUrl, data]
+    [apiUrl, data, messageId]
   );
   const rpcUrl = React35.useMemo(
     () => buildXpertApiUrl(
       apiUrl,
-      buildMcpAppEndpointPath(data, "rpc")
+      buildMcpAppEndpointPath(data, "rpc", {
+        appInstanceToken: runtimeAppInstanceToken,
+        messageId
+      })
     ),
-    [apiUrl, data]
+    [apiUrl, data, messageId, runtimeAppInstanceToken]
   );
   const postToApp = React35.useCallback((message) => {
     iframeRef.current?.contentWindow?.postMessage(message, "*");
@@ -12052,25 +12222,29 @@ function McpAppMessage({
       jsonrpc: "2.0",
       method: "ui/notifications/tool-input",
       params: {
-        arguments: resource.toolInput ?? data.toolInput ?? {}
+        arguments: resource.toolInput
       }
     });
+    if (!resource.hasToolResult) {
+      return;
+    }
     postToApp({
       jsonrpc: "2.0",
       method: "ui/notifications/tool-result",
       params: {
-        ...normalizeCallToolResult(resource.toolResult),
+        ...resource.toolResult,
         toolCallId: data.toolCallId,
         toolName: data.toolName,
         // Legacy compatibility for apps written before the 2026-01-26 notification shape.
-        result: resource.toolResult
+        result: resource.rawToolResult
       }
     });
-  }, [data.toolCallId, data.toolInput, data.toolName, postToApp, resource]);
+  }, [data.toolCallId, data.toolName, postToApp, resource]);
   React35.useEffect(() => {
     const controller = new AbortController();
     initializedRef.current = false;
     sentInitialResultRef.current = false;
+    setRuntimeAppInstanceToken(data.appInstanceToken);
     setIsLoading(true);
     setError(null);
     setResource(null);
@@ -12084,17 +12258,20 @@ function McpAppMessage({
           throw new Error(`MCP App resource failed with ${response.status}`);
         }
         const payload = await response.json();
-        const html = decodeResourceHtml(payload);
-        if (!html) {
-          throw new Error("MCP App resource did not include HTML content");
-        }
-        setResource(payload);
+        const normalizedResource = normalizeMcpAppResourceResponse(
+          payload,
+          data
+        );
+        setResource(normalizedResource);
+        setRuntimeAppInstanceToken(
+          normalizedResource.appInstanceToken ?? data.appInstanceToken
+        );
         const hostLocale = normalizeHostLocale(i18n2.language);
         setSrcDoc(
           injectMcpAppTheme(
             injectCsp(
-              injectMcpAppLocale(html, hostLocale),
-              payload.csp ?? data.csp
+              injectMcpAppLocale(normalizedResource.html, hostLocale),
+              normalizedResource.csp ?? data.csp
             ),
             buildMcpAppTheme(containerRef.current)
           )
@@ -12114,7 +12291,9 @@ function McpAppMessage({
     };
   }, [
     authenticatedFetch,
+    data,
     data.appInstanceId,
+    data.appInstanceToken,
     data.csp,
     i18n2.language,
     resourceUrl
@@ -12147,7 +12326,7 @@ function McpAppMessage({
         initializedRef.current = true;
         const permissions = resource?.permissions ?? data.permissions;
         const csp = resource?.csp ?? data.csp;
-        const toolInfo = buildStandardToolInfo(data, resource);
+        const toolInfo = resource?.toolInfo ?? normalizeMcpAppToolInfo(void 0, data);
         const theme = buildMcpAppTheme(containerRef.current);
         const hostLocale = normalizeHostLocale(i18n2.language);
         const hostLanguage = getLocaleLanguage(hostLocale);
@@ -12203,10 +12382,7 @@ function McpAppMessage({
               openLinks: true
             },
             context: {
-              toolInfo: resource?.toolInfo ?? {
-                name: data.toolName,
-                toolCallId: data.toolCallId
-              },
+              toolInfo,
               theme: theme.mode,
               themeCssVariables: theme.cssVariables,
               locale: hostLocale,
@@ -12360,7 +12536,7 @@ function McpAppMessage({
         ] }),
         isLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex h-40 items-center justify-center gap-2 text-sm text-muted-foreground", children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react23.Loader2, { className: "h-4 w-4 animate-spin" }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Loading MCP App" })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: i18n2.t("message.mcpApp.loading") })
         ] }) : error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex h-40 items-center justify-center gap-2 px-4 text-sm text-destructive", children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react23.AlertCircle, { className: "h-4 w-4 shrink-0" }),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "min-w-0 break-words", children: error })
@@ -12664,7 +12840,7 @@ function renderContentItem(content, index, message, lookupMessages, options) {
       return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
     }
     if (isMcpAppComponent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(McpAppMessage, { data: content.data }) }, content.id ?? `mcp-app-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(McpAppMessage, { messageId, data: content.data }) }, content.id ?? `mcp-app-${index}`);
     }
     if (getComponentMessagePresentation(content, getToolStepData(content)) === "grouped-step") {
       return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(