fix: 思考内容先流式展开显示，思考完成后立即折叠再显示正式回复

2026-04-26 21:27:44 +08:00
2 changed files with 14 additions and 5 deletions
--- a/www/app.js
+++ b/www/app.js
@@ -878,12 +878,17 @@ async function streamGenerate(userMsgIndex) {
                if (thinkingEl) {
                  thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking) + '<span class="streaming-cursor">▌</span>';
                }
+                // 确保思考块展开
+                const thinkingBlock = lastMessageEl.querySelector('.thinking-block');
+                if (thinkingBlock && !thinkingBlock.classList.contains('expanded')) {
+                  thinkingBlock.classList.add('expanded');
+                }
                scrollToBottom();
              }
              
              // 处理正式回复内容
              if (delta.content) {
-                // 如果开启深度思考且开始输出正式内容，折叠思考块
+                // 如果开启深度思考且开始输出正式内容，说明思考完成，立即折叠思考块
                if (enableThinking && !thinkingOutputStarted && currentConversation.messages[aiMessageIndex].thinking) {
                  thinkingOutputStarted = true;
                  // 折叠思考内容
@@ -1161,8 +1166,12 @@ function renderMessages() {
    // 思考内容块（仅AI消息）
    let thinkingHtml = '';
    if (!isUser && msg.thinking) {
+      // 判断是否是当前正在生成的消息（有thinking且content为空或很短）
+      const isGenerating = index === currentConversation.messages.length - 1 && isLoading && enableThinking;
+      const expandedClass = isGenerating && !msg.content ? 'expanded' : '';
+      
      thinkingHtml = `
-        <div class="thinking-block" onclick="toggleThinking(this)">
+        <div class="thinking-block ${expandedClass}" onclick="toggleThinking(this)">
          <div class="thinking-header">
            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            <span>思考过程</span>
--- a/www/index.html
+++ b/www/index.html
@@ -8,12 +8,12 @@
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>AI助手</title>
-  <link rel="stylesheet" href="style.css?v=2.7.1">
+  <link rel="stylesheet" href="style.css?v=2.7.2">
  <link rel="manifest" href="manifest.json">
 </head>
 <body>
  <div id="app"></div>
-  <script src="marked.min.js?v=2.7.1"></script>
-  <script src="app.js?v=2.7.1"></script>
+  <script src="marked.min.js?v=2.7.2"></script>
+  <script src="app.js?v=2.7.2"></script>
 </body>
 </html>