monadical/opencode
13
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
David Hill
2026-02-17 15:13:48 +00:00
parent 57a5d5fd34
commit 1d78100f63
2 changed files with 53 additions and 16 deletions
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>
)