feat(ui): 子智能体消息 Markdown 渲染与气泡展开淡出优化

- 子智能体输出内容使用 MarkdownRenderer 渲染 - 修复多智能体气泡内 Markdown 元素底色适配气泡背景 - 修复对话区域 Markdown 行内代码与加粗样式 - 用户消息/子智能体消息气泡展开按钮增加横纵向淡出效果 - 展开/收起时按钮位置通过 margin 平滑过渡
2026-07-13 00:48:05 +08:00 · 2026-07-13 00:48:05 +08:00 · de5160ead0
commit de5160ead0
parent 692748d567
2 changed files with 216 additions and 8 deletions
--- a/static/src/components/chat/ChatArea.vue
+++ b/static/src/components/chat/ChatArea.vue
@ -65,7 +65,10 @@
                :ref="(el) => registerUserBubbleRef(msg, index, el)"
              >
                <template v-if="isMultiAgentMessage(msg)">
-                  {{ multiAgentBubbleContent(msg) }}
+                  <MarkdownRenderer
+                    :content="multiAgentBubbleContent(msg)"
+                    :is-streaming="false"
+                  />
                </template>
                <template v-else>
                  <span v-html="renderUserMessageContent(msg.content)"></span>
@ -996,7 +999,7 @@ function isContinuousMultiAgentMessage(message: any, index: number): boolean {

 function multiAgentBubbleContent(message: any): string {
  const parsed = parseMultiAgentMessage(message?.content || '');
-  return parsed?.content || message?.content || '';
+  return (parsed?.content || message?.content || '').trim();
 }

 const escapeUserHtml = (value: string): string =>
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@ -490,7 +490,7 @@
  align-items: flex-end; /* 靠右对齐 */
 }

-/* 多智能体消息：渲染为左侧对话气泡，复用用户消息气泡样式 */
+/* 多智能体消息：左侧对话气泡，内部渲染 Markdown */
 .user-message.user-message--multi-agent {
  align-items: flex-start;
 }
@ -511,6 +511,152 @@
  align-self: flex-start;
 }

+.user-message.user-message--multi-agent .message-text.user-bubble-text .bubble-text {
+  white-space: normal;
+  word-break: normal;
+}
+
+/* 首尾元素贴合气泡内边距，避免 XML 内容换行导致的空段落撑开间距 */
+.user-message.user-message--multi-agent .bubble-text .markdown-text-segment > *:first-child {
+  margin-top: 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text .markdown-text-segment > *:last-child {
+  margin-bottom: 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text p:empty {
+  display: none;
+}
+
+.user-message.user-message--multi-agent .bubble-text h1,
+.user-message.user-message--multi-agent .bubble-text h2,
+.user-message.user-message--multi-agent .bubble-text h3,
+.user-message.user-message--multi-agent .bubble-text h4,
+.user-message.user-message--multi-agent .bubble-text h5,
+.user-message.user-message--multi-agent .bubble-text h6 {
+  margin: 14px 0 6px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--claude-text);
+}
+
+.user-message.user-message--multi-agent .bubble-text h1 {
+  font-size: 1.5em;
+}
+
+.user-message.user-message--multi-agent .bubble-text h2 {
+  font-size: 1.3em;
+}
+
+.user-message.user-message--multi-agent .bubble-text h3 {
+  font-size: 1.15em;
+}
+
+.user-message.user-message--multi-agent .bubble-text h4,
+.user-message.user-message--multi-agent .bubble-text h5,
+.user-message.user-message--multi-agent .bubble-text h6 {
+  font-size: 1em;
+}
+
+.user-message.user-message--multi-agent .bubble-text p {
+  margin: 6px 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text strong,
+.user-message.user-message--multi-agent .bubble-text b {
+  font-weight: 700;
+}
+
+.user-message.user-message--multi-agent .bubble-text em,
+.user-message.user-message--multi-agent .bubble-text i {
+  font-style: italic;
+}
+
+.user-message.user-message--multi-agent .bubble-text ul,
+.user-message.user-message--multi-agent .bubble-text ol {
+  margin: 6px 0;
+  padding-left: 1.4em;
+}
+
+.user-message.user-message--multi-agent .bubble-text li {
+  margin: 3px 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text blockquote {
+  margin: 10px 0;
+  padding: 4px 12px;
+  border-left: 3px solid var(--claude-border);
+  color: var(--claude-text-secondary);
+}
+
+.user-message.user-message--multi-agent .bubble-text hr {
+  margin: 14px 0;
+  border: none;
+  border-top: 1px solid var(--claude-border);
+}
+
+/* 代码/表格底色基于气泡色 chip-bg 派生，避免与气泡背景融为一体 */
+.user-message.user-message--multi-agent .bubble-text code {
+  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
+  background: color-mix(in srgb, var(--claude-text) 7%, var(--chip-bg));
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.user-message.user-message--multi-agent .bubble-text pre {
+  background: color-mix(in srgb, var(--claude-text) 5%, var(--chip-bg));
+  padding: 10px 12px;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 10px 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0;
+  background: transparent;
+}
+
+.user-message.user-message--multi-agent .bubble-text .md-table-scroll,
+.user-message.user-message--multi-agent .bubble-text [data-md-table-scroll='1'] {
+  display: block;
+  width: auto;
+  max-width: none;
+  margin: 10px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 1px solid var(--claude-border);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--claude-text) 4%, var(--chip-bg));
+}
+
+.user-message.user-message--multi-agent .bubble-text .md-table-scroll > table,
+.user-message.user-message--multi-agent .bubble-text [data-md-table-scroll='1'] > table {
+  margin: 0;
+}
+
+.user-message.user-message--multi-agent .bubble-text th,
+.user-message.user-message--multi-agent .bubble-text td {
+  border: 1px solid var(--claude-border);
+  padding: 6px 10px;
+  text-align: left;
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+.user-message.user-message--multi-agent .bubble-text th {
+  font-weight: 600;
+  background: color-mix(in srgb, var(--claude-text) 7%, var(--chip-bg));
+}
+
 .message-block--last
  .user-message:not(.user-message--compact):not(.user-message--brief):not(
    .user-message--multi-agent
@ -680,29 +826,70 @@
  max-height: var(--bubble-full-height, 9999px);
  white-space: pre-wrap;
  word-break: break-all;
+  position: relative;
 }

 .user-message .message-text.user-bubble-text.is-history-loading .bubble-text {
  transition: none !important;
 }

-.user-message .message-text.user-bubble-text.is-expandable .bubble-text:not(.is-expanded) {
-  max-height: var(--bubble-fold-height, 240px);
+/* 可折叠气泡容器 */
+.user-message .message-text.user-bubble-text.is-expandable {
+  position: relative;
 }

-/* 展开/收起按钮独占一行，不遮挡气泡内容，始终显示 */
+/* 可折叠气泡：多显示一行，底部竖直渐变淡出 */
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text:not(.is-expanded) {
+  max-height: calc(var(--bubble-fold-height, 240px) + 1.6em);
+}
+
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1.6em;
+  background: linear-gradient(to bottom, transparent, var(--chip-bg));
+  pointer-events: none;
+  opacity: 1;
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text.is-expanded::after {
+  opacity: 0;
+}
+
+/* 展开/收起按钮：
+   - 折叠时：向上浮到 bubble-text 底部，与最后一行文字同处一行，带水平渐变
+   - 展开时：margin-top 恢复为 0，单独一行在内容下方 */
 .user-bubble-expand-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
-  margin-top: -4px;
-  margin-bottom: -10px;
+  margin-top: 0;
+  margin-bottom: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  align-self: flex-end;
  width: 100%;
  min-height: 22px;
+  transition: margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text:not(.is-expanded) ~ .user-bubble-expand-row {
+  margin-top: -1.6em;
+  min-height: 1.6em;
+  align-items: flex-end;
+  background: linear-gradient(to right, transparent 0%, transparent 50%, var(--chip-bg) 100%);
+  border-bottom-right-radius: 18px;
+}
+
+.user-message .message-text.user-bubble-text.is-expandable .bubble-text.is-expanded ~ .user-bubble-expand-row {
+  margin-top: 0;
+  background: transparent;
+  border-bottom-right-radius: 0;
 }

 .user-bubble-expand-row .user-bubble-expand-btn {
@ -1461,6 +1648,24 @@ show-html:not([data-rendered='1'])[ratio='3:4'] {
  overflow-x: hidden;
 }

+/* Markdown 行内代码与加粗：在对话区域背景下给出明确对比 */
+.text-output .text-content :not(pre) > code {
+  font-family:
+    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', 'Monaco', 'Courier New',
+    monospace;
+  background: var(--surface-muted);
+  color: var(--text-primary);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.text-output .text-content strong,
+.text-output .text-content b {
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
 .text-output .text-content .code-block-wrapper {
  margin-right: calc(var(--chat-content-x) * -1);
  margin-left: calc(var(--chat-content-x) * -1);