Keep chat composer focused after toolbar and mode interactions#49
Keep chat composer focused after toolbar and mode interactions#49juliusmarminge merged 3 commits intomainfrom
Conversation
- Add a shared composer-focus scheduler in `ChatView` - Refocus composer after runtime mode, model, effort, and env mode selections - Let `BranchToolbar` request composer focus after branch/worktree actions
WalkthroughAdded an optional Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BranchToolbar
participant ChatView
participant Composer
User->>BranchToolbar: select branch / create branch / change env
BranchToolbar->>ChatView: call onEnvModeChange / onComposerFocusRequest
ChatView->>ChatView: scheduleComposerFocus (requestAnimationFrame)
ChatView-->>User: update UI / close menu
ChatView->>Composer: focus composer (deferred)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts (beta)
Comment |
Keep the ChatView composer focused after BranchToolbar interactions, env mode toggles, model changes, and reasoning effort selections in ChatView.tsx and BranchToolbar.tsxAdd 📍Where to StartStart with the Macroscope summarized c9fae23. |
Greptile SummaryThis PR ensures the chat composer textarea retains focus after various toolbar and mode interactions (model selection, reasoning effort, runtime mode toggle, env mode switch, and branch selection/creation). It introduces a
Confidence Score: 4/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant ChatView
participant BranchToolbar
participant Composer as Textarea (Composer)
Note over User,Composer: Model / Effort / Runtime Mode Change
User->>ChatView: Clicks model/effort/runtime toggle
ChatView->>ChatView: Update state (dispatch/setState)
ChatView->>ChatView: scheduleComposerFocus()
ChatView->>Composer: requestAnimationFrame → focus()
Note over User,Composer: Env Mode Toggle
User->>BranchToolbar: Clicks env mode button
BranchToolbar->>ChatView: onEnvModeChange(mode)
ChatView->>ChatView: setEnvMode + scheduleComposerFocus()
ChatView->>Composer: requestAnimationFrame → focus()
Note over User,Composer: Branch Selection / Creation
User->>BranchToolbar: Selects or creates branch
BranchToolbar->>BranchToolbar: Close menu, update thread
BranchToolbar->>ChatView: onComposerFocusRequest()
ChatView->>ChatView: scheduleComposerFocus()
ChatView->>Composer: requestAnimationFrame → focus()
Last reviewed commit: c604768 |
- Remove unnecessary `useCallback` wrapping from `onEnvModeChange` - Keep env mode update and composer refocus behavior unchanged
- Wrap model, effort, and env mode handlers in `useCallback` - Stabilize callback identities while preserving composer focus behavior
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/web/src/components/ChatView.tsx (1)
815-826: StabilizeonModelSelectby depending onactiveThreadIdinstead ofactiveThread.
Using the whole thread object will churn the callback whenever the thread updates; the id keeps memoization effective.♻️ Suggested tweak
- const onModelSelect = useCallback( - (model: ModelSlug) => { - if (!activeThread) return; - dispatch({ - type: "SET_THREAD_MODEL", - threadId: activeThread.id, - model: resolveModelSlug(model), - }); - scheduleComposerFocus(); - }, - [activeThread, dispatch, scheduleComposerFocus], - ); + const onModelSelect = useCallback( + (model: ModelSlug) => { + if (!activeThreadId) return; + dispatch({ + type: "SET_THREAD_MODEL", + threadId: activeThreadId, + model: resolveModelSlug(model), + }); + scheduleComposerFocus(); + }, + [activeThreadId, dispatch, scheduleComposerFocus], + );
Summary
BranchToolbarChatViewusingrequestAnimationFrameto restore focus after UI updatesBranchToolbarto request composer focus via a new optional callback propTesting
Summary by CodeRabbit