feat: 重构AI消息气泡结构,集成thinking、tool和content为统一block

- AI消息使用统一的可折叠容器(message-block)
- thinking和tool使用相同样式,支持展开/收起
- 工具调用显示input/output内容,区分入参和出参
- 添加状态徽章样式(running/completed/error + 脉冲动画)
- 消息气泡添加毛玻璃效果和精细阴影
- 删除file场景(分析上传的报表)
- 同步更新main specs
This commit is contained in:
2026-04-19 16:34:50 +08:00
parent 9dd2d4a1fc
commit 7125753ca2
4 changed files with 300 additions and 118 deletions

View File

@@ -105,7 +105,13 @@
}
.message.assistant .message-bubble {
background: var(--color-bg-2);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.06);
border-bottom-left-radius: 4px;
}
@@ -122,17 +128,27 @@
padding: 0 4px;
}
// AI 思考过程
.message-thinking {
// AI 消息Block容器thinking和tool通用
.message-block {
margin-bottom: 12px;
border: 1px solid var(--color-border-3);
border-radius: 12px;
overflow: hidden;
background: #FFFBEB;
cursor: pointer;
&.expanded {
.message-block-header-icon {
transform: rotate(90deg);
}
.message-block-content {
display: block;
}
}
}
.message-thinking-header {
.message-block-header {
display: flex;
align-items: center;
gap: 8px;
@@ -150,26 +166,31 @@
}
}
.message-thinking-icon {
.message-block-header-icon {
transition: transform 0.2s ease;
font-size: 12px;
flex-shrink: 0;
}
.message-thinking.expanded .message-thinking-icon {
transform: rotate(90deg);
.message-block-header-title {
flex: 1;
}
.message-thinking-content {
.message-block-header-status {
font-size: 12px;
color: var(--color-text-3);
display: flex;
align-items: center;
gap: 4px;
}
.message-block-content {
padding: 12px 14px;
font-size: 14px;
line-height: 1.6;
color: #78350F;
display: none;
.message-thinking.expanded & {
display: block;
}
ul {
margin: 8px 0 0 0;
padding-left: 20px;
@@ -180,6 +201,95 @@
}
}
.message-block-time {
font-size: 12px;
color: var(--color-text-4);
padding: 8px 14px 12px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
// 工具调用Block
.message-tool {
background: #F0F9FF;
border-color: #BFDBFE;
.message-block-header {
color: #1E40AF;
background: rgba(219, 234, 254, 0.5);
}
.message-block-header-status {
color: #1D4ED8;
}
}
.message-tool-running {
color: #3B82F6;
&::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
animation: pulse 1.5s ease-in-out infinite;
}
}
.message-tool-completed {
color: #10B981;
}
.message-tool-error {
color: #EF4444;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
// 工具调用的input/output分隔
.message-tool-io {
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding-top: 12px;
margin-top: 12px;
&:first-child {
border-top: none;
padding-top: 0;
margin-top: 0;
}
}
.message-tool-io-label {
font-size: 12px;
font-weight: 600;
color: #64748B;
margin-bottom: 8px;
}
.message-tool-io-content {
background: #1E293B;
border-radius: 8px;
padding: 12px;
overflow-x: auto;
pre, code {
font-family: 'Fira Code', monospace;
font-size: 13px;
color: #E2E8F0;
margin: 0;
white-space: pre-wrap;
word-break: break-all;
}
}
// 输入区
.chat-input-wrapper {
padding: 16px 24px 24px;