myagent-ai 1.23.19 → 1.23.21

package/web/ui/chat/flow_engine.js

@@ -607,51 +607,72 @@ function updateStreamingMessage(msgIdx) {
     }
 
     // ── [v1.23.15] 增量渲染文件卡片（v2_file 事件到达时立即显示） ──
+    // [v1.23.20] DOM 结构完全对齐 buildMessageHtml：
+    //   图片/音视频 → .msg-attachments.msg-attachments-images（在 bubble 之前）
+    //   非媒体文件 → .msg-attachments.msg-attachments-files（在 bubble 之后）
     if (msg._files && msg._files.length > 0) {
-      var existingFiles = bubbleWrapper ? bubbleWrapper.querySelectorAll(':scope > .msg-attachments') : contentArea.querySelectorAll(':scope > .msg-attachments');
+      // ── 图片/音视频容器（和 buildMessageHtml 的 imageAttachmentHtml 一致） ──
+      var imageContainer = contentArea.querySelector(':scope > .msg-attachments-images');
+      // ── 非媒体文件容器（和 buildMessageHtml 的 fileAttachmentHtml 一致） ──
+      var existingFiles = contentArea.querySelectorAll(':scope > .msg-attachments-files');
       var fileContainer = existingFiles.length > 0 ? existingFiles[0] : null;
-      if (!fileContainer) {
-        fileContainer = document.createElement('div');
-        fileContainer.className = 'msg-attachments msg-attachments-files';
-        if (bubbleWrapper) {
-          bubbleWrapper.appendChild(fileContainer);
-        } else {
-          contentArea.appendChild(fileContainer);
-        }
-      }
+
       // 只添加未渲染的新文件
-      var renderedIds = fileContainer._renderedFileIds || [];
+      var renderedIds = (fileContainer ? fileContainer._renderedFileIds : []) || [];
+      var renderedImageIds = (imageContainer ? imageContainer._renderedImageIds : []) || [];
       for (var _fIdx = 0; _fIdx < msg._files.length; _fIdx++) {
         var _f = msg._files[_fIdx];
         var _fId = _f.id || _f.file_id || '';
-        if (renderedIds.indexOf(_fId) >= 0) continue;
+        // 同时检查两个容器的已渲染列表
+        if (renderedIds.indexOf(_fId) >= 0 || renderedImageIds.indexOf(_fId) >= 0) continue;
         var _isImg = _f.type && _f.type.indexOf('image/') === 0;
         var _isAud = _f.type && _f.type.indexOf('audio/') === 0;
         var _isVid = _f.type && _f.type.indexOf('video/') === 0;
-        // [v1.23.19] 图片/音频/视频也直接渲染（不再跳过等 renderMessages）
-        if (_isImg && _fId) {
-          var _imgDiv = document.createElement('div');
-          _imgDiv.className = 'msg-image-wrapper agent-image';
-          _imgDiv.innerHTML = '<img src="/api/file/' + _fId + '" 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(\'' + _fId + '\', this.src, \'' + escapeHtml(_f.name) + '\')" />';
-          fileContainer.appendChild(_imgDiv);
-          renderedIds.push(_fId);
-          continue;
-        }
-        if (_isAud && _fId) {
-          var _audDiv = document.createElement('div');
-          _audDiv.className = 'msg-media-player';
-          _audDiv.innerHTML = '<audio controls src="/api/file/' + _fId + '" 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>';
-          fileContainer.appendChild(_audDiv);
-          renderedIds.push(_fId);
+
+        if (_isImg || _isAud || _isVid) {
+          // 图片/音频/视频 → imageContainer（和 buildMessageHtml 的 imageAttachmentHtml 一致）
+          if (!imageContainer) {
+            imageContainer = document.createElement('div');
+            imageContainer.className = 'msg-attachments msg-attachments-images';
+            imageContainer._renderedImageIds = [];
+            // 插入到 bubbleWrapper 之前（和 buildMessageHtml 顺序一致：images 先，media 后，bubble 后）
+            if (bubbleWrapper && bubbleWrapper.parentNode) {
+              bubbleWrapper.parentNode.insertBefore(imageContainer, bubbleWrapper);
+            } else {
+              contentArea.appendChild(imageContainer);
+            }
+          }
+          if (_isImg && _fId) {
+            var _imgDiv = document.createElement('div');
+            _imgDiv.className = 'msg-image-wrapper agent-image';
+            _imgDiv.innerHTML = '<img src="/api/file/' + _fId + '" 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(\'' + _fId + '\', this.src, \'' + escapeHtml(_f.name) + '\')" />';
+            imageContainer.appendChild(_imgDiv);
+          } else if (_isAud && _fId) {
+            var _audDiv = document.createElement('div');
+            _audDiv.className = 'msg-media-player';
+            _audDiv.innerHTML = '<audio controls src="/api/file/' + _fId + '" 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>';
+            imageContainer.appendChild(_audDiv);
+          } else if (_isVid && _fId) {
+            var _vidDiv = document.createElement('div');
+            _vidDiv.className = 'msg-media-player';
+            _vidDiv.innerHTML = '<video controls src="/api/file/' + _fId + '" 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>';
+            imageContainer.appendChild(_vidDiv);
+          }
+          imageContainer._renderedImageIds.push(_fId);
           continue;
         }
-        if (_isVid && _fId) {
-          var _vidDiv = document.createElement('div');
-          _vidDiv.className = 'msg-media-player';
-          _vidDiv.innerHTML = '<video controls src="/api/file/' + _fId + '" 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>';
-          fileContainer.appendChild(_vidDiv);
-          renderedIds.push(_fId);
-          continue;
+
+        // 非媒体文件 → fileContainer
+        if (!fileContainer) {
+          fileContainer = document.createElement('div');
+          fileContainer.className = 'msg-attachments msg-attachments-files';
+          fileContainer._renderedFileIds = [];
+          // 插入到 bubbleWrapper 之后（和 buildMessageHtml 顺序一致）
+          if (bubbleWrapper && bubbleWrapper.parentNode) {
+            bubbleWrapper.parentNode.insertBefore(fileContainer, bubbleWrapper.nextSibling);
+          } else {
+            contentArea.appendChild(fileContainer);
+          }
         }
         var _icon = _getFileIcon(_f.name || _f.type || '');
         var _sizeStr = _f.size ? formatFileSize(_f.size) : '';
@@ -666,20 +687,21 @@ function updateStreamingMessage(msgIdx) {
           '<a class="msg-file-download" href="/api/file/' + (_fId || '') + '?name=' + encodeURIComponent(_f.name || 'file') + '" download="' + escapeHtml(_f.name) + '" title="下载" onclick="event.stopPropagation()">⬇</a>' +
           '</span>';
         fileContainer.appendChild(_fDiv);
-        renderedIds.push(_fId);
+        fileContainer._renderedFileIds.push(_fId);
       }
-      fileContainer._renderedFileIds = renderedIds;
     }
 
     // ── [v1.23.19] 增量渲染在线媒体嵌入播放器（v2_media 事件） ──
+    // [v1.23.20] 媒体容器放在 bubbleWrapper 外部（和 buildMessageHtml 结构一致）
     if (msg._media && msg._media.length > 0) {
-      var existingMedia = bubbleWrapper ? bubbleWrapper.querySelectorAll(':scope > .msg-attachments-media') : contentArea.querySelectorAll(':scope > .msg-attachments-media');
+      var existingMedia = contentArea.querySelectorAll(':scope > .msg-attachments-media');
       var mediaContainer = existingMedia.length > 0 ? existingMedia[0] : null;
       if (!mediaContainer) {
         mediaContainer = document.createElement('div');
         mediaContainer.className = 'msg-attachments msg-attachments-media';
-        if (bubbleWrapper) {
-          bubbleWrapper.appendChild(mediaContainer);
+        // 插入到 bubbleWrapper 之前（和 buildMessageHtml 顺序一致：media 先，bubble 后）
+        if (bubbleWrapper && bubbleWrapper.parentNode) {
+          bubbleWrapper.parentNode.insertBefore(mediaContainer, bubbleWrapper);
         } else {
           contentArea.appendChild(mediaContainer);
         }
@@ -2116,8 +2138,41 @@ async function sendMessage(opts) {
       // Assemble final content: prefer V2 reasoning/ask text over raw XML
       state.messages[msgIdx].content = _assembleV2Content(state.messages[msgIdx], msgParts);
     }
-    // Final render with completion flash animation
-    renderMessages();
+    // ── [v1.23.20] 用统一渲染函数重建最后一条消息 DOM（和历史渲染完全一致） ──
+    // 不再调 renderMessages() 全量重建（会丢失流式增量渲染的文件卡片等）
+    var agent = findAgentByPath(state.activeAgent);
+    var lastMsgRow = document.querySelector('#messagesInner .message-row:last-child');
+    if (lastMsgRow && agent && state.messages[msgIdx]) {
+      var newHtml = buildMessageHtml(state.messages[msgIdx], msgIdx, agent);
+      if (newHtml) {
+        // buildMessageHtml 可能返回 reasoningHtml + message-row（两个顶层元素）
+        var wrapper = document.createElement('div');
+        wrapper.innerHTML = newHtml;
+        var children = Array.from(wrapper.children);
+        // 移除旧的 reasoning block（container 直接子元素，在 message-row 之前）
+        var prevSibling = lastMsgRow.previousElementSibling;
+        if (prevSibling && prevSibling.classList && prevSibling.classList.contains('thought-block')) {
+          var label = prevSibling.querySelector('.thought-label');
+          if (label && label.textContent.includes('模型推理过程')) {
+            prevSibling.remove();
+          }
+        }
+        // 替换 message-row
+        if (children.length >= 2) {
+          // 有 reasoning block + message-row
+          lastMsgRow.replaceWith(children[children.length - 1]);
+          // reasoning block 插入到 message-row 之前
+          for (var ci = 0; ci < children.length - 1; ci++) {
+            lastMsgRow.parentNode.insertBefore(children[ci], lastMsgRow);
+          }
+        } else if (children.length === 1) {
+          lastMsgRow.replaceWith(children[0]);
+        }
+      }
+    } else {
+      // Fallback: full re-render (should not normally happen)
+      renderMessages();
+    }
     // Auto-collapse thought blocks after streaming completes (smooth UX)
     setTimeout(function() {
       const thoughtBlocks = document.querySelectorAll('.thought-block:not(.streaming)');