style(agent): distinguish chat participants

CHANGELOG.md

@@ -3,25 +3,26 @@
 ## Unreleased
 
 + [新增] Agent 新增统一生成任务状态查询，支持查看画布、生图工作台和视频工作台任务进度。
++ [新增] 左侧画布面板新增「提示词库」Tab,按来源折叠分组。
++ [新增] 提示词来源增加自定义脚本抓取功能、支持新增来源。
++ [优化] Agent 对话通过右侧主题气泡与左侧开放式回复布局区分用户和 AI 消息。
++ [优化] 画布节点生成完成后,输入框保留提示词内容,不再自动清空。
 + [修复] 本地 Agent 请求与发起标签页强绑定，校验工具结果归属，并在页面关闭后回退到最近聚焦页面。
 + [修复] 多标签页共享 Codex 会话改由 Agent 广播同步，按线程过滤消息和状态，并禁止运行中切换会话。
 + [修复] 本地 Agent 统一广播 Codex 运行状态，新连接标签页会同步禁用发送，并明确区分工具完成与本轮完成。
 + [修复] 本地 Agent 上传的图片附件可创建为画布图片节点并连接生成流程，不再出现参考图空节点。
 + [修复] Agent 对话切换时自动定位到最新消息，并在向上浏览记录时提供快速回到底部按钮。
-+ [新增] 左侧画布面板新增「提示词库」Tab,按来源折叠分组。
 + [修复] 处于「提示词库/资产」Tab 时拖动画布元素卡顿,面板内容不再随节点更新重渲染。
-+ [新增] 提示词来源增加自定义脚本抓取功能、支持新增来源。
-+ [优化] 画布节点生成完成后,输入框保留提示词内容,不再自动清空。
 
 ## v0.9.0 - 2026-07-17
 
-+ [调整] 画布节点名称默认不再显示,仅在选中/悬停/编辑时出现,画布更简洁。
 + [新增] 左侧面板「资产」Tab 支持上传添加图片/视频资产、卡片悬停移除资产。
 + [新增] 左侧画布面板支持拖拽调整宽度、展开/收起(带动画),顶栏菜单左侧新增面板开关按钮。
 + [新增] 顶栏菜单新增「导出当前画布」,导出为包含全部资源的压缩包。
 + [新增] 左侧画布元素列表支持多选并批量导出选中元素为压缩包。
-+ [优化] 左侧面板「画布/资产」切换改为带滑动下划线的动画,移除非图片元素图标的灰色底色。
 + [新增] 可选的网站统计分析:支持 Google Analytics 4 与百度统计。
++ [调整] 画布节点名称默认不再显示,仅在选中/悬停/编辑时出现,画布更简洁。
++ [优化] 左侧面板「画布/资产」切换改为带滑动下划线的动画,移除非图片元素图标的灰色底色。
 + [优化] 画布节点提示词面板 `@` 引用图片时,输入框内直接显示真实缩略图。
 + [优化] 移除画布节点右上角的「图片1/文本1」资源角标,引用改在对话面板 `@` 直接选取。
 + [修复] 连接本地 Codex Agent 后,拖拽画布节点边框缩放等高频编辑导致页面崩溃。
@@ -29,8 +30,8 @@
 ## v0.8.2 - 2026-07-16
 
 + [新增] 图像设置新增「透明背景」开关,开启后生成无背景的透明图像。
-+ [修复] 画布节点提示词输入框补上悬停文本光标。
 + [优化] 画布节点输入区域移除灰色底色与边框、美化样式。
++ [修复] 画布节点提示词输入框补上悬停文本光标。
 
 ## v0.8.1 - 2026-07-16
 

docs/content/docs/progress/pending-test.mdx

@@ -11,3 +11,4 @@ description: 当前版本已实现但仍需人工验证的变更项
 - 本地 Agent 运行状态同步：在一个标签页运行较长 Codex 任务，等待某张工具卡显示「工具完成」后再打开或刷新第二个标签页；第二个标签页应立即显示 Codex 正在运行并禁用发送，整轮结束后两个标签页同时恢复；工具卡只显示「工具完成」，整轮结束由「本轮完成」表示。
 - 本地 Agent 图片附件落画布：在右侧 Agent 上传参考图并要求基于商品信息创建生图流程，附件应创建为保持原比例的真实图片节点，分析提示词应创建为文本节点，二者都应连接到生成配置节点；刷新页面后参考图仍可显示并参与生成。任务中途切换到其他标签页时，附件只能写入发起任务的标签页；若发起标签页关闭，附件读取应失败且不能落入其他画布。
 - Agent 对话滚动：从历史或日志切回对话、恢复其他会话时应自动定位到最新消息；手动向上浏览后应显示向下箭头且新消息不强制打断阅读，点击箭头后平滑回到底部并继续跟随新消息。
+- Agent 消息区分：用户消息应在右侧以主题浅底气泡显示，AI 回复应在左侧保留 Agent 图标并使用开放式 Markdown 排版；长文本、多张附件、错误消息及浅色/深色主题下均应清晰且不溢出。

web/src/components/canvas/canvas-agent-chat-ui.tsx

@@ -48,14 +48,25 @@ export function AgentChatMessage({ item, theme, user, onRejectTool, onApproveToo
     return (
         <div className={`flex items-start gap-3 ${isUser ? "justify-end" : "justify-start"}`}>
             {!isUser ? <AgentAvatar theme={theme} /> : null}
-            <div className={`min-w-0 max-w-[82%] text-sm leading-6 ${isUser ? "text-right" : "text-left"}`} style={{ color }}>
+            <div
+                className={isUser ? "min-w-0 max-w-[82%] rounded-xl rounded-br-sm border px-3.5 py-2.5 text-left text-sm leading-6" : "min-w-0 flex-1 text-left text-sm leading-6"}
+                style={
+                    isUser
+                        ? {
+                              color,
+                              background: `color-mix(in srgb, ${theme.node.text} 7%, ${theme.toolbar.panel})`,
+                              borderColor: `color-mix(in srgb, ${theme.node.text} 14%, transparent)`,
+                          }
+                        : { color }
+                }
+            >
                 {isUser ? (
-                    <div className="whitespace-pre-wrap break-words text-left">{item.text}</div>
+                    <div className="whitespace-pre-wrap break-words">{item.text}</div>
                 ) : (
                     <Streamdown animated isAnimating={!!item.streamId}>{item.text}</Streamdown>
                 )}
                 {item.attachments?.length ? <AgentMessageAttachments attachments={item.attachments} /> : null}
-                {item.meta ? <div className="mt-1 text-[11px] opacity-45">{item.meta}</div> : null}
+                {item.meta ? <div className={`mt-1 text-[11px] opacity-45 ${isUser ? "text-right" : ""}`}>{item.meta}</div> : null}
             </div>
             {isUser ? <AgentUserAvatar user={user} theme={theme} /> : null}
         </div>