feat(chat): add arrow key navigation for thinking mode in model selector (#769)

* feat(chat): add arrow key navigation for thinking mode in model selector

Adds keyboard arrow key navigation for thinking mode selection within the model picker, enabling a fully keyboard-driven workflow for model and variant selection.

Changes:
- Model Selector: Added ←/→ arrow key handling to cycle thinking variants while picker is open
- Introduced transient state to track per-model variant selections during picker lifecycle
- Updated metadata display logic to show thinking mode only after adjustment with arrow keys
- Added contextual footer hints that appear only when highlighted model supports thinking variants
- Modified Enter key behavior to apply both selected model and pending thinking variant together
- Help Dialog: Added in-picker navigation shortcuts (↑↓ navigate, ←→ adjust thinking)
- Documentation: Updated CHANGELOG.md files with feature entry

Behavior:
- Navigate models with ↑↓, adjust thinking with ←→, press Enter to apply both
- Footer hints update dynamically based on highlighted model capabilities
- Thinking display persists only for models adjusted with arrow keys
- No-op for models without variants (clean, no feedback)

Testing:
- Type-check, lint, and build all pass
- Manual testing verified on dev server
This commit is contained in:
Dave Otero
2026-04-01 16:17:04 +03:00
committed by GitHub
parent 744b29c492
commit 1af2b9468f
3 changed files with 101 additions and 12 deletions
@@ -1279,7 +1279,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
variant = 'assistant',
onShowPopup,
}) => {
const { files, editor, runtime } = useRuntimeAPIs();
const { editor, runtime } = useRuntimeAPIs();
const streamdownContainerRef = React.useRef<HTMLDivElement>(null);
const effectiveDirectory = useEffectiveDirectory() ?? '';
const mermaidBlocks = React.useMemo(() => extractMermaidBlocks(content), [content]);
@@ -1354,7 +1354,7 @@ export const SimpleMarkdownRenderer: React.FC<{
onShowPopup,
allowMermaidWheelZoom = false,
}) => {
const { files, editor, runtime } = useRuntimeAPIs();
const { editor, runtime } = useRuntimeAPIs();
const renderedContent = React.useMemo(
() => (stripFrontmatter ? stripLeadingFrontmatter(content) : content),
[content, stripFrontmatter],