mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-08-04 08:28:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): show timestamps for replayed messages

Browse Source
This commit is contained in:
chengyongru 2026-08-03 10:33:49 +08:00 committed by chengyongru
parent 580824a15a
commit 8fde956c64
2 changed files with 72 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
webui/src/components/MessageBubble.tsx
View File

@ -253,6 +253,9 @@ export function MessageBubble({
const hasText = userContent.trim().length > 0;
const showDeliveryStatus =
message.deliveryStatus === "sending" || message.deliveryStatus === "failed";
const createdAtLabel = formatMessageEndTime(message.createdAt);
const showCreatedAt = createdAtLabel.length > 0;
const createdAtTitle = showCreatedAt ? fmtDateTime(message.createdAt) : "";
const quotedContext = parsedMessage.quotedContext;
const slashCommand = matchingSlashCommand(userContent, slashCommands);
const messageText = slashCommand ? (
@ -298,9 +301,19 @@ export function MessageBubble({
{messageText}
</p>
) : null}
{showDeliveryStatus || (hasText && showCopyAction) ? (
{showDeliveryStatus || showCreatedAt || (hasText && showCopyAction) ? (
<TooltipProvider delayDuration={220} skipDelayDuration={80}>
<div className="flex min-h-8 items-center justify-end gap-1.5 text-muted-foreground">
{showCreatedAt ? (
<time
data-message-created-at
dateTime={new Date(message.createdAt).toISOString()}
className="text-[11px] leading-none text-muted-foreground/70 tabular-nums"
title={createdAtTitle}
>
{createdAtLabel}
</time>
) : null}
<UserDeliveryStatus
status={message.deliveryStatus}
errorKind={message.deliveryErrorKind}
@ -338,11 +351,22 @@ export function MessageBubble({
message.role === "assistant" && !message.isStreaming
? formatMessageEndTime(completedAt)
: "";
const assistantTimestamp =
typeof completedAt === "number" && Number.isFinite(completedAt)
? completedAt
: message.createdAt;
const assistantTimestampLabel =
message.role === "assistant" && !message.isStreaming
? formatMessageEndTime(assistantTimestamp)
: "";
const showCompletedAt =
completedAtLabel.length > 0
&& (!empty || hasReasoning || media.length > 0);
const completedAtTitle = showCompletedAt ? fmtDateTime(completedAt) : "";
const showAssistantFooterRow = showCopyButton || showForkButton || showCompletedAt;
const showAssistantTimestamp =
assistantTimestampLabel.length > 0
&& (!empty || hasReasoning || media.length > 0);
const assistantTimestampTitle = showAssistantTimestamp ? fmtDateTime(assistantTimestamp) : "";
const showAssistantFooterRow = showCopyButton || showForkButton || showAssistantTimestamp;
const showAssistantFooterSlot =
message.role === "assistant"
&& (!empty || hasReasoning || media.length > 0);
@ -414,14 +438,15 @@ export function MessageBubble({
<TooltipContent side="top" align="center">{forkLabel}</TooltipContent>
</Tooltip>
) : null}
{showCompletedAt ? (
{showAssistantTimestamp ? (
<time
data-assistant-completed-at
dateTime={new Date(completedAt!).toISOString()}
{...(showCompletedAt ? { "data-assistant-completed-at": true } : {})}
data-message-timestamp
dateTime={new Date(assistantTimestamp).toISOString()}
className="text-[11px] leading-none text-muted-foreground/70 tabular-nums"
title={completedAtTitle}
title={assistantTimestampTitle}
>
{completedAtLabel}
{assistantTimestampLabel}
</time>
) : null}
</div>

39
webui/src/tests/message-bubble.test.tsx
View File

@ -374,6 +374,45 @@ describe("MessageBubble", () => {
);
});
it("falls back to the assistant creation time when replay has no completion time", () => {
const createdAt = Date.UTC(2026, 6, 25, 12, 34, 56);
const { container } = render(
<MessageBubble
message={{
id: "a-created-at",
role: "assistant",
content: "Proactive answer",
createdAt,
}}
/>,
);
const time = container.querySelector("[data-message-timestamp]");
expect(time).toHaveTextContent(formatMessageEndTime(createdAt));
expect(time).toHaveAttribute("dateTime", new Date(createdAt).toISOString());
expect(time).toHaveAttribute("title", fmtDateTime(createdAt));
expect(time).not.toHaveAttribute("data-assistant-completed-at");
});
it("renders the creation time for user messages", () => {
const createdAt = Date.UTC(2026, 6, 25, 12, 34, 56);
const { container } = render(
<MessageBubble
message={{
id: "u-created-at",
role: "user",
content: "A user message",
createdAt,
}}
/>,
);
const time = container.querySelector("[data-message-created-at]");
expect(time).toHaveTextContent(formatMessageEndTime(createdAt));
expect(time).toHaveAttribute("dateTime", new Date(createdAt).toISOString());
expect(time).toHaveAttribute("title", fmtDateTime(createdAt));
});
it("does not infer completion time from the assistant creation timestamp", () => {
const createdAt = Date.UTC(2026, 6, 25, 12, 34, 0);
const latencyMs = 13_000;