myagent-ai 1.23.19 → 1.23.21

package/web/ui/chat/chat_main.js

@@ -2729,6 +2729,295 @@ function groupHistoryMessages(messages) {
 }
 
 // ── Messages ──
+// ── [v1.23.20] 统一消息渲染函数：历史消息和流式消息共享 ──
+// 生成单条消息的完整 HTML（message-row 外壳 + 所有内部内容）
+// 流式结束后也用此函数重建 DOM，确保历史/流式样式完全一致
+window.buildMessageHtml = function(msg, idx, agent) {
+  const isUser = msg.role === 'user';
+  if (msg.role === 'tool') return '';
+
+  const avatar = isUser ? '<span style="font-size:18px">👤</span>' : avatarHtml(agent, 32, 'border-radius:8px;');
+  const content = renderMarkdown(msg.content);
+
+  // ── 图片/音视频附件 ──
+  const imageAttachmentHtml = (() => {
+    let parts = [];
+    if (isUser && msg.images && msg.images.length > 0) {
+      for (let _imgIdx = 0; _imgIdx < msg.images.length; _imgIdx++) {
+        const img = msg.images[_imgIdx];
+        const fileId = img.id;
+        let src;
+        let hasFallback = false;
+        if (fileId) {
+          src = '/api/file/' + fileId;
+          if (img._base64) hasFallback = true;
+        } else {
+          src = 'data:' + (img.type || 'image/png') + ';base64,' + (img.data || '');
+        }
+        let onerror = '';
+        if (hasFallback) {
+          onerror = " onerror=\"this.onerror=null;this.src='data:" + escapeHtml(img.type || 'image/png') + ";base64," + img._base64 + "'\"";
+        } else if (fileId) {
+          onerror = " onerror=\"this.onerror=null;this.style.background='var(--bg3)';this.style.minHeight='60px';this.alt='[图片加载失败]'\"";
+        }
+        parts.push('<div class="msg-image-wrapper"><img src="' + src + '" class="msg-image" loading="lazy" alt="' + escapeHtml(img.name || 'image') + '"' + onerror + " onclick=\"openFileViewer('" + (fileId || '') + "', this.src, '" + escapeHtml(img.name || 'image') + "')\" /></div>");
+      }
+    }
+    const agentFiles = (msg._files || []);
+    if (!isUser && agentFiles.length > 0) {
+      for (const f of agentFiles) {
+        const isImage = f.type && f.type.startsWith('image/');
+        const isAudio = f.type && f.type.startsWith('audio/');
+        const isVideo = f.type && f.type.startsWith('video/');
+        if (isImage && f.id) {
+          parts.push('<div class="msg-image-wrapper agent-image"><img src="/api/file/' + f.id + '" class="msg-image" loading="lazy" alt="' + escapeHtml(f.name || 'image') + '" onerror="this.onerror=null;this.style.background=\'var(--bg3)\';this.style.minHeight=\'60px\';this.alt=\'[图片加载失败]\'" onclick="openFileViewer(\'' + f.id + '\', this.src, \'' + escapeHtml(f.name || 'image') + '\')" /></div>');
+        }
+        if (isAudio && f.id) {
+          parts.push('<div class="msg-media-player"><audio controls src="/api/file/' + f.id + '" style="width:100%;max-width:480px" preload="metadata" onplay="if(typeof muteTTS===\'function\')muteTTS()" onended="if(typeof unmuteTTS===\'function\')unmuteTTS()"></audio><div class="msg-media-title">' + escapeHtml(f.name || '音频') + '</div></div>');
+        }
+        if (isVideo && f.id) {
+          parts.push('<div class="msg-media-player"><video controls src="/api/file/' + f.id + '" style="width:100%;max-width:640px;border-radius:8px" preload="metadata" onplay="if(typeof muteTTS===\'function\')muteTTS()" onended="if(typeof unmuteTTS===\'function\')unmuteTTS()"></video><div class="msg-media-title">' + escapeHtml(f.name || '视频') + '</div></div>');
+        }
+      }
+    }
+    return parts.length > 0 ? '<div class="msg-attachments msg-attachments-images">' + parts.join('') + '</div>' : '';
+  })();
+
+  // ── 在线媒体嵌入（YouTube/B站/网易云等） ──
+  const mediaEmbedHtml = (() => {
+    const mediaList = (msg._media || []);
+    if (!mediaList || mediaList.length === 0) return '';
+    let parts = [];
+    for (const m of mediaList) {
+      const isAudio = m.media_type === 'audio';
+      let embedUrl = m.embed_url || '';
+      const title = m.title || (isAudio ? '在线音乐' : '在线视频');
+      const origUrl = m.original_url || embedUrl;
+      if (!embedUrl && !origUrl) continue;
+      if (!embedUrl) {
+        const icon = isAudio ? '🎵' : '🎬';
+        parts.push('<div class="msg-media-embed msg-media-link-card" style="padding:10px 14px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);cursor:pointer" onclick="window.open(\'' + escapeHtml(origUrl) + '\',\'_blank\')">' +
+          '<div class="msg-media-header"><span class="msg-media-icon">' + icon + '</span><span class="msg-media-label">' + escapeHtml(title) + '</span>' +
+          '<span style="margin-left:auto;font-size:12px;opacity:0.6">点击在新窗口打开 ↗</span></div>' +
+          '<div style="font-size:12px;opacity:0.5;margin-top:4px;word-break:break-all">' + escapeHtml(origUrl) + '</div>' +
+          '</div>');
+        continue;
+      }
+      // URL → embed URL 转换
+      if (embedUrl && !embedUrl.includes('/embed/') && !embedUrl.includes('/player') && !embedUrl.includes('/outchain/')) {
+        const ytMatch = embedUrl.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+        if (ytMatch) { embedUrl = 'https://www.youtube.com/embed/' + ytMatch[1]; }
+        const biliMatch = embedUrl.match(/bilibili\.com\/video\/(BV[\w]+)/);
+        if (biliMatch) { embedUrl = 'https://player.bilibili.com/player.html?bvid=' + biliMatch[1] + '&autoplay=0'; }
+        const neteaseMatch = embedUrl.match(/music\.163\.com.*[?&]id=(\d+)/);
+        if (neteaseMatch) { embedUrl = 'https://music.163.com/outchain/player?type=2&id=' + neteaseMatch[1] + '&auto=0&height=66'; }
+        const ymMatch = embedUrl.match(/music\.youtube\.com.*list=([\w-]+)/);
+        if (ymMatch) { embedUrl = 'https://music.youtube.com/embed?list=' + ymMatch[1] + '&layout=full'; }
+      }
+      if (isAudio) {
+        var _knownAudioEmbed = embedUrl && (
+          embedUrl.indexOf('music.163.com/outchain') >= 0 ||
+          embedUrl.indexOf('music.youtube.com/embed') >= 0 ||
+          embedUrl.indexOf('player.bilibili.com') >= 0
+        );
+        var _audioPlayerHtml;
+        if (_knownAudioEmbed) {
+          _audioPlayerHtml = '<iframe src="' + escapeHtml(embedUrl) + '" style="width:100%;max-width:480px;height:80px;border:none;border-radius:8px" loading="lazy" allow="autoplay" sandbox="allow-scripts allow-same-origin allow-presentation"></iframe>';
+        } else {
+          _audioPlayerHtml = '<audio controls src="' + escapeHtml(origUrl) + '" style="width:100%;max-width:480px;border-radius:8px" preload="metadata" onplay="if(typeof muteTTS===\'function\')muteTTS()" onended="if(typeof unmuteTTS===\'function\')unmuteTTS()"></audio>' +
+            '<div style="font-size:11px;color:var(--text3);margin-top:4px">部分平台可能因跨域限制无法直接播放，可点击右上角 ↗ 在新窗口打开</div>';
+        }
+        parts.push('<div class="msg-media-embed msg-media-audio">' +
+          '<div class="msg-media-header"><span class="msg-media-icon">🎵</span><span class="msg-media-label">' + escapeHtml(title) + '</span>' +
+          '<a class="msg-media-link" href="' + escapeHtml(origUrl) + '" target="_blank" rel="noopener" title="在新窗口打开">↗</a></div>' +
+          _audioPlayerHtml +
+          '</div>');
+      } else {
+        parts.push('<div class="msg-media-embed msg-media-video">' +
+          '<div class="msg-media-header"><span class="msg-media-icon">🎬</span><span class="msg-media-label">' + escapeHtml(title) + '</span>' +
+          '<a class="msg-media-link" href="' + escapeHtml(origUrl) + '" target="_blank" rel="noopener" title="在新窗口打开">↗</a></div>' +
+          '<iframe src="' + escapeHtml(embedUrl) + '" style="width:100%;max-width:640px;height:360px;border:none;border-radius:8px" loading="lazy" allow="autoplay;encrypted-media;picture-in-picture" allowfullscreen></iframe>' +
+          '</div>');
+      }
+    }
+    return parts.length > 0 ? '<div class="msg-attachments msg-attachments-media">' + parts.join('') + '</div>' : '';
+  })();
+
+  // ── Web Control ──
+  const wcHtml = (() => {
+    const wcEvents = (msg._webControl || []);
+    if (!wcEvents || wcEvents.length === 0) return '';
+    let lastEvent = wcEvents[wcEvents.length - 1];
+    let wcAction = lastEvent.action || 'open';
+    let wcSessionId = lastEvent.session_id || '';
+    let wcUrl = lastEvent.url || '';
+    let wcTitle = 'Web Control';
+    let wcIcon = '🌐';
+    let wcDesc = '';
+    if (wcAction === 'open') {
+      wcDesc = wcUrl ? '打开网页: ' + wcUrl : '已打开网页控制面板';
+    } else if (wcAction === 'navigate') {
+      wcDesc = '导航到: ' + wcUrl;
+    } else if (wcAction === 'close') {
+      wcDesc = '已关闭控制面板';
+      wcIcon = '⏹';
+    }
+    return '<div class="msg-wc-card" onclick="if(typeof openWCOverlay===\'function\')openWCOverlay(\'' + escapeHtml(wcSessionId) + '\',\'' + escapeHtml(wcUrl) + '\')" title="点击重新打开">' +
+      '<span class="msg-wc-icon">' + wcIcon + '</span>' +
+      '<span class="msg-wc-info"><span class="msg-wc-title">' + wcTitle + '</span><span class="msg-wc-desc">' + escapeHtml(wcDesc) + '</span></span>' +
+      '<span class="msg-wc-arrow">↗</span>' +
+      '</div>';
+  })();
+
+  // ── 文件附件（非图片/音视频） ──
+  const fileAttachmentHtml = (() => {
+    let parts = [];
+    if (isUser && msg.files && msg.files.length > 0) {
+      for (const f of msg.files) {
+        const fileId = f.id;
+        const sizeStr = f.size ? formatFileSize(f.size) : '';
+        const icon = _getFileIcon(f.name || f.type || '');
+        parts.push('<div class="msg-file-item" title="点击预览">' +
+          '<span class="msg-file-icon">' + icon + '</span>' +
+          '<span class="msg-file-info"><span class="msg-file-name">' + escapeHtml(f.name) + '</span>' +
+          (sizeStr ? '<span class="msg-file-size">' + sizeStr + '</span>' : '') +
+          '</span>' +
+          '<span class="msg-file-actions">' +
+          '<a class="msg-file-download" href="/api/file/' + (fileId || '') + '?name=' + encodeURIComponent(f.name || 'file') + '" download="' + escapeHtml(f.name) + '" title="下载" onclick="event.stopPropagation()">⬇</a>' +
+          '</span>' +
+          '</div>');
+      }
+    }
+    const agentFiles = (msg._files || []);
+    if (!isUser && agentFiles.length > 0) {
+      for (const f of agentFiles) {
+        const isImage = f.type && f.type.startsWith('image/');
+        const isAudio = f.type && f.type.startsWith('audio/');
+        const isVideo = f.type && f.type.startsWith('video/');
+        if (isImage || isAudio || isVideo) continue;
+        const fileId = f.id;
+        const sizeStr = f.size ? formatFileSize(f.size) : '';
+        const icon = _getFileIcon(f.name || f.type || '');
+        parts.push('<div class="msg-file-item agent-file" title="点击预览">' +
+          '<span class="msg-file-icon">' + icon + '</span>' +
+          '<span class="msg-file-info"><span class="msg-file-name">' + escapeHtml(f.name) + '</span>' +
+          (sizeStr ? '<span class="msg-file-size">' + sizeStr + '</span>' : '') +
+          '</span>' +
+          '<span class="msg-file-actions">' +
+          '<a class="msg-file-download" href="/api/file/' + (fileId || '') + '?name=' + encodeURIComponent(f.name || 'file') + '" download="' + escapeHtml(f.name) + '" title="下载" onclick="event.stopPropagation()">⬇</a>' +
+          '</span>' +
+          '</div>');
+      }
+    }
+    return parts.length > 0 ? '<div class="msg-attachments msg-attachments-files">' + parts.join('') + '</div>' : '';
+  })();
+
+  // ── Thought / Reasoning ──
+  const thoughtHtml = msg.thought ? (() => {
+    const isStreaming = !!msg.streaming;
+    return '<details class="thought-block ' + (isStreaming ? 'streaming' : '') + '"' + (isStreaming ? ' open' : '') + '>' +
+      '<summary>' +
+      '<span class="thought-icon">🧠</span>' +
+      '<span class="thought-label">Agent 思考过程</span>' +
+      (isStreaming ? '<span class="thought-badge">思考中...</span>' : '<span class="thought-badge">已完成</span>') +
+      '</summary>' +
+      '<div class="thought-content">' + renderMarkdown(msg.thought) + '</div>' +
+      '</details>';
+  })() : '';
+  const reasoningHtml = msg.reasoning ? (() => {
+    const isStreaming = !!msg.streaming;
+    return '<details class="thought-block ' + (isStreaming ? 'streaming' : '') + '"' + (isStreaming ? ' open' : '') + '>' +
+      '<summary>' +
+      '<span class="thought-icon">💡</span>' +
+      '<span class="thought-label">模型推理过程</span>' +
+      (isStreaming ? '<span class="thought-badge">推理中...</span>' : '<span class="thought-badge">已完成</span>') +
+      '</summary>' +
+      '<div class="thought-content reasoning-content">' + renderMarkdown(msg.reasoning) + '</div>' +
+      '</details>';
+  })() : '';
+
+  const _isSpeakingThis = ttsManager && ttsManager.isPlaying && ttsManager.currentMsgIndex === idx;
+  const actionBtns = msg.content ? '<div class="msg-actions">' +
+    '<button class="msg-action-btn" onclick="copyMessage(' + idx + ')" title="复制">' +
+    '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>' +
+    '</button>' + (!isUser ?
+      '<button class="msg-action-btn' + (_isSpeakingThis ? ' tts-speaking' : '') + '" onclick="speakMessage(' + idx + ')" title="' + (_isSpeakingThis ? '停止朗读' : '朗读') + '">' +
+      (_isSpeakingThis ?
+        '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>' :
+        '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>') +
+      '</button>' : '') +
+    '</div>' : '';
+  const ttsIndicator = _isSpeakingThis ?
+    ' <span class="tts-playing-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></span>' : '';
+
+  // ── Bubble content: timeline (parts) or single text ──
+  var bubbleHtml = '';
+  const hasParts = Array.isArray(msg.parts) && msg.parts.length > 0;
+  const hasStreamingText = msg._streamingText && msg._streamingText.trim();
+  const anyContent = msg.content || msg._streamingText || hasParts;
+  const streamingIndicator = msg.streaming && !anyContent && !msg.thought ?
+    '<div class="streaming-indicator"><div class="spinner"></div><div class="streaming-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div><span style="font-weight:500">Agent 正在思考...</span></div>' : '';
+
+  if (hasParts || hasStreamingText) {
+    var partsInner = '';
+    for (const part of (msg.parts || [])) {
+      if (part.type === 'text' && part.content.trim()) {
+        partsInner += '<div class="timeline-segment">' + renderMarkdown(part.content) + '</div>';
+      } else if (part.type === 'exec') {
+        partsInner += renderInlineExecEvent(part.data, idx);
+      } else if (part.type === 'v2_tool') {
+        partsInner += renderInlineExecEvent(part, idx);
+      } else if (part.type === 'v2_ask') {
+        partsInner += '<div class="v2-ask-user"><div class="v2-ask-icon">❓</div><div class="v2-ask-content">' + renderMarkdown(part.data.question) + '</div></div>';
+      }
+    }
+    if (hasStreamingText) {
+      const _cursor = msg.streaming ? '<span class="streaming-cursor"></span>' : '';
+      partsInner += '<div class="timeline-segment">' + renderMarkdown(msg._streamingText) + _cursor + '</div>';
+    }
+    if (partsInner) {
+      bubbleHtml = '<div class="message-bubble msg-bubble-wrapper"><div class="msg-timeline">' + partsInner + '</div></div>';
+    }
+  } else {
+    var renderedContent = content;
+    if (!msg.streaming && !isUser && shouldCollapseContent(msg.content)) {
+      renderedContent = '<details class="file-content-collapse"><summary>📄 文件内容处理结果（点击展开）</summary><div class="collapse-body">' + content + '</div></details>';
+    }
+    if (renderedContent) {
+      bubbleHtml = '<div class="message-bubble msg-bubble-wrapper">' + renderedContent + ttsIndicator + '</div>';
+    }
+  }
+
+  // ── Task Plan & Finish Reason ──
+  var taskPlanHtml = '';
+  if (!msg.streaming && msg._v2TaskPlan && msg._v2TaskPlan.trim()) {
+    taskPlanHtml = '<div class="v2-task-plan" style="margin-bottom:8px"><div class="v2-task-plan-header" style="font-size:12px;font-weight:600;color:var(--text3);margin-bottom:4px">📋 任务计划</div><div class="v2-task-plan-body">' + renderMarkdown(msg._v2TaskPlan) + '</div></div>';
+  }
+  var finishReasonHtml = '';
+  if (msg._v2FinishReason && msg._v2FinishReason.trim()) {
+    finishReasonHtml = '<div class="v2-finish-reason" style="margin-bottom:8px;padding:8px 12px;border-radius:var(--radius-xs);background:rgba(16,185,129,.08);border-left:3px solid #10b981;font-size:13px;color:var(--text2)"><span style="font-weight:600;color:#10b981;margin-right:6px">✅ 完成原因:</span>' + escapeHtml(msg._v2FinishReason.trim()) + '</div>';
+  }
+
+  // ── Assemble full message-row ──
+  return (reasoningHtml ? reasoningHtml : '') +
+    '<div class="message-row ' + msg.role + (msg.streaming ? ' streaming' : '') + '">' +
+    '<div class="message-avatar">' + avatar + '</div>' +
+    '<div class="message-content" style="flex:1;min-width:0;width:100%">' +
+    thoughtHtml +
+    taskPlanHtml +
+    finishReasonHtml +
+    imageAttachmentHtml +
+    mediaEmbedHtml +
+    wcHtml +
+    bubbleHtml +
+    fileAttachmentHtml +
+    streamingIndicator +
+    (msg.time ? '<div class="message-time">' + formatTime(msg.time) + '</div>' : '') +
+    actionBtns +
+    '</div>' +
+    '</div>';
+};
+
 function renderMessages() {
   try {
   _renderMessagesInner();
@@ -2802,313 +3091,12 @@ function _renderMessagesInner() {
       '<button id="loadMoreBtn" class="btn btn-ghost" onclick="loadMoreMessages()" style="font-size:13px;">' +
       '📜 加载更多历史消息</button></div>';
   }
+  // ── [v1.23.20] 使用统一渲染函数 ──
   for (let i = 0; i < state.messages.length; i++) {
-    const msg = state.messages[i];
-    const isUser = msg.role === 'user';
-
-    // Skip standalone tool messages (now grouped into assistant parts via groupHistoryMessages)
-    if (msg.role === 'tool') continue;
-
-    const avatar = isUser ? '<span style="font-size:18px">👤</span>' : avatarHtml(agent, 32, 'border-radius:8px;');
-    const content = renderMarkdown(msg.content);
-    // [v1.19.3] 渲染图片和文件附件（支持磁盘持久化 file_id，图片在气泡顶部、文件在底部）
-    const imageAttachmentHtml = (() => {
-      let parts = [];
-      // User images（用户发送的图片）
-      if (isUser && msg.images && msg.images.length > 0) {
-        for (let _imgIdx = 0; _imgIdx < msg.images.length; _imgIdx++) {
-          const img = msg.images[_imgIdx];
-          const fileId = img.id;
-          let src;
-          let hasFallback = false;
-          if (fileId) {
-            src = '/api/file/' + fileId;
-            if (img._base64) hasFallback = true;
-          } else {
-            src = 'data:' + (img.type || 'image/png') + ';base64,' + (img.data || '');
-          }
-          let onerror = '';
-          if (hasFallback) {
-            onerror = ' onerror="this.onerror=null;this.src=\'data:' + escapeHtml(img.type || 'image/png') + ';base64,' + img._base64 + '\'"';
-          } else if (fileId) {
-            onerror = ' onerror="this.onerror=null;this.style.background=\'var(--bg3)\';this.style.minHeight=\'60px\';this.alt=\'[图片加载失败]\'"';
-          }
-          parts.push('<div class="msg-image-wrapper"><img src="' + src + '" class="msg-image" loading="lazy" alt="' + escapeHtml(img.name || 'image') + '"' + onerror + ' onclick="openFileViewer(\'' + (fileId || '') + '\', this.src, \'' + escapeHtml(img.name || 'image') + '\')" /></div>');
-        }
-      }
-      // Agent images（agent 通过 file_send 发送的图片文件，type 为 image/*）
-      const agentFiles = (msg._files || []);
-      if (!isUser && agentFiles.length > 0) {
-        for (const f of agentFiles) {
-          const isImage = f.type && f.type.startsWith('image/');
-          const isAudio = f.type && f.type.startsWith('audio/');
-          const isVideo = f.type && f.type.startsWith('video/');
-          if (isImage && f.id) {
-            parts.push('<div class="msg-image-wrapper agent-image"><img src="/api/file/' + f.id + '" class="msg-image" loading="lazy" alt="' + escapeHtml(f.name || 'image') + '" onerror="this.onerror=null;this.style.background=\'var(--bg3)\';this.style.minHeight=\'60px\';this.alt=\'[图片加载失败]\'" onclick="openFileViewer(\'' + f.id + '\', this.src, \'' + escapeHtml(f.name) + '\')" /></div>');
-          }
-          // [v1.20.3] 音频文件渲染为内嵌播放器
-          if (isAudio && f.id) {
-            parts.push('<div class="msg-media-player"><audio controls src="/api/file/' + f.id + '" style="width:100%;max-width:480px" preload="metadata" onplay="if(typeof muteTTS===\'function\')muteTTS()" onended="if(typeof unmuteTTS===\'function\')unmuteTTS()"></audio><div class="msg-media-title">' + escapeHtml(f.name || '音频') + '</div></div>');
-          }
-          // [v1.20.3] 视频文件渲染为内嵌播放器
-          if (isVideo && f.id) {
-            parts.push('<div class="msg-media-player"><video controls src="/api/file/' + f.id + '" style="width:100%;max-width:640px;border-radius:8px" preload="metadata" onplay="if(typeof muteTTS===\'function\')muteTTS()" onended="if(typeof unmuteTTS===\'function\')unmuteTTS()"></video><div class="msg-media-title">' + escapeHtml(f.name || '视频') + '</div></div>');
-          }
-        }
-      }
-      return parts.length > 0 ? '<div class="msg-attachments msg-attachments-images">' + parts.join('') + '</div>' : '';
-    })();
-    // [v1.20.3] 在线媒体嵌入播放器（YouTube/B站/抖音/QQ音乐/网易云等）
-    const mediaEmbedHtml = (() => {
-      const mediaList = (msg._media || []);
-      if (!mediaList || mediaList.length === 0) return '';
-      let parts = [];
-      for (const m of mediaList) {
-        const isAudio = m.media_type === 'audio';
-        let embedUrl = m.embed_url || '';
-        const title = m.title || (isAudio ? '在线音乐' : '在线视频');
-        const origUrl = m.original_url || embedUrl;
-        if (!embedUrl && !origUrl) continue;
-        // [v1.20.10] 如果 embed_url 为空，渲染链接卡片而非 iframe
-        if (!embedUrl) {
-          const icon = isAudio ? '🎵' : '🎬';
-          parts.push('<div class="msg-media-embed msg-media-link-card" style="padding:10px 14px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);cursor:pointer" onclick="window.open(\'' + escapeHtml(origUrl) + '\',\'_blank\')">' +
-            '<div class="msg-media-header"><span class="msg-media-icon">' + icon + '</span><span class="msg-media-label">' + escapeHtml(title) + '</span>' +
-            '<span style="margin-left:auto;font-size:12px;opacity:0.6">点击在新窗口打开 ↗</span></div>' +
-            '<div style="font-size:12px;opacity:0.5;margin-top:4px;word-break:break-all">' + escapeHtml(origUrl) + '</div>' +
-            '</div>');
-          continue;
-        }
-        // 前端 URL → 嵌入 URL 转换（历史回放时 embed_url 可能是原始 URL）
-        if (embedUrl && !embedUrl.includes('/embed/') && !embedUrl.includes('/player') && !embedUrl.includes('/outchain/')) {
-          const ytMatch = embedUrl.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
-          if (ytMatch) { embedUrl = 'https://www.youtube.com/embed/' + ytMatch[1]; }
-          const biliMatch = embedUrl.match(/bilibili\.com\/video\/(BV[\w]+)/);
-          if (biliMatch) { embedUrl = 'https://player.bilibili.com/player.html?bvid=' + biliMatch[1] + '&autoplay=0'; }
-          const neteaseMatch = embedUrl.match(/music\.163\.com.*[?&]id=(\d+)/);
-          if (neteaseMatch) { embedUrl = 'https://music.163.com/outchain/player?type=2&id=' + neteaseMatch[1] + '&auto=0&height=66'; }
-          // [v1.20.10] YouTube Music 播放列表 → embed
-          const ymMatch = embedUrl.match(/music\.youtube\.com.*list=([\w-]+)/);
-          if (ymMatch) { embedUrl = 'https://music.youtube.com/embed?list=' + ymMatch[1] + '&layout=full'; }
-        }
-        if (isAudio) {
-          // [v1.20.11] 音频播放器：优先使用已知可嵌入平台的 iframe，否则使用原生 <audio> 标签
-          // 避免 iframe 加载失败时显示断裂图片图标
-          var _knownAudioEmbed = embedUrl && (
-            embedUrl.indexOf('music.163.com/outchain') >= 0 ||
-            embedUrl.indexOf('music.youtube.com/embed') >= 0 ||
-            embedUrl.indexOf('player.bilibili.com') >= 0
-          );
-          var _audioPlayerHtml;
-          if (_knownAudioEmbed) {
-            _audioPlayerHtml = '<iframe src="' + escapeHtml(embedUrl) + '" style="width:100%;max-width:480px;height:80px;border:none;border-radius:8px" loading="lazy" allow="autoplay" sandbox="allow-scripts allow-same-origin allow-presentation"></iframe>';
-          } else {
-            // 不可嵌入的音频链接：使用原生 audio 播放器，避免 iframe 断裂图标
-            _audioPlayerHtml = '<audio controls src="' + escapeHtml(origUrl) + '" style="width:100%;max-width:480px;border-radius:8px" preload="metadata" onplay="if(typeof muteTTS===\'function\')muteTTS()" onended="if(typeof unmuteTTS===\'function\')unmuteTTS()"></audio>' +
-              '<div style="font-size:11px;color:var(--text3);margin-top:4px">部分平台可能因跨域限制无法直接播放，可点击右上角 ↗ 在新窗口打开</div>';
-          }
-          parts.push('<div class="msg-media-embed msg-media-audio">' +
-            '<div class="msg-media-header"><span class="msg-media-icon">🎵</span><span class="msg-media-label">' + escapeHtml(title) + '</span>' +
-            '<a class="msg-media-link" href="' + escapeHtml(origUrl) + '" target="_blank" rel="noopener" title="在新窗口打开">↗</a></div>' +
-            _audioPlayerHtml +
-            '</div>');
-        } else {
-          parts.push('<div class="msg-media-embed msg-media-video">' +
-            '<div class="msg-media-header"><span class="msg-media-icon">🎬</span><span class="msg-media-label">' + escapeHtml(title) + '</span>' +
-            '<a class="msg-media-link" href="' + escapeHtml(origUrl) + '" target="_blank" rel="noopener" title="在新窗口打开">↗</a></div>' +
-            '<iframe src="' + escapeHtml(embedUrl) + '" style="width:100%;max-width:640px;height:360px;border:none;border-radius:8px" loading="lazy" allow="autoplay;encrypted-media;picture-in-picture" allowfullscreen></iframe>' +
-            '</div>');
-        }
-      }
-      return parts.length > 0 ? '<div class="msg-attachments msg-attachments-media">' + parts.join('') + '</div>' : '';
-    })();
-
-    // [v1.21.0] Web Control 渲染（显示面板状态卡片）
-    const wcHtml = (() => {
-      const wcEvents = (msg._webControl || []);
-      if (!wcEvents || wcEvents.length === 0) return '';
-      let lastEvent = wcEvents[wcEvents.length - 1];
-      let wcAction = lastEvent.action || 'open';
-      let wcSessionId = lastEvent.session_id || '';
-      let wcUrl = lastEvent.url || '';
-      let wcTitle = 'Web Control';
-      let wcIcon = '🌐';
-      let wcDesc = '';
-      if (wcAction === 'open') {
-        wcDesc = wcUrl ? '打开网页: ' + wcUrl : '已打开网页控制面板';
-      } else if (wcAction === 'navigate') {
-        wcDesc = '导航到: ' + wcUrl;
-      } else if (wcAction === 'close') {
-        wcDesc = '已关闭控制面板';
-        wcIcon = '⏹';
-      }
-      return '<div class="msg-wc-card" onclick="if(typeof openWCOverlay===\'function\')openWCOverlay(\'' + escapeHtml(wcSessionId) + '\',\'' + escapeHtml(wcUrl) + '\')" title="点击重新打开">' +
-        '<span class="msg-wc-icon">' + wcIcon + '</span>' +
-        '<span class="msg-wc-info"><span class="msg-wc-title">' + wcTitle + '</span><span class="msg-wc-desc">' + escapeHtml(wcDesc) + '</span></span>' +
-        '<span class="msg-wc-arrow">↗</span>' +
-        '</div>';
-    })();
-
-    const fileAttachmentHtml = (() => {
-      let parts = [];
-      // User files（用户发送的非图片文件）
-      if (isUser && msg.files && msg.files.length > 0) {
-        for (const f of msg.files) {
-          const fileId = f.id;
-          const sizeStr = f.size ? formatFileSize(f.size) : '';
-          const icon = _getFileIcon(f.name || f.type || '');
-          parts.push('<div class="msg-file-item" title="点击预览">' +
-            '<span class="msg-file-icon">' + icon + '</span>' +
-            '<span class="msg-file-info"><span class="msg-file-name">' + escapeHtml(f.name) + '</span>' +
-            (sizeStr ? '<span class="msg-file-size">' + sizeStr + '</span>' : '') +
-            '</span>' +
-            '<span class="msg-file-actions">' +
-            '<a class="msg-file-download" href="/api/file/' + (fileId || '') + '?name=' + encodeURIComponent(f.name || 'file') + '" download="' + escapeHtml(f.name) + '" title="下载" onclick="event.stopPropagation()">⬇</a>' +
-            '</span>' +
-            '</div>');
-        }
-      }
-      // Agent files (v2_file events) — 支持实时流式 _files 和历史加载的 files（只渲染非图片/音频/视频文件）
-      const agentFiles = (msg._files || []);
-      if (!isUser && agentFiles.length > 0) {
-        for (const f of agentFiles) {
-          const isImage = f.type && f.type.startsWith('image/');
-          const isAudio = f.type && f.type.startsWith('audio/');
-          const isVideo = f.type && f.type.startsWith('video/');
-          if (isImage || isAudio || isVideo) continue; // 图片/音视频已在上方渲染为内嵌播放器
-          const fileId = f.id;
-          const sizeStr = f.size ? formatFileSize(f.size) : '';
-          const icon = _getFileIcon(f.name || f.type || '');
-          parts.push('<div class="msg-file-item agent-file" title="点击预览">' +
-            '<span class="msg-file-icon">' + icon + '</span>' +
-            '<span class="msg-file-info"><span class="msg-file-name">' + escapeHtml(f.name) + '</span>' +
-            (sizeStr ? '<span class="msg-file-size">' + sizeStr + '</span>' : '') +
-            '</span>' +
-            '<span class="msg-file-actions">' +
-            '<a class="msg-file-download" href="/api/file/' + (fileId || '') + '?name=' + encodeURIComponent(f.name || 'file') + '" download="' + escapeHtml(f.name) + '" title="下载" onclick="event.stopPropagation()">⬇</a>' +
-            '</span>' +
-            '</div>');
-        }
-      }
-      return parts.length > 0 ? '<div class="msg-attachments msg-attachments-files">' + parts.join('') + '</div>' : '';
-    })();
-    const thoughtHtml = msg.thought ? (() => {
-      const isStreaming = !!msg.streaming;
-      return `<details class="thought-block ${isStreaming ? 'streaming' : ''}" ${isStreaming ? 'open' : ''}>
-        <summary>
-          <span class="thought-icon">🧠</span>
-          <span class="thought-label">Agent 思考过程</span>
-          ${isStreaming ? '<span class="thought-badge">思考中...</span>' : '<span class="thought-badge">已完成</span>'}
-        </summary>
-        <div class="thought-content">${renderMarkdown(msg.thought)}</div>
-      </details>`;
-    })() : '';
-    const reasoningHtml = msg.reasoning ? (() => {
-      const isStreaming = !!msg.streaming;
-      return `<details class="thought-block ${isStreaming ? 'streaming' : ''}" ${isStreaming ? 'open' : ''}>
-        <summary>
-          <span class="thought-icon">💡</span>
-          <span class="thought-label">模型推理过程</span>
-          ${isStreaming ? '<span class="thought-badge">推理中...</span>' : '<span class="thought-badge">已完成</span>'}
-        </summary>
-        <div class="thought-content reasoning-content">${renderMarkdown(msg.reasoning)}</div>
-      </details>`;
-    })() : '';
-    const _isSpeakingThis = ttsManager && ttsManager.isPlaying && ttsManager.currentMsgIndex === i;
-    const actionBtns = msg.content ? `
-      <div class="msg-actions">
-        <button class="msg-action-btn" onclick="copyMessage(${i})" title="复制">
-          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
-        </button>${!isUser ? `
-        <button class="msg-action-btn${_isSpeakingThis ? ' tts-speaking' : ''}" onclick="speakMessage(${i})" title="${_isSpeakingThis ? '停止朗读' : '朗读'}">
-          ${_isSpeakingThis
-            ? '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>'
-            : '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>'
-          }
-        </button>` : ''}
-      </div>` : '';
-    const ttsIndicator = _isSpeakingThis ?
-      ' <span class="tts-playing-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg></span>' : '';
-
-    // ── Determine rendering mode ──
-    const hasParts = Array.isArray(msg.parts) && msg.parts.length > 0;
-    const hasStreamingText = msg._streamingText && msg._streamingText.trim();
-    const anyContent = msg.content || msg._streamingText || hasParts;
-    const streamingIndicator = msg.streaming && !anyContent && !msg.thought ? `
-      <div class="streaming-indicator">
-        <div class="spinner"></div>
-        <div class="streaming-dots">
-          <span class="dot"></span><span class="dot"></span><span class="dot"></span>
-        </div>
-        <span style="font-weight:500">Agent 正在思考...</span>
-      </div>` : '';
-
-    // ── Bubble content: timeline (parts) or single text ──
-    var bubbleHtml = '';
-    if (hasParts || hasStreamingText) {
-      // Timeline mode: interleaved text + tool cards
-      var partsInner = '';
-      for (const part of (msg.parts || [])) {
-        if (part.type === 'text' && part.content.trim()) {
-          partsInner += '<div class="timeline-segment">' + renderMarkdown(part.content) + '</div>';
-        } else if (part.type === 'exec') {
-          partsInner += renderInlineExecEvent(part.data, i);
-        } else if (part.type === 'v2_tool') {
-          partsInner += renderInlineExecEvent(part, i);
-        } else if (part.type === 'v2_ask') {
-          partsInner += '<div class="v2-ask-user"><div class="v2-ask-icon">❓</div><div class="v2-ask-content">' + renderMarkdown(part.data.question) + '</div></div>';
-        }
-      }
-      if (hasStreamingText) {
-        const _cursor = msg.streaming ? '<span class="streaming-cursor"></span>' : '';
-        partsInner += '<div class="timeline-segment">' + renderMarkdown(msg._streamingText) + _cursor + '</div>';
-      }
-      if (partsInner) {
-        bubbleHtml = '<div class="message-bubble msg-bubble-wrapper"><div class="msg-timeline">' + partsInner + '</div></div>';
-      }
-    } else {
-      // Single bubble mode: plain text (possibly collapsed)
-      var renderedContent = content;
-      if (!msg.streaming && !isUser && shouldCollapseContent(msg.content)) {
-        renderedContent = '<details class="file-content-collapse"><summary>📄 文件内容处理结果（点击展开）</summary><div class="collapse-body">' + content + '</div></details>';
-      }
-      if (renderedContent) {
-        bubbleHtml = '<div class="message-bubble msg-bubble-wrapper">' + renderedContent + ttsIndicator + '</div>';
-      }
-    }
-
-    // ── Task Plan & Finish Reason (V2 structured output, historical only) ──
-    var taskPlanHtml = '';
-    if (!msg.streaming && msg._v2TaskPlan && msg._v2TaskPlan.trim()) {
-      taskPlanHtml = '<div class="v2-task-plan" style="margin-bottom:8px"><div class="v2-task-plan-header" style="font-size:12px;font-weight:600;color:var(--text3);margin-bottom:4px">📋 任务计划</div><div class="v2-task-plan-body">' + renderMarkdown(msg._v2TaskPlan) + '</div></div>';
-    }
-    var finishReasonHtml = '';
-    if (msg._v2FinishReason && msg._v2FinishReason.trim()) {
-      finishReasonHtml = '<div class="v2-finish-reason" style="margin-bottom:8px;padding:8px 12px;border-radius:var(--radius-xs);background:rgba(16,185,129,.08);border-left:3px solid #10b981;font-size:13px;color:var(--text2)"><span style="font-weight:600;color:#10b981;margin-right:6px">✅ 完成原因:</span>' + escapeHtml(msg._v2FinishReason.trim()) + '</div>';
-    }
-
-    // ── Reasoning block (rendered outside message-row for full width) ──
-    if (reasoningHtml) html += reasoningHtml;
-    // ── Message row ──
-    html += `
-      <div class="message-row ${msg.role}${msg.streaming ? ' streaming' : ''}">
-        <div class="message-avatar">${avatar}</div>
-        <div class="message-content" style="flex:1;min-width:0;width:100%">
-          ${thoughtHtml}
-          ${taskPlanHtml}
-          ${finishReasonHtml}
-          ${imageAttachmentHtml}
-          ${mediaEmbedHtml}
-          ${wcHtml}
-          ${bubbleHtml}
-          ${fileAttachmentHtml}
-          ${streamingIndicator}
-          ${msg.time ? '<div class="message-time">' + formatTime(msg.time) + '</div>' : ''}
-          ${actionBtns}
-        </div>
-      </div>`;
+    html += buildMessageHtml(state.messages[i], i, agent) || '';
   }
 
+  // Keep welcome card in DOM but hidden
   // Keep welcome card in DOM but hidden
   container.innerHTML = html +
     '<div class="welcome-card" id="welcomeCard" style="display:none"></div>';