diff options
| author | Daniel Polito <[email protected]> | 2026-01-11 17:14:26 -0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-01-11 14:14:26 -0600 |
| commit | 3e9366487a3788d245d547da176a7b79e7e3842c (patch) | |
| tree | 38ff68593766addb6da35226dc3f519c419fc4e3 | |
| parent | 025ed04da0aed68a17c47f7a814068c97767a361 (diff) | |
| download | opencode-3e9366487a3788d245d547da176a7b79e7e3842c.tar.gz opencode-3e9366487a3788d245d547da176a7b79e7e3842c.zip | |
feat(desktop): User Message Badges on Hover (#7835)
| -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 */} |