From 3630e62e185e6b6407b45f4b1768222e4ef5a097 Mon Sep 17 00:00:00 2001
From: ooodc <549496103@qq.com>
Date: Sun, 14 Jun 2026 12:55:49 +0800
Subject: [PATCH] =?UTF-8?q?style(chat):=20=E4=BC=98=E5=8C=96=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E6=B0=94=E6=B3=A1=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除消息气泡底部多余外边距，调整整体布局美观
- 为模型思考内容容器增加底部外边距，改善内容分隔
- 统一模型思考区域的外边距，提升视觉一致性
- 根据内容情况动态添加外边距，增强排版灵活性
---
 web/src/components/Chat/MessageBubble.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/components/Chat/MessageBubble.tsx b/web/src/components/Chat/MessageBubble.tsx
index e8a2751..2f5343e 100644
--- a/web/src/components/Chat/MessageBubble.tsx
+++ b/web/src/components/Chat/MessageBubble.tsx
@@ -242,7 +242,7 @@ function ThinkingSection({ content }: { content: string }) {
   const [expanded, setExpanded] = useState(false)
 
   return (
-    <div className="mb-3 rounded-lg border border-[var(--border-color)] bg-[var(--overlay-hover)] overflow-hidden">
+    <div className="rounded-lg border border-[var(--border-color)] bg-[var(--overlay-hover)] overflow-hidden">
       <button
         onClick={(e) => { e.stopPropagation(); setExpanded(!expanded) }}
         className="flex items-center gap-2 w-full px-3 py-2 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--overlay-subtle)] transition-colors cursor-pointer select-none"
@@ -449,7 +449,7 @@ export function MessageBubble({ message, onNavigateToSubAgent, showThinking = tr
 
             {/* 模型思考内容（工具调用时展示） */}
             {showThinking && message.reasoningContent && !toolExpanded && (
-              <div className="px-3 pb-1">
+              <div className="px-3 pb-1 mb-2">
                 <ThinkingSection content={message.reasoningContent} />
               </div>
             )}
@@ -513,7 +513,9 @@ export function MessageBubble({ message, onNavigateToSubAgent, showThinking = tr
               <div className="border-t border-[var(--border-color)] px-3 py-2 space-y-2">
                 {/* 模型思考内容（展开时也展示） */}
                 {showThinking && message.reasoningContent && (
-                  <ThinkingSection content={message.reasoningContent} />
+                  <div className="mb-2">
+                    <ThinkingSection content={message.reasoningContent} />
+                  </div>
                 )}
                 {taskResult ? (
                   <>
@@ -681,7 +683,9 @@ export function MessageBubble({ message, onNavigateToSubAgent, showThinking = tr
             // 模型思考内容（仅助手消息，非工具消息）
             <>
             {showThinking && !isTool && message.reasoningContent && (
-              <ThinkingSection content={message.reasoningContent} />
+              <div className={message.content.trim() ? 'mb-3' : ''}>
+                <ThinkingSection content={message.reasoningContent} />
+              </div>
             )}
             {/* AI 和工具消息使用 Markdown 渲染 */}
             {message.content.trim() && (