diff options
Diffstat (limited to 'packages/ui')
| -rw-r--r-- | packages/ui/src/components/session-turn.css | 32 | ||||
| -rw-r--r-- | packages/ui/src/components/session-turn.tsx | 13 |
2 files changed, 44 insertions, 1 deletions
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css index 581935b3e..abed69897 100644 --- a/packages/ui/src/components/session-turn.css +++ b/packages/ui/src/components/session-turn.css @@ -30,6 +30,35 @@ overflow-anchor: none; } + [data-slot="session-turn-user-badges"] { + display: flex; + flex-shrink: 0; + align-items: center; + gap: 6px; + opacity: 0; + transition: opacity 0.15s ease; + pointer-events: none; + + &[data-visible="true"] { + opacity: 1; + pointer-events: auto; + } + } + + [data-slot="session-turn-badge"] { + display: inline-flex; + align-items: center; + padding: 2px 6px; + border-radius: 4px; + font-family: var(--font-family-mono); + font-size: var(--font-size-x-small); + font-weight: var(--font-weight-medium); + line-height: var(--line-height-normal); + white-space: nowrap; + color: var(--text-base); + background: var(--surface-raised-base); + } + [data-slot="session-turn-sticky-title"] { width: 100%; position: sticky; @@ -52,7 +81,8 @@ [data-slot="session-turn-message-header"] { display: flex; align-items: center; - gap: 8px; + justify-content: space-between; + gap: 12px; align-self: stretch; height: 32px; } diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx index 075da218b..cca811631 100644 --- a/packages/ui/src/components/session-turn.tsx +++ b/packages/ui/src/components/session-turn.tsx @@ -5,6 +5,7 @@ import { type PermissionRequest, TextPart, ToolPart, + UserMessage, } from "@opencode-ai/sdk/v2/client" import { useData } from "../context" import { useDiffComponent } from "../context/diff" @@ -373,6 +374,7 @@ export function SessionTurn( diffLimit: diffInit, status: rawStatus(), duration: duration(), + userMessageHovered: false, }) createEffect( @@ -473,6 +475,8 @@ export function SessionTurn( data-slot="session-turn-message-container" class={props.classes?.container} style={{ "--sticky-header-height": `${store.stickyHeaderHeight}px` }} + onMouseEnter={() => setStore("userMessageHovered", true)} + onMouseLeave={() => setStore("userMessageHovered", false)} > <Switch> <Match when={isShellMode()}> @@ -492,6 +496,15 @@ export function SessionTurn( </Match> </Switch> </div> + <div data-slot="session-turn-user-badges" data-visible={store.userMessageHovered}> + <Show when={(msg() as UserMessage).agent}> + <span data-slot="session-turn-badge">{(msg() as UserMessage).agent}</span> + </Show> + <Show when={(msg() as UserMessage).model?.modelID}> + <span data-slot="session-turn-badge">{(msg() as UserMessage).model?.modelID}</span> + </Show> + <span data-slot="session-turn-badge">{(msg() as UserMessage).variant || "default"}</span> + </div> </div> </div> {/* User Message */} |
