.

chatdesk-ui/components/messages/message.tsx

@@ -36,6 +36,41 @@ interface MessageProps {
   onSubmitEdit: (value: string, sequenceNumber: number) => void
 }
 
+
+// ✅ 提取为组件，放在同文件中也没问题
+const MessageContent: React.FC<{ content: string }> = ({ content }) => {
+  const [showThink, setShowThink] = useState(false)
+
+  const thinkMatch = content.match(/<think>([\s\S]*?)<\/think>/i)
+  const thinkContent = thinkMatch?.[1]?.trim() || ""
+  const visibleContent = thinkMatch
+    ? content.replace(thinkMatch[0], "").trim()
+    : content.trim()
+
+  return (
+    <div className="space-y-2">
+      <MessageMarkdown content={visibleContent} />
+
+      {thinkMatch && thinkContent && (
+        <div className="mt-2 text-sm text-muted-foreground">
+          <button
+            className="text-blue-500 hover:underline"
+            onClick={() => setShowThink(prev => !prev)}
+          >
+            {showThink ? "隐藏思考过程 ▲" : "显示思考过程 ▼"}
+          </button>
+
+          {showThink && (
+            <div className="mt-2 rounded bg-gray-100 p-3 text-sm dark:bg-gray-800">
+              <MessageMarkdown content={thinkContent} />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
 export const Message: FC<MessageProps> = ({
   message,
   fileItems,
@@ -313,45 +348,7 @@ export const Message: FC<MessageProps> = ({
             // <MessageMarkdown content={message.content} />
 
 
-            (() => {
-              const [showThink, setShowThink] = useState(false)
-
-              // 动态提取 <think> 内容块
-              const thinkMatch = message.content.match(/<think>([\s\S]*?)<\/think>/i)
-
-              // 思考区域（如果匹配到了）
-              const thinkContent = thinkMatch?.[1]?.trim() || ""
-
-              // 可见区域 = 原始内容去除 <think> 区域
-              const visibleContent = thinkMatch
-                ? message.content.replace(thinkMatch[0], "").trim()
-                : message.content.trim()
-
-              return (
-                <div className="space-y-2">
-                  {/* 主内容显示 */}
-                  <MessageMarkdown content={visibleContent} />
-
-                  {/* 有 <think> 匹配时，才展示按钮 */}
-                  {thinkMatch && thinkContent && (
-                    <div className="mt-2 text-sm text-muted-foreground">
-                      <button
-                        className="text-blue-500 hover:underline"
-                        onClick={() => setShowThink(prev => !prev)}
-                      >
-                        {showThink ? "隐藏思考过程 ▲" : "显示思考过程 ▼"}
-                      </button>
-
-                      {showThink && (
-                        <div className="mt-2 rounded bg-gray-100 p-3 text-sm dark:bg-gray-800">
-                          <MessageMarkdown content={thinkContent} />
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              )
-            })()
+              <MessageContent content={message.content} />