@xpert-ai/chatkit-ui 0.5.2 → 0.5.3

package/dist/index.cjs

@@ -2477,7 +2477,16 @@ var en_US_default = {
       moreTags: "+{{count}}"
     },
     mcpApp: {
-      loading: "Loading MCP App"
+      loading: "Loading MCP App",
+      fullscreen: "Open fullscreen",
+      pictureInPicture: "Open picture in picture",
+      returnInline: "Return inline",
+      approvalTitle: "Confirm MCP App action",
+      toolApprovalDescription: 'The app wants to run "{{tool}}". Review the request before allowing it.',
+      downloadApprovalDescription: "The app wants to download files to this device. Review the file details before allowing it.",
+      requestDetails: "Request details",
+      approve: "Allow",
+      reject: "Reject"
     },
     contextCompression: {
       running: "Automatically compressing context",
@@ -2960,7 +2969,16 @@ var zh_CN_default = {
       moreTags: "+{{count}}"
     },
     mcpApp: {
-      loading: "\u6B63\u5728\u52A0\u8F7D MCP App"
+      loading: "\u6B63\u5728\u52A0\u8F7D MCP App",
+      fullscreen: "\u5168\u5C4F\u663E\u793A",
+      pictureInPicture: "\u753B\u4E2D\u753B\u663E\u793A",
+      returnInline: "\u8FD4\u56DE\u884C\u5185\u663E\u793A",
+      approvalTitle: "\u786E\u8BA4 MCP App \u64CD\u4F5C",
+      toolApprovalDescription: "App \u8BF7\u6C42\u8FD0\u884C\u201C{{tool}}\u201D\u3002\u8BF7\u68C0\u67E5\u8BF7\u6C42\u5185\u5BB9\u540E\u518D\u51B3\u5B9A\u662F\u5426\u5141\u8BB8\u3002",
+      downloadApprovalDescription: "App \u8BF7\u6C42\u5C06\u6587\u4EF6\u4E0B\u8F7D\u5230\u6B64\u8BBE\u5907\u3002\u8BF7\u68C0\u67E5\u6587\u4EF6\u8BE6\u60C5\u540E\u518D\u51B3\u5B9A\u662F\u5426\u5141\u8BB8\u3002",
+      requestDetails: "\u8BF7\u6C42\u8BE6\u60C5",
+      approve: "\u5141\u8BB8",
+      reject: "\u62D2\u7EDD"
     },
     contextCompression: {
       running: "\u6B63\u5728\u81EA\u52A8\u538B\u7F29\u4E0A\u4E0B\u6587",
@@ -5791,8 +5809,8 @@ function JsonTreeNode({
   depth = 0
 }) {
   const isArray = Array.isArray(value);
-  const isObject2 = isJsonObjectValue(value);
-  const isExpandable = isArray || isObject2;
+  const isObject3 = isJsonObjectValue(value);
+  const isExpandable = isArray || isObject3;
   const [isExpanded, setIsExpanded] = React18.useState(depth < 2);
   if (!isExpandable) {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-0 gap-2 leading-6", children: [
@@ -9558,8 +9576,8 @@ function getFallbackPalette(isDarkMode) {
     text: "#18181b"
   };
 }
-function resolveColor(styles, property, fallback, background) {
-  const parsed = parseCssColor(styles.getPropertyValue(property));
+function resolveColor(styles, property2, fallback, background) {
+  const parsed = parseCssColor(styles.getPropertyValue(property2));
   if (!parsed) return fallback;
   if (parsed.a < 1 && background) {
     return rgbaToHex(compositeColor(parsed, background));
@@ -13093,15 +13111,15 @@ function getObjectProperty(value, key) {
   if (!isPlainObject2(value)) {
     return void 0;
   }
-  const property = value[key];
-  return isPlainObject2(property) ? property : void 0;
+  const property2 = value[key];
+  return isPlainObject2(property2) ? property2 : void 0;
 }
 function getStringProperty(value, key) {
   if (!isPlainObject2(value)) {
     return void 0;
   }
-  const property = value[key];
-  return typeof property === "string" ? property : void 0;
+  const property2 = value[key];
+  return typeof property2 === "string" ? property2 : void 0;
 }
 function isPlainObject2(value) {
   return !!value && typeof value === "object" && !Array.isArray(value);
@@ -13114,6 +13132,223 @@ function hasLegacySurface(surface) {
 var React37 = __toESM(require("react"), 1);
 var import_chatkit_types11 = require("@xpert-ai/chatkit-types");
 var import_lucide_react24 = require("lucide-react");
+
+// src/components/thread/messages/mcp-app/host.ts
+function isObject2(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function property(value, key) {
+  return Reflect.get(value, key);
+}
+function stringProperty(value, key) {
+  const field = property(value, key);
+  return typeof field === "string" && field.trim() ? field.trim() : void 0;
+}
+function isMcpAppRpcSuccess(value) {
+  return isObject2(value) && Reflect.has(value, "result") && !Reflect.has(value, "error");
+}
+function readMcpAppDisplayMode(value) {
+  if (!isObject2(value)) return void 0;
+  const result = property(value, "result");
+  if (!isObject2(result)) return void 0;
+  const mode = property(result, "mode");
+  if (mode === "picture-in-picture") return "pip";
+  return mode === "inline" || mode === "fullscreen" || mode === "pip" ? mode : void 0;
+}
+function readMcpAppPendingApproval(response, request) {
+  if (!isObject2(response)) return null;
+  const error = property(response, "error");
+  if (!isObject2(error) || property(error, "code") !== -32001) return null;
+  const data = property(error, "data");
+  if (!isObject2(data)) return null;
+  const approvalId = stringProperty(data, "approvalId");
+  const risk = property(data, "risk");
+  const expiresAt = property(data, "expiresAt");
+  if (!approvalId || risk !== "write" && risk !== "destructive" || typeof expiresAt !== "number" || !Number.isFinite(expiresAt)) {
+    return null;
+  }
+  const params = isObject2(request.params) ? request.params : void 0;
+  const requestedTool = params ? stringProperty(params, "name") : void 0;
+  const kind = request.method === "ui/download-file" ? "download" : "tool";
+  return {
+    approvalId,
+    risk,
+    expiresAt,
+    toolName: kind === "download" ? "ui/download-file" : requestedTool ?? request.method ?? "tools/call",
+    kind,
+    request,
+    details: kind === "download" ? formatDownloadApprovalDetails(request.params) : formatApprovalDetails(request.params)
+  };
+}
+function withMcpAppApprovalId(request, approvalId) {
+  return {
+    ...request,
+    params: {
+      ...isObject2(request.params) ? request.params : {},
+      approvalId
+    }
+  };
+}
+function formatApprovalDetails(value) {
+  try {
+    const text = JSON.stringify(redactSensitiveValue(value, 0), null, 2);
+    if (!text) return "{}";
+    return text.length > 4e3 ? `${text.slice(0, 4e3)}
+\u2026` : text;
+  } catch {
+    return "[Request details unavailable]";
+  }
+}
+function redactSensitiveValue(value, depth) {
+  if (depth >= 6) return "[Nested value omitted]";
+  if (typeof value === "string" && value.length > 1e3) {
+    return `${value.slice(0, 1e3)}\u2026 [${value.length} characters]`;
+  }
+  if (Array.isArray(value)) {
+    return value.slice(0, 20).map((item) => redactSensitiveValue(item, depth + 1));
+  }
+  if (!isObject2(value)) return value;
+  const output = {};
+  for (const [key, field] of Object.entries(value).slice(0, 50)) {
+    output[key] = /password|secret|token|authorization|api[-_]?key/i.test(key) ? "[Redacted]" : redactSensitiveValue(field, depth + 1);
+  }
+  return output;
+}
+function formatDownloadApprovalDetails(value) {
+  if (!isObject2(value)) return "{}";
+  const contents = property(value, "contents");
+  if (!Array.isArray(contents)) return "{}";
+  const summary = contents.slice(0, 20).map((item) => {
+    if (!isObject2(item)) return { type: "invalid" };
+    if (property(item, "type") === "resource_link") {
+      return {
+        type: "resource_link",
+        name: stringProperty(item, "name"),
+        uri: stringProperty(item, "uri"),
+        mimeType: stringProperty(item, "mimeType")
+      };
+    }
+    const resource = property(item, "resource");
+    if (!isObject2(resource)) return { type: property(item, "type") };
+    const text = property(resource, "text");
+    const blob = property(resource, "blob");
+    return {
+      type: "resource",
+      name: stringProperty(resource, "name"),
+      uri: stringProperty(resource, "uri"),
+      mimeType: stringProperty(resource, "mimeType"),
+      size: typeof text === "string" ? `${new TextEncoder().encode(text).byteLength} bytes` : typeof blob === "string" ? `approximately ${Math.floor(blob.length * 3 / 4)} bytes` : void 0
+    };
+  });
+  return JSON.stringify({ files: summary }, null, 2);
+}
+function triggerMcpAppDownloads(value) {
+  const downloads = parseDownloadItems(value);
+  for (const download of downloads) {
+    if (download.kind === "link") {
+      clickDownload(download.uri, download.filename);
+      continue;
+    }
+    const blob = new Blob(
+      [
+        download.text !== void 0 ? download.text : decodeBase64(download.blob ?? "")
+      ],
+      { type: download.mimeType }
+    );
+    const url = URL.createObjectURL(blob);
+    clickDownload(url, download.filename);
+    window.setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+}
+function parseDownloadItems(value) {
+  if (!isObject2(value)) throw new Error("Download params must be an object");
+  if (property(value, "isError") === true) {
+    throw new Error("The MCP App reported that the download failed");
+  }
+  const contents = property(value, "contents");
+  if (!Array.isArray(contents) || contents.length === 0) {
+    throw new Error("Download contents must be a non-empty array");
+  }
+  return contents.map((item, index) => {
+    if (!isObject2(item)) throw new Error("Download content is invalid");
+    const type = property(item, "type");
+    if (type === "resource_link") {
+      const uri2 = stringProperty(item, "uri");
+      const name = stringProperty(item, "name");
+      if (!uri2 || !name || !isHttpUrl(uri2)) {
+        throw new Error(
+          "Download link must use HTTP or HTTPS and include a name"
+        );
+      }
+      return {
+        kind: "link",
+        filename: sanitizeFilename(name, index),
+        uri: uri2
+      };
+    }
+    if (type !== "resource") {
+      throw new Error("Download content type is unsupported");
+    }
+    const resource = property(item, "resource");
+    if (!isObject2(resource)) throw new Error("Embedded download is invalid");
+    const uri = stringProperty(resource, "uri");
+    if (!uri) throw new Error("Embedded download URI is required");
+    const text = property(resource, "text");
+    const blob = property(resource, "blob");
+    if (typeof text !== "string" && typeof blob !== "string") {
+      throw new Error("Embedded download must include text or base64 data");
+    }
+    const common = {
+      kind: "embedded",
+      filename: sanitizeFilename(
+        stringProperty(resource, "name") ?? filenameFromUri(uri),
+        index
+      ),
+      mimeType: stringProperty(resource, "mimeType") ?? "application/octet-stream"
+    };
+    return typeof text === "string" ? { ...common, text } : { ...common, blob };
+  });
+}
+function decodeBase64(value) {
+  const decoded = window.atob(value);
+  return Uint8Array.from(decoded, (character) => character.charCodeAt(0));
+}
+function filenameFromUri(uri) {
+  try {
+    const pathname = new URL(uri).pathname;
+    const segment = pathname.split("/").filter(Boolean).at(-1);
+    return segment ? decodeURIComponent(segment) : "download";
+  } catch {
+    return uri.split("/").filter(Boolean).at(-1) ?? "download";
+  }
+}
+function sanitizeFilename(value, index) {
+  const sanitized = Array.from(
+    value,
+    (character) => character.charCodeAt(0) <= 31 || /[\\/:*?"<>|]/.test(character) ? "_" : character
+  ).join("").trim().slice(0, 255);
+  return sanitized || `download-${index + 1}`;
+}
+function isHttpUrl(value) {
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function clickDownload(uri, filename) {
+  const anchor = document.createElement("a");
+  anchor.href = uri;
+  anchor.download = filename;
+  anchor.rel = "noopener noreferrer";
+  anchor.hidden = true;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+}
+
+// src/components/thread/messages/mcp-app.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var EMPTY_INPUT_SCHEMA = {
   type: "object",
@@ -13146,53 +13381,28 @@ function readIconDefinition(value) {
 }
 function readStringList(value) {
   if (!Array.isArray(value)) return void 0;
-  const strings = value.filter((item) => typeof item === "string");
+  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;
-  try {
-    const url = new URL(normalizedApiUrl);
-    return `${url.origin}${path}`;
-  } catch {
-    return path;
-  }
-}
-function appendQuery(path, params) {
-  const query = params.toString();
-  return query ? `${path}?${query}` : path;
-}
-function buildMcpAppReviveParams(data, options) {
-  const params = new URLSearchParams();
-  const add = (key, value) => {
-    if (value) {
-      params.set(key, value);
-    }
+function buildMcpAppReviveQuery(data, options) {
+  return {
+    toolsetId: data.toolsetId,
+    serverName: data.serverName,
+    toolName: data.toolName,
+    toolCallId: data.toolCallId,
+    resourceUri: data.resourceUri,
+    title: typeof data.title === "string" ? data.title : void 0,
+    messageId: options?.messageId,
+    token: options?.appInstanceToken ?? data.appInstanceToken
   };
-  add("toolsetId", data.toolsetId);
-  add("serverName", data.serverName);
-  add("toolName", data.toolName);
-  add("toolCallId", data.toolCallId);
-  add("resourceUri", data.resourceUri);
-  add("title", typeof data.title === "string" ? data.title : void 0);
-  add("messageId", options?.messageId);
-  add("token", options?.appInstanceToken ?? data.appInstanceToken);
-  return params;
-}
-function buildMcpAppEndpointPath(data, endpoint, options) {
-  return appendQuery(
-    `/api/xpert-toolset/mcp-apps/${encodeURIComponent(
-      data.appInstanceId
-    )}/${endpoint}`,
-    buildMcpAppReviveParams(data, options)
-  );
 }
 function escapeHtmlAttribute(value) {
   return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
 }
 function domains(values) {
-  return values?.filter((value) => value.trim()).join(" ") ?? "";
+  return values?.map((value) => value.trim()).filter((value) => value && !/[\s;'"<>]/.test(value)).join(" ") ?? "";
 }
 function buildCsp(csp) {
   const resourceDomains = domains(csp?.resourceDomains);
@@ -13207,7 +13417,9 @@ function buildCsp(csp) {
     `media-src data: blob: ${resourceDomains}`.trim(),
     `font-src data: ${resourceDomains}`.trim(),
     `connect-src ${connectDomains}`,
+    `form-action ${connectDomains}`,
     `frame-src ${frameDomains}`,
+    "object-src 'none'",
     `base-uri ${baseUriDomains}`
   ].join("; ");
 }
@@ -13293,13 +13505,14 @@ function jsonRpcResult(id, result) {
     result
   };
 }
-function jsonRpcError(id, message) {
+function jsonRpcError(id, message, code = -32e3, data) {
   return {
     jsonrpc: "2.0",
     id: id ?? null,
     error: {
-      code: -32e3,
-      message
+      code,
+      message,
+      ...data === void 0 ? {} : { data }
     }
   };
 }
@@ -13350,11 +13563,7 @@ var MCP_APP_THEME_COLOR_TOKENS = [
   ["--background", "--mcp-app-color-background", "oklch(1 0 0)"],
   ["--foreground", "--mcp-app-color-foreground", "oklch(0.145 0 0)"],
   ["--card", "--mcp-app-color-card", "oklch(1 0 0)"],
-  [
-    "--card-foreground",
-    "--mcp-app-color-card-foreground",
-    "oklch(0.145 0 0)"
-  ],
+  ["--card-foreground", "--mcp-app-color-card-foreground", "oklch(0.145 0 0)"],
   ["--popover", "--mcp-app-color-popover", "oklch(1 0 0)"],
   [
     "--popover-foreground",
@@ -13385,11 +13594,7 @@ var MCP_APP_THEME_COLOR_TOKENS = [
     "--mcp-app-color-accent-foreground",
     "oklch(0.205 0 0)"
   ],
-  [
-    "--destructive",
-    "--mcp-app-color-destructive",
-    "oklch(0.577 0.245 27.325)"
-  ],
+  ["--destructive", "--mcp-app-color-destructive", "oklch(0.577 0.245 27.325)"],
   [
     "--destructive-foreground",
     "--mcp-app-color-destructive-foreground",
@@ -13503,9 +13708,7 @@ function normalizeMcpAppToolInfo(value, data, resource = {}) {
       ...rawTool,
       name: originalName,
       title: readLocalizedText(rawTool.title) ?? title,
-      inputSchema: normalizeInputSchema(
-        rawTool.inputSchema ?? raw.inputSchema
-      ),
+      inputSchema: normalizeInputSchema(rawTool.inputSchema ?? raw.inputSchema),
       ...description ? {
         description: readLocalizedText(rawTool.description) ?? description
       } : {},
@@ -13534,10 +13737,66 @@ function buildIframeAllow(permissions) {
   return policies.length ? policies.join("; ") : void 0;
 }
 function buildSandboxAttribute() {
-  return ["allow-downloads", "allow-forms", "allow-modals", "allow-scripts"].join(
-    " "
+  return ["allow-forms", "allow-modals", "allow-scripts"].join(" ");
+}
+function isLoopbackHostname(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
+}
+function normalizeRequestedDomain(value) {
+  const domain = value?.trim().toLowerCase().replace(/\.$/, "");
+  if (!domain || /[/:?#@]/.test(domain)) return null;
+  try {
+    const parsed = new URL(`https://${domain}`);
+    return parsed.hostname === domain && !parsed.port ? domain : null;
+  } catch {
+    return null;
+  }
+}
+function domainMatchesAllowlist(domain, allowedDomains) {
+  return Boolean(
+    allowedDomains?.some((value) => {
+      const entry = value.trim().toLowerCase().replace(/\.$/, "");
+      if (entry.startsWith("*.")) {
+        const suffix = entry.slice(2);
+        return Boolean(suffix) && domain !== suffix && domain.endsWith(`.${suffix}`);
+      }
+      return domain === entry;
+    })
   );
 }
+function resolveMcpAppSandboxProxy(options, requestedDomain, hostLocation = window.location.href) {
+  const configuredUrl = options?.sandboxProxyUrl?.trim();
+  if (!configuredUrl) return null;
+  try {
+    const hostOrigin = new URL(hostLocation).origin;
+    const proxyUrl = new URL(configuredUrl, hostLocation);
+    if (proxyUrl.protocol !== "https:" && !(proxyUrl.protocol === "http:" && isLoopbackHostname(proxyUrl.hostname))) {
+      return null;
+    }
+    const domain = normalizeRequestedDomain(requestedDomain);
+    const dedicatedOrigin = Boolean(
+      domain && (domain === proxyUrl.hostname.toLowerCase() || domainMatchesAllowlist(domain, options?.allowedDomains))
+    );
+    if (domain && dedicatedOrigin) {
+      proxyUrl.hostname = domain;
+      proxyUrl.port = "";
+    }
+    if (proxyUrl.origin === hostOrigin) return null;
+    const fragment = new URLSearchParams(proxyUrl.hash.slice(1));
+    fragment.set("parentOrigin", hostOrigin);
+    proxyUrl.hash = fragment.toString();
+    return {
+      url: proxyUrl.toString(),
+      origin: proxyUrl.origin,
+      dedicatedOrigin
+    };
+  } catch {
+    return null;
+  }
+}
+function buildMcpAppInnerSandbox(dedicatedOrigin) {
+  return dedicatedOrigin ? `${buildSandboxAttribute()} allow-same-origin` : buildSandboxAttribute();
+}
 function stringifyToolResult(value) {
   if (typeof value === "string") return value;
   try {
@@ -13660,7 +13919,7 @@ function normalizeMcpAppResourceResponse(value, data) {
     rawToolResult
   };
 }
-function isHttpUrl(value) {
+function isHttpUrl2(value) {
   try {
     const url = new URL(value);
     return url.protocol === "http:" || url.protocol === "https:";
@@ -13668,22 +13927,124 @@ function isHttpUrl(value) {
     return false;
   }
 }
-function contentBlocksToText(content) {
-  if (!Array.isArray(content)) return null;
-  const parts = content.map((item) => {
-    if (!isRecord5(item)) return "";
-    if (item.type === "text" && typeof item.text === "string") {
-      return item.text;
+var MCP_APP_MESSAGE_MAX_BINARY_BYTES = 25 * 1024 * 1024;
+function normalizeMcpMimeType(value, fallback) {
+  const mimeType = typeof value === "string" ? value.trim() : fallback;
+  return mimeType && /^[a-z0-9][a-z0-9!#$&^_.+-]*\/[a-z0-9][a-z0-9!#$&^_.+-]*$/i.test(mimeType) ? mimeType.toLowerCase() : null;
+}
+function normalizeMcpBase64(value) {
+  if (typeof value !== "string") return null;
+  const data = value.replace(/\s/g, "");
+  if (!data || data.length % 4 !== 0 || !/^[A-Za-z0-9+/]*={0,2}$/.test(data)) {
+    return null;
+  }
+  return data;
+}
+function decodedBase64Bytes(data) {
+  const padding = data.endsWith("==") ? 2 : data.endsWith("=") ? 1 : 0;
+  return data.length / 4 * 3 - padding;
+}
+function mcpMessageFile(data, mimeType, name) {
+  return {
+    name,
+    originalName: name,
+    mimeType,
+    fileUrl: `data:${mimeType};base64,${data}`
+  };
+}
+function resourceLabel(resource) {
+  const details = {
+    uri: readString3(resource.uri),
+    mimeType: readString3(resource.mimeType)
+  };
+  return `[Resource ${stringifyToolResult(details)}]`;
+}
+function resourceLinkLabel(resourceLink) {
+  const details = {
+    uri: readString3(resourceLink.uri),
+    name: readString3(resourceLink.name),
+    description: readString3(resourceLink.description),
+    mimeType: readString3(resourceLink.mimeType),
+    size: typeof resourceLink.size === "number" ? resourceLink.size : void 0
+  };
+  return `[Resource link ${stringifyToolResult(details)}]`;
+}
+function contentBlocksToChatInput(content) {
+  if (!Array.isArray(content)) {
+    throw new Error("ui/message content must be an array");
+  }
+  const text = [];
+  const files = [];
+  let binaryBytes = 0;
+  content.forEach((item, index) => {
+    if (!isRecord5(item) || typeof item.type !== "string") {
+      throw new Error(`ui/message content block ${index + 1} is invalid`);
     }
-    if (item.type === "resource_link" && typeof item.uri === "string") {
-      return item.uri;
+    if (item.type === "text") {
+      if (typeof item.text !== "string") {
+        throw new Error(`ui/message text block ${index + 1} is invalid`);
+      }
+      if (item.text.length) text.push(item.text);
+      return;
     }
     if (item.type === "image" || item.type === "audio") {
-      return `[${item.type}]`;
+      const mimeType = normalizeMcpMimeType(item.mimeType);
+      const data = normalizeMcpBase64(item.data);
+      if (!mimeType || !data || !mimeType.startsWith(`${item.type}/`)) {
+        throw new Error(
+          `ui/message ${item.type} block ${index + 1} is invalid`
+        );
+      }
+      binaryBytes += decodedBase64Bytes(data);
+      files.push(
+        mcpMessageFile(data, mimeType, `mcp-app-${item.type}-${index + 1}`)
+      );
+      return;
     }
-    return stringifyToolResult(item);
-  }).map((part) => part.trim()).filter(Boolean);
-  return parts.length ? parts.join("\n\n") : null;
+    if (item.type === "resource") {
+      const resource = readRecord(item.resource);
+      if (!resource || typeof resource.uri !== "string") {
+        throw new Error(`ui/message resource block ${index + 1} is invalid`);
+      }
+      const label = resourceLabel(resource);
+      if (typeof resource.text === "string") {
+        text.push(`${label}
+${resource.text}`);
+        return;
+      }
+      const data = normalizeMcpBase64(resource.blob);
+      const mimeType = normalizeMcpMimeType(
+        resource.mimeType,
+        "application/octet-stream"
+      );
+      if (!data || !mimeType) {
+        throw new Error(`ui/message resource block ${index + 1} is invalid`);
+      }
+      binaryBytes += decodedBase64Bytes(data);
+      text.push(label);
+      files.push(
+        mcpMessageFile(data, mimeType, `mcp-app-resource-${index + 1}`)
+      );
+      return;
+    }
+    if (item.type === "resource_link" && typeof item.uri === "string") {
+      text.push(resourceLinkLabel(item));
+      return;
+    }
+    throw new Error(
+      `ui/message content block ${index + 1} uses an unsupported type`
+    );
+  });
+  if (binaryBytes > MCP_APP_MESSAGE_MAX_BINARY_BYTES) {
+    throw new Error("ui/message binary content exceeds the 25 MiB limit");
+  }
+  if (!text.length && !files.length) {
+    throw new Error("ui/message content is empty");
+  }
+  return {
+    input: text.join("\n\n"),
+    files
+  };
 }
 function isMcpAppComponentData(data) {
   return isRecord5(data) && data.type === "McpApp" && typeof data.appInstanceId === "string" && typeof data.resourceUri === "string";
@@ -13691,68 +14052,205 @@ function isMcpAppComponentData(data) {
 function McpAppMessage({
   data,
   messageId,
-  className
+  className,
+  mcpApps
 }) {
   const { i18n: i18n2 } = useChatkitTranslation();
-  const {
-    apiUrl,
-    authenticatedFetch,
-    isLoading: streamIsLoading,
-    submit
-  } = useStreamContext();
+  const { client, isLoading: streamIsLoading, submit } = useStreamContext();
   const iframeRef = React37.useRef(null);
+  const appWindowRef = React37.useRef(null);
   const containerRef = React37.useRef(null);
   const initializedRef = React37.useRef(false);
   const sentInitialResultRef = React37.useRef(false);
   const modelContextRef = React37.useRef(null);
+  const pendingApprovalRef = React37.useRef(null);
+  const approvalActionRef = React37.useRef(null);
+  const runtimeAppInstanceTokenRef = React37.useRef(
+    data.appInstanceToken
+  );
+  const teardownGenerationRef = React37.useRef(0);
+  const teardownStartedRef = React37.useRef(false);
+  const activeAppInstanceIdRef = React37.useRef(data.appInstanceId);
   const [resource, setResource] = React37.useState(null);
   const [runtimeAppInstanceToken, setRuntimeAppInstanceToken] = React37.useState(data.appInstanceToken);
   const [srcDoc, setSrcDoc] = React37.useState(null);
   const [height, setHeight] = React37.useState(420);
+  const [displayMode, setDisplayMode] = React37.useState("inline");
+  const [pendingApproval, setPendingApproval] = React37.useState(null);
+  const [approvalAction, setApprovalAction] = React37.useState(null);
+  const [approvalError, setApprovalError] = React37.useState(null);
   const [error, setError] = React37.useState(null);
   const [isLoading, setIsLoading] = React37.useState(true);
-  const resourceUrl = React37.useMemo(
-    () => buildXpertApiUrl(
-      apiUrl,
-      buildMcpAppEndpointPath(data, "resource", {
-        messageId
-      })
-    ),
-    [apiUrl, data, messageId]
+  const [isTornDown, setIsTornDown] = React37.useState(false);
+  const sandboxProxy = React37.useMemo(
+    () => resolveMcpAppSandboxProxy(mcpApps, resource?.domain ?? data.domain),
+    [data.domain, mcpApps, resource?.domain]
   );
-  const rpcUrl = React37.useMemo(
-    () => buildXpertApiUrl(
-      apiUrl,
-      buildMcpAppEndpointPath(data, "rpc", {
-        appInstanceToken: runtimeAppInstanceToken,
-        messageId
-      })
-    ),
-    [apiUrl, data, messageId, runtimeAppInstanceToken]
+  React37.useEffect(() => {
+    runtimeAppInstanceTokenRef.current = runtimeAppInstanceToken;
+  }, [runtimeAppInstanceToken]);
+  const bindIframeRef = React37.useCallback(
+    (iframe) => {
+      iframeRef.current = iframe;
+      if (iframe?.contentWindow) {
+        appWindowRef.current = iframe.contentWindow;
+      }
+    },
+    []
+  );
+  const postToApp = React37.useCallback(
+    (message) => {
+      iframeRef.current?.contentWindow?.postMessage(
+        message,
+        sandboxProxy?.origin ?? "*"
+      );
+    },
+    [sandboxProxy?.origin]
   );
-  const postToApp = React37.useCallback((message) => {
-    iframeRef.current?.contentWindow?.postMessage(message, "*");
-  }, []);
   const callHostRpc = React37.useCallback(
     async (request) => {
-      const response = await authenticatedFetch(rpcUrl, {
-        method: "POST",
-        headers: {
-          "content-type": "application/json"
-        },
-        body: JSON.stringify({
+      return client.mcp.apps.rpc(
+        data.appInstanceId,
+        {
           jsonrpc: "2.0",
           id: request.id ?? null,
           method: request.method,
           params: request.params
+        },
+        buildMcpAppReviveQuery(data, {
+          appInstanceToken: runtimeAppInstanceToken,
+          messageId
         })
+      );
+    },
+    [client, data, messageId, runtimeAppInstanceToken]
+  );
+  const clearPendingApproval = React37.useCallback(() => {
+    pendingApprovalRef.current = null;
+    approvalActionRef.current = null;
+    setPendingApproval(null);
+    setApprovalAction(null);
+    setApprovalError(null);
+  }, []);
+  const isSupersededStrictModeTeardown = React37.useCallback(
+    (generation, appInstanceId) => teardownGenerationRef.current !== generation && activeAppInstanceIdRef.current === appInstanceId,
+    []
+  );
+  const processHostRpcResponse = React37.useCallback(
+    (request, response) => {
+      const nextApproval = readMcpAppPendingApproval(response, request);
+      if (nextApproval) {
+        if (pendingApprovalRef.current) {
+          postToApp(
+            jsonRpcError(
+              request.id,
+              "Another MCP App approval request is already pending",
+              -32004
+            )
+          );
+          return;
+        }
+        pendingApprovalRef.current = nextApproval;
+        setPendingApproval(nextApproval);
+        setApprovalError(null);
+        return;
+      }
+      const nextDisplayMode = readMcpAppDisplayMode(response);
+      if (request.method === "ui/request-display-mode" && nextDisplayMode) {
+        setDisplayMode(nextDisplayMode);
+      }
+      if (request.method === "ui/download-file" && isMcpAppRpcSuccess(response)) {
+        try {
+          triggerMcpAppDownloads(request.params);
+        } catch (downloadError) {
+          postToApp(
+            jsonRpcError(request.id, getErrorMessage(downloadError), -32005)
+          );
+          return;
+        }
+      }
+      postToApp(response);
+    },
+    [postToApp]
+  );
+  const dispatchHostRpc = React37.useCallback(
+    async (request) => {
+      try {
+        processHostRpcResponse(request, await callHostRpc(request));
+      } catch (rpcError) {
+        postToApp(jsonRpcError(request.id, getErrorMessage(rpcError)));
+      }
+    },
+    [callHostRpc, postToApp, processHostRpcResponse]
+  );
+  const resolvePendingApproval = React37.useCallback(
+    async (action) => {
+      const approval = pendingApprovalRef.current;
+      if (!approval || approvalActionRef.current) return;
+      if (approval.expiresAt <= Date.now()) {
+        clearPendingApproval();
+        postToApp(
+          jsonRpcError(
+            approval.request.id,
+            "The MCP App approval request expired",
+            -32003
+          )
+        );
+        return;
+      }
+      approvalActionRef.current = action;
+      setApprovalAction(action);
+      setApprovalError(null);
+      const query = buildMcpAppReviveQuery(data, {
+        appInstanceToken: runtimeAppInstanceToken,
+        messageId
       });
-      if (!response.ok) {
-        throw new Error(`MCP App RPC failed with ${response.status}`);
+      try {
+        if (action === "reject") {
+          await client.mcp.apps.reject(
+            data.appInstanceId,
+            approval.approvalId,
+            query
+          );
+          clearPendingApproval();
+          postToApp(
+            jsonRpcError(
+              approval.request.id,
+              "The user rejected the MCP App action",
+              -32002,
+              { approvalId: approval.approvalId, rejected: true }
+            )
+          );
+          return;
+        }
+        await client.mcp.apps.approve(
+          data.appInstanceId,
+          approval.approvalId,
+          query
+        );
+        const retryRequest = withMcpAppApprovalId(
+          approval.request,
+          approval.approvalId
+        );
+        const response = await callHostRpc(retryRequest);
+        clearPendingApproval();
+        processHostRpcResponse(retryRequest, response);
+      } catch (approvalRequestError) {
+        approvalActionRef.current = null;
+        setApprovalAction(null);
+        setApprovalError(getErrorMessage(approvalRequestError));
       }
-      return response.json();
     },
-    [authenticatedFetch, rpcUrl]
+    [
+      callHostRpc,
+      clearPendingApproval,
+      client,
+      data,
+      messageId,
+      postToApp,
+      processHostRpcResponse,
+      runtimeAppInstanceToken
+    ]
   );
   const sendInitialToolNotifications = React37.useCallback(() => {
     if (!initializedRef.current || sentInitialResultRef.current || !resource) {
@@ -13785,28 +14283,35 @@ function McpAppMessage({
     const controller = new AbortController();
     initializedRef.current = false;
     sentInitialResultRef.current = false;
+    pendingApprovalRef.current = null;
+    approvalActionRef.current = null;
     setRuntimeAppInstanceToken(data.appInstanceToken);
+    runtimeAppInstanceTokenRef.current = data.appInstanceToken;
+    teardownStartedRef.current = false;
+    setIsTornDown(false);
+    setDisplayMode("inline");
+    setPendingApproval(null);
+    setApprovalAction(null);
+    setApprovalError(null);
     setIsLoading(true);
     setError(null);
     setResource(null);
     setSrcDoc(null);
     void (async () => {
       try {
-        const response = await authenticatedFetch(resourceUrl, {
-          signal: controller.signal
-        });
-        if (!response.ok) {
-          throw new Error(`MCP App resource failed with ${response.status}`);
-        }
-        const payload = await response.json();
+        const payload = await client.mcp.apps.getResource(
+          data.appInstanceId,
+          buildMcpAppReviveQuery(data, { messageId }),
+          { signal: controller.signal }
+        );
         const normalizedResource = normalizeMcpAppResourceResponse(
           payload,
           data
         );
         setResource(normalizedResource);
-        setRuntimeAppInstanceToken(
-          normalizedResource.appInstanceToken ?? data.appInstanceToken
-        );
+        const nextAppInstanceToken = normalizedResource.appInstanceToken ?? data.appInstanceToken;
+        runtimeAppInstanceTokenRef.current = nextAppInstanceToken;
+        setRuntimeAppInstanceToken(nextAppInstanceToken);
         const hostLocale = normalizeHostLocale(i18n2.language);
         setSrcDoc(
           injectMcpAppTheme(
@@ -13831,26 +14336,131 @@ function McpAppMessage({
       controller.abort();
     };
   }, [
-    authenticatedFetch,
+    client,
     data,
     data.appInstanceId,
     data.appInstanceToken,
     data.csp,
     i18n2.language,
-    resourceUrl
+    messageId
+  ]);
+  React37.useEffect(() => {
+    const generation = ++teardownGenerationRef.current;
+    activeAppInstanceIdRef.current = data.appInstanceId;
+    return () => {
+      const appWindow = appWindowRef.current;
+      const appOrigin = sandboxProxy?.origin ?? "*";
+      const query = buildMcpAppReviveQuery(data, {
+        appInstanceToken: runtimeAppInstanceTokenRef.current,
+        messageId
+      });
+      const approval = pendingApprovalRef.current;
+      queueMicrotask(() => {
+        if (isSupersededStrictModeTeardown(generation, data.appInstanceId)) {
+          return;
+        }
+        if (teardownStartedRef.current) {
+          return;
+        }
+        teardownStartedRef.current = true;
+        try {
+          appWindow?.postMessage(
+            {
+              jsonrpc: "2.0",
+              id: `xpert-teardown-${data.appInstanceId}`,
+              method: "ui/resource-teardown",
+              params: { reason: "host-unmount" }
+            },
+            appOrigin
+          );
+        } catch {
+        }
+        void (async () => {
+          if (approval) {
+            await client.mcp.apps.reject(data.appInstanceId, approval.approvalId, query).catch(() => void 0);
+          }
+          await client.mcp.apps.teardown(data.appInstanceId, query).catch(() => void 0);
+        })();
+      });
+    };
+  }, [
+    client,
+    data,
+    data.appInstanceId,
+    isSupersededStrictModeTeardown,
+    messageId,
+    sandboxProxy?.origin
   ]);
+  React37.useEffect(() => {
+    if (!pendingApproval) return;
+    const remaining = pendingApproval.expiresAt - Date.now();
+    if (remaining <= 0) {
+      clearPendingApproval();
+      postToApp(
+        jsonRpcError(
+          pendingApproval.request.id,
+          "The MCP App approval request expired",
+          -32003
+        )
+      );
+      return;
+    }
+    const timeout = window.setTimeout(() => {
+      if (pendingApprovalRef.current?.approvalId !== pendingApproval.approvalId) {
+        return;
+      }
+      clearPendingApproval();
+      postToApp(
+        jsonRpcError(
+          pendingApproval.request.id,
+          "The MCP App approval request expired",
+          -32003
+        )
+      );
+    }, remaining);
+    return () => window.clearTimeout(timeout);
+  }, [clearPendingApproval, pendingApproval, postToApp]);
   React37.useEffect(() => {
     sendInitialToolNotifications();
   }, [sendInitialToolNotifications]);
+  React37.useEffect(() => {
+    if (!initializedRef.current) return;
+    postToApp({
+      jsonrpc: "2.0",
+      method: "ui/notifications/host-context-changed",
+      params: {
+        displayMode,
+        containerDimensions: getContainerDimensions(containerRef.current)
+      }
+    });
+  }, [displayMode, height, postToApp]);
   React37.useEffect(() => {
     const handleMessage = async (event) => {
       if (event.source !== iframeRef.current?.contentWindow) {
         return;
       }
+      if (sandboxProxy && event.origin !== sandboxProxy.origin) {
+        return;
+      }
       const request = normalizeJsonRpcMessage(event.data);
       if (!request?.method) {
         return;
       }
+      if (request.method === "ui/notifications/sandbox-proxy-ready" && sandboxProxy && srcDoc) {
+        const permissions = resource?.permissions ?? data.permissions;
+        const csp = resource?.csp ?? data.csp;
+        postToApp({
+          jsonrpc: "2.0",
+          method: "ui/notifications/sandbox-resource-ready",
+          params: {
+            html: srcDoc,
+            sandbox: buildMcpAppInnerSandbox(sandboxProxy.dedicatedOrigin),
+            ...csp ? { csp } : {},
+            ...permissions ? { permissions } : {}
+          }
+        });
+        return;
+      }
       if (request.method === "ui/notifications/initialized") {
         initializedRef.current = true;
         sendInitialToolNotifications();
@@ -13863,6 +14473,39 @@ function McpAppMessage({
         }
         return;
       }
+      if (request.method === "ui/notifications/request-teardown") {
+        if (teardownStartedRef.current) {
+          return;
+        }
+        teardownStartedRef.current = true;
+        postToApp({
+          jsonrpc: "2.0",
+          id: `xpert-teardown-${data.appInstanceId}`,
+          method: "ui/resource-teardown",
+          params: { reason: "app-requested" }
+        });
+        const query = buildMcpAppReviveQuery(data, {
+          appInstanceToken: runtimeAppInstanceTokenRef.current,
+          messageId
+        });
+        const approval = pendingApprovalRef.current;
+        try {
+          if (approval) {
+            await client.mcp.apps.reject(
+              data.appInstanceId,
+              approval.approvalId,
+              query
+            );
+          }
+          await client.mcp.apps.teardown(data.appInstanceId, query);
+          clearPendingApproval();
+          setIsTornDown(true);
+        } catch (teardownError) {
+          teardownStartedRef.current = false;
+          setError(getErrorMessage(teardownError));
+        }
+        return;
+      }
       if (request.method === "ui/initialize") {
         initializedRef.current = true;
         const permissions = resource?.permissions ?? data.permissions;
@@ -13886,7 +14529,11 @@ function McpAppMessage({
               openLinks: {},
               logging: {},
               message: {
-                text: {}
+                text: {},
+                image: {},
+                audio: {},
+                resource: {},
+                resourceLink: {}
               },
               updateModelContext: {
                 text: {},
@@ -13895,29 +14542,33 @@ function McpAppMessage({
               sandbox: {
                 ...permissions ? { permissions } : {},
                 ...csp ? { csp } : {}
-              }
+              },
+              downloadFile: {}
             },
             hostContext: {
               toolInfo,
               theme: theme.mode,
+              styles: {
+                variables: theme.cssVariables
+              },
               themeCssVariables: theme.cssVariables,
               locale: hostLocale,
               language: hostLanguage,
               direction: hostDirection,
               timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-              displayMode: "inline",
-              availableDisplayModes: ["inline"],
+              displayMode,
+              availableDisplayModes: ["inline", "fullscreen", "pip"],
               containerDimensions: getContainerDimensions(containerRef.current),
               userAgent: "xpert-chatkit",
               platform: "web",
               deviceCapabilities: {
                 touch: navigator.maxTouchPoints > 0,
-                hover: window.matchMedia("(hover: hover)").matches
+                hover: typeof window.matchMedia === "function" ? window.matchMedia("(hover: hover)").matches : false
               }
             },
             // Legacy compatibility for apps written before the 2026-01-26 result shape.
             capabilities: {
-              displayModes: ["inline"],
+              displayModes: ["inline", "fullscreen", "pip"],
               serverTools: true,
               serverResources: true,
               openLinks: true
@@ -13930,8 +14581,8 @@ function McpAppMessage({
               language: hostLanguage,
               direction: hostDirection,
               timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-              displayMode: "inline",
-              availableDisplayModes: ["inline"],
+              displayMode,
+              availableDisplayModes: ["inline", "fullscreen", "pip"],
               containerDimensions: getContainerDimensions(containerRef.current),
               userAgent: navigator.userAgent,
               platform: navigator.platform
@@ -13943,20 +14594,33 @@ function McpAppMessage({
       }
       if (request.method === "ui/open-link") {
         const href = isRecord5(request.params) && typeof request.params.url === "string" ? request.params.url : isRecord5(request.params) && typeof request.params.href === "string" ? request.params.href : null;
-        if (href && isHttpUrl(href)) {
-          window.open(href, "_blank", "noopener,noreferrer");
+        if (!href || !isHttpUrl2(href)) {
           if (request.id !== void 0) {
-            postToApp(jsonRpcResult(request.id, {}));
+            postToApp(jsonRpcError(request.id, "Invalid URL"));
           }
-        } else if (request.id !== void 0) {
-          postToApp(jsonRpcResult(request.id, { isError: true }));
+          return;
+        }
+        try {
+          const response = await callHostRpc({
+            ...request,
+            params: { url: href }
+          });
+          if (isMcpAppRpcSuccess(response)) {
+            window.open(href, "_blank", "noopener,noreferrer");
+          }
+          postToApp(response);
+        } catch (linkError) {
+          postToApp(jsonRpcError(request.id, getErrorMessage(linkError)));
         }
         return;
       }
       if (request.method === "ui/update-model-context") {
-        modelContextRef.current = request.params;
         try {
-          postToApp(await callHostRpc(request));
+          const response = await callHostRpc(request);
+          if (isMcpAppRpcSuccess(response)) {
+            modelContextRef.current = request.params;
+          }
+          postToApp(response);
         } catch (rpcError) {
           postToApp(jsonRpcError(request.id, getErrorMessage(rpcError)));
         }
@@ -13974,14 +14638,12 @@ function McpAppMessage({
             postToApp(hostResponse);
             return;
           }
-          const inputText = contentBlocksToText(request.params.content);
-          if (!inputText) {
-            throw new Error("ui/message content did not include text");
-          }
+          const messageInput = contentBlocksToChatInput(request.params.content);
           await submit(
             {
               input: {
-                input: inputText
+                input: messageInput.input,
+                ...messageInput.files.length ? { files: messageInput.files } : {}
               }
             },
             {
@@ -14006,11 +14668,7 @@ function McpAppMessage({
       if (request.id === void 0 && request.method.startsWith("ui/")) {
         return;
       }
-      try {
-        postToApp(await callHostRpc(request));
-      } catch (rpcError) {
-        postToApp(jsonRpcError(request.id, getErrorMessage(rpcError)));
-      }
+      await dispatchHostRpc(request);
     };
     window.addEventListener("message", handleMessage);
     return () => {
@@ -14018,19 +14676,20 @@ function McpAppMessage({
     };
   }, [
     callHostRpc,
-    data.appInstanceId,
-    data.csp,
-    data.permissions,
-    data.resourceUri,
-    data.title,
-    data.toolCallId,
-    data.toolName,
+    clearPendingApproval,
+    client,
+    data,
+    dispatchHostRpc,
+    displayMode,
     i18n2.language,
+    messageId,
     postToApp,
     resource?.csp,
     resource?.permissions,
     resource?.toolInfo,
+    sandboxProxy,
     sendInitialToolNotifications,
+    srcDoc,
     streamIsLoading,
     submit
   ]);
@@ -14039,7 +14698,7 @@ function McpAppMessage({
     () => buildIframeAllow(iframePermissions),
     [iframePermissions]
   );
-  const sandbox = React37.useMemo(() => buildSandboxAttribute(), []);
+  const sandbox = sandboxProxy ? "allow-scripts allow-same-origin" : buildSandboxAttribute();
   const prefersBorder = resource?.prefersBorder ?? data.prefersBorder ?? true;
   const displayTitle = (0, import_chatkit_types11.resolveLocalizedText)(resource?.title ?? data.title, i18n2.language) ?? data.toolName;
   const displayDescription = (0, import_chatkit_types11.resolveLocalizedText)(
@@ -14047,56 +14706,212 @@ function McpAppMessage({
     i18n2.language
   );
   const displayIcon = resource?.icon ?? data.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-    "div",
-    {
-      ref: containerRef,
-      className: cn(
-        "overflow-hidden rounded-lg border bg-background shadow-sm",
-        !prefersBorder && "border-transparent shadow-none",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex min-h-10 items-center justify-between gap-3 border-b px-3 py-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
-            displayIcon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-              IconDefinitionRenderer,
-              {
-                icon: displayIcon,
-                size: 18,
-                className: "shrink-0",
-                decorative: true
-              }
-            ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "truncate text-sm font-medium", children: displayTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "truncate text-[11px] text-muted-foreground", children: displayDescription ?? data.resourceUri })
+  const elevatedDisplayMode = displayMode !== "inline";
+  if (isTornDown) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+    displayMode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "fixed inset-0 z-[79] bg-background/80 backdrop-blur-sm"
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "div",
+      {
+        ref: containerRef,
+        "data-display-mode": displayMode,
+        className: cn(
+          "relative flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+          displayMode === "fullscreen" && "fixed inset-4 z-[80] shadow-2xl",
+          displayMode === "pip" && "fixed right-4 bottom-4 z-[80] h-[min(640px,calc(100vh-2rem))] w-[min(480px,calc(100vw-2rem))] shadow-2xl",
+          !prefersBorder && "border-transparent shadow-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex min-h-10 items-center justify-between gap-3 border-b px-3 py-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+              displayIcon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                IconDefinitionRenderer,
+                {
+                  icon: displayIcon,
+                  size: 18,
+                  className: "shrink-0",
+                  decorative: true
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "truncate text-sm font-medium", children: displayTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "truncate text-[11px] text-muted-foreground", children: displayDescription ?? data.resourceUri })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+              displayMode !== "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-xs",
+                  title: i18n2.t("message.mcpApp.fullscreen"),
+                  "aria-label": i18n2.t("message.mcpApp.fullscreen"),
+                  onClick: () => setDisplayMode("fullscreen"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Maximize2, {})
+                }
+              ) : null,
+              displayMode !== "pip" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-xs",
+                  title: i18n2.t("message.mcpApp.pictureInPicture"),
+                  "aria-label": i18n2.t("message.mcpApp.pictureInPicture"),
+                  onClick: () => setDisplayMode("pip"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.PictureInPicture2, {})
+                }
+              ) : null,
+              elevatedDisplayMode ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-xs",
+                  title: i18n2.t("message.mcpApp.returnInline"),
+                  "aria-label": i18n2.t("message.mcpApp.returnInline"),
+                  onClick: () => setDisplayMode("inline"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Minimize2, {})
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Badge, { variant: "secondary", className: "ml-1 rounded-md", children: "MCP App" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Badge, { variant: "secondary", className: "shrink-0 rounded-md", children: "MCP App" })
-        ] }),
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex h-40 items-center justify-center gap-2 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Loader2, { className: "h-4 w-4 animate-spin" }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: i18n2.t("message.mcpApp.loading") })
-        ] }) : error ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex h-40 items-center justify-center gap-2 px-4 text-sm text-destructive", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.AlertCircle, { className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 break-words", children: error })
-        ] }) : srcDoc ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-          "iframe",
-          {
-            ref: iframeRef,
-            title: displayTitle,
-            srcDoc,
-            className: "block w-full bg-background",
-            style: { height },
-            sandbox,
-            allow: iframeAllow,
-            referrerPolicy: "no-referrer"
-          }
-        ) : null
-      ]
-    }
-  );
+          pendingApproval ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "div",
+            {
+              role: "alertdialog",
+              "aria-modal": "true",
+              "aria-labelledby": `mcp-app-approval-${pendingApproval.approvalId}`,
+              className: "absolute inset-0 z-20 flex items-center justify-center bg-background/90 p-4 backdrop-blur-sm",
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex max-h-full w-full max-w-lg flex-col gap-4 overflow-hidden rounded-lg border bg-background p-4 shadow-xl", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-start gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "rounded-full bg-destructive/10 p-2 text-destructive", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.ShieldAlert, { className: "size-5" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                        "h3",
+                        {
+                          id: `mcp-app-approval-${pendingApproval.approvalId}`,
+                          className: "text-sm font-semibold",
+                          children: i18n2.t("message.mcpApp.approvalTitle")
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                        Badge,
+                        {
+                          variant: "outline",
+                          className: "border-destructive/40 text-destructive",
+                          children: pendingApproval.risk
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-1 text-xs text-muted-foreground", children: i18n2.t(
+                      pendingApproval.kind === "download" ? "message.mcpApp.downloadApprovalDescription" : "message.mcpApp.toolApprovalDescription",
+                      { tool: pendingApproval.toolName }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-h-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mb-1 text-xs font-medium", children: i18n2.t("message.mcpApp.requestDetails") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("pre", { className: "max-h-48 overflow-auto rounded-md border bg-muted/40 p-3 text-[11px] leading-5 whitespace-pre-wrap break-all", children: pendingApproval.details })
+                ] }),
+                approvalError ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                  "div",
+                  {
+                    role: "alert",
+                    className: "flex items-start gap-2 text-xs text-destructive",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.AlertCircle, { className: "mt-0.5 size-4 shrink-0" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: approvalError })
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex justify-end gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "outline",
+                      disabled: approvalAction !== null,
+                      onClick: () => void resolvePendingApproval("reject"),
+                      children: [
+                        approvalAction === "reject" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Loader2, { className: "animate-spin" }) : null,
+                        i18n2.t("message.mcpApp.reject")
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                    Button,
+                    {
+                      type: "button",
+                      variant: pendingApproval.risk === "destructive" ? "destructive" : "default",
+                      disabled: approvalAction !== null,
+                      onClick: () => void resolvePendingApproval("approve"),
+                      children: [
+                        approvalAction === "approve" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Loader2, { className: "animate-spin" }) : null,
+                        i18n2.t("message.mcpApp.approve")
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ) : null,
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            "div",
+            {
+              className: cn(
+                "flex h-40 items-center justify-center gap-2 text-sm text-muted-foreground",
+                elevatedDisplayMode && "min-h-0 flex-1"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Loader2, { className: "h-4 w-4 animate-spin" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: i18n2.t("message.mcpApp.loading") })
+              ]
+            }
+          ) : error ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            "div",
+            {
+              className: cn(
+                "flex h-40 items-center justify-center gap-2 px-4 text-sm text-destructive",
+                elevatedDisplayMode && "min-h-0 flex-1"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.AlertCircle, { className: "h-4 w-4 shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "min-w-0 break-words", children: error })
+              ]
+            }
+          ) : srcDoc ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "iframe",
+            {
+              ref: bindIframeRef,
+              title: displayTitle,
+              ...sandboxProxy ? { src: sandboxProxy.url } : { srcDoc },
+              className: cn(
+                "block w-full bg-background",
+                elevatedDisplayMode && "min-h-0 flex-1"
+              ),
+              style: elevatedDisplayMode ? void 0 : { height },
+              sandbox,
+              allow: iframeAllow,
+              referrerPolicy: "no-referrer"
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
 }
 
 // src/components/thread/messages/ai.tsx
@@ -14384,7 +15199,14 @@ function renderContentItem(content, index, message, lookupMessages, options) {
       return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
     }
     if (isMcpAppComponent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(McpAppMessage, { messageId, data: content.data }) }, content.id ?? `mcp-app-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        McpAppMessage,
+        {
+          messageId,
+          data: content.data,
+          mcpApps: options?.mcpApps
+        }
+      ) }, content.id ?? `mcp-app-${index}`);
     }
     if (getComponentMessagePresentation(content, getToolStepData(content)) === "grouped-step") {
       return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -14414,7 +15236,8 @@ function renderContentUnit(unit, message, lookupMessages, hasFollowingItem, opti
       isThreadRunning: options?.isThreadRunning,
       organizationId: options?.organizationId,
       apiUrl: options?.apiUrl,
-      isAgentOutput: options?.isAgentOutput
+      isAgentOutput: options?.isAgentOutput,
+      mcpApps: options?.mcpApps
     });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -14565,7 +15388,8 @@ function AssistantMessage({
   isThreadRunning,
   organizationId,
   apiUrl,
-  pet
+  pet,
+  mcpApps
 }) {
   const { t } = useChatkitTranslation();
   const renderTree = buildAssistantRenderTree(
@@ -14581,7 +15405,8 @@ function AssistantMessage({
   const answerNode = renderContent(message, lookupMessages, {
     isThreadRunning,
     organizationId,
-    apiUrl
+    apiUrl,
+    mcpApps
   });
   const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ReasoningBlock, { reasoning: rootReasoning ?? [] }) : null;
   if (!hasContent && !hasReasoning && !resolvedStreamingStatus) return null;
@@ -20498,7 +21323,8 @@ function Chat({
                                           isThreadRunning: currentThreadIsRunning,
                                           organizationId: stream.organizationId,
                                           apiUrl: stream.apiUrl,
-                                          pet: effectivePet
+                                          pet: effectivePet,
+                                          mcpApps: options?.mcpApps
                                         }
                                       ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
                                         message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(