优化思考过程的UI

tianzhentech · Mar 1, 2025 · 666d5b8 · 666d5b8
1 parent 97dbaf8
commit 666d5b8
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
@@ -281,23 +281,33 @@ function formatThinkText(text: string): string {
   if (text.startsWith("<think>") && !text.includes("</think>")) {
     // 获取 <think> 后的所有内容
     const thinkContent = text.slice("<think>".length);
-    // 渲染为"思考中"状态，添加加载动画
+    // 给每一行添加引用符号
+    const quotedContent = thinkContent
+      .split("\n")
+      .map((line: string) => (line.trim() ? `> ${line}` : ">"))
+      .join("\n");
+
     return `<details open>
 <summary>${Locale.NewChat.Thinking} <span class="thinking-loader"></span></summary>
 
-${thinkContent}
+${quotedContent}
 
 </details>`;
   }
 
   // 处理完整的 think 标签
   const pattern = /^<think>([\s\S]*?)<\/think>/;
   return text.replace(pattern, (match, thinkContent) => {
-    // 渲染为"思考完成"状态
+    // 给每一行添加引用符号
+    const quotedContent = thinkContent
+      .split("\n")
+      .map((line: string) => (line.trim() ? `> ${line}` : ">"))
+      .join("\n");
+
     return `<details open>
 <summary>${Locale.NewChat.Think}</summary>
 
-${thinkContent}
+${quotedContent}
 
 </details>`;
   });

diff --git a/app/styles/markdown.scss b/app/styles/markdown.scss
@@ -131,6 +131,8 @@
         transition: transform 0.2s;
         width: 1em;
         text-align: center;
+        position: relative;
+        left: -0.1em;
       }
 
       &:focus {
@@ -148,21 +150,9 @@
 
     & > *:not(summary) {
       padding-left: 1.5em;
-      color: var(--color-fg-subtle);
-      font-size: 0.95em;
       position: relative;
     }
 
-    &[open]:before {
-      content: '';
-      position: absolute;
-      top: 1.5em;
-      left: calc(0.5em - 1px);
-      height: calc(100% - 1.5em);
-      width: 2px;
-      background-color: var(--color-border-muted);
-    }
-
     .thinking-loader {
       display: inline-block;
       width: 14px;
@@ -182,6 +172,29 @@
         transform: rotate(360deg);
       }
     }
+
+    blockquote, 
+    > p > blockquote {
+      margin: 0;
+      padding-left: 1.5em;
+      border-left: none;
+      position: relative;
+      font-size: 0.9em;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: calc(0.45em - 1px);
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background-color: var(--color-border-muted);
+      }
+    }
+
+    > blockquote {
+      margin-top: 0;
+    }
   }
 }