diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index ebd0e7d58..cd15117a0 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -119,6 +119,7 @@
display: flex;
align-items: center;
justify-content: flex-end;
+ gap: 10px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
@@ -130,6 +131,11 @@
}
}
+ [data-slot="user-message-meta"] {
+ user-select: none;
+ text-align: right;
+ }
+
[data-slot="user-message-copy-wrapper"][data-interrupted] {
gap: 12px;
}
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 6c2b2eaec..4425fcbcf 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -534,6 +534,27 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
const agents = createMemo(() => (props.parts?.filter((p) => p.type === "agent") as AgentPart[]) ?? [])
+ const stamp = createMemo(() => {
+ const created = props.message.time?.created
+ if (typeof created !== "number") return ""
+ const date = new Date(created)
+ const hours = date.getHours()
+ const hour12 = hours % 12 || 12
+ const minute = String(date.getMinutes()).padStart(2, "0")
+ return `${hour12}:${minute} ${hours < 12 ? "AM" : "PM"}`
+ })
+
+ const meta = createMemo(() => {
+ const agent = props.message.agent
+ const items = [
+ agent ? agent[0]?.toUpperCase() + agent.slice(1) : "",
+ props.message.model?.providerID,
+ props.message.model?.modelID,
+ stamp(),
+ ]
+ return items.filter((x) => !!x).join(" \u00B7 ")
+ })
+
const openImagePreview = (url: string, alt?: string) => {
dialog.show(() => )
}
@@ -591,6 +612,11 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
{i18n.t("ui.message.interrupted")}
+
+
+ {meta()}
+
+