diff options
| -rw-r--r-- | packages/ui/src/components/message-part.css | 22 | ||||
| -rw-r--r-- | packages/ui/src/components/message-part.tsx | 47 |
2 files changed, 53 insertions, 16 deletions
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index 5b0a3cc17..ede7f5c90 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -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] { diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx index 8e74b14ba..cd0d8c779 100644 --- a/packages/ui/src/components/message-part.tsx +++ b/packages/ui/src/components/message-part.tsx @@ -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> ) |