@icen.ai/ui 0.5.0 → 0.8.1

package/dist/behaviors/ai-chat.d.mts

@@ -0,0 +1,59 @@
+import { AiContent, AiContentPart } from './ai-core.js';
+
+/**
+ * 初始化 root 下的全部 .ai-chat（root 自身匹配时包含自身）。
+ * 幂等；返回销毁函数：移除监听、断开观察器并复位幂等标记（可重新 init）。
+ */
+declare function initAiChat(root?: ParentNode): () => void;
+interface AiStreamHandle {
+    /** textContent 级追加一段文本（不解析 HTML） */
+    append(text: string): void;
+    /** 流正常结束：移除 .is-streaming / aria-busy；reasoning 自动折叠 + 回填耗时 */
+    done(): void;
+    /** 流被取消：同 done，但不折叠 reasoning、不计耗时 */
+    cancel(): void;
+    /** 流失败：终止追加并给宿主挂 .is-error（错误文本展示由消费方/renderAiMessage.setError 负责） */
+    fail(): void;
+}
+/**
+ * 创建流式追加句柄：追加期间宿主挂 .is-streaming（aria-busy=true），
+ * 完成/取消移除。宿主在 .ai-reasoning 内时同步驱动 reasoning 状态：
+ * 流式中根挂 .is-streaming（CSS shimmer），done() 自动折叠并显示耗时。
+ */
+declare function createAiStream(el: HTMLElement): AiStreamHandle;
+interface AiMessageModel {
+    role: 'user' | 'assistant' | 'system' | 'tool';
+    /** 标准化内容：字符串（纯文本）或部件数组（文字/图片/音频/视频/文件/资源链接） */
+    content: AiContent;
+    /** 元信息行（"12:04 · 1.2k tok"） */
+    meta?: string;
+    /** assistant 消息的模型名标签 */
+    model?: string;
+    /** 错误态：消息挂 .ai-msg--error + 错误文本行 */
+    error?: string;
+    /** 初始即流式态（正文末文本 span 挂 .is-streaming） */
+    streaming?: boolean;
+}
+interface AiMessageHandle {
+    /** 消息行元素（.ai-msg） */
+    el: HTMLElement;
+    /** 正文容器（.ai-msg-body）：消费方追加自定义内容的挂载点 */
+    body: HTMLElement;
+    setMeta(meta: string): void;
+    setError(message: string): void;
+    /** 在正文末开一个流式文本节点，返回 createAiStream 句柄 */
+    stream(): AiStreamHandle;
+}
+/** 单个内容部件 → DOM 节点（文本一律 textContent；媒体 src 走 aiContentUrl 归一）。
+ *  导出供 ai-tool 的 IO 区复用（MCP 多模态回执；类名 .ai-msg-* 语义即「消息部件」，全局生效）。
+ *  前置条件：浏览器环境——本函数无 SSR 守卫，SSR 由调用方守卫覆盖（renderAiMessage /
+ *  renderAiToolCall 头部守卫后才会触达此处）。 */
+declare function renderAiContentPart(part: AiContentPart): HTMLElement | undefined;
+/**
+ * DOM API 渲染一条消息（append 到容器末尾）：多角色变体 + 多模态部件 + copy/retry
+ * 动作钮（委托归 initAiChat）+ meta/model 标签 + 错误变体。返回句柄可继续
+ * setMeta / setError / stream()。滚动跟随由 initAiChat 的钉底机制自动处理。
+ */
+declare function renderAiMessage(scrollEl: HTMLElement, model: AiMessageModel): AiMessageHandle;
+
+export { type AiMessageHandle, type AiMessageModel, type AiStreamHandle, createAiStream, initAiChat, renderAiContentPart, renderAiMessage };

package/dist/behaviors/ai-chat.mjs

@@ -0,0 +1,580 @@
+// src/behaviors/ai-core.ts
+var svg = (body) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+var ICON_TERMINAL = svg('<path d="m4 17 6-6-6-6"/><path d="M12 19h8"/>');
+var ICON_FILE = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>'
+);
+var ICON_FILE_PEN = svg(
+  '<path d="M12.5 22H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8l5 5v3.5"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M19 6.5 16.5 4"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/>'
+);
+var ICON_FILE_PLUS = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 15h6"/><path d="M12 12v6"/>'
+);
+var ICON_TRASH = svg(
+  '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M10 11v6"/><path d="M14 11v6"/>'
+);
+var ICON_SEARCH = svg('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>');
+var ICON_FOLDER_SEARCH = svg(
+  '<path d="M11 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v4"/><circle cx="17" cy="17" r="3"/><path d="m21 21-1.9-1.9"/>'
+);
+var ICON_SCAN_SEARCH = svg(
+  '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/>'
+);
+var ICON_GLOBE = svg(
+  '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>'
+);
+var ICON_DOWNLOAD = svg(
+  '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/>'
+);
+var ICON_BLOCKS = svg(
+  '<rect width="7" height="7" x="4" y="4" rx="1"/><rect width="7" height="7" x="13" y="4" rx="1"/><rect width="7" height="7" x="4" y="13" rx="1"/><rect width="7" height="7" x="13" y="13" rx="1"/>'
+);
+var ICON_ZAP = svg(
+  '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>'
+);
+var ICON_LIST = svg(
+  '<path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M3 6h.01"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M8 6h13"/>'
+);
+var ICON_LIST_CHECKS = svg(
+  '<path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>'
+);
+var ICON_BOT = svg(
+  '<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>'
+);
+var ICON_CHART = svg(
+  '<path d="M3 3v18h18"/><path d="M7 15l4-6 3 4 5-8"/>'
+);
+var ICON_FILE_TEXT = svg(
+  '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>'
+);
+function isObj(v) {
+  return typeof v === "object" && v !== null;
+}
+function pickStr(input, keys) {
+  if (!isObj(input)) return void 0;
+  for (const k of keys) {
+    const v = input[k];
+    if (typeof v === "string" && v) return v;
+  }
+  return void 0;
+}
+function pickNum(src, keys) {
+  if (!isObj(src)) return void 0;
+  for (const k of keys) {
+    const v = src[k];
+    if (typeof v === "number" && Number.isFinite(v)) return v;
+  }
+  return void 0;
+}
+function firstLine(s, max = 80) {
+  const line = s.split("\n", 1)[0]?.trim() ?? "";
+  return line.length > max ? `${line.slice(0, max)}\u2026` : line;
+}
+function filePathOf(input) {
+  return pickStr(input, ["file_path", "path", "file", "filename"]);
+}
+var summarizePath = (input) => filePathOf(input);
+function summarizeRead(input) {
+  const p = filePathOf(input);
+  if (!p) return void 0;
+  const offset = pickNum(input, ["offset", "start_line"]);
+  if (offset == null) return p;
+  const limit = pickNum(input, ["limit", "end_line"]);
+  return limit != null ? `${p}:${offset}-${offset + limit}` : `${p}:${offset}`;
+}
+function summarizeShell(input) {
+  const cmd = typeof input === "string" ? input : pickStr(input, ["command", "cmd", "script"]);
+  return cmd ? firstLine(cmd) : void 0;
+}
+function summarizeGrep(input) {
+  const pattern = pickStr(input, ["pattern", "regex", "query"]);
+  const p = filePathOf(input);
+  if (pattern) return p ? `${firstLine(pattern, 40)} \xB7 ${p}` : firstLine(pattern);
+  return p;
+}
+var sum = (fn) => {
+  return (input) => fn(input) ?? "";
+};
+var BUILTIN_KINDS = {
+  shell: { label: "\u547D\u4EE4", icon: ICON_TERMINAL, tint: "accent", summarize: sum(summarizeShell) },
+  read: { label: "\u8BFB\u53D6", icon: ICON_FILE, tint: "info", summarize: sum(summarizeRead) },
+  edit: { label: "\u7F16\u8F91", icon: ICON_FILE_PEN, tint: "warning", summarize: sum(summarizePath) },
+  write: { label: "\u5199\u5165", icon: ICON_FILE_PLUS, tint: "warning", summarize: sum(summarizePath) },
+  rm: { label: "\u5220\u9664", icon: ICON_TRASH, tint: "error", summarize: sum(summarizePath) },
+  grep: { label: "\u641C\u7D22", icon: ICON_SEARCH, tint: "info", summarize: sum(summarizeGrep) },
+  glob: { label: "\u5339\u914D", icon: ICON_FOLDER_SEARCH, tint: "info", summarize: sum((i) => pickStr(i, ["pattern", "glob", "path"])) },
+  browser: { label: "\u6D4F\u89C8", icon: ICON_GLOBE, tint: "accent", summarize: sum((i) => pickStr(i, ["url", "uri", "target"])) },
+  search: { label: "\u68C0\u7D22", icon: ICON_SCAN_SEARCH, tint: "accent", summarize: sum((i) => pickStr(i, ["query", "q", "pattern"])) },
+  fetch: { label: "\u8BF7\u6C42", icon: ICON_DOWNLOAD, tint: "info", summarize: sum((i) => pickStr(i, ["url", "uri", "endpoint"])) },
+  mcp: { label: "MCP", icon: ICON_BLOCKS, tint: "muted", summarize: sum((i) => pickStr(i, ["tool", "method", "name"])) },
+  skill: { label: "\u6280\u80FD", icon: ICON_ZAP, tint: "accent", summarize: sum((i) => pickStr(i, ["skill", "name", "command"])) },
+  todo: {
+    label: "\u5F85\u529E",
+    icon: ICON_LIST,
+    tint: "info",
+    summarize: sum((input) => {
+      const items = input && typeof input === "object" && Array.isArray(input.items) ? input.items : Array.isArray(input) ? input : [];
+      const done = items.filter((it) => it?.status === "done").length;
+      return items.length > 0 ? `${done}/${items.length} \u5B8C\u6210` : "";
+    })
+  },
+  plan: { label: "\u8BA1\u5212", icon: ICON_LIST_CHECKS, tint: "info" },
+  subagent: { label: "\u5B50\u4EE3\u7406", icon: ICON_BOT, tint: "accent", summarize: sum((i) => pickStr(i, ["task", "description", "prompt", "message", "subagent_type"])) },
+  note: { label: "\u7B14\u8BB0", icon: ICON_FILE_TEXT, tint: "muted" },
+  chart: { label: "\u56FE\u8868", icon: ICON_CHART, tint: "info", summarize: sum((i) => pickStr(i, ["title", "name"])) }
+};
+var kindRegistry = new Map(Object.entries(BUILTIN_KINDS));
+function trim1(v) {
+  const s = (Math.round(v * 10) / 10).toFixed(1);
+  return s.endsWith(".0") ? s.slice(0, -2) : s;
+}
+function formatDuration(ms) {
+  if (!Number.isFinite(ms) || ms <= 0) return "0ms";
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  if (ms < 6e4) return `${trim1(ms / 1e3)}s`;
+  const m = Math.floor(ms / 6e4);
+  const s = Math.round(ms % 6e4 / 1e3);
+  if (ms < 36e5) return s > 0 ? `${m}m${s}s` : `${m}m`;
+  const h2 = Math.floor(ms / 36e5);
+  const rm = Math.round(ms % 36e5 / 6e4);
+  return rm > 0 ? `${h2}h${rm}m` : `${h2}h`;
+}
+function aiContentUrl(part) {
+  if (part.type === "text" || part.type === "resource-link") return void 0;
+  if (typeof part.url === "string" && part.url) return part.url;
+  if (typeof part.data === "string" && part.data && typeof part.mimeType === "string") {
+    return `data:${part.mimeType};base64,${part.data}`;
+  }
+  return void 0;
+}
+function h(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function svgIcon(svg2) {
+  if (typeof document === "undefined" || typeof DOMParser === "undefined") return null;
+  let parsed;
+  try {
+    parsed = new DOMParser().parseFromString(svg2, "image/svg+xml");
+  } catch {
+    return null;
+  }
+  const root = parsed.documentElement;
+  if (!root || root.tagName.toLowerCase() !== "svg" || parsed.querySelector("parsererror")) {
+    return null;
+  }
+  const sanitize = (el) => {
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      if (name.startsWith("on")) el.removeAttribute(attr.name);
+      if ((name === "href" || name === "xlink:href") && attr.value.trim().toLowerCase().startsWith("javascript:")) {
+        el.removeAttribute(attr.name);
+      }
+    }
+    for (const child of Array.from(el.children)) {
+      const tag = child.tagName.toLowerCase();
+      if (tag === "script" || tag === "foreignobject") {
+        child.remove();
+        continue;
+      }
+      sanitize(child);
+    }
+  };
+  sanitize(root);
+  return document.importNode(root, true);
+}
+
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
+// src/behaviors/ai-chat.ts
+var ICON_COPY = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>';
+var ICON_RETRY = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>';
+function isBrowser() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function emit(target, name, detail) {
+  emitIcen(target, name, detail);
+}
+function fallbackCopy(text) {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  try {
+    document.execCommand("copy");
+  } catch {
+  }
+  ta.remove();
+}
+function copyText(text) {
+  if (typeof navigator !== "undefined" && navigator.clipboard) {
+    navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
+  } else {
+    fallbackCopy(text);
+  }
+}
+function setupChat(chat) {
+  const el = chat;
+  if (el.__icenAiChatInit) return void 0;
+  el.__icenAiChatInit = true;
+  const scrollEl = chat.querySelector(".ai-chat-scroll");
+  let jump = chat.querySelector(".ai-chat-jump") ?? null;
+  let pinned = true;
+  let unread = 0;
+  let lastMsgCount = 0;
+  let suppressUntil = 0;
+  let rafPending = false;
+  const NEAR_BOTTOM_PX = 32;
+  const isAtBottom = () => scrollEl ? scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < NEAR_BOTTOM_PX : true;
+  const updateJump = () => {
+    if (!jump) return;
+    if (pinned) {
+      jump.hidden = true;
+      return;
+    }
+    jump.textContent = unread > 0 ? `\u56DE\u5230\u5E95\u90E8 \xB7 ${unread} \u6761\u65B0\u6D88\u606F` : "\u56DE\u5230\u5E95\u90E8";
+    jump.hidden = false;
+  };
+  const scrollToBottom = (smooth) => {
+    if (!scrollEl) return;
+    const behavior = smooth && !prefersReducedMotion() ? "smooth" : "auto";
+    suppressUntil = Date.now() + (behavior === "smooth" ? 600 : 100);
+    scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior });
+  };
+  const onContentChange = () => {
+    rafPending = false;
+    if (!scrollEl) return;
+    if (pinned) {
+      scrollToBottom(false);
+    } else {
+      const count = scrollEl.querySelectorAll(".ai-msg").length;
+      if (count >= lastMsgCount) {
+        unread += count - lastMsgCount;
+      } else {
+        unread = 0;
+      }
+      lastMsgCount = count;
+      updateJump();
+    }
+  };
+  const scheduleContentCheck = () => {
+    if (rafPending) return;
+    rafPending = true;
+    window.requestAnimationFrame(onContentChange);
+  };
+  const onScroll = () => {
+    if (Date.now() < suppressUntil) return;
+    const atBottom = isAtBottom();
+    if (atBottom && !pinned) {
+      pinned = true;
+      unread = 0;
+      updateJump();
+    } else if (!atBottom && pinned) {
+      pinned = false;
+      updateJump();
+    }
+  };
+  const onJumpClick = () => {
+    pinned = true;
+    unread = 0;
+    updateJump();
+    scrollToBottom(true);
+  };
+  const onClick = (e) => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    const actionBtn = target.closest("[data-ai-msg-action]");
+    if (actionBtn) {
+      const msg = actionBtn.closest(".ai-msg");
+      if (!msg) return;
+      const action = actionBtn.dataset.aiMsgAction;
+      if (action === "copy") {
+        const bodyEl = msg.querySelector(".ai-msg-body");
+        const clone = bodyEl?.cloneNode(true);
+        if (clone instanceof HTMLElement) {
+          clone.querySelectorAll(".ai-msg-model").forEach((chip) => chip.remove());
+          copyText(clone.textContent ?? "");
+        } else {
+          copyText("");
+        }
+        emit(msg, "icen:ai-copy", { el: msg });
+      } else if (action === "retry") {
+        emit(msg, "icen:ai-retry", { el: msg });
+      }
+      return;
+    }
+    const head = target.closest(".ai-reasoning-head");
+    if (head) {
+      const reasoning = head.closest(".ai-reasoning");
+      if (!reasoning) return;
+      const body = reasoning.querySelector(".ai-reasoning-body");
+      const open = head.getAttribute("aria-expanded") !== "true";
+      head.setAttribute("aria-expanded", String(open));
+      reasoning.classList.toggle("is-open", open);
+      if (body) body.hidden = !open;
+      emit(reasoning, "icen:ai-toggle", { el: reasoning, open });
+    }
+  };
+  const disposers = [];
+  let resizeObs;
+  let mutationObs;
+  if (scrollEl) {
+    if (!jump) {
+      jump = document.createElement("button");
+      jump.type = "button";
+      jump.className = "ai-chat-jump";
+      jump.hidden = true;
+      chat.appendChild(jump);
+    }
+    lastMsgCount = scrollEl.querySelectorAll(".ai-msg").length;
+    scrollEl.addEventListener("scroll", onScroll, { passive: true });
+    jump.addEventListener("click", onJumpClick);
+    const jumpBtn = jump;
+    disposers.push(() => {
+      scrollEl.removeEventListener("scroll", onScroll);
+      jumpBtn.removeEventListener("click", onJumpClick);
+    });
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObs = new ResizeObserver(scheduleContentCheck);
+      resizeObs.observe(scrollEl);
+      for (const child of Array.from(scrollEl.children)) resizeObs.observe(child);
+      disposers.push(() => resizeObs?.disconnect());
+    }
+    if (typeof MutationObserver !== "undefined") {
+      mutationObs = new MutationObserver((records) => {
+        if (resizeObs) {
+          for (const rec of records) {
+            for (const node of Array.from(rec.addedNodes)) {
+              if (node instanceof Element) resizeObs.observe(node);
+            }
+          }
+        }
+        scheduleContentCheck();
+      });
+      mutationObs.observe(scrollEl, { childList: true, subtree: true, characterData: true });
+      disposers.push(() => mutationObs?.disconnect());
+    }
+    scrollToBottom(false);
+  }
+  chat.addEventListener("click", onClick);
+  disposers.push(() => chat.removeEventListener("click", onClick));
+  return () => {
+    for (const dispose of disposers) dispose();
+    el.__icenAiChatInit = false;
+  };
+}
+function initAiChat(root) {
+  const cleanups = [];
+  if (isBrowser()) {
+    const scope = root ?? document;
+    const candidates = [];
+    if (scope instanceof Element && scope.matches(".ai-chat")) {
+      candidates.push(scope);
+    }
+    candidates.push(...Array.from(scope.querySelectorAll(".ai-chat")));
+    for (const chat of candidates) {
+      const cleanup = setupChat(chat);
+      if (cleanup) cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
+}
+function createAiStream(el) {
+  const reasoning = el.closest(".ai-reasoning");
+  const startedAt = Date.now();
+  let state = "streaming";
+  el.classList.add("is-streaming");
+  el.setAttribute("aria-busy", "true");
+  reasoning?.classList.add("is-streaming");
+  const settle = (finished) => {
+    if (state !== "streaming") return;
+    state = finished ? "done" : "cancelled";
+    el.classList.remove("is-streaming");
+    el.removeAttribute("aria-busy");
+    if (!reasoning) return;
+    reasoning.classList.remove("is-streaming");
+    if (!finished) return;
+    const head = reasoning.querySelector(".ai-reasoning-head");
+    const body = reasoning.querySelector(".ai-reasoning-body");
+    head?.setAttribute("aria-expanded", "false");
+    if (body) body.hidden = true;
+    const time = reasoning.querySelector(".ai-reasoning-time");
+    if (time) time.textContent = formatDuration(Date.now() - startedAt);
+  };
+  return {
+    append(text) {
+      if (state !== "streaming" || !text) return;
+      el.textContent += text;
+    },
+    done() {
+      settle(true);
+    },
+    cancel() {
+      settle(false);
+    },
+    fail() {
+      if (state !== "streaming") return;
+      state = "error";
+      el.classList.remove("is-streaming");
+      el.removeAttribute("aria-busy");
+      el.classList.add("is-error");
+      reasoning?.classList.remove("is-streaming");
+    }
+  };
+}
+var ROLE_AVATAR = {
+  user: "\u6211",
+  assistant: "AI",
+  system: "\u7CFB",
+  tool: "\u5DE5"
+};
+function safeHref(uri) {
+  const s = uri.trim().toLowerCase();
+  if (s.startsWith("javascript:") || s.startsWith("data:text/html")) return void 0;
+  return uri;
+}
+function renderAiContentPart(part) {
+  if (part.type === "text") {
+    const span = h("span", "ai-msg-text");
+    span.textContent = part.text;
+    if (part.state === "streaming") span.classList.add("is-streaming");
+    return span;
+  }
+  if (part.type === "image") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const img = document.createElement("img");
+    img.className = "ai-msg-media ai-msg-media--image";
+    img.alt = part.alt ?? "";
+    img.setAttribute("loading", "lazy");
+    img.setAttribute("src", src);
+    return img;
+  }
+  if (part.type === "audio") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const audio = document.createElement("audio");
+    audio.className = "ai-msg-media ai-msg-media--audio";
+    audio.controls = true;
+    audio.setAttribute("src", src);
+    return audio;
+  }
+  if (part.type === "video") {
+    const src = aiContentUrl(part);
+    if (!src) return void 0;
+    const video = document.createElement("video");
+    video.className = "ai-msg-media ai-msg-media--video";
+    video.controls = true;
+    video.setAttribute("playsinline", "");
+    video.setAttribute("src", src);
+    return video;
+  }
+  if (part.type === "file") {
+    const chip = h("span", "ai-msg-file");
+    chip.appendChild(h("span", "ai-msg-file-name", part.filename ?? "\u6587\u4EF6"));
+    const href2 = part.url ? safeHref(part.url) : void 0;
+    if (href2 && /^(https?:|data:)/i.test(href2)) {
+      const a2 = document.createElement("a");
+      a2.className = "ai-msg-file-link";
+      a2.href = href2;
+      a2.download = part.filename ?? "";
+      a2.textContent = "\u4E0B\u8F7D";
+      chip.appendChild(a2);
+    }
+    return chip;
+  }
+  const a = document.createElement("a");
+  a.className = "ai-msg-link";
+  const href = safeHref(part.uri);
+  if (href) a.href = href;
+  a.textContent = part.name ?? part.uri;
+  a.title = part.uri;
+  return a;
+}
+function renderAiMessage(scrollEl, model) {
+  if (typeof document === "undefined") {
+    return {
+      el: scrollEl,
+      body: scrollEl,
+      setMeta: () => void 0,
+      setError: () => void 0,
+      stream: () => createAiStream(scrollEl)
+    };
+  }
+  const row = h("div", `ai-msg ai-msg--${model.role}`);
+  const avatar = h("span", "ai-msg-avatar", ROLE_AVATAR[model.role] ?? "");
+  const body = h("div", "ai-msg-body");
+  row.appendChild(avatar);
+  row.appendChild(body);
+  const parts = typeof model.content === "string" ? [{ type: "text", text: model.content }] : model.content;
+  for (const part of parts) {
+    const node = renderAiContentPart(part);
+    if (node) body.appendChild(node);
+  }
+  if (model.model) body.appendChild(h("span", "ai-msg-model", model.model));
+  const metaEl = h("div", "ai-msg-meta");
+  if (model.meta != null) metaEl.textContent = model.meta;
+  row.appendChild(metaEl);
+  const actions = h("div", "ai-msg-actions");
+  const copyBtn = h("button", "ai-msg-action");
+  copyBtn.type = "button";
+  copyBtn.setAttribute("data-ai-msg-action", "copy");
+  copyBtn.setAttribute("aria-label", "\u590D\u5236");
+  const copyIcon = svgIcon(ICON_COPY);
+  if (copyIcon) copyBtn.appendChild(copyIcon);
+  const retryBtn = h("button", "ai-msg-action");
+  retryBtn.type = "button";
+  retryBtn.setAttribute("data-ai-msg-action", "retry");
+  retryBtn.setAttribute("aria-label", "\u91CD\u8BD5");
+  const retryIcon = svgIcon(ICON_RETRY);
+  if (retryIcon) retryBtn.appendChild(retryIcon);
+  actions.append(copyBtn, retryBtn);
+  row.appendChild(actions);
+  const handle = {
+    el: row,
+    body,
+    setMeta(meta) {
+      metaEl.textContent = meta;
+    },
+    setError(message) {
+      row.classList.add("ai-msg--error");
+      let errEl = row.querySelector(".ai-msg-error-text");
+      if (!errEl) {
+        errEl = h("div", "ai-msg-error-text");
+        body.appendChild(errEl);
+      }
+      errEl.textContent = message;
+    },
+    stream() {
+      const span = h("span", "ai-msg-stream-text");
+      body.appendChild(span);
+      return createAiStream(span);
+    }
+  };
+  if (model.error != null) handle.setError(model.error);
+  if (model.streaming) row.classList.add("is-streaming");
+  scrollEl.appendChild(row);
+  return handle;
+}
+export {
+  createAiStream,
+  initAiChat,
+  renderAiContentPart,
+  renderAiMessage
+};