CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-08-04 06:52:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

style: bind the escalation arrow to its message (variant A anatomy)

Browse source 
Two same-weight circles in a row read as one control group, leaving the
arrow's ownership ambiguous, and a floating arrow stops meaning anything
once several messages stack. The shared control now carries variant A's
anatomy: a thin divider binds a small SOLID arrow (filled, inverted) to
the message region on its left, and the menu ellipsis stays a bare
glyph, so the two affordances can no longer blur together — and the
divider+arrow pairing repeats cleanly per chip at N messages.
This commit is contained in:
Danny Avila 2026-07-30 18:52:28 -04:00
parent 9a0a8d1c15
commit cd737e585a
1 changed files with 32 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

57
client/src/components/Chat/Input/SteerMenu.tsx
View file

@ -108,31 +108,38 @@ export function EscalateNowButton({
const chord = useShortcutDisplay('escalateSteer');
const label = localize('com_ui_interrupt_steer_now');
return (
<Ariakit.TooltipProvider placement="top" timeout={300}>
<Ariakit.TooltipAnchor
render={
<button
type="button"
aria-label={label}
data-escalate-steer={surface}
data-testid={surface === 'queued' ? 'queued-interrupt-now' : 'steer-escalate-now'}
disabled={disabled}
onClick={onClick}
className={cn(
'flex size-7 shrink-0 items-center justify-center rounded-full border border-border-medium',
'text-text-primary transition-colors hover:bg-surface-hover',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-xheavy',
'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent',
)}
>
<ArrowUp className="h-4 w-4" aria-hidden="true" />
</button>
}
/>
<Ariakit.Tooltip className="z-50 rounded-lg bg-surface-tertiary px-2 py-1 text-xs text-text-primary shadow-lg">
{chord ? `${label} · ${chord}` : label}
</Ariakit.Tooltip>
</Ariakit.TooltipProvider>
<>
{/* Thin divider binds the arrow to the message on its left, so it can
* never read as part of the bare-glyph menu control beside it — the
* send-now belongs to THIS chip, and the pairing repeats cleanly when
* several messages stack. */}
<span aria-hidden="true" className="h-[18px] w-px shrink-0 bg-border-medium" />
<Ariakit.TooltipProvider placement="top" timeout={300}>
<Ariakit.TooltipAnchor
render={
<button
type="button"
aria-label={label}
data-escalate-steer={surface}
data-testid={surface === 'queued' ? 'queued-interrupt-now' : 'steer-escalate-now'}
disabled={disabled}
onClick={onClick}
className={cn(
'flex size-6 shrink-0 items-center justify-center rounded-full',
'bg-text-primary text-surface-primary transition-opacity hover:opacity-85',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-xheavy',
'disabled:cursor-not-allowed disabled:opacity-35 disabled:hover:opacity-35',
)}
>
<ArrowUp className="h-3.5 w-3.5" strokeWidth={2.4} aria-hidden="true" />
</button>
}
/>
<Ariakit.Tooltip className="z-50 rounded-lg bg-surface-tertiary px-2 py-1 text-xs text-text-primary shadow-lg">
{chord ? `${label} · ${chord}` : label}
</Ariakit.Tooltip>
</Ariakit.TooltipProvider>
</>
);
}