salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): split message header into two rows

Browse Source 
Move assistant meta below speaker label and bump speaker label size.
This commit is contained in:
Shantur Rathore
2026-02-11 16:02:24 +00:00
parent fd5941fb36
commit 3382736f05
2 changed files with 84 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/src/components/message-item.tsx
View File

@@ -268,12 +268,13 @@ export default function MessageItem(props: MessageItemProps) {
return ( return (
<div class={containerClass()}> <div class={containerClass()}>
<header class={`message-item-header ${isUser() ? "pb-0.5" : "pb-0"}`}> <header class={`message-item-header ${isUser() ? "pb-0.5" : "pb-0"}`}>
<div class="message-item-header-row message-item-header-row--top">
<div class="message-speaker"> <div class="message-speaker">
<span class="message-speaker-label" data-role={isUser() ? "user" : "assistant"}> <span class="message-speaker-label" data-role={isUser() ? "user" : "assistant"}>
{speakerLabel()} {speakerLabel()}
</span> </span>
<Show when={agentMeta()}>{(meta) => <span class="message-agent-meta">{meta()}</span>}</Show>
</div> </div>
<div class="message-item-actions"> <div class="message-item-actions">
<Show when={isUser()}> <Show when={isUser()}>
<div class="message-action-group"> <div class="message-action-group">
@@ -335,6 +336,15 @@ export default function MessageItem(props: MessageItemProps) {
</Show> </Show>
<time class="message-timestamp" dateTime={timestampIso()}>{timestamp()}</time> <time class="message-timestamp" dateTime={timestampIso()}>{timestamp()}</time>
</div> </div>
</div>
<Show when={agentMeta()}>
{(meta) => (
<div class="message-item-header-row message-item-header-row--bottom">
<span class="message-agent-meta">{meta()}</span>
</div>
)}
</Show>
</header> </header>

13
packages/ui/src/styles/messaging/message-base.css
View File

@@ -4,15 +4,28 @@
} }
.message-item-header { .message-item-header {
@apply flex flex-col gap-0.5;
}
.message-item-header-row {
@apply w-full;
}
.message-item-header-row--top {
@apply flex justify-between items-start gap-2.5; @apply flex justify-between items-start gap-2.5;
} }
.message-item-header-row--bottom {
@apply flex items-start;
}
.message-speaker { .message-speaker {
@apply flex flex-col gap-0.5 text-xs; @apply flex flex-col gap-0.5 text-xs;
} }
.message-speaker-label { .message-speaker-label {
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
} }
.message-speaker-label[data-role="user"] { .message-speaker-label[data-role="user"] {