Polish agent stream spacing, alignment, and metadata
- Centralize horizontal alignment: StreamItemWrapper / contentWrapper own the chat rail (paddingHorizontal: 8). Stream items stop setting their own outer horizontal padding. Copy icons get negative margins so the visible icon sits flush with the rail edges. - Unify the inline working indicator and assistant turn footer into a shared slot (minHeight: 24, paddingBottom: 24). No layout shift on streaming -> idle, and both gain breathing room above the composer and the next user bubble. - Equalize the gap on both sides of an assistant message adjacent to a tool call (20px each). Drop assistantMessageStylesheet.containerSpacing, which was a redundant marginBottom that only fired in one direction and duplicated getGapBetween's responsibility. - Scale up the chevron via transform (size stays 12, viewBox padding no longer dominates), iconBadge dimensions unchanged. Tool icon and chevron now read as similar visual weight. - Shared STREAM_METADATA_FONT_SIZE (13) for user message timestamp, assistant footer duration/timestamp, and the live elapsed timer. - formatDuration: one rule for static and live displays - 0-10s as X.Xs, 10-60s as Xs, minutes/hours integers only. Drops the `mode` parameter. - formatMessageTimestamp: explicitly carry the resolved hourCycle so the runtime applies an OS-level 24h preference when the platform exposes it (e.g. AppleICUForce24HourTime on macOS).
This commit is contained in:
Mohamed Boudra
@@ -2,36 +2,32 @@ import { describe, it, expect } from "vitest";
|
||||
import { formatDuration, formatMessageTimestamp } from "./time";
|
||||
|
||||
describe("formatDuration", () => {
|
||||
it("renders static durations as integers", () => {
|
||||
expect(formatDuration(5_600)).toBe("5s");
|
||||
expect(formatDuration(0)).toBe("0s");
|
||||
it("renders 0-10s with one decimal", () => {
|
||||
expect(formatDuration(0)).toBe("0.0s");
|
||||
expect(formatDuration(5_600)).toBe("5.6s");
|
||||
expect(formatDuration(9_900)).toBe("9.9s");
|
||||
});
|
||||
|
||||
it("renders 10s-60s as whole seconds", () => {
|
||||
expect(formatDuration(47_000)).toBe("47s");
|
||||
expect(formatDuration(10_400)).toBe("10s");
|
||||
expect(formatDuration(12_340)).toBe("12s");
|
||||
expect(formatDuration(47_000)).toBe("47s");
|
||||
});
|
||||
|
||||
it("renders minutes and remainder seconds", () => {
|
||||
it("renders minutes and remainder seconds without decimals", () => {
|
||||
expect(formatDuration(75_230)).toBe("1m 15s");
|
||||
expect(formatDuration(132_000)).toBe("2m 12s");
|
||||
expect(formatDuration(120_000)).toBe("2m");
|
||||
});
|
||||
|
||||
it("renders hours and remainder minutes", () => {
|
||||
it("renders hours and remainder minutes without decimals", () => {
|
||||
expect(formatDuration(3_900_000)).toBe("1h 5m");
|
||||
expect(formatDuration(3_600_000)).toBe("1h");
|
||||
});
|
||||
|
||||
it("guards against negative and NaN", () => {
|
||||
expect(formatDuration(-1)).toBe("0s");
|
||||
expect(formatDuration(Number.NaN)).toBe("0s");
|
||||
});
|
||||
|
||||
it("keeps one decimal for live durations", () => {
|
||||
expect(formatDuration(5_600, { mode: "live" })).toBe("5.6s");
|
||||
expect(formatDuration(12_340, { mode: "live" })).toBe("12.3s");
|
||||
expect(formatDuration(75_230, { mode: "live" })).toBe("1m 15.2s");
|
||||
expect(formatDuration(0, { mode: "live" })).toBe("0.0s");
|
||||
expect(formatDuration(-1)).toBe("0.0s");
|
||||
expect(formatDuration(Number.NaN)).toBe("0.0s");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -44,17 +44,32 @@ function isSameLocalDay(a: Date, b: Date): boolean {
|
||||
);
|
||||
}
|
||||
|
||||
// Cached Intl formatter. Explicitly carrying `hourCycle` from the resolved
|
||||
// options is what makes the runtime respect the user's OS-level 12h/24h
|
||||
// preference rather than the locale's default cycle.
|
||||
let cachedTimeFormatter: Intl.DateTimeFormat | null = null;
|
||||
function getTimeFormatter(): Intl.DateTimeFormat {
|
||||
if (cachedTimeFormatter) return cachedTimeFormatter;
|
||||
const resolved = new Intl.DateTimeFormat(undefined, {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
}).resolvedOptions();
|
||||
cachedTimeFormatter = new Intl.DateTimeFormat(undefined, {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hourCycle: resolved.hourCycle,
|
||||
});
|
||||
return cachedTimeFormatter;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a chat-message timestamp for hover-revealed UI.
|
||||
* - Same day: "10:11 PM"
|
||||
* - Same day: "10:11 PM" or "22:11" depending on user preference
|
||||
* - Within ~6 days: "Wednesday 10:11 PM"
|
||||
* - Older: "14 May 2026, 10:11 PM"
|
||||
*/
|
||||
export function formatMessageTimestamp(date: Date, now: Date = new Date()): string {
|
||||
const time = date.toLocaleTimeString(undefined, {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
const time = getTimeFormatter().format(date);
|
||||
|
||||
if (isSameLocalDay(date, now)) {
|
||||
return time;
|
||||
@@ -75,47 +90,30 @@ export function formatMessageTimestamp(date: Date, now: Date = new Date()): stri
|
||||
return `${dateLabel}, ${time}`;
|
||||
}
|
||||
|
||||
type DurationFormatMode = "static" | "live";
|
||||
|
||||
/**
|
||||
* Format a duration as a compact human-readable string.
|
||||
* - Static: integer units only
|
||||
* - Live: always keep one decimal in the smallest displayed unit
|
||||
* - 0-10s: one decimal ("3.4s")
|
||||
* - 10s-60s: whole seconds ("47s")
|
||||
* - Minutes/hours: integers only ("2m 12s", "1h 5m")
|
||||
*/
|
||||
export function formatDuration(
|
||||
durationMs: number,
|
||||
options?: { mode?: DurationFormatMode },
|
||||
): string {
|
||||
const mode = options?.mode ?? "static";
|
||||
export function formatDuration(durationMs: number): string {
|
||||
if (!Number.isFinite(durationMs) || durationMs < 0) {
|
||||
return mode === "live" ? "0.0s" : "0s";
|
||||
return "0.0s";
|
||||
}
|
||||
const totalSeconds = durationMs / 1000;
|
||||
|
||||
if (mode === "live") {
|
||||
if (totalSeconds < 60) {
|
||||
return `${totalSeconds.toFixed(1)}s`;
|
||||
}
|
||||
if (totalSeconds < 60 * 60) {
|
||||
const minutes = Math.floor(totalSeconds / 60);
|
||||
const seconds = totalSeconds - minutes * 60;
|
||||
return `${minutes}m ${seconds.toFixed(1)}s`;
|
||||
}
|
||||
const hours = Math.floor(totalSeconds / (60 * 60));
|
||||
const minutes = (totalSeconds - hours * 60 * 60) / 60;
|
||||
return `${hours}h ${minutes.toFixed(1)}m`;
|
||||
if (totalSeconds < 10) {
|
||||
return `${totalSeconds.toFixed(1)}s`;
|
||||
}
|
||||
|
||||
const wholeSeconds = Math.floor(totalSeconds);
|
||||
if (wholeSeconds < 60) {
|
||||
return `${wholeSeconds}s`;
|
||||
if (totalSeconds < 60) {
|
||||
return `${Math.floor(totalSeconds)}s`;
|
||||
}
|
||||
const minutes = Math.floor(wholeSeconds / 60);
|
||||
if (minutes < 60) {
|
||||
const seconds = wholeSeconds % 60;
|
||||
return seconds === 0 ? `${minutes}m` : `${minutes}m ${seconds}s`;
|
||||
const totalMinutes = Math.floor(totalSeconds / 60);
|
||||
if (totalMinutes < 60) {
|
||||
const seconds = Math.floor(totalSeconds) % 60;
|
||||
return seconds === 0 ? `${totalMinutes}m` : `${totalMinutes}m ${seconds}s`;
|
||||
}
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const remMinutes = minutes % 60;
|
||||
const hours = Math.floor(totalMinutes / 60);
|
||||
const remMinutes = totalMinutes % 60;
|
||||
return remMinutes === 0 ? `${hours}h` : `${hours}h ${remMinutes}m`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user