feat(sessions): mobile bottom-sheet picker for opened-chat input#314571
Draft
feat(sessions): mobile bottom-sheet picker for opened-chat input#314571
Conversation
Mirrors the new-chat empty-state mobile experience for the workbench ChatInputPart used in vscode.dev/agents on phone-classified viewports: the desktop Mode + Model pickers are replaced with a single chip that opens a unified bottom sheet (Agent Mode + Model rows). The bottom-sheet primitive (showMobilePickerSheet) stays in vs/sessions. A new workbench service (IChatPhoneInputPresenter, no-op default singleton) lets sessions register a phone-only impl that opens the sheet; ChatInputPart consults the presenter from its inline actionViewItemProvider to swap in a chip when active. Desktop behavior is unchanged. Files added: - src/vs/workbench/contrib/chat/browser/widget/input/chatPhoneInputPresenter.ts - src/vs/workbench/contrib/chat/browser/widget/input/media/chatPhoneInputPresenter.css - src/vs/sessions/contrib/chat/browser/mobileChatPhoneInputPresenter.ts Files modified: - src/vs/workbench/contrib/chat/browser/widget/input/chatInputPart.ts - src/vs/sessions/sessions.web.main.ts Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
Screenshot ChangesBase: Changed (28)Errored (24)Fixtures that failed to render — no screenshot was produced.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a workbench-level hook to let the Agents window (sessions layer) replace the desktop Mode/Model pickers in the opened-chat input (ChatInputPart) with a single mobile chip that opens a combined bottom-sheet picker on phone-classified viewports, matching the existing “empty new-chat” mobile experience.
Changes:
- Introduces a new pluggable workbench service (
IChatPhoneInputPresenter) plus a combined-picker chip action view item. - Updates
ChatInputPartto swap desktop pickers for the chip when the presenter is enabled, and to route model/mode open commands through the combined sheet on phone. - Registers a sessions-side phone implementation that drives the existing
showMobilePickerSheetbottom sheet (web-only).
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/chat/browser/widget/input/media/chatPhoneInputPresenter.css | Adds styling for the combined “Mode + Model” chip in ChatInputPart. |
| src/vs/workbench/contrib/chat/browser/widget/input/chatPhoneInputPresenter.ts | Adds the workbench service + the mobile combined-picker action view item (chip). |
| src/vs/workbench/contrib/chat/browser/widget/input/chatInputPart.ts | Switches between desktop pickers and mobile chip/sheet based on the presenter’s enabled observable; adds toolbar refresh on breakpoint flips. |
| src/vs/sessions/sessions.web.main.ts | Imports the sessions-side presenter implementation (web-only). |
| src/vs/sessions/contrib/chat/browser/mobileChatPhoneInputPresenter.ts | Implements the phone presenter in vs/sessions using showMobilePickerSheet and the existing mode/model delegates. |
Copilot's findings
Comments suppressed due to low confidence (1)
src/vs/workbench/contrib/chat/browser/widget/input/chatInputPart.ts:2415
this._currentLanguageModelis anobservableValue(...), so this null-check is always false. If the intent is to ensure a default model is selected before rendering the picker, this should likely checkthis._currentLanguageModel.get()(or just remove the branch if it’s no longer needed).
if (action.id === OpenModelPickerAction.ID && action instanceof MenuItemAction) {
if (!this._currentLanguageModel) {
this.setCurrentLanguageModelToDefault();
}
- Files reviewed: 5/5 changed files
- Comments generated: 4
Comment on lines
+143
to
+150
| super.render(container); | ||
| container.classList.add('chat-input-picker-item'); | ||
| this._renderDisposables.clear(); | ||
|
|
||
| const trigger = dom.append(container, dom.$('a.action-label.chat-phone-input-chip')); | ||
| trigger.tabIndex = 0; | ||
| trigger.role = 'button'; | ||
| this._triggerElement = trigger; |
Comment on lines
+11
to
+14
| .chat-input-picker-item .action-label.chat-phone-input-chip { | ||
| gap: 4px; | ||
| cursor: pointer; | ||
| } |
| const target = this.inputActionsToolbar.getElement(); | ||
| this.chatPhoneInputPresenter | ||
| .showCombinedModeAndModelSheet(target, this._createModePickerDelegate(), this._createModelPickerDelegate()) | ||
| .catch(() => { }); |
Comment on lines
+2399
to
+2403
| if (this.chatPhoneInputPresenter.enabled.get()) { | ||
| if (action.id === OpenModelPickerAction.ID && action instanceof MenuItemAction) { | ||
| if (!this._currentLanguageModel) { | ||
| this.setCurrentLanguageModelToDefault(); | ||
| } |
…s/dc3d2746-3d1f-49f2-ba40-39eb0f4f77ea
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
On phone-classified viewports of
vscode.dev/agents, the opened-chat input (workbenchChatInputPart) now mirrors the empty new-chat input: the desktop Mode + Model pickers are replaced with a single chip that opens a unified bottom sheet (Agent Mode + Model rows).Before this PR, only the empty new-chat input used the mobile sheet (via
MobileChatInputConfigPicker→showMobilePickerSheet). Once a session was opened, the workbench rendered the desktop popup pickers (ModelPickerActionItem/ModePickerActionItem), which are sized and positioned for desktop mouse use.How
A new pluggable workbench service
IChatPhoneInputPresenterwith a no-op default singleton.vs/workbenchexposes the interface and a chip view item; it never depends on the sheet primitive.vs/sessionsregisters a phone implementation that drives the existingshowMobilePickerSheet. Activation is gated by thesessionsIsPhoneLayoutcontext key (observed viaobservableContextKey).ChatInputPart's inlineactionViewItemProvideradds a phone-aware branch placed before the existing model/mode handlers: when the presenter is enabled, it returns the chip in the model action's slot and a hidden item for the mode action's slot.openModelPicker()/openModePicker()fall through to the sheet on phone (covers keyboard/voice invocations).autoruncallsinputActionsToolbar.refresh()when phone-enabled flips so the chip / desktop pickers swap in correctly across breakpoint transitions.Why a service instead of a sessions-side
actionViewItemService.registeroverride onMenuId.ChatInput: the toolbar'sactionViewService.lookUpruns before the inline provider, so a sessions registration would also intercept on desktop and bypass the rich desktop pickers. Keeping the indirection in workbench lets the inline provider stay authoritative.Files
New
src/vs/workbench/contrib/chat/browser/widget/input/chatPhoneInputPresenter.tssrc/vs/workbench/contrib/chat/browser/widget/input/media/chatPhoneInputPresenter.csssrc/vs/sessions/contrib/chat/browser/mobileChatPhoneInputPresenter.tsModified
src/vs/workbench/contrib/chat/browser/widget/input/chatInputPart.ts— phone branch, helper extraction,openModelPicker/openModePickerfall-through, autorun toolbar refresh.src/vs/sessions/sessions.web.main.ts— self-registering import for the sessions impl.Validation
npm run compile-check-ts-nativenpm run valid-layers-checkeslinton touched TS filesstylelinton the new CSS fileTest plan
MobileChatInputConfigPickerregression check).ChatInputParttoolbar in place of the two desktop pickers; tap opens the combined sheet; mode selection applies; model selection applies and persists.chat.disableAIFeatures = true: nothing renders (existing gating preserved).