Skip to content

Commit 4e0822f

Browse files
pwang347pwang347
authored
Model picker styling updates (#314150)
1 parent 64bb671 commit 4e0822f

4 files changed

Lines changed: 30 additions & 28 deletions

File tree

‎src/vs/sessions/contrib/chat/browser/media/chatInput.css‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -169,16 +169,15 @@
169169
height: auto;
170170
}
171171

172-
/* Split model picker: undo the fixed height/overflow from .action-label above */
173-
.sessions-chat-config-toolbar .action-label.model-picker-split {
174-
height: auto;
175-
overflow: visible;
176-
padding: 0 6px;
177-
min-width: 0;
178-
}
179-
180-
.sessions-chat-config-toolbar .action-item:has(.model-picker-split) {
181-
overflow: visible;
172+
/* Left divider for the agents app welcome view */
173+
.sessions-chat-config-toolbar .action-label.model-picker-split::before {
174+
content: '';
175+
position: absolute;
176+
top: 25%;
177+
bottom: 25%;
178+
left: 0;
179+
width: 1px;
180+
background-color: var(--vscode-editorWidget-border);
182181
}
183182

184183
/* Hide the right divider from the workbench base styles */

‎src/vs/workbench/contrib/chat/browser/widget/input/chatModelPicker.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,6 @@ function createModelAction(
163163
languageModelsService: ILanguageModelsService,
164164
section?: string,
165165
): IActionWidgetDropdownAction & { section?: string } {
166-
const toolbarActions = languageModelsService.getModelConfigurationActions(model.identifier);
167166
const configDescription = getModelConfigurationDescription(model, languageModelsService);
168167
// Only show pricing in the description line if it's a multiplier (e.g. "2x").
169168
// Detailed AIC/token pricing is shown in the hover instead.
@@ -183,7 +182,6 @@ function createModelAction(
183182
tooltip: model.metadata.name,
184183
label: model.metadata.name,
185184
section,
186-
toolbarActions: toolbarActions && toolbarActions.length > 0 ? toolbarActions : undefined,
187185
run: () => onSelect(model),
188186
};
189187
}

‎src/vs/workbench/contrib/chat/browser/widget/media/chat.css‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1866,11 +1866,11 @@ have to be updated for changes to the rules above, or to support more deeply nes
18661866
}
18671867

18681868
/* Split model picker layout */
1869-
.interactive-session .chat-input-toolbar .chat-input-picker-item:has(.model-picker-split) {
1869+
.chat-input-picker-item:has(.model-picker-split) {
18701870
overflow: visible;
18711871
}
18721872

1873-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split {
1873+
.chat-input-picker-item .action-label.model-picker-split {
18741874
padding: 0 6px;
18751875
gap: 2px;
18761876
overflow: visible;
@@ -1898,7 +1898,7 @@ have to be updated for changes to the rules above, or to support more deeply nes
18981898
right: 0;
18991899
}
19001900

1901-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section {
1901+
.chat-input-picker-item .action-label.model-picker-split .model-picker-section {
19021902
display: flex;
19031903
align-items: center;
19041904
height: 16px;
@@ -1911,52 +1911,52 @@ have to be updated for changes to the rules above, or to support more deeply nes
19111911
}
19121912

19131913
/* Prevent double hover: disable the outer container hover so only individual sections highlight */
1914-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split:hover,
1915-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split[aria-expanded="true"] {
1914+
.chat-input-picker-item .action-label.model-picker-split:hover,
1915+
.chat-input-picker-item .action-label.model-picker-split[aria-expanded="true"] {
19161916
background-color: transparent !important;
19171917
}
19181918

1919-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section:hover {
1919+
.chat-input-picker-item .action-label.model-picker-split .model-picker-section:hover {
19201920
background-color: var(--vscode-toolbar-hoverBackground);
19211921
}
19221922

1923-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section[aria-expanded="true"] {
1923+
.chat-input-picker-item .action-label.model-picker-split .model-picker-section[aria-expanded="true"] {
19241924
background-color: var(--vscode-toolbar-hoverBackground);
19251925
}
19261926

1927-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-name {
1927+
.chat-input-picker-item .action-label.model-picker-split .model-picker-name {
19281928
min-width: 0;
19291929
flex-shrink: 1;
19301930
overflow: hidden;
19311931
}
19321932

1933-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-name .chat-input-picker-label {
1933+
.chat-input-picker-item .action-label.model-picker-split .model-picker-name .chat-input-picker-label {
19341934
overflow: hidden;
19351935
text-overflow: ellipsis;
19361936
}
19371937

1938-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-effort,
1939-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-tokens {
1938+
.chat-input-picker-item .action-label.model-picker-split .model-picker-effort,
1939+
.chat-input-picker-item .action-label.model-picker-split .model-picker-tokens {
19401940
flex-shrink: 0;
19411941
}
19421942

1943-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section .codicon {
1943+
.chat-input-picker-item .action-label.model-picker-split .model-picker-section .codicon {
19441944
font-size: 12px;
19451945
}
19461946

1947-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split .model-picker-section span + .chat-input-picker-label {
1947+
.chat-input-picker-item .action-label.model-picker-split .model-picker-section span + .chat-input-picker-label {
19481948
margin-left: 2px;
19491949
}
19501950

1951-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split.disabled .model-picker-section {
1951+
.chat-input-picker-item .action-label.model-picker-split.disabled .model-picker-section {
19521952
cursor: default;
19531953
}
19541954

1955-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split.disabled .model-picker-section:hover {
1955+
.chat-input-picker-item .action-label.model-picker-split.disabled .model-picker-section:hover {
19561956
background-color: transparent;
19571957
}
19581958

1959-
.interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split.disabled .codicon {
1959+
.chat-input-picker-item .action-label.model-picker-split.disabled .codicon {
19601960
color: var(--vscode-disabledForeground);
19611961
}
19621962

‎src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,11 @@
323323
padding: 2px 0px;
324324
}
325325

326+
.monaco-workbench .inline-chat .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split::before,
327+
.monaco-workbench .inline-chat .interactive-session .chat-input-toolbar .chat-input-picker-item .action-label.model-picker-split::after {
328+
display: none;
329+
}
330+
326331
/* Termination card (zone widget) — aligned with overlay widget */
327332

328333
.monaco-workbench .inline-chat-terminated-card {

0 commit comments

Comments
 (0)