fix: move sent times below Agent message bubbles
This commit is contained in:
鲨鱼辣椒 committed
1 parent
95e701c4f3
commit
154a21a295
4 files changed
+28
-6
No files matched your search
@@ -8,7 +8,7 @@
|
||||
- Worktree: /Users/chillishark/Makelore 麦洛/.codex-worktrees/makelore/20261013-chat-message-time-64ebac32
|
||||
- Base commit: 2899009215b1de8e28b84fc108e880c6e68a6098
|
||||
- Owner: codex
|
||||
- Status: Ready for Integration
|
||||
- Status: Planning
|
||||
|
||||
## Scope
|
||||
|
||||
@@ -94,3 +94,16 @@
|
||||
- Loaded new assets/mount verified in the real app. The user's current page had no visible chat message articles, so actual message-time DOM visibility is explicitly pending their natural next chat opening; root did not navigate just to create that evidence. Timestamp semantics/layout/hydration were checked in the120passing focused UI/unit tests and updated E2E assertions; full native E2E not run to preserve desktop focus. Do not claim a real visible-message screenshot check.
|
||||
- Current runtime now reports Renderer64b4a84/source ownworktree; Main source remains7c51bb4a008e388071ec37156adeae80eff24167. Stage retains the actual old Renderer rollback binding. Application is updated for normal user viewing. Source branch/worktree are retained; no merge/push or cleanup.
|
||||
- Outcome complete: requested existing-field send/reply timestamps implemented, tested and applied in background. Queue-presentation redesign, wait-duration and the separate upstream replay fix are not included in this time-only result. Earlier exact-finish proposal is superseded by the user's simple message-time request.
|
||||
|
||||
## User-Specified Sender Time Placement Correction
|
||||
|
||||
- User screenshots show current sender timestamp inside the purple bubble and Codex sender timestamp outside/below its bubble. User explicitly says assistant reply time is correct. Scope: move only sender bubble styling to the message-body and keep the sender timestamp as the existing sibling footer below/right outside the bubble. Preserve purple palette, text, timestamps/tooltip/identity, assistant layout, APIs, and all existing runtime source.
|
||||
- Same-task bundled check/start/status resumed exact owned branch/worktree/base. Current Renderer64b4a84 matches own committed product, with later95e701c documentation only. Canonical/AGENTS/entry/design context is unchanged and reused; all current peer Scope/Intent/Promotion sections read. No semantic conflict blocks this sender-only CSS correction. Planning Gate: Passed.
|
||||
- Update mobile padding on the inner bubble, relevant E2E geometry expectations and README. Use headless browser CSS geometry/visual checks without launching visible Electron windows; retain existing timestamp unit regressions and typecheck/build. Stage a fresh immutable overlay against actual64b4 predecessor, then strict quiet/account/input/receipt/CAS checks before background refresh. No new send/copy/edit buttons, assistant time redesign, queue/replay/sourceBackend changes or focus activation.
|
||||
|
||||
## Sender Placement Verification Before Refresh
|
||||
|
||||
- Only sender selectors in agent-chat.css changed: bubble padding/background/border/radius/shadow moved from the outer article to the existing inner message-body; the existing time sibling is now outside the bubble with8px gap and4px right inset. Mobile body padding follows the same split. No sender/assistant timestamp values, labels, message logic or assistant selectors changed. README and Electron spec now reflect the inner bubble and assert footer below/outside it.
|
||||
- Headless Chromium QA with real MessageTimestamp React SSR, bundled styles/fonts and synthetic short/long/unbroken messages passed at320/375/980/1366/1920. Sender wrapper/footer transparent, purple bubble retained,8px gap/4px text inset, wrapping correct, no horizontal overflow. Assistant bubble/time computed styles and dimensions match oldHEAD baseline. Root reviewed the1366 screenshot; child reviewed320/1366. No real app or network/private data touched by this visual check. Evidence: /Users/chillishark/Makelore 麦洛/.trial-runtime/chat-time-placement-20261013-64ebac32/qa/geometry.json andplacement-*.png.
|
||||
- Existing43focused timestamp/rendering/reasoning/stream/formatter tests passed, typecheck/production build/scoped E2E lint/diff checks pass. No new implementation-mirroring unit tests added for this CSS-only correction; the updated browser geometry assertion and actual headless layout checks verify the requested behavior. Native Electron E2E is not launched to preserve user focus.
|
||||
- Fresh separate deployment stage /Users/chillishark/Makelore 麦洛/.trial-runtime/chat-time-placement-20261013-64ebac32 retains reviewed prior helper guards and restricts runtime source delta toagent-chat.css against64b4a84. Main/shared/backend remain unchanged. Sender geometry will also be checked if real messages are visible during post-refresh read-only verification.
|
||||
@@ -14,7 +14,7 @@ Makelore 是一个面向软件、视觉创作、智能机器人与个人云智
|
||||
会话工作台采用浅蓝项目栏、彩色通用手柄图标与卡片选中态；中间对话/作品使用圆角标签，作品预览的后退、前进、刷新与网址输入统一放在标签右侧；只在作品页显示，窄窗口自动换行。右侧智能体咨询使用奶油色标题区。沿用真实项目和会话入口、侧栏伸缩与账户菜单，样式只作用于 Code 会话工作台。可编辑的空对话在输入区上方的可用区域中央显示童趣欢迎语；「去作品广场逛逛」入口紧贴输入框上方，两者一起位于底部。老师介绍以固定宽度浮在右上角，不占用中间布局；欢迎语和底部输入区始终相对项目栏右侧的整个内容区域居中；小窗口的欢迎内容独立滚动；发送首条消息后收起欢迎区。侧栏保留「作品广场」入口，只有点击后才在系统浏览器打开公共广场，不请求、摘取或内嵌展示广场作品。打开广场保留当前项目、对话、草稿和附件，不自动发送消息；老师求助按钮保留临时应用的最新文案「帮我整体看🧠」。
|
||||
- `Makelore Agents｜AI 智能体`：从模块首页进入时先打开“我的智能体”卡片列表，保留此前对话与操作恢复记录；返回首页箭头与侧栏折叠按钮同排，折叠后仍可返回；智能体模块的侧栏只通过按钮点击或键盘激活展开，鼠标经过左侧、收纳按钮或顶栏不会展开，切换模块不沿用旧悬停预览；其他模块仍保留原预览方式。“我的智能体”使用浅紫对话机器人图标，“渠道”使用浅蓝连接节点图标。macOS 原生窗口按钮留出安全空间。首页围绕自己的智能体和创建入口，显示童趣问候“Hi，今天想创造还是想聊聊？”，不再显示更多、收到的分享、活动或归档筛选。卡片恢复原有尺寸与留白，显示名称、可为空的一句话介绍及状态，支持聊天、调整、继续制作和确认删除；删除沿用云端归档机制，移出列表并停用新调用，历史和费用保留。创建先填写名称并选择平台像素头像或上传头像，下一步进入独立配置。顶部名称有编辑图标，头像可点击修改；未设置头像时使用同一张默认像素头像，从创建到配置、改名、保存和重新打开保持一致。基础页为“介绍与提示词”，一句话介绍可留空，完整提示词保留原始文本；模型作为高级设置第一项必选，未选择时不能开始使用，草稿可分步保存，不自动选模型。介绍与提示词采用浅蓝介绍卡和浅紫提示词卡；高级设置按模型、工具箱（Tool）、做事手册（Skill）、MCP 服务和知识库纵向呈现；移除子智能体选择模块，保存其他配置时保留历史子智能体绑定，不再设内部分类切换；不展示 Tool/Skill 解释、资源开放规则提示、云端能力管理、费用上限或运行限制卡片，保存其他配置时保留既有运行限制，费用规则不变。顶层页签切换保留搜索、资源选择、知识表单及未保存输入。配置页移除聊天、自动任务和使用与接入导航，独立聊天仍从卡片进入，微信账号仍在侧栏渠道管理。草稿明确保存（Ctrl/⌘+S）；保存只更新草稿，“应用最新修改”使新配置生效，失败重试保持原操作身份；点击“开始使用”完成必要的私有启用后直接打开聊天，不再展示二次确认页；未保存修改、缺少模型、冲突或尚未确认的请求会留在配置页处理，打开聊天不自动发送消息。独立对话沿用奶油底色和浅蓝、浅紫、薄荷色：顶部展示返回、只读头像和名称；有附件时在同一行右侧显示回形针“附件”入口和文件数量，不展示调整、保存／应用状态、客户端／微信来源、费用／版本说明或历史／新对话图标；配置由列表卡片的“调整”进入。空对话展示当前智能体头像与名称，示例只填入草稿；用户消息使用浅紫圆角气泡，助手 Markdown、表格和代码在消息区内滚动。文件或图片从输入框内添加，上传成功后以待发送卡片呈现，可移除本次携带；移除不会删除云端文件，添加不会自动发送。确认失败沿用同一文件和对话重试，发送前需完成或取消添加；支持仅发送附件，使用明确的附件提问。输入框的“＋”添加文件或图片；右上角“附件”打开右侧面板，按“你上传的”和“助手生成的”分组，支持再次选用已上传附件及保存明确交付的生成文件。生成文件仅取当前对话已保存助手回复中的本地文件链接（含图片与引用式链接），核对实际文件后展示和计数；只读取链接所在的文件夹，不遍历全部工作文件。未交付的脚本、缓存和工具记录不展示、不计数，明确交付的代码照常展示；仅写了路径的旧成果可能暂时隐藏，后续接入 Yuxi 的正式交付记录。没有文件时隐藏入口；打开、关闭面板保留聊天与输入，Escape 关闭并返回入口焦点；最近对话自动恢复、审批、停止和未发送内容的离开保护保留。模型返回的思考按消息独立于正文展示；正文到来后或完成时折叠，可手动展开；无思考或工具内容时不显示过程区。重连事件去重并隔离当前运行与主对话，终态历史未到达时保留已收到的片段并有限补读；服务端返回的最终回答思考可在历史中回看，不进入后续提问。历史回看需要配套 Yuxi API 的思考和工具记录投影；实时过程沿用既有事件流。平台工具和内置做事手册使用 Yuxi 下发的通俗名称与说明；逐条消息的思考、工具输入／结果／失败独立于 Markdown 正文，实时与历史工具卡片共用展示文案，展开可查看原始工具标识。个人上传手册保留作者文案，资源选择仍保存原始标识。头像上传、Main-owned Host API、访Line truncated
|
||||
|
||||
个人智能体聊天在每条提问与回答下方显示云端记录的消息时间：今天显示时分，跨日增加日期，悬停可查看完整日期与秒数；发送时间与回复时间沿用原消息记录，重开对话不改为当前时间。流式回答尚无可靠时间时显示「回复中…」，历史到达后展示原时间；缺失或无效时间显示「时间未记录」。正式对话、草稿试用和上次试用对比使用相同规则，不新增 Yuxi 接口。
|
||||
个人智能体聊天在每条提问与回答下方显示云端记录的消息时间；发送时间位于紫色消息气泡外下方并靠右，助手回复时间保持在回答下方：今天显示时分，跨日增加日期，悬停可查看完整日期与秒数；发送时间与回复时间沿用原消息记录，重开对话不改为当前时间。流式回答尚无可靠时间时显示「回复中…」，历史到达后展示原时间；缺失或无效时间显示「时间未记录」。正式对话、草稿试用和上次试用对比使用相同规则，不新增 Yuxi 接口。
|
||||
|
||||
历史待确认记录收起在智能体列表标题区的「创建记录／待处理记录」入口，只有点击后才打开记录窗口；配置、聊天和创建页不再置顶这些旧提醒。记录保留智能体名称和原请求身份；应用设置的待确认记录显示“网络可能不稳定，请再点一次「应用」。”，点击「应用」继续原来的提交，成功后显示“设置已应用。”。其他记录仍可明确「再试一次」或「不再提醒」，不会自动重试或清除。当前创建失败继续在创建表单内提示；关闭记录窗口保留已收到的结果和密钥，切换配置、聊天或创建页后可返回列表继续查看。密钥须明确关闭结果后，才可处理其他记录。
|
||||
|
||||
|
||||
@@ -96,11 +96,12 @@
|
||||
.agent-chat-message-content { min-width: 0; flex: 1; }
|
||||
.agent-chat-speaker { margin-bottom: 7px; color: #606c7e; font-size: 12px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
|
||||
.agent-chat-styled .agent-chat-message-body { color: #273246; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
|
||||
.agent-chat-message[data-role="user"] { align-self: flex-end; width: fit-content; max-width: 85%; padding: 14px 20px; border: 1px solid #e3d9f0; border-radius: 22px 22px 7px 22px; background: #f0e9f9; box-shadow: 0 2px 0 #e9e1f0; }
|
||||
.agent-chat-message[data-role="user"] { align-self: flex-end; width: fit-content; max-width: 85%; }
|
||||
.agent-chat-message[data-role="user"] .agent-chat-message-body { padding: 14px 20px; border: 1px solid #e3d9f0; border-radius: 22px 22px 7px 22px; background: #f0e9f9; box-shadow: 0 2px 0 #e9e1f0; }
|
||||
.agent-chat-message[data-role="user"] .agent-chat-message-body p { margin: 0; }
|
||||
.agent-chat-message[data-role="user"] .agent-chat-speaker { color: #75628e; }
|
||||
.agent-chat-message-time { margin-top: 6px; font-size: 12px; }
|
||||
.agent-chat-message[data-role="user"] .agent-chat-message-time { text-align: right; }
|
||||
.agent-chat-message[data-role="user"] .agent-chat-message-time { margin-top: 8px; padding-right: 4px; text-align: right; }
|
||||
.agent-chat-styled .agent-chat-message-body :is(pre, table) { display: block; max-width: 100%; overflow-x: auto; }
|
||||
.agent-chat-styled .agent-chat-message-body pre { padding: 14px 16px; border: 1px solid #e4e2dc; border-radius: 13px; background: #f3f2ef; font-size: 13px; line-height: 1.7; overflow-wrap: normal; }
|
||||
.agent-chat-styled .agent-chat-message-body img { max-width: 100%; height: auto; border-radius: 12px; }
|
||||
@@ -179,7 +180,8 @@
|
||||
.agent-chat-message { gap: 9px; }
|
||||
.agent-chat-styled .agent-chat-message-avatar { width: 30px; height: 30px; border-radius: 10px; }
|
||||
.agent-chat-styled .agent-chat-message-body { font-size: 14px; }
|
||||
.agent-chat-message[data-role="user"] { max-width: 91%; padding: 12px 14px; }
|
||||
.agent-chat-message[data-role="user"] { max-width: 91%; }
|
||||
.agent-chat-message[data-role="user"] .agent-chat-message-body { padding: 12px 14px; }
|
||||
.agent-chat-workspace-header { min-height: 64px; padding: 10px 14px; }
|
||||
.agent-chat-header-name { font-size: 16px; }
|
||||
.agent-chat-header-avatar { width: 38px; height: 38px; border-radius: 13px; }
|
||||
|
||||
@@ -335,12 +335,19 @@ test('personal cloud Agent identity, configuration and separate published chat i
|
||||
const answerTime = formalChat.locator('.agent-chat-message[data-role="assistant"] time');
|
||||
await expect(answerTime).toHaveAttribute('datetime', '2026-10-13T09:25:40.000Z');
|
||||
await expect(answerTime).toHaveAccessibleName(/^回复时间：/);
|
||||
const bubbleStyle = await userBubble.evaluate(element => {
|
||||
const bubbleBody = userBubble.locator('.agent-chat-message-body');
|
||||
const bubbleStyle = await bubbleBody.evaluate(element => {
|
||||
const style = getComputedStyle(element);
|
||||
return { background: style.backgroundColor, radius: Number.parseFloat(style.borderTopLeftRadius) };
|
||||
});
|
||||
expect(bubbleStyle.background).not.toBe('rgba(0, 0, 0, 0)');
|
||||
expect(bubbleStyle.radius).toBeGreaterThan(0);
|
||||
const bodyBounds = await bubbleBody.boundingBox();
|
||||
const sentTimeBounds = await userBubble.locator('time').boundingBox();
|
||||
expect(bodyBounds).not.toBeNull();
|
||||
expect(sentTimeBounds).not.toBeNull();
|
||||
expect(sentTimeBounds!.y).toBeGreaterThanOrEqual(bodyBounds!.y + bodyBounds!.height + 6);
|
||||
await expect(userBubble).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
|
||||
await expect(formalChat.locator('.agent-chat-message[data-role="assistant"]').getByRole('img', { name: '我的写作搭档头像', exact: true })).toHaveAttribute('src', avatar.icon_url);
|
||||
await expect(formalChat.getByLabel('消息', { exact: true })).toBeInViewport();
|
||||
const transcriptBounds = await formalChat.getByTestId('cloud-chat-messages').boundingBox();
|
||||
|
||||
Reference in new issue
Block a user