sandvich
/
opencode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak(ui): allow full-width user message meta 

Moves the user message meta row out of the bubble width constraints and truncates long metadata while keeping the timestamp visible with consistent middot spacing.
pull/14631/head
David Hill 2026-02-17 15:13:48 +00:00
parent 57a5d5fd34
commit 1d78100f63
2 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/ui/src/components/message-part.css
View File

@ -120,6 +120,7 @@
align-items: center;
justify-content: flex-end;
gap: 10px;
width: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
@ -134,6 +135,27 @@
[data-slot="user-message-meta"] {
user-select: none;
text-align: right;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-slot="user-message-meta-wrap"] {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: flex-end;
overflow: hidden;
}
[data-slot="user-message-meta-tail"] {
user-select: none;
flex: 0 0 auto;
white-space: nowrap;
text-align: right;
}
[data-slot="user-message-copy-wrapper"][data-interrupted] {

47
packages/ui/src/components/message-part.tsx
View File

@ -560,16 +560,15 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
return `${hour12}:${minute} ${hours < 12 ? "AM" : "PM"}`
})
const meta = createMemo(() => {
const metaHead = createMemo(() => {
const agent = props.message.agent
const items = [
agent ? agent[0]?.toUpperCase() + agent.slice(1) : "",
provider(),
model(),
stamp(),
props.interrupted ? i18n.t("ui.message.interrupted") : "",
]
return items.filter((x) => !!x).join(" \u00B7 ")
const items = [agent ? agent[0]?.toUpperCase() + agent.slice(1) : "", provider(), model()]
return items.filter((x) => !!x).join("\u00A0\u00B7\u00A0")
})
const metaTail = createMemo(() => {
const items = [stamp(), props.interrupted ? i18n.t("ui.message.interrupted") : ""]
return items.filter((x) => !!x).join("\u00A0\u00B7\u00A0")
})
const openImagePreview = (url: string, alt?: string) => {
@ -619,14 +618,30 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
</div>
</Show>
<Show when={text()}>
<div data-slot="user-message-body">
<div data-slot="user-message-text">
<HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
<>
<div data-slot="user-message-body">
<div data-slot="user-message-text">
<HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
</div>
</div>
<div data-slot="user-message-copy-wrapper" data-interrupted={props.interrupted ? "" : undefined}>
<Show when={meta()}>
<span data-slot="user-message-meta" class="text-12-regular text-text-weak cursor-default">
{meta()}
<Show when={metaHead() || metaTail()}>
<span data-slot="user-message-meta-wrap">
<Show when={metaHead()}>
<span data-slot="user-message-meta" class="text-12-regular text-text-weak cursor-default">
{metaHead()}
</span>
</Show>
<Show when={metaHead() && metaTail()}>
<span data-slot="user-message-meta-sep" class="text-12-regular text-text-weak cursor-default">
{"\u00A0\u00B7\u00A0"}
</span>
</Show>
<Show when={metaTail()}>
<span data-slot="user-message-meta-tail" class="text-12-regular text-text-weak cursor-default">
{metaTail()}
</span>
</Show>
</span>
</Show>
<Tooltip
@ -647,7 +662,7 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
/>
</Tooltip>
</div>
</div>
</>
</Show>
</div>
)