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()} + +