优化无思考过程的UI

Author: ElluIFX

app/components/markdown.tsx

@@ -34,11 +34,13 @@ const ThinkCollapse = styled(
   ({ title, children, className }: ThinkCollapseProps) => {
     // 如果是 Thinking 状态，默认展开，否则折叠
     const defaultActive = title === Locale.NewChat.Thinking ? ["1"] : [];
+    // 如果是 NoThink 状态，禁用
+    const disabled = title === Locale.NewChat.NoThink;
     const [activeKeys, setActiveKeys] = useState(defaultActive);
 
-    // 当标题从 Thinking 变为 Think 时自动折叠
+    // 当标题从 Thinking 变为 Think 或 NoThink 时自动折叠
     useEffect(() => {
-      if (title === Locale.NewChat.Think) {
+      if (title === Locale.NewChat.Think || title === Locale.NewChat.NoThink) {
         setActiveKeys([]);
       } else if (title === Locale.NewChat.Thinking) {
         setActiveKeys(["1"]);
@@ -47,10 +49,10 @@ const ThinkCollapse = styled(
 
     return (
       <Collapse
-        className={className}
+        className={`${className} ${disabled ? "disabled" : ""}`}
         size="small"
         activeKey={activeKeys}
-        onChange={(keys) => setActiveKeys(keys as string[])}
+        onChange={(keys) => !disabled && setActiveKeys(keys as string[])}
         bordered={false}
       >
         <Panel header={title} key="1">
@@ -91,6 +93,18 @@ const ThinkCollapse = styled(
       opacity: 0.8;
     }
   }
+
+  &.disabled {
+    opacity: 0.9;
+    pointer-events: none;
+    .ant-collapse-item {
+      border: none !important;
+      background-color: transparent !important;
+    }
+    .ant-collapse-header {
+      padding: 6px 0px !important;
+    }
+  }
 `;
 
 function Details(props: { children: React.ReactNode }) {
@@ -435,6 +449,10 @@ function formatThinkText(text: string): string {
   const pattern = /^<think>([\s\S]*?)<\/think>/;
   return text.replace(pattern, (match, thinkContent) => {
     // 渲染为"思考完成"状态
+    // 如果 thinkContent 为空，则渲染为"没有思考过程"状态
+    if (thinkContent.trim() === "") {
+      return `<thinkcollapse title="${Locale.NewChat.NoThink}">\n</thinkcollapse>`;
+    }
     return `<thinkcollapse title="${Locale.NewChat.Think}">\n${thinkContent}\n</thinkcollapse>`;
   });
 }

app/locales/cn.ts

@@ -608,6 +608,7 @@ const cn = {
     Less: "折叠代码",
     Thinking: "正在思考中...",
     Think: "思考过程",
+    NoThink: "没有思考过程",
     ArtifactsInfo:
       "可在设置中开启/关闭“Artifacts 预览”和“代码折叠”，若预览失败请刷新页面",
   },

app/locales/en.ts

@@ -618,6 +618,7 @@ const en: LocaleType = {
     ConfirmNoShow: "Confirm to disable？You can enable it in settings later.",
     Thinking: "Thinking...",
     Think: "Content of Thought",
+    NoThink: "No Thought",
     ArtifactsInfo:
       "You can enable/disable 'Artifacts Preview' and 'Code Fold' in settings. If the preview fails, please refresh the page.",
   },