From 4e0822feb0c27115397c6c419cd5f30aeedc01df Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 4 May 2026 09:54:12 -0700 Subject: [PATCH] Model picker styling updates (#314150) --- .../contrib/chat/browser/media/chatInput.css | 19 ++++++----- .../browser/widget/input/chatModelPicker.ts | 2 -- .../chat/browser/widget/media/chat.css | 32 +++++++++---------- .../inlineChat/browser/media/inlineChat.css | 5 +++ 4 files changed, 30 insertions(+), 28 deletions(-) diff --git a/src/vs/sessions/contrib/chat/browser/media/chatInput.css b/src/vs/sessions/contrib/chat/browser/media/chatInput.css index d396a4f157c..03f247e873e 100644 --- a/src/vs/sessions/contrib/chat/browser/media/chatInput.css +++ b/src/vs/sessions/contrib/chat/browser/media/chatInput.css @@ -169,16 +169,15 @@ height: auto; } -/* Split model picker: undo the fixed height/overflow from .action-label above */ -.sessions-chat-config-toolbar .action-label.model-picker-split { - height: auto; - overflow: visible; - padding: 0 6px; - min-width: 0; -} - -.sessions-chat-config-toolbar .action-item:has(.model-picker-split) { - overflow: visible; +/* Left divider for the agents app welcome view */ +.sessions-chat-config-toolbar .action-label.model-picker-split::before { + content: ''; + position: absolute; + top: 25%; + bottom: 25%; + left: 0; + width: 1px; + background-color: var(--vscode-editorWidget-border); } /* Hide the right divider from the workbench base styles */ diff --git a/src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts b/src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts index d88896cf1e0..1ce4a0814a0 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts +++ b/src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts @@ -163,7 +163,6 @@ function createModelAction( languageModelsService: ILanguageModelsService, section?: string, ): IActionWidgetDropdownAction & { section?: string } { - const toolbarActions = languageModelsService.getModelConfigurationActions(model.identifier); const configDescription = getModelConfigurationDescription(model, languageModelsService); // Only show pricing in the description line if it's a multiplier (e.g. "2x"). // Detailed AIC/token pricing is shown in the hover instead. @@ -183,7 +182,6 @@ function createModelAction( tooltip: model.metadata.name, label: model.metadata.name, section, - toolbarActions: toolbarActions && toolbarActions.length > 0 ? toolbarActions : undefined, run: () => onSelect(model), }; } diff --git a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css index dc1923efef6..232fae6686d 100644 --- a/src/vs/workbench/contrib/chat/browser/widget/media/chat.css +++ b/src/vs/workbench/contrib/chat/browser/widget/media/chat.css @@ -1866,11 +1866,11 @@ have to be updated for changes to the rules above, or to support more deeply nes } /* Split model picker layout */ -.interactive-session .chat-input-toolbar .chat-input-picker-item:has(.model-picker-split) { +.chat-input-picker-item:has(.model-picker-split) { overflow: visible; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split { +.chat-input-picker-item .action-label.model-picker-split { padding: 0 6px; gap: 2px; overflow: visible; @@ -1898,7 +1898,7 @@ have to be updated for changes to the rules above, or to support more deeply nes right: 0; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section { +.chat-input-picker-item .action-label.model-picker-split .model-picker-section { display: flex; align-items: center; height: 16px; @@ -1911,52 +1911,52 @@ have to be updated for changes to the rules above, or to support more deeply nes } /* Prevent double hover: disable the outer container hover so only individual sections highlight */ -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split:hover, -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split[aria-expanded="true"] { +.chat-input-picker-item .action-label.model-picker-split:hover, +.chat-input-picker-item .action-label.model-picker-split[aria-expanded="true"] { background-color: transparent !important; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section:hover { +.chat-input-picker-item .action-label.model-picker-split .model-picker-section:hover { background-color: var(--vscode-toolbar-hoverBackground); } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section[aria-expanded="true"] { +.chat-input-picker-item .action-label.model-picker-split .model-picker-section[aria-expanded="true"] { background-color: var(--vscode-toolbar-hoverBackground); } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-name { +.chat-input-picker-item .action-label.model-picker-split .model-picker-name { min-width: 0; flex-shrink: 1; overflow: hidden; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-name .chat-input-picker-label { +.chat-input-picker-item .action-label.model-picker-split .model-picker-name .chat-input-picker-label { overflow: hidden; text-overflow: ellipsis; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-effort, -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-tokens { +.chat-input-picker-item .action-label.model-picker-split .model-picker-effort, +.chat-input-picker-item .action-label.model-picker-split .model-picker-tokens { flex-shrink: 0; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section .codicon { +.chat-input-picker-item .action-label.model-picker-split .model-picker-section .codicon { font-size: 12px; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section span + .chat-input-picker-label { +.chat-input-picker-item .action-label.model-picker-split .model-picker-section span + .chat-input-picker-label { margin-left: 2px; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split.disabled .model-picker-section { +.chat-input-picker-item .action-label.model-picker-split.disabled .model-picker-section { cursor: default; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split.disabled .model-picker-section:hover { +.chat-input-picker-item .action-label.model-picker-split.disabled .model-picker-section:hover { background-color: transparent; } -.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split.disabled .codicon { +.chat-input-picker-item .action-label.model-picker-split.disabled .codicon { color: var(--vscode-disabledForeground); } diff --git a/src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css b/src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css index 14b6a855376..e687f694a5b 100644 --- a/src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css +++ b/src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css @@ -323,6 +323,11 @@ padding: 2px 0px; } +.monaco-workbench .inline-chat .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split::before, +.monaco-workbench .inline-chat .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split::after { + display: none; +} + /* Termination card (zone widget) — aligned with overlay widget */ .monaco-workbench .inline-chat-terminated-card {