@lvce-editor/chat-view 2.9.0 → 2.10.0

package/dist/chatViewWorkerMain.js

@@ -1121,6 +1121,9 @@ const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
 const activateByEvent$1 = (event, assetDir, platform) => {
   return invoke('ExtensionHostManagement.activateByEvent', event, assetDir, platform);
 };
+const getWorkspacePath = () => {
+  return invoke('Workspace.getPath');
+};
 const getPreference = async key => {
   return await invoke('Preferences.get', key);
 };
@@ -1543,8 +1546,56 @@ const create = (uid, x, y, width, height, platform, assetDir) => {
   set(uid, state, state);
 };
 
+const parseRenderHtmlArguments = rawArguments => {
+  try {
+    const parsed = JSON.parse(rawArguments);
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return undefined;
+    }
+    const html = typeof Reflect.get(parsed, 'html') === 'string' ? String(Reflect.get(parsed, 'html')) : '';
+    if (!html) {
+      return undefined;
+    }
+    const css = typeof Reflect.get(parsed, 'css') === 'string' ? String(Reflect.get(parsed, 'css')) : '';
+    const title = typeof Reflect.get(parsed, 'title') === 'string' ? String(Reflect.get(parsed, 'title')) : 'visual preview';
+    return {
+      css,
+      html,
+      title
+    };
+  } catch {
+    return undefined;
+  }
+};
+
+const getRenderHtmlCss = (sessions, selectedSessionId) => {
+  const selectedSession = sessions.find(session => session.id === selectedSessionId);
+  if (!selectedSession) {
+    return '';
+  }
+  const cssRules = new Set();
+  for (const message of selectedSession.messages) {
+    if (message.role !== 'assistant' || !message.toolCalls) {
+      continue;
+    }
+    for (const toolCall of message.toolCalls) {
+      if (toolCall.name !== 'render_html') {
+        continue;
+      }
+      const parsed = parseRenderHtmlArguments(toolCall.arguments);
+      if (!parsed || !parsed.css.trim()) {
+        continue;
+      }
+      cssRules.add(parsed.css);
+    }
+  }
+  return [...cssRules].join('\n\n');
+};
+
 const isEqual$1 = (oldState, newState) => {
-  return oldState.initial === newState.initial && oldState.chatMessageFontFamily === newState.chatMessageFontFamily && oldState.chatMessageFontSize === newState.chatMessageFontSize && oldState.chatMessageLineHeight === newState.chatMessageLineHeight && oldState.composerHeight === newState.composerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize && oldState.listItemHeight === newState.listItemHeight;
+  const oldRenderHtmlCss = getRenderHtmlCss(oldState.sessions, oldState.selectedSessionId);
+  const newRenderHtmlCss = getRenderHtmlCss(newState.sessions, newState.selectedSessionId);
+  return oldState.initial === newState.initial && oldState.chatMessageFontFamily === newState.chatMessageFontFamily && oldState.chatMessageFontSize === newState.chatMessageFontSize && oldState.chatMessageLineHeight === newState.chatMessageLineHeight && oldState.composerHeight === newState.composerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize && oldState.listItemHeight === newState.listItemHeight && oldRenderHtmlCss === newRenderHtmlCss;
 };
 
 const diffFocus = (oldState, newState) => {
@@ -1602,17 +1653,57 @@ const diff2 = uid => {
 
 const Button$2 = 'button';
 
+const Audio = 0;
 const Button$1 = 1;
+const Col = 2;
+const ColGroup = 3;
 const Div = 4;
+const H1 = 5;
 const Input = 6;
 const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
 const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const I = 16;
+const Img = 17;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
 const Li = 48;
 const Ol = 49;
 const P = 50;
+const Pre = 51;
+const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Tfoot = 59;
+const Ul = 60;
 const TextArea = 62;
 const Select$1 = 63;
 const Option$1 = 64;
+const Code = 65;
+const Label$1 = 66;
+const Dt = 67;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
 const Reference = 100;
 
 const Enter = 3;
@@ -3054,6 +3145,43 @@ const getMockOpenRouterAssistantText = async (messages, modelId, openRouterApiBa
   }
 };
 
+const executeGetWorkspaceUriTool = async (_args, _options) => {
+  try {
+    const workspaceUri = await getWorkspacePath();
+    return JSON.stringify({
+      workspaceUri
+    });
+  } catch (error) {
+    return JSON.stringify({
+      error: String(error)
+    });
+  }
+};
+
+const isAbsoluteUri$1 = value => {
+  return /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(value);
+};
+const executeListFilesTool = async (args, _options) => {
+  const uri = typeof args.uri === 'string' ? args.uri : '';
+  if (!uri || !isAbsoluteUri$1(uri)) {
+    return JSON.stringify({
+      error: 'Invalid argument: uri must be an absolute URI.'
+    });
+  }
+  try {
+    const entries = await invoke('FileSystem.readDirWithFileTypes', uri);
+    return JSON.stringify({
+      entries,
+      uri
+    });
+  } catch (error) {
+    return JSON.stringify({
+      error: String(error),
+      uri
+    });
+  }
+};
+
 const isPathTraversalAttempt = path => {
   if (!path) {
     return false;
@@ -3079,18 +3207,41 @@ const normalizeRelativePath = path => {
   return segments.join('/');
 };
 
-const executeListFilesTool = async (args, _options) => {
-  const folderPath = typeof args.path === 'string' && args.path ? args.path : '.';
-  if (isPathTraversalAttempt(folderPath)) {
+const isAbsoluteUri = value => {
+  return /^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(value);
+};
+const executeReadFileTool = async (args, _options) => {
+  const uri = typeof args.uri === 'string' ? args.uri : '';
+  if (uri) {
+    if (!isAbsoluteUri(uri)) {
+      return JSON.stringify({
+        error: 'Invalid argument: uri must be an absolute URI.'
+      });
+    }
+    try {
+      const content = await readFile(uri);
+      return JSON.stringify({
+        content,
+        uri
+      });
+    } catch (error) {
+      return JSON.stringify({
+        error: String(error),
+        uri
+      });
+    }
+  }
+  const filePath = typeof args.path === 'string' ? args.path : '';
+  if (!filePath || isPathTraversalAttempt(filePath)) {
     return JSON.stringify({
       error: 'Access denied: path must be relative and stay within the open workspace folder.'
     });
   }
-  const normalizedPath = normalizeRelativePath(folderPath);
+  const normalizedPath = normalizeRelativePath(filePath);
   try {
-    const entries = await invoke('FileSystem.readDirWithFileTypes', normalizedPath);
+    const content = await readFile(normalizedPath);
     return JSON.stringify({
-      entries,
+      content,
       path: normalizedPath
     });
   } catch (error) {
@@ -3101,26 +3252,27 @@ const executeListFilesTool = async (args, _options) => {
   }
 };
 
-const executeReadFileTool = async (args, _options) => {
-  const filePath = typeof args.path === 'string' ? args.path : '';
-  if (!filePath || isPathTraversalAttempt(filePath)) {
+const maxPayloadLength = 40_000;
+const executeRenderHtmlTool = async (args, _options) => {
+  const html = typeof args.html === 'string' ? args.html : '';
+  const css = typeof args.css === 'string' ? args.css : '';
+  const title = typeof args.title === 'string' ? args.title : '';
+  if (!html) {
     return JSON.stringify({
-      error: 'Access denied: path must be relative and stay within the open workspace folder.'
+      error: 'Missing required argument: html'
     });
   }
-  const normalizedPath = normalizeRelativePath(filePath);
-  try {
-    const content = await readFile(normalizedPath);
-    return JSON.stringify({
-      content,
-      path: normalizedPath
-    });
-  } catch (error) {
+  if (html.length > maxPayloadLength || css.length > maxPayloadLength) {
     return JSON.stringify({
-      error: String(error),
-      path: normalizedPath
+      error: 'Payload too large: keep html/css under 40,000 characters each.'
     });
   }
+  return JSON.stringify({
+    css,
+    html,
+    ok: true,
+    title
+  });
 };
 
 const OnFileSystem = 'onFileSystem';
@@ -3185,30 +3337,39 @@ const executeChatTool = async (name, rawArguments, options) => {
   if (name === 'list_files') {
     return executeListFilesTool(args);
   }
+  if (name === 'getWorkspaceUri') {
+    return executeGetWorkspaceUriTool();
+  }
+  if (name === 'render_html') {
+    return executeRenderHtmlTool(args);
+  }
   return JSON.stringify({
     error: `Unknown tool: ${name}`
   });
 };
 
-const getBasicChatTools = () => {
-  return [{
+const getReadFileTool = () => {
+  return {
     function: {
-      description: 'Read UTF-8 text content from a file inside the currently open workspace folder.',
+      description: 'Read UTF-8 text content from a file inside the currently open workspace folder. Only pass an absolute URI.',
       name: 'read_file',
       parameters: {
         additionalProperties: false,
         properties: {
-          path: {
-            description: 'Relative file path within the workspace (for example: src/index.ts).',
+          uri: {
+            description: 'Absolute file URI within the workspace (for example: file:///workspace/src/index.ts).',
             type: 'string'
           }
         },
-        required: ['path'],
+        required: ['uri'],
         type: 'object'
       }
     },
     type: 'function'
-  }, {
+  };
+};
+const getWriteFileTool = () => {
+  return {
     function: {
       description: 'Write UTF-8 text content to a file inside the currently open workspace folder.',
       name: 'write_file',
@@ -3229,23 +3390,72 @@ const getBasicChatTools = () => {
       }
     },
     type: 'function'
-  }, {
+  };
+};
+const getListFilesTool = () => {
+  return {
     function: {
-      description: 'List direct children (files and folders) for a folder inside the currently open workspace folder.',
+      description: 'List direct children (files and folders) for a folder URI inside the currently open workspace folder. Only pass an absolute URI.',
       name: 'list_files',
       parameters: {
         additionalProperties: false,
         properties: {
-          path: {
-            description: 'Relative folder path within the workspace. Use "." for the workspace root.',
+          uri: {
+            description: 'Absolute folder URI within the workspace (for example: file:///workspace/src).',
             type: 'string'
           }
         },
+        required: ['uri'],
         type: 'object'
       }
     },
     type: 'function'
-  }];
+  };
+};
+const getGetWorkspaceUriTool = () => {
+  return {
+    function: {
+      description: 'Get the URI of the currently open workspace folder.',
+      name: 'getWorkspaceUri',
+      parameters: {
+        additionalProperties: false,
+        properties: {},
+        type: 'object'
+      }
+    },
+    type: 'function'
+  };
+};
+const getRenderHtmlTool = () => {
+  return {
+    function: {
+      description: 'Render custom HTML and optional CSS directly in the chat tool call list using native chat UI rendering. Use this for structured cards, tables, and small dashboards. After calling this tool, do not repeat the same HTML, data table, or long content again as plain text unless the user explicitly asks for a text-only version.',
+      name: 'render_html',
+      parameters: {
+        additionalProperties: false,
+        properties: {
+          css: {
+            description: 'Optional CSS string applied inside the preview document.',
+            type: 'string'
+          },
+          html: {
+            description: 'HTML string to render in the preview document.',
+            type: 'string'
+          },
+          title: {
+            description: 'Optional short title for the preview.',
+            type: 'string'
+          }
+        },
+        required: ['html'],
+        type: 'object'
+      }
+    },
+    type: 'function'
+  };
+};
+const getBasicChatTools = () => {
+  return [getReadFileTool(), getWriteFileTool(), getListFilesTool(), getGetWorkspaceUriTool(), getRenderHtmlTool()];
 };
 
 const getClientRequestIdHeader = () => {
@@ -5665,8 +5875,8 @@ const openMockSession = async (state, mockSessionId, mockChatMessages) => {
   };
 };
 
-const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily) => {
-  return `:root {
+const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily, renderHtmlCss) => {
+  const baseCss = `:root {
   --ChatInputBoxHeight: ${composerHeight}px;
   --ChatListItemHeight: ${listItemHeight}px;
   --ChatMessageFontSize: ${chatMessageFontSize}px;
@@ -5700,7 +5910,42 @@ const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessage
 .ChatToolCallReadFileLink {
   color: var(--vscode-textLink-foreground);
   text-decoration: underline;
+}
+
+.ChatToolCallRenderHtmlLabel {
+  margin-bottom: 6px;
+  color: var(--vscode-descriptionForeground);
+  font-size: 12px;
+}
+
+.ChatToolCallRenderHtmlContent {
+  border: 1px solid var(--vscode-editorWidget-border);
+  border-radius: 6px;
+  background: var(--vscode-editor-background);
+  overflow: hidden;
+}
+
+.ChatToolCallRenderHtmlBody {
+  min-height: 180px;
+  padding: 12px;
+}
+
+.ChatToolCallRenderHtmlBody * {
+  box-sizing: border-box;
+}
+
+.ChatMessageLink {
+  color: #4d94ff;
+  text-decoration: underline;
+  cursor: pointer;
 }`;
+  if (!renderHtmlCss.trim()) {
+    return baseCss;
+  }
+  return `${baseCss}
+
+/* render_html tool css */
+${renderHtmlCss}`;
 };
 
 // TODO render things like scrollbar height,scrollbar offset, textarea height,
@@ -5713,9 +5958,12 @@ const renderCss = (oldState, newState) => {
     chatMessageLineHeight,
     composerHeight,
     listItemHeight,
+    selectedSessionId,
+    sessions,
     uid
   } = newState;
-  const css = getCss(composerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily);
+  const renderHtmlCss = getRenderHtmlCss(sessions, selectedSessionId);
+  const css = getCss(composerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily, renderHtmlCss);
   return [SetCss, uid, css];
 };
 
@@ -5770,6 +6018,10 @@ const ChatMessageContent = 'ChatMessageContent';
 const ChatToolCalls = 'ChatToolCalls';
 const ChatToolCallsLabel = 'ChatToolCallsLabel';
 const ChatToolCallReadFileLink = 'ChatToolCallReadFileLink';
+const ChatToolCallRenderHtmlLabel = 'ChatToolCallRenderHtmlLabel';
+const ChatToolCallRenderHtmlContent = 'ChatToolCallRenderHtmlContent';
+const ChatToolCallRenderHtmlBody = 'ChatToolCallRenderHtmlBody';
+const ChatMessageLink = 'ChatMessageLink';
 const ChatOrderedList = 'ChatOrderedList';
 const ChatOrderedListItem = 'ChatOrderedListItem';
 const MessageUser = 'MessageUser';
@@ -5994,25 +6246,41 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
   }, text(selectedSessionTitle), ...getChatHeaderActionsDom()];
 };
 
+const getInlineNodeDom = inlineNode => {
+  if (inlineNode.type === 'text') {
+    return [text(inlineNode.text)];
+  }
+  return [{
+    childCount: 1,
+    className: ChatMessageLink,
+    href: inlineNode.href,
+    rel: 'noopener noreferrer',
+    target: '_blank',
+    title: inlineNode.href,
+    type: A
+  }, text(inlineNode.text)];
+};
+
+const getOrderedListItemDom = item => {
+  return [{
+    childCount: item.children.length,
+    className: ChatOrderedListItem,
+    type: Li
+  }, ...item.children.flatMap(getInlineNodeDom)];
+};
 const getMessageNodeDom = node => {
   if (node.type === 'text') {
     return [{
-      childCount: 1,
+      childCount: node.children.length,
       className: Markdown,
       type: P
-    }, text(node.text)];
+    }, ...node.children.flatMap(getInlineNodeDom)];
   }
   return [{
     childCount: node.items.length,
     className: ChatOrderedList,
     type: Ol
-  }, ...node.items.flatMap(item => {
-    return [{
-      childCount: 1,
-      className: ChatOrderedListItem,
-      type: Li
-    }, text(item.text)];
-  })];
+  }, ...node.items.flatMap(getOrderedListItemDom)];
 };
 
 const getMessageContentDom = nodes => {
@@ -6167,7 +6435,7 @@ const getReadFileTarget = rawArguments => {
   if (!title) {
     return undefined;
   }
-  // `read_file` tool calls usually provide a relative `path`; pass it through so UI clicks can open the file.
+  // `read_file` tool calls now use absolute `uri`; keep `path` as a legacy fallback for old transcripts.
   const clickableUri = uriValue || pathValue;
   return {
     clickableUri,
@@ -6175,7 +6443,7 @@ const getReadFileTarget = rawArguments => {
   };
 };
 
-const getToolCallStatusLabel$1 = toolCall => {
+const getToolCallStatusLabel = toolCall => {
   if (toolCall.status === 'not-found') {
     return ' (not-found)';
   }
@@ -6195,7 +6463,7 @@ const getToolCallReadFileVirtualDom = toolCall => {
   }
   const fileName = getFileNameFromUri(target.title);
   const toolNameLabel = `${toolCall.name} `;
-  const statusLabel = getToolCallStatusLabel$1(toolCall);
+  const statusLabel = getToolCallStatusLabel(toolCall);
   const fileNameClickableProps = target.clickableUri ? {
     'data-uri': target.clickableUri,
     onClick: HandleClickReadFile
@@ -6217,18 +6485,305 @@ const getToolCallReadFileVirtualDom = toolCall => {
   }, text(fileName), ...(statusLabel ? [text(statusLabel)] : [])];
 };
 
-const getToolCallStatusLabel = toolCall => {
-  if (toolCall.status === 'not-found') {
-    return ' (not-found)';
+const maxHtmlLength = 40_000;
+const tokenRegex = /<!--[\s\S]*?-->|<\/?[a-zA-Z][\w:-]*(?:\s[^<>]*?)?>|[^<]+/g;
+const attributeRegex = /([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+const inlineTags = new Set(['a', 'abbr', 'b', 'code', 'em', 'i', 'label', 'small', 'span', 'strong', 'sub', 'sup', 'u']);
+const voidElements = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+const sanitizeHtml = value => {
+  return value.slice(0, maxHtmlLength).replaceAll(/<script\b[\s\S]*?<\/script>/gi, '').replaceAll(/<style\b[\s\S]*?<\/style>/gi, '').replaceAll(/<head\b[\s\S]*?<\/head>/gi, '').replaceAll(/<meta\b[^>]*>/gi, '').replaceAll(/<link\b[^>]*>/gi, '');
+};
+const decodeEntities = value => {
+  return value.replaceAll('&nbsp;', ' ').replaceAll('&quot;', '"').replaceAll('&#39;', "'").replaceAll('&lt;', '<').replaceAll('&gt;', '>').replaceAll('&amp;', '&');
+};
+const parseAttributes = token => {
+  const withoutTag = token.replace(/^<\/?\s*[a-zA-Z][\w:-]*/, '').replace(/\/?\s*>$/, '').trim();
+  if (!withoutTag) {
+    return Object.create(null);
   }
-  if (toolCall.status === 'error') {
-    if (toolCall.errorMessage) {
-      return ` (error: ${toolCall.errorMessage})`;
+  const attributes = Object.create(null);
+  const matches = withoutTag.matchAll(attributeRegex);
+  for (const match of matches) {
+    const name = String(match[1] || '').toLowerCase();
+    if (!name || name.startsWith('on')) {
+      continue;
     }
-    return ' (error)';
+    const value = String(match[2] ?? match[3] ?? match[4] ?? '');
+    attributes[name] = decodeEntities(value);
   }
-  return '';
+  return attributes;
+};
+const parseHtml = value => {
+  const root = {
+    attributes: Object.create(null),
+    children: [],
+    tagName: 'root',
+    type: 'element'
+  };
+  const stack = [root];
+  const matches = sanitizeHtml(value).match(tokenRegex);
+  if (!matches) {
+    return [];
+  }
+  for (const token of matches) {
+    if (token.startsWith('<!--')) {
+      continue;
+    }
+    if (token.startsWith('</')) {
+      const closingTagName = token.slice(2, -1).trim().toLowerCase();
+      while (stack.length > 1) {
+        const top = stack.at(-1);
+        if (!top) {
+          break;
+        }
+        stack.pop();
+        if (top.tagName === closingTagName) {
+          break;
+        }
+      }
+      continue;
+    }
+    if (token.startsWith('<')) {
+      const openTagNameMatch = /^<\s*([a-zA-Z][\w:-]*)/.exec(token);
+      if (!openTagNameMatch) {
+        continue;
+      }
+      const tagName = openTagNameMatch[1].toLowerCase();
+      const elementNode = {
+        attributes: parseAttributes(token),
+        children: [],
+        tagName,
+        type: 'element'
+      };
+      const parent = stack.at(-1);
+      if (!parent) {
+        continue;
+      }
+      parent.children.push(elementNode);
+      const selfClosing = token.endsWith('/>') || voidElements.has(tagName);
+      if (!selfClosing) {
+        stack.push(elementNode);
+      }
+      continue;
+    }
+    const decoded = decodeEntities(token);
+    if (!decoded) {
+      continue;
+    }
+    const parent = stack.at(-1);
+    if (!parent) {
+      continue;
+    }
+    parent.children.push({
+      type: 'text',
+      value: decoded
+    });
+  }
+  return root.children;
+};
+const getElementType = tagName => {
+  switch (tagName) {
+    case 'a':
+      return A;
+    case 'abbr':
+      return Abbr;
+    case 'article':
+      return Article;
+    case 'aside':
+      return Aside;
+    case 'audio':
+      return Audio;
+    case 'br':
+      return Br;
+    case 'button':
+      return Button$1;
+    case 'code':
+      return Code;
+    case 'col':
+      return Col;
+    case 'colgroup':
+      return ColGroup;
+    case 'dd':
+      return Dd;
+    case 'dl':
+      return Dl;
+    case 'dt':
+      return Dt;
+    case 'em':
+      return Em;
+    case 'figcaption':
+      return Figcaption;
+    case 'figure':
+      return Figure;
+    case 'footer':
+      return Footer;
+    case 'h1':
+      return H1;
+    case 'h2':
+      return H2;
+    case 'h3':
+      return H3;
+    case 'h4':
+      return H4;
+    case 'h5':
+      return H5;
+    case 'h6':
+      return H6;
+    case 'header':
+      return Header;
+    case 'hr':
+      return Hr;
+    case 'i':
+      return I;
+    case 'img':
+      return Img;
+    case 'input':
+      return Input;
+    case 'label':
+      return Label$1;
+    case 'li':
+      return Li;
+    case 'main':
+      return Main;
+    case 'nav':
+      return Nav;
+    case 'ol':
+      return Ol;
+    case 'option':
+      return Option$1;
+    case 'p':
+      return P;
+    case 'pre':
+      return Pre;
+    case 'section':
+      return Section;
+    case 'select':
+      return Select$1;
+    case 'span':
+      return Span;
+    case 'strong':
+      return Strong;
+    case 'table':
+      return Table;
+    case 'tbody':
+      return TBody;
+    case 'td':
+      return Td;
+    case 'textarea':
+      return TextArea;
+    case 'tfoot':
+      return Tfoot;
+    case 'th':
+      return Th;
+    case 'thead':
+      return THead;
+    case 'tr':
+      return Tr;
+    case 'ul':
+      return Ul;
+    default:
+      return inlineTags.has(tagName) ? Span : Div;
+  }
+};
+const normalizeUrl = url => {
+  return url.toLowerCase().startsWith('javascript:') ? '#' : url;
+};
+const getElementAttributes = node => {
+  const attributes = {};
+  const className = node.attributes.class || node.attributes.classname;
+  if (className) {
+    attributes.className = className;
+  }
+  if (node.attributes.style) {
+    attributes.style = node.attributes.style;
+  }
+  if (node.attributes.id) {
+    attributes.id = node.attributes.id;
+  }
+  if (node.attributes.name) {
+    attributes.name = node.attributes.name;
+  }
+  if (node.attributes.placeholder) {
+    attributes.placeholder = node.attributes.placeholder;
+  }
+  if (node.attributes.title) {
+    attributes.title = node.attributes.title;
+  }
+  if (node.attributes.value) {
+    attributes.value = node.attributes.value;
+  }
+  if (node.attributes.href) {
+    attributes.href = normalizeUrl(node.attributes.href);
+  }
+  if (node.attributes.src) {
+    attributes.src = normalizeUrl(node.attributes.src);
+  }
+  if (node.attributes.target) {
+    attributes.target = node.attributes.target;
+  }
+  if (node.attributes.rel) {
+    attributes.rel = node.attributes.rel;
+  }
+  if ('checked' in node.attributes) {
+    attributes.checked = node.attributes.checked !== 'false';
+  }
+  if ('disabled' in node.attributes) {
+    attributes.disabled = node.attributes.disabled !== 'false';
+  }
+  if ('readonly' in node.attributes) {
+    attributes.readOnly = node.attributes.readonly !== 'false';
+  }
+  return attributes;
 };
+const toVirtualDom = node => {
+  if (node.type === 'text') {
+    return [text(node.value)];
+  }
+  const children = node.children.flatMap(toVirtualDom);
+  return [{
+    childCount: node.children.length,
+    ...getElementAttributes(node),
+    type: getElementType(node.tagName)
+  }, ...children];
+};
+const parseHtmlToVirtualDomWithRootCount = value => {
+  const rootNodes = parseHtml(value);
+  return {
+    rootChildCount: rootNodes.length,
+    virtualDom: rootNodes.flatMap(toVirtualDom)
+  };
+};
+
+const getToolCallRenderHtmlVirtualDom = toolCall => {
+  const parsed = parseRenderHtmlArguments(toolCall.arguments);
+  if (!parsed) {
+    return [];
+  }
+  const statusLabel = getToolCallStatusLabel(toolCall);
+  const label = `${toolCall.name}: ${parsed.title}${statusLabel}`;
+  const parsedHtml = parseHtmlToVirtualDomWithRootCount(parsed.html);
+  const {
+    rootChildCount
+  } = parsedHtml;
+  return [{
+    childCount: 2,
+    className: ChatOrderedListItem,
+    type: Li
+  }, {
+    childCount: 1,
+    className: ChatToolCallRenderHtmlLabel,
+    type: Div
+  }, text(label), {
+    childCount: 1,
+    className: ChatToolCallRenderHtmlContent,
+    type: Div
+  }, {
+    childCount: rootChildCount,
+    className: ChatToolCallRenderHtmlBody,
+    type: Div
+  }, ...parsedHtml.virtualDom];
+};
+
 const getToolCallDom = toolCall => {
   if (toolCall.name === 'read_file') {
     const virtualDom = getToolCallReadFileVirtualDom(toolCall);
@@ -6236,6 +6791,12 @@ const getToolCallDom = toolCall => {
       return virtualDom;
     }
   }
+  if (toolCall.name === 'render_html') {
+    const virtualDom = getToolCallRenderHtmlVirtualDom(toolCall);
+    if (virtualDom.length > 0) {
+      return virtualDom;
+    }
+  }
   const argumentPreview = getToolCallArgumentPreview(toolCall.arguments);
   const label = `${toolCall.name} ${argumentPreview}${getToolCallStatusLabel(toolCall)}`;
   return [{
@@ -6265,10 +6826,50 @@ const getToolCallsDom = message => {
 };
 
 const orderedListItemRegex = /^\s*\d+\.\s+(.*)$/;
+const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+const parseInlineNodes = value => {
+  const matches = value.matchAll(markdownLinkRegex);
+  const nodes = [];
+  let lastIndex = 0;
+  for (const match of matches) {
+    const fullMatch = match[0];
+    const linkText = match[1];
+    const href = match[2];
+    const index = match.index ?? 0;
+    if (index > lastIndex) {
+      nodes.push({
+        text: value.slice(lastIndex, index),
+        type: 'text'
+      });
+    }
+    nodes.push({
+      href,
+      text: linkText,
+      type: 'link'
+    });
+    lastIndex = index + fullMatch.length;
+  }
+  if (lastIndex < value.length) {
+    nodes.push({
+      text: value.slice(lastIndex),
+      type: 'text'
+    });
+  }
+  if (nodes.length === 0) {
+    return [{
+      text: value,
+      type: 'text'
+    }];
+  }
+  return nodes;
+};
 const parseMessageContent = rawMessage => {
   if (rawMessage === '') {
     return [{
-      text: '',
+      children: [{
+        text: '',
+        type: 'text'
+      }],
       type: 'text'
     }];
   }
@@ -6281,7 +6882,7 @@ const parseMessageContent = rawMessage => {
       return;
     }
     nodes.push({
-      text: paragraphLines.join('\n'),
+      children: parseInlineNodes(paragraphLines.join('\n')),
       type: 'text'
     });
     paragraphLines = [];
@@ -6306,7 +6907,7 @@ const parseMessageContent = rawMessage => {
     if (match) {
       flushParagraph();
       listItems.push({
-        text: match[1],
+        children: parseInlineNodes(match[1]),
         type: 'list-item'
       });
       continue;
@@ -6317,7 +6918,10 @@ const parseMessageContent = rawMessage => {
   flushList();
   flushParagraph();
   return nodes.length === 0 ? [{
-    text: '',
+    children: [{
+      text: '',
+      type: 'text'
+    }],
     type: 'text'
   }] : nodes;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-view",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "Chat View Worker",
   "repository": {
     "type": "git",