style: 版本切换控件简化并整合到操作按钮区域

templates/index.html

@@ -52,18 +52,19 @@
         .user-message-text { background: #f0f0f0; padding: 12px 16px; border-radius: 12px; font-size: 15px; }
         
         /* 消息操作按钮 */
-        .message-actions { display: flex; gap: 8px; margin-top: 8px; }
+        .message-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
         .action-btn { padding: 6px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; display: flex; align-items: center; gap: 4px; transition: all 0.2s; }
         .action-btn:hover { background: #e8e8e8; border-color: #ccc; }
         .action-btn.copied { color: #10a37f; border-color: #10a37f; background: #e8f5e9; }
         .action-btn.regenerate:hover { color: #667eea; border-color: #667eea; }
         
-        /* 版本切换控件 */
-        .version-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 8px 0; }
-        .version-btn { width: 28px; height: 28px; border-radius: 6px; background: #f0f0f0; border: 1px solid #ddd; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; transition: all 0.2s; }
-        .version-btn:hover { background: #e8e8e8; border-color: #667eea; color: #667eea; }
-        .version-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-        .version-indicator { font-size: 12px; color: #666; min-width: 60px; text-align: center; }
+        /* 版本切换控件 - 简洁版 */
+        .version-switcher { display: none; align-items: center; gap: 4px; margin-left: 4px; }
+        .version-switcher.show { display: flex; }
+        .version-arrow { width: 24px; height: 24px; border-radius: 4px; background: #f5f5f5; border: 1px solid #e0e0e0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; font-size: 14px; transition: all 0.2s; }
+        .version-arrow:hover { background: #e8e8e8; border-color: #667eea; color: #667eea; }
+        .version-arrow:disabled { opacity: 0.4; cursor: not-allowed; background: #f5f5f5; }
+        .version-label { font-size: 11px; color: #888; padding: 0 2px; }
         
         /* 加载动画 */
         .loading-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: #667eea; }
@@ -264,14 +265,14 @@
                     if (!isRegenerating) {
                         appendMessage('user', data.message.content); 
                     }
-                    isRegenerating = false; // 重置标志
+                    // 注意：不要在这里重置 isRegenerating，要等 assistant_message 处理后再重置
                     break;
                 case 'assistant_message': 
                     if (isRegenerating && regeneratingMessageId) {
                         // 添加新版本到现有消息
                         addResponseVersion(regeneratingMessageId, data.message.content, data.message.thinking_content);
-                        hideLoadingIndicator(regeneratingMessageId);
                         regeneratingMessageId = null;
+                        isRegenerating = false; // 在这里重置标志
                     } else {
                         appendMessage('assistant', data.message.content, data.message.thinking_content, data.message.agent_name);
                     }
@@ -333,18 +334,15 @@
             html += `<button class="action-btn" onclick="copyMessage(this)"><i class="ri-file-copy-line"></i> 复制</button>`;
             if (role === 'assistant') {
                 html += `<button class="action-btn regenerate" onclick="regenerateMessage('${messageId}')"><i class="ri-refresh-line"></i> 重新生成</button>`;
+                // 版本切换控件 - 放在重新生成按钮后面
+                html += `<span class="version-switcher" id="${messageId}_version_switcher">`;
+                html += `<button class="version-arrow" onclick="switchVersion('${messageId}', -1)" data-dir="prev"><i class="ri-arrow-left-s-line"></i></button>`;
+                html += `<span class="version-label" id="${messageId}_version_label">1/1</span>`;
+                html += `<button class="version-arrow" onclick="switchVersion('${messageId}', 1)" data-dir="next"><i class="ri-arrow-right-s-line"></i></button>`;
+                html += `</span>`;
             }
             html += `</div>`;
             
-            // assistant消息的版本切换控件（初始隐藏，有多个版本时显示）
-            if (role === 'assistant') {
-                html += `<div class="version-controls" id="${messageId}_version_controls" style="display:none;">
-                    <button class="version-btn" onclick="switchVersion('${messageId}', -1)" data-dir="prev"><i class="ri-arrow-left-s-line"></i></button>
-                    <span class="version-indicator" id="${messageId}_version_indicator">1/1</span>
-                    <button class="version-btn" onclick="switchVersion('${messageId}', 1)" data-dir="next"><i class="ri-arrow-right-s-line"></i></button>
-                </div>`;
-            }
-            
             // Agent信息
             if (role === 'assistant' && agentName) {
                 html += `<div class="agent-info"><i class="ri-robot-line"></i> ${agentName}</div>`;
@@ -368,6 +366,9 @@
             // 更新容器
             const container = document.getElementById(`${messageId}_container`);
             if (container) {
+                // 先移除loading（如果有）
+                hideLoadingIndicator(messageId);
+                
                 // 添加思考块（如果有）
                 const messageBody = container.closest('.message-body');
                 if (thinking && messageBody) {
@@ -386,7 +387,7 @@
                     messageBody.insertAdjacentHTML('afterbegin', thinkingHtml);
                 }
                 
-                // 隐藏所有旧版本，添加新版本
+                // 隐藏所有旧版本，显示最新版本
                 container.querySelectorAll('.response-version').forEach(v => v.classList.remove('active'));
                 const newVersionHtml = `<div class="response-version active" data-version="${newVersionIndex}">
                     <div class="markdown-body">${marked.parse(content)}</div>
@@ -401,7 +402,7 @@
                 if (copySource) copySource.value = content;
             }
             
-            // 显示版本切换控件
+            // 显示版本切换控件并更新指示器
             showVersionControls(messageId);
         }
         
@@ -428,10 +429,18 @@
         
         // 显示版本切换控件
         function showVersionControls(messageId) {
-            const controls = document.getElementById(`${messageId}_version_controls`);
+            const switcher = document.getElementById(`${messageId}_version_switcher`);
             const versions = messageVersions[messageId];
-            if (controls && versions && versions.length > 1) {
-                controls.style.display = 'flex';
+            if (switcher && versions && versions.length > 1) {
+                switcher.classList.add('show');
+                // 新生成的版本是最后一个，切换到最新版本
+                const container = document.getElementById(`${messageId}_container`);
+                if (container) {
+                    // 隐藏所有版本，显示最后一个
+                    container.querySelectorAll('.response-version').forEach(v => v.classList.remove('active'));
+                    const lastVersion = container.querySelector(`.response-version[data-version="${versions.length - 1}"]`);
+                    if (lastVersion) lastVersion.classList.add('active');
+                }
                 updateVersionIndicator(messageId);
             }
         }
@@ -439,17 +448,25 @@
         // 更新版本指示器
         function updateVersionIndicator(messageId) {
             const container = document.getElementById(`${messageId}_container`);
-            const indicator = document.getElementById(`${messageId}_version_indicator`);
+            const label = document.getElementById(`${messageId}_version_label`);
             const versions = messageVersions[messageId];
-            if (!container || !indicator || !versions) return;
+            if (!container || !label || !versions) return;
             
             // 找到当前激活的版本
             const activeVersion = container.querySelector('.response-version.active');
             const currentIndex = activeVersion ? parseInt(activeVersion.dataset.version) : 0;
             
-            indicator.textContent = `${currentIndex + 1}/${versions.length}`;
+            label.textContent = `${currentIndex + 1}/${versions.length}`;
             
             // 更新按钮状态
+            const switcher = document.getElementById(`${messageId}_version_switcher`);
+            if (switcher) {
+                const prevBtn = switcher.querySelector('[data-dir="prev"]');
+                const nextBtn = switcher.querySelector('[data-dir="next"]');
+                if (prevBtn) prevBtn.disabled = currentIndex === 0;
+                if (nextBtn) nextBtn.disabled = currentIndex === versions.length - 1;
+            }
+        }
             const prevBtn = indicator.parentElement.querySelector('[data-dir="prev"]');
             const nextBtn = indicator.parentElement.querySelector('[data-dir="next"]');
             if (prevBtn) prevBtn.disabled = currentIndex === 0;