style(chat): 优化消息气泡组件样式间距

- 移除消息气泡底部多余外边距,调整整体布局美观
- 为模型思考内容容器增加底部外边距,改善内容分隔
- 统一模型思考区域的外边距,提升视觉一致性
- 根据内容情况动态添加外边距,增强排版灵活性
This commit is contained in:
ooodc 2026-06-14 12:55:49 +08:00
parent b67848180b
commit 3630e62e18

View File

@ -242,7 +242,7 @@ function ThinkingSection({ content }: { content: string }) {
const [expanded, setExpanded] = useState(false) const [expanded, setExpanded] = useState(false)
return ( 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 <button
onClick={(e) => { e.stopPropagation(); setExpanded(!expanded) }} 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" 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 && ( {showThinking && message.reasoningContent && !toolExpanded && (
<div className="px-3 pb-1"> <div className="px-3 pb-1 mb-2">
<ThinkingSection content={message.reasoningContent} /> <ThinkingSection content={message.reasoningContent} />
</div> </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"> <div className="border-t border-[var(--border-color)] px-3 py-2 space-y-2">
{/* 模型思考内容(展开时也展示) */} {/* 模型思考内容(展开时也展示) */}
{showThinking && message.reasoningContent && ( {showThinking && message.reasoningContent && (
<div className="mb-2">
<ThinkingSection content={message.reasoningContent} /> <ThinkingSection content={message.reasoningContent} />
</div>
)} )}
{taskResult ? ( {taskResult ? (
<> <>
@ -681,7 +683,9 @@ export function MessageBubble({ message, onNavigateToSubAgent, showThinking = tr
// 模型思考内容(仅助手消息,非工具消息) // 模型思考内容(仅助手消息,非工具消息)
<> <>
{showThinking && !isTool && message.reasoningContent && ( {showThinking && !isTool && message.reasoningContent && (
<div className={message.content.trim() ? 'mb-3' : ''}>
<ThinkingSection content={message.reasoningContent} /> <ThinkingSection content={message.reasoningContent} />
</div>
)} )}
{/* AI 和工具消息使用 Markdown 渲染 */} {/* AI 和工具消息使用 Markdown 渲染 */}
{message.content.trim() && ( {message.content.trim() && (