@codingame/monaco-vscode-chat-service-override 23.2.2 → 24.1.0

package/vscode/src/vs/workbench/contrib/chat/browser/chatManagement/chatModelsWidget.js

@@ -4,7 +4,7 @@ import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib
 import * as chatModelsWidget from './media/chatModelsWidget.css';
 import { DisposableStore, Disposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
-import { $ as $$1, addDisposableListener, EventType, append, clearNode, getTotalWidth, Dimension } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $ as $$1, append, clearNode, getTotalWidth, isMouseEvent, Dimension } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
 import { ThemeIcon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/themables';
 import { ILanguageModelsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/languageModels.service';
@@ -16,26 +16,26 @@ import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/h
 import { MarkdownString } from '@codingame/monaco-vscode-api/vscode/vs/base/common/htmlContent';
 import { IExtensionService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/extensions/common/extensions.service';
 import { IContextMenuService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextview/browser/contextView.service';
-import { Action, Separator, toAction } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
+import { Action, Separator, SubmenuAction, toAction } from '@codingame/monaco-vscode-api/vscode/vs/base/common/actions';
 import { ActionBar } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/actionbar/actionbar';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
-import { isVendorEntry, ChatModelsViewModel, SEARCH_SUGGESTIONS } from './chatModelsViewModel.js';
+import { ChatModelGroup, isVendorEntry, isGroupEntry, ChatModelsViewModel, SEARCH_SUGGESTIONS } from './chatModelsViewModel.js';
 import { HighlightedLabel } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/highlightedlabel/highlightedLabel';
-import { SuggestEnabledInput } from '@codingame/monaco-vscode-3692fc2f-920d-56ed-accd-d988be683cc3-common/vscode/vs/workbench/contrib/codeEditor/browser/suggestEnabledInput/suggestEnabledInput';
+import { SuggestEnabledInput } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/codeEditor/browser/suggestEnabledInput/suggestEnabledInput';
 import { Delayer } from '@codingame/monaco-vscode-api/vscode/vs/base/common/async';
-import { settingsTextInputBorder } from '@codingame/monaco-vscode-02fe61a6-05e4-5021-8c27-16e910b9182c-common/vscode/vs/workbench/contrib/preferences/common/settingsEditorColorRegistry';
+import { settingsTextInputBorder } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/preferences/common/settingsEditorColorRegistry';
 import { ChatEntitlement } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/chat/common/chatEntitlementService';
 import { IChatEntitlementService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/chat/common/chatEntitlementService.service';
 import { DropdownMenuActionViewItem } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/dropdown/dropdownActionViewItem';
 import { AnchorAlignment } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/contextview/contextview';
 import { ToolBar } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toolbar/toolbar';
-import { preferencesClearInputIcon } from '@codingame/monaco-vscode-2808e692-5fb9-54bf-bc21-1d3bff81e651-common/vscode/vs/workbench/contrib/preferences/browser/preferencesIcons';
+import { preferencesClearInputIcon } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/preferences/browser/preferencesIcons';
 import { ICommandService } from '@codingame/monaco-vscode-api/vscode/vs/platform/commands/common/commands.service';
 import { IEditorProgressService } from '@codingame/monaco-vscode-api/vscode/vs/platform/progress/common/progress.service';
 import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
 import { CONTEXT_MODELS_SEARCH_FOCUS } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/constants';
 
-var GutterColumnRenderer_1, ModelNameColumnRenderer_1, TokenLimitsColumnRenderer_1, ActionsColumnRenderer_1, ChatModelsWidget_1;
+var ModelNameColumnRenderer_1, MultiplierColumnRenderer_1, TokenLimitsColumnRenderer_1, ActionsColumnRenderer_1, ChatModelsWidget_1;
 registerCss(chatModelsWidget);
 const $ = $$1;
 const HEADER_HEIGHT = 30;
@@ -43,7 +43,7 @@ const VENDOR_ROW_HEIGHT = 30;
 const MODEL_ROW_HEIGHT = 26;
 class ModelsFilterAction extends Action {
     constructor() {
-        super('workbench.models.filter', ( localize(5303, "Filter")), ThemeIcon.asClassName(Codicon.filter));
+        super('workbench.models.filter', ( localize(5370, "Filter")), ThemeIcon.asClassName(Codicon.filter));
     }
     async run() {
     }
@@ -74,6 +74,19 @@ let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropd
         this.searchWidget = searchWidget;
         this.viewModel = viewModel;
     }
+    createGroupByAction(grouping, label) {
+        return {
+            id: `groupBy.${grouping}`,
+            label,
+            class: undefined,
+            enabled: true,
+            tooltip: ( localize(5371, "Group by {0}", label)),
+            checked: this.viewModel.groupBy === grouping,
+            run: () => {
+                this.viewModel.groupBy = grouping;
+            }
+        };
+    }
     createProviderAction(vendor, displayName) {
         const query = `@provider:"${displayName}"`;
         const currentQuery = this.searchWidget.getValue();
@@ -81,7 +94,7 @@ let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropd
         return {
             id: `provider-${vendor}`,
             label: displayName,
-            tooltip: ( localize(5304, "Filter by {0}", displayName)),
+            tooltip: ( localize(5372, "Filter by {0}", displayName)),
             class: undefined,
             enabled: true,
             checked: isChecked,
@@ -95,7 +108,7 @@ let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropd
         return {
             id: `capability-${capability}`,
             label,
-            tooltip: ( localize(5305, "Filter by {0}", label)),
+            tooltip: ( localize(5373, "Filter by {0}", label)),
             class: undefined,
             enabled: true,
             checked: isChecked,
@@ -110,7 +123,7 @@ let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropd
         return {
             id: `visible-${visible}`,
             label,
-            tooltip: ( localize(5306, "Filter by {0}", label)),
+            tooltip: ( localize(5374, "Filter by {0}", label)),
             class: undefined,
             enabled: true,
             checked: isChecked,
@@ -125,17 +138,22 @@ let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropd
     }
     getActions() {
         const actions = [];
-        actions.push(this.createVisibleAction(true, ( localize(5307, 'Visible'))));
-        actions.push(this.createVisibleAction(false, ( localize(5308, 'Hidden'))));
+        actions.push(this.createVisibleAction(true, ( localize(5375, 'Visible'))));
+        actions.push(this.createVisibleAction(false, ( localize(5376, 'Hidden'))));
         actions.push(( new Separator()));
-        actions.push(this.createCapabilityAction('tools', ( localize(5309, 'Tools'))), this.createCapabilityAction('vision', ( localize(5310, 'Vision'))), this.createCapabilityAction('agent', ( localize(5311, 'Agent Mode'))));
+        actions.push(this.createCapabilityAction('tools', ( localize(5377, 'Tools'))), this.createCapabilityAction('vision', ( localize(5378, 'Vision'))), this.createCapabilityAction('agent', ( localize(5379, 'Agent Mode'))));
         const configuredVendors = this.viewModel.getConfiguredVendors();
         if (configuredVendors.length > 1) {
             actions.push(( new Separator()));
             actions.push(...( configuredVendors.map(
-                vendor => this.createProviderAction(vendor.vendorEntry.vendor, vendor.vendorEntry.vendorDisplayName)
+                vendor => this.createProviderAction(vendor.vendor, vendor.vendorDisplayName)
             )));
         }
+        actions.push(( new Separator()));
+        const groupByActions = [];
+        groupByActions.push(this.createGroupByAction(ChatModelGroup.Vendor, ( localize(5380, 'Provider'))));
+        groupByActions.push(this.createGroupByAction(ChatModelGroup.Visibility, ( localize(5381, 'Visibility'))));
+        actions.push(( new SubmenuAction('groupBy', ( localize(5382, "Group By")), groupByActions)));
         return actions;
     }
 };
@@ -147,20 +165,24 @@ class Delegate {
         this.headerRowHeight = HEADER_HEIGHT;
     }
     getHeight(element) {
-        return isVendorEntry(element) ? VENDOR_ROW_HEIGHT : MODEL_ROW_HEIGHT;
+        return isVendorEntry(element) || isGroupEntry(element) ? VENDOR_ROW_HEIGHT : MODEL_ROW_HEIGHT;
     }
 }
 class ModelsTableColumnRenderer {
     renderElement(element, index, templateData) {
         templateData.elementDisposables.clear();
         const isVendor = isVendorEntry(element);
+        const isGroup = isGroupEntry(element);
         templateData.container.classList.add('models-table-column');
-        templateData.container.parentElement.classList.toggle('models-vendor-row', isVendor);
-        templateData.container.parentElement.classList.toggle('models-model-row', !isVendor);
-        templateData.container.parentElement.classList.toggle('model-hidden', !isVendor && !element.modelEntry.metadata.isUserSelectable);
+        templateData.container.parentElement.classList.toggle('models-vendor-row', isVendor || isGroup);
+        templateData.container.parentElement.classList.toggle('models-model-row', !isVendor && !isGroup);
+        templateData.container.parentElement.classList.toggle('model-hidden', !isVendor && !isGroup && !element.modelEntry.metadata.isUserSelectable);
         if (isVendor) {
             this.renderVendorElement(element, index, templateData);
         }
+        else if (isGroup) {
+            this.renderGroupElement(element, index, templateData);
+        }
         else {
             this.renderModelElement(element, index, templateData);
         }
@@ -170,17 +192,12 @@ class ModelsTableColumnRenderer {
         templateData.disposables.dispose();
     }
 }
-let GutterColumnRenderer = class GutterColumnRenderer extends ModelsTableColumnRenderer {
-    static { GutterColumnRenderer_1 = this; }
+class GutterColumnRenderer extends ModelsTableColumnRenderer {
     static { this.TEMPLATE_ID = 'gutter'; }
-    constructor(languageModelsService) {
+    constructor(viewModel) {
         super();
-        this.languageModelsService = languageModelsService;
-        this.templateId = GutterColumnRenderer_1.TEMPLATE_ID;
-        this._onDidToggleCollapse = ( new Emitter());
-        this.onDidToggleCollapse = this._onDidToggleCollapse.event;
-        this._onDidChange = ( new Emitter());
-        this.onDidChange = this._onDidChange.event;
+        this.viewModel = viewModel;
+        this.templateId = GutterColumnRenderer.TEMPLATE_ID;
     }
     renderTemplate(container) {
         const disposables = ( new DisposableStore());
@@ -188,7 +205,7 @@ let GutterColumnRenderer = class GutterColumnRenderer extends ModelsTableColumnR
         container.classList.add('models-gutter-column');
         const actionBar = disposables.add(( new ActionBar(container)));
         return {
-            rowContainer: container.parentElement,
+            listRowElement: container.parentElement?.parentElement ?? null,
             container,
             actionBar,
             disposables,
@@ -200,45 +217,40 @@ let GutterColumnRenderer = class GutterColumnRenderer extends ModelsTableColumnR
         super.renderElement(entry, index, templateData);
     }
     renderVendorElement(entry, index, templateData) {
-        templateData.actionBar.push(this.createToggleCollapseAction(entry), { icon: true, label: false });
-        if (templateData.rowContainer) {
-            templateData.elementDisposables.add(addDisposableListener(templateData.rowContainer, EventType.CLICK, () => this._onDidToggleCollapse.fire(entry.vendorEntry.vendor)));
-        }
+        this.renderCollapsableElement(entry, templateData);
     }
-    createToggleCollapseAction(entry) {
-        const label = entry.collapsed ? ( localize(5312, 'Expand')) : ( localize(5313, 'Collapse'));
-        return {
+    renderGroupElement(entry, index, templateData) {
+        this.renderCollapsableElement(entry, templateData);
+    }
+    renderCollapsableElement(entry, templateData) {
+        if (templateData.listRowElement) {
+            templateData.listRowElement.setAttribute('aria-expanded', entry.collapsed ? 'false' : 'true');
+        }
+        const label = entry.collapsed ? ( localize(5383, 'Expand')) : ( localize(5384, 'Collapse'));
+        const toggleCollapseAction = {
             id: 'toggleCollapse',
             label,
             tooltip: label,
             enabled: true,
             class: ThemeIcon.asClassName(entry.collapsed ? Codicon.chevronRight : Codicon.chevronDown),
-            run: () => {
-                this._onDidToggleCollapse.fire(entry.vendorEntry.vendor);
-            }
+            run: () => this.viewModel.toggleCollapsed(entry)
         };
+        templateData.actionBar.push(toggleCollapseAction, { icon: true, label: false });
     }
     renderModelElement(entry, index, templateData) {
         const { modelEntry } = entry;
         const isVisible = modelEntry.metadata.isUserSelectable ?? false;
         const toggleVisibilityAction = toAction({
             id: 'toggleVisibility',
-            label: isVisible ? ( localize(5314, 'Hide')) : ( localize(5315, 'Show')),
-            class: `model-visibility-toggle ${isVisible ? `${ThemeIcon.asClassName(Codicon.eyeClosed)} model-visible` : `${ThemeIcon.asClassName(Codicon.eye)} model-hidden`}`,
-            tooltip: isVisible ? ( localize(5316, 'Hide in the chat model picker')) : ( localize(5317, 'Show in the chat model picker')),
+            label: isVisible ? ( localize(5385, 'Hide')) : ( localize(5386, 'Show')),
+            class: `model-visibility-toggle ${isVisible ? `${ThemeIcon.asClassName(Codicon.eye)} model-visible` : `${ThemeIcon.asClassName(Codicon.eyeClosed)} model-hidden`}`,
+            tooltip: isVisible ? ( localize(5387, 'Hide in the chat model picker')) : ( localize(5388, 'Show in the chat model picker')),
             checked: !isVisible,
-            run: async () => {
-                const newVisibility = !isVisible;
-                this.languageModelsService.updateModelPickerPreference(modelEntry.identifier, newVisibility);
-                this._onDidChange.fire();
-            }
+            run: async () => this.viewModel.toggleVisibility(entry)
         });
         templateData.actionBar.push(toggleVisibilityAction, { icon: true, label: false });
     }
-};
-GutterColumnRenderer = GutterColumnRenderer_1 = ( __decorate([
-    ( __param(0, ILanguageModelsService))
-], GutterColumnRenderer));
+}
 let ModelNameColumnRenderer = class ModelNameColumnRenderer extends ModelsTableColumnRenderer {
     static { ModelNameColumnRenderer_1 = this; }
     static { this.TEMPLATE_ID = 'modelName'; }
@@ -271,6 +283,9 @@ let ModelNameColumnRenderer = class ModelNameColumnRenderer extends ModelsTableC
     renderVendorElement(entry, index, templateData) {
         templateData.nameLabel.set(entry.vendorEntry.vendorDisplayName, undefined);
     }
+    renderGroupElement(entry, index, templateData) {
+        templateData.nameLabel.set(entry.label, undefined);
+    }
     renderModelElement(entry, index, templateData) {
         const { modelEntry, modelNameMatches } = entry;
         templateData.statusIcon.className = 'model-status-icon';
@@ -299,7 +314,7 @@ let ModelNameColumnRenderer = class ModelNameColumnRenderer extends ModelsTableC
             markdown.appendText(`\n`);
         }
         if (!entry.modelEntry.metadata.isUserSelectable) {
-            markdown.appendMarkdown(`\n\n${( localize(5318, 'This model is hidden in the chat model picker'))}`);
+            markdown.appendMarkdown(`\n\n${( localize(5389, 'This model is hidden in the chat model picker'))}`);
         }
         templateData.elementDisposables.add(this.hoverService.setupDelayedHoverAtMouse(templateData.container, () => ({
             content: markdown,
@@ -313,12 +328,14 @@ let ModelNameColumnRenderer = class ModelNameColumnRenderer extends ModelsTableC
 ModelNameColumnRenderer = ModelNameColumnRenderer_1 = ( __decorate([
     ( __param(0, IHoverService))
 ], ModelNameColumnRenderer));
-class MultiplierColumnRenderer extends ModelsTableColumnRenderer {
-    constructor() {
-        super(...arguments);
-        this.templateId = MultiplierColumnRenderer.TEMPLATE_ID;
-    }
+let MultiplierColumnRenderer = class MultiplierColumnRenderer extends ModelsTableColumnRenderer {
+    static { MultiplierColumnRenderer_1 = this; }
     static { this.TEMPLATE_ID = 'multiplier'; }
+    constructor(hoverService) {
+        super();
+        this.hoverService = hoverService;
+        this.templateId = MultiplierColumnRenderer_1.TEMPLATE_ID;
+    }
     renderTemplate(container) {
         const disposables = ( new DisposableStore());
         const elementDisposables = ( new DisposableStore());
@@ -333,10 +350,30 @@ class MultiplierColumnRenderer extends ModelsTableColumnRenderer {
     renderVendorElement(entry, index, templateData) {
         templateData.multiplierElement.textContent = '';
     }
+    renderGroupElement(entry, index, templateData) {
+        templateData.multiplierElement.textContent = '';
+    }
     renderModelElement(entry, index, templateData) {
-        templateData.multiplierElement.textContent = (entry.modelEntry.metadata.detail && entry.modelEntry.metadata.detail.trim().toLowerCase() !== entry.modelEntry.vendor.trim().toLowerCase()) ? entry.modelEntry.metadata.detail : '-';
+        const multiplierText = (entry.modelEntry.metadata.detail && entry.modelEntry.metadata.detail.trim().toLowerCase() !== entry.modelEntry.vendor.trim().toLowerCase()) ? entry.modelEntry.metadata.detail : '-';
+        templateData.multiplierElement.textContent = multiplierText;
+        if (multiplierText !== '-') {
+            templateData.elementDisposables.add(this.hoverService.setupDelayedHoverAtMouse(templateData.container, () => ({
+                content: ( localize(
+                    5390,
+                    "Every chat message counts {0} towards your premium model request quota",
+                    multiplierText
+                )),
+                appearance: {
+                    compact: true,
+                    skipFadeInAnimation: true
+                }
+            })));
+        }
     }
-}
+};
+MultiplierColumnRenderer = MultiplierColumnRenderer_1 = ( __decorate([
+    ( __param(0, IHoverService))
+], MultiplierColumnRenderer));
 let TokenLimitsColumnRenderer = class TokenLimitsColumnRenderer extends ModelsTableColumnRenderer {
     static { TokenLimitsColumnRenderer_1 = this; }
     static { this.TEMPLATE_ID = 'tokenLimits'; }
@@ -362,18 +399,20 @@ let TokenLimitsColumnRenderer = class TokenLimitsColumnRenderer extends ModelsTa
     }
     renderVendorElement(entry, index, templateData) {
     }
+    renderGroupElement(entry, index, templateData) {
+    }
     renderModelElement(entry, index, templateData) {
         const { modelEntry } = entry;
         const markdown = ( new MarkdownString('', { isTrusted: true, supportThemeIcons: true }));
         if (modelEntry.metadata.maxInputTokens || modelEntry.metadata.maxOutputTokens) {
             let addSeparator = false;
-            markdown.appendMarkdown(`${( localize(5319, 'Context Size'))}: `);
+            markdown.appendMarkdown(`${( localize(5391, 'Context Size'))}: `);
             if (modelEntry.metadata.maxInputTokens) {
                 const inputDiv = append(templateData.tokenLimitsElement, $('.token-limit-item'));
                 append(inputDiv, $('span.codicon.codicon-arrow-down'));
                 const inputText = append(inputDiv, $('span'));
                 inputText.textContent = formatTokenCount(modelEntry.metadata.maxInputTokens);
-                markdown.appendMarkdown(`$(arrow-down) ${modelEntry.metadata.maxInputTokens} (${( localize(5320, 'Input'))})`);
+                markdown.appendMarkdown(`$(arrow-down) ${modelEntry.metadata.maxInputTokens} (${( localize(5392, 'Input'))})`);
                 addSeparator = true;
             }
             if (modelEntry.metadata.maxOutputTokens) {
@@ -384,7 +423,7 @@ let TokenLimitsColumnRenderer = class TokenLimitsColumnRenderer extends ModelsTa
                 if (addSeparator) {
                     markdown.appendText(`  |  `);
                 }
-                markdown.appendMarkdown(`$(arrow-up) ${modelEntry.metadata.maxOutputTokens} (${( localize(5321, 'Output'))})`);
+                markdown.appendMarkdown(`$(arrow-up) ${modelEntry.metadata.maxOutputTokens} (${( localize(5393, 'Output'))})`);
             }
         }
         templateData.elementDisposables.add(this.hoverService.setupDelayedHoverAtMouse(templateData.container, () => ({
@@ -410,7 +449,8 @@ class CapabilitiesColumnRenderer extends ModelsTableColumnRenderer {
     renderTemplate(container) {
         const disposables = ( new DisposableStore());
         const elementDisposables = ( new DisposableStore());
-        const metadataRow = append(container, $('.model-metadata'));
+        container.classList.add('model-capability-column');
+        const metadataRow = append(container, $('.model-capabilities'));
         return {
             container,
             metadataRow,
@@ -424,13 +464,15 @@ class CapabilitiesColumnRenderer extends ModelsTableColumnRenderer {
     }
     renderVendorElement(entry, index, templateData) {
     }
+    renderGroupElement(entry, index, templateData) {
+    }
     renderModelElement(entry, index, templateData) {
         const { modelEntry, capabilityMatches } = entry;
         if (modelEntry.metadata.capabilities?.toolCalling) {
-            templateData.elementDisposables.add(this.createCapabilityButton(templateData.metadataRow, capabilityMatches?.includes('toolCalling') || false, ( localize(5322, 'Tools')), 'tools'));
+            templateData.elementDisposables.add(this.createCapabilityButton(templateData.metadataRow, capabilityMatches?.includes('toolCalling') || false, ( localize(5394, 'Tools')), 'tools'));
         }
         if (modelEntry.metadata.capabilities?.vision) {
-            templateData.elementDisposables.add(this.createCapabilityButton(templateData.metadataRow, capabilityMatches?.includes('vision') || false, ( localize(5323, 'Vision')), 'vision'));
+            templateData.elementDisposables.add(this.createCapabilityButton(templateData.metadataRow, capabilityMatches?.includes('vision') || false, ( localize(5395, 'Vision')), 'vision'));
         }
     }
     createCapabilityButton(container, isActive, label, capability) {
@@ -447,12 +489,11 @@ class CapabilitiesColumnRenderer extends ModelsTableColumnRenderer {
 let ActionsColumnRenderer = class ActionsColumnRenderer extends ModelsTableColumnRenderer {
     static { ActionsColumnRenderer_1 = this; }
     static { this.TEMPLATE_ID = 'actions'; }
-    constructor(commandService) {
+    constructor(viewModel, commandService) {
         super();
+        this.viewModel = viewModel;
         this.commandService = commandService;
         this.templateId = ActionsColumnRenderer_1.TEMPLATE_ID;
-        this._onDidChange = ( new Emitter());
-        this.onDidChange = this._onDidChange.event;
     }
     renderTemplate(container) {
         const disposables = ( new DisposableStore());
@@ -475,22 +516,51 @@ let ActionsColumnRenderer = class ActionsColumnRenderer extends ModelsTableColum
             const { vendorEntry } = entry;
             const action = toAction({
                 id: 'manageVendor',
-                label: ( localize(5324, 'Manage {0}...', entry.vendorEntry.vendorDisplayName)),
+                label: ( localize(5396, 'Manage {0}...', entry.vendorEntry.vendorDisplayName)),
                 class: ThemeIcon.asClassName(Codicon.gear),
                 run: async () => {
                     await this.commandService.executeCommand(vendorEntry.managementCommand, vendorEntry.vendor);
-                    this._onDidChange.fire();
+                    this.viewModel.refresh();
                 }
             });
             templateData.actionBar.push(action, { icon: true, label: false });
         }
     }
+    renderGroupElement(entry, index, templateData) {
+    }
     renderModelElement(entry, index, templateData) {
     }
 };
 ActionsColumnRenderer = ActionsColumnRenderer_1 = ( __decorate([
-    ( __param(0, ICommandService))
+    ( __param(1, ICommandService))
 ], ActionsColumnRenderer));
+class ProviderColumnRenderer extends ModelsTableColumnRenderer {
+    constructor() {
+        super(...arguments);
+        this.templateId = ProviderColumnRenderer.TEMPLATE_ID;
+    }
+    static { this.TEMPLATE_ID = 'provider'; }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const elementDisposables = ( new DisposableStore());
+        const providerElement = append(container, $('.model-provider'));
+        return {
+            container,
+            providerElement,
+            disposables,
+            elementDisposables
+        };
+    }
+    renderVendorElement(entry, index, templateData) {
+        templateData.providerElement.textContent = '';
+    }
+    renderGroupElement(entry, index, templateData) {
+        templateData.providerElement.textContent = '';
+    }
+    renderModelElement(entry, index, templateData) {
+        templateData.providerElement.textContent = entry.modelEntry.vendorDisplayName;
+    }
+}
 function formatTokenCount(count) {
     if (count >= 1000000) {
         return `${(count / 1000000).toFixed(1)}M`;
@@ -513,30 +583,35 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
         this.editorProgressService = editorProgressService;
         this.commandService = commandService;
         this.dropdownActions = [];
+        this.tableDisposables = this._register(( new DisposableStore()));
         this.searchFocusContextKey = CONTEXT_MODELS_SEARCH_FOCUS.bindTo(contextKeyService);
-        this.delayedFiltering = ( new Delayer(300));
+        this.delayedFiltering = ( new Delayer(200));
         this.viewModel = this._register(this.instantiationService.createInstance(ChatModelsViewModel));
         this.element = $$1('.models-widget');
         this.create(this.element);
-        const loadingPromise = this.extensionService.whenInstalledExtensionsRegistered().then(async () => {
-            await this.viewModel.resolve();
-            this.refreshTable();
-        });
+        const loadingPromise = this.extensionService.whenInstalledExtensionsRegistered().then(() => this.viewModel.refresh());
         this.editorProgressService.showWhile(loadingPromise, 300);
-        this._register(this.viewModel.onDidChangeModelEntries(() => this.refreshTable()));
     }
     create(container) {
         const searchAndButtonContainer = append(container, $('.models-search-and-button-container'));
-        const placeholder = ( localize(5325, "Type to search..."));
+        const placeholder = ( localize(5397, "Type to search..."));
         const searchContainer = append(searchAndButtonContainer, $('.models-search-container'));
         this.searchWidget = this._register(this.instantiationService.createInstance(SuggestEnabledInput, 'chatModelsWidget.searchbox', searchContainer, {
             triggerCharacters: ['@', ':'],
             provideResults: (query) => {
+                const providerSuggestions = ( this.viewModel.getVendors().map(v => `@provider:"${v.displayName}"`));
+                const allSuggestions = [
+                    ...providerSuggestions,
+                    ...SEARCH_SUGGESTIONS.CAPABILITIES,
+                    ...SEARCH_SUGGESTIONS.VISIBILITY,
+                ];
+                if (!query.trim()) {
+                    return allSuggestions;
+                }
                 const queryParts = query.split(/\s/g);
                 const lastPart = queryParts[queryParts.length - 1];
                 if (lastPart.startsWith('@provider:')) {
-                    const vendors = this.viewModel.getVendors();
-                    return ( vendors.map(v => `@provider:"${v.displayName}"`));
+                    return providerSuggestions;
                 }
                 else if (lastPart.startsWith('@capability:')) {
                     return SEARCH_SUGGESTIONS.CAPABILITIES;
@@ -545,7 +620,7 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                     return SEARCH_SUGGESTIONS.VISIBILITY;
                 }
                 else if (lastPart.startsWith('@')) {
-                    return SEARCH_SUGGESTIONS.FILTER_TYPES;
+                    return allSuggestions;
                 }
                 return [];
             }
@@ -556,17 +631,22 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
             },
             focusContextKey: this.searchFocusContextKey,
         }));
-        this._register(this.searchWidget.onInputDidChange(() => this.filterModels()));
         const filterAction = this._register(( new ModelsFilterAction()));
-        const clearSearchAction = this._register(( new Action('workbench.models.clearSearch', ( localize(5326, "Clear Search")), ThemeIcon.asClassName(preferencesClearInputIcon), false, () => {
+        const clearSearchAction = this._register(( new Action('workbench.models.clearSearch', ( localize(5398, "Clear Search")), ThemeIcon.asClassName(preferencesClearInputIcon), false, () => {
             this.searchWidget.setValue('');
             this.searchWidget.focus();
         })));
+        const collapseAllAction = this._register(( new Action('workbench.models.collapseAll', ( localize(5399, "Collapse All")), ThemeIcon.asClassName(Codicon.collapseAll), false, () => {
+            this.viewModel.collapseAll();
+        })));
+        collapseAllAction.enabled = ( this.viewModel.viewModelEntries.some(e => isVendorEntry(e) || isGroupEntry(e)));
+        this._register(this.viewModel.onDidChange(() => collapseAllAction.enabled = ( this.viewModel.viewModelEntries.some(e => isVendorEntry(e) || isGroupEntry(e)))));
         this._register(this.searchWidget.onInputDidChange(() => {
             clearSearchAction.enabled = !!this.searchWidget.getValue();
+            this.filterModels();
         }));
         this.searchActionsContainer = append(searchContainer, $('.models-search-actions'));
-        const actions = [clearSearchAction, filterAction];
+        const actions = [clearSearchAction, collapseAllAction, filterAction];
         const toolBar = this._register(( new ToolBar(this.searchActionsContainer, this.contextMenuService, {
             actionViewItemProvider: (action, options) => {
                 if (action.id === filterAction.id) {
@@ -584,7 +664,7 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
             supportIcons: true,
         };
         this.addButton = this._register(( new Button(this.addButtonContainer, buttonOptions)));
-        this.addButton.label = `$(${Codicon.add.id}) ${( localize(5327, 'Add Models...'))}`;
+        this.addButton.label = `$(${Codicon.add.id}) ${( localize(5400, 'Add Models...'))}`;
         this.addButton.element.classList.add('models-add-model-button');
         this.addButton.enabled = false;
         this._register(this.addButton.onDidClick((e) => {
@@ -596,33 +676,27 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
             }
         }));
         this.tableContainer = append(container, $('.models-table-container'));
-        const gutterColumnRenderer = this.instantiationService.createInstance(GutterColumnRenderer);
+        this.createTable();
+        this._register(this.viewModel.onDidChangeGrouping(() => this.createTable()));
+    }
+    createTable() {
+        this.tableDisposables.clear();
+        clearNode(this.tableContainer);
+        const gutterColumnRenderer = this.instantiationService.createInstance(GutterColumnRenderer, this.viewModel);
         const modelNameColumnRenderer = this.instantiationService.createInstance(ModelNameColumnRenderer);
         const costColumnRenderer = this.instantiationService.createInstance(MultiplierColumnRenderer);
         const tokenLimitsColumnRenderer = this.instantiationService.createInstance(TokenLimitsColumnRenderer);
         const capabilitiesColumnRenderer = this.instantiationService.createInstance(CapabilitiesColumnRenderer);
-        const actionsColumnRenderer = this.instantiationService.createInstance(ActionsColumnRenderer);
-        this._register(gutterColumnRenderer.onDidToggleCollapse(vendorId => {
-            this.viewModel.toggleVendorCollapsed(vendorId);
-        }));
-        this._register(gutterColumnRenderer.onDidChange(e => {
-            this.viewModel.resolve().then(() => {
-                this.refreshTable();
-            });
-        }));
-        this._register(actionsColumnRenderer.onDidChange(e => {
-            this.viewModel.resolve().then(() => {
-                this.refreshTable();
-            });
-        }));
-        this._register(capabilitiesColumnRenderer.onDidClickCapability(capability => {
+        const actionsColumnRenderer = this.instantiationService.createInstance(ActionsColumnRenderer, this.viewModel);
+        const providerColumnRenderer = this.instantiationService.createInstance(ProviderColumnRenderer);
+        this.tableDisposables.add(capabilitiesColumnRenderer.onDidClickCapability(capability => {
             const currentQuery = this.searchWidget.getValue();
             const query = `@capability:${capability}`;
             const newQuery = toggleFilter(currentQuery, query);
             this.searchWidget.setValue(newQuery);
             this.searchWidget.focus();
         }));
-        this.table = this._register(this.instantiationService.createInstance(WorkbenchTable, 'ModelsWidget', this.tableContainer, ( new Delegate()), [
+        const columns = [
             {
                 label: '',
                 tooltip: '',
@@ -633,76 +707,119 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 project(row) { return row; }
             },
             {
-                label: ( localize(5328, 'Name')),
+                label: ( localize(5401, 'Name')),
                 tooltip: '',
-                weight: 0.40,
+                weight: 0.35,
                 minimumWidth: 200,
                 templateId: ModelNameColumnRenderer.TEMPLATE_ID,
                 project(row) { return row; }
-            },
-            {
-                label: ( localize(5329, 'Capabilities')),
-                tooltip: '',
-                weight: 0.30,
-                minimumWidth: 180,
-                templateId: CapabilitiesColumnRenderer.TEMPLATE_ID,
-                project(row) { return row; }
-            },
-            {
-                label: ( localize(5330, 'Context Size')),
-                tooltip: '',
-                weight: 0.1,
-                minimumWidth: 140,
-                templateId: TokenLimitsColumnRenderer.TEMPLATE_ID,
-                project(row) { return row; }
-            },
-            {
-                label: ( localize(5331, 'Multiplier')),
-                tooltip: '',
-                weight: 0.1,
-                minimumWidth: 60,
-                templateId: MultiplierColumnRenderer.TEMPLATE_ID,
-                project(row) { return row; }
-            },
-            {
-                label: '',
+            }
+        ];
+        if (this.viewModel.groupBy === ChatModelGroup.Visibility) {
+            columns.push({
+                label: ( localize(5402, 'Provider')),
                 tooltip: '',
-                weight: 0.05,
-                minimumWidth: 64,
-                maximumWidth: 64,
-                templateId: ActionsColumnRenderer.TEMPLATE_ID,
+                weight: 0.15,
+                minimumWidth: 100,
+                templateId: ProviderColumnRenderer.TEMPLATE_ID,
                 project(row) { return row; }
-            },
-        ], [
+            });
+        }
+        columns.push({
+            label: ( localize(5403, 'Context Size')),
+            tooltip: '',
+            weight: 0.1,
+            minimumWidth: 140,
+            templateId: TokenLimitsColumnRenderer.TEMPLATE_ID,
+            project(row) { return row; }
+        }, {
+            label: ( localize(5404, 'Capabilities')),
+            tooltip: '',
+            weight: 0.25,
+            minimumWidth: 180,
+            templateId: CapabilitiesColumnRenderer.TEMPLATE_ID,
+            project(row) { return row; }
+        }, {
+            label: ( localize(5405, 'Multiplier')),
+            tooltip: '',
+            weight: 0.05,
+            minimumWidth: 60,
+            templateId: MultiplierColumnRenderer.TEMPLATE_ID,
+            project(row) { return row; }
+        }, {
+            label: '',
+            tooltip: '',
+            weight: 0.05,
+            minimumWidth: 64,
+            maximumWidth: 64,
+            templateId: ActionsColumnRenderer.TEMPLATE_ID,
+            project(row) { return row; }
+        });
+        this.table = this.tableDisposables.add(this.instantiationService.createInstance(WorkbenchTable, 'ModelsWidget', this.tableContainer, ( new Delegate()), columns, [
             gutterColumnRenderer,
             modelNameColumnRenderer,
             costColumnRenderer,
             tokenLimitsColumnRenderer,
             capabilitiesColumnRenderer,
             actionsColumnRenderer,
+            providerColumnRenderer
         ], {
             identityProvider: { getId: (e) => e.id },
             horizontalScrolling: false,
             accessibilityProvider: {
                 getAriaLabel: (e) => {
                     if (isVendorEntry(e)) {
-                        return localize(5332, '{0} provider', e.vendorEntry.vendorDisplayName);
+                        return localize(5406, '{0} Models', e.vendorEntry.vendorDisplayName);
+                    }
+                    else if (isGroupEntry(e)) {
+                        return e.id === 'visible' ? ( localize(5407, 'Visible Models')) : ( localize(5408, 'Hidden Models'));
                     }
-                    return localize(
-                        5333,
+                    const ariaLabels = [];
+                    ariaLabels.push(( localize(
+                        5409,
                         '{0} from {1}',
                         e.modelEntry.metadata.name,
                         e.modelEntry.vendorDisplayName
-                    );
+                    )));
+                    if (e.modelEntry.metadata.maxInputTokens && e.modelEntry.metadata.maxOutputTokens) {
+                        ariaLabels.push(( localize(
+                            5410,
+                            'Context size: {0} input tokens and {1} output tokens',
+                            formatTokenCount(e.modelEntry.metadata.maxInputTokens),
+                            formatTokenCount(e.modelEntry.metadata.maxOutputTokens)
+                        )));
+                    }
+                    if (e.modelEntry.metadata.capabilities) {
+                        ariaLabels.push(( localize(
+                            5411,
+                            'Capabilities: {0}',
+                            ( Object.keys(e.modelEntry.metadata.capabilities)).join(', ')
+                        )));
+                    }
+                    const multiplierText = (e.modelEntry.metadata.detail && e.modelEntry.metadata.detail.trim().toLowerCase() !== e.modelEntry.vendor.trim().toLowerCase()) ? e.modelEntry.metadata.detail : '-';
+                    if (multiplierText !== '-') {
+                        ariaLabels.push(( localize(
+                            5390,
+                            "Every chat message counts {0} towards your premium model request quota",
+                            multiplierText
+                        )));
+                    }
+                    if (e.modelEntry.metadata.isUserSelectable) {
+                        ariaLabels.push(( localize(5412, 'This model is visible in the chat model picker')));
+                    }
+                    else {
+                        ariaLabels.push(( localize(5413, 'This model is hidden in the chat model picker')));
+                    }
+                    return ariaLabels.join('. ');
                 },
-                getWidgetAriaLabel: () => ( localize(5334, 'Language Models'))
+                getWidgetAriaLabel: () => ( localize(5414, 'Language Models'))
             },
             multipleSelectionSupport: false,
             setRowLineHeight: false,
-            openOnSingleClick: false,
+            openOnSingleClick: true,
             alwaysConsumeMouseWheel: false,
         }));
-        this._register(this.table.onContextMenu(e => {
+        this.tableDisposables.add(this.table.onContextMenu(e => {
             if (!e.element) {
                 return;
             }
@@ -711,11 +828,10 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 const actions = [
                     toAction({
                         id: 'manageVendor',
-                        label: ( localize(5324, 'Manage {0}...', entry.vendorEntry.vendorDisplayName)),
+                        label: ( localize(5396, 'Manage {0}...', entry.vendorEntry.vendorDisplayName)),
                         run: async () => {
                             await this.commandService.executeCommand(entry.vendorEntry.managementCommand, entry.vendorEntry.vendor);
-                            await this.viewModel.resolve();
-                            this.refreshTable();
+                            await this.viewModel.refresh();
                         }
                     })
                 ];
@@ -725,31 +841,54 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 });
             }
         }));
+        this.table.splice(0, this.table.length, this.viewModel.viewModelEntries);
+        this.tableDisposables.add(this.viewModel.onDidChange(({ at, removed, added }) => {
+            this.table.splice(at, removed, added);
+            if (this.viewModel.selectedEntry) {
+                const selectedEntryIndex = this.viewModel.viewModelEntries.indexOf(this.viewModel.selectedEntry);
+                this.table.setFocus([selectedEntryIndex]);
+                this.table.setSelection([selectedEntryIndex]);
+            }
+            const vendors = this.viewModel.getVendors();
+            const configuredVendors = ( new Set(( this.viewModel.getConfiguredVendors().map(cv => cv.vendor))));
+            const vendorsWithoutModels = vendors.filter(v => !( configuredVendors.has(v.vendor)));
+            const hasPlan = this.chatEntitlementService.entitlement !== ChatEntitlement.Unknown && this.chatEntitlementService.entitlement !== ChatEntitlement.Available;
+            this.addButton.enabled = hasPlan && vendorsWithoutModels.length > 0;
+            this.dropdownActions = ( vendorsWithoutModels.map(vendor => toAction({
+                id: `enable-${vendor.vendor}`,
+                label: vendor.displayName,
+                run: async () => {
+                    await this.enableProvider(vendor.vendor);
+                }
+            })));
+        }));
+        this.tableDisposables.add(this.table.onDidOpen(async ({ element, browserEvent }) => {
+            if (!element) {
+                return;
+            }
+            if (isVendorEntry(element) || isGroupEntry(element)) {
+                this.viewModel.toggleCollapsed(element);
+            }
+            else if (!isMouseEvent(browserEvent) || browserEvent.detail === 2) {
+                this.viewModel.toggleVisibility(element);
+            }
+        }));
+        this.tableDisposables.add(this.table.onDidChangeSelection(e => this.viewModel.selectedEntry = e.elements[0]));
+        this.tableDisposables.add(this.table.onDidBlur(() => {
+            if (this.viewModel.shouldRefilter()) {
+                this.viewModel.filter(this.searchWidget.getValue());
+            }
+        }));
+        this.layout(this.element.clientHeight, this.element.clientWidth);
     }
     filterModels() {
-        this.delayedFiltering.trigger(() => this.refreshTable());
-    }
-    async refreshTable() {
-        const searchValue = this.searchWidget.getValue();
-        const modelItems = this.viewModel.fetch(searchValue);
-        const vendors = this.viewModel.getVendors();
-        const configuredVendors = ( new Set(( this.viewModel.getConfiguredVendors().map(cv => cv.vendorEntry.vendor))));
-        const vendorsWithoutModels = vendors.filter(v => !( configuredVendors.has(v.vendor)));
-        this.table.splice(0, this.table.length, modelItems);
-        const hasPlan = this.chatEntitlementService.entitlement !== ChatEntitlement.Unknown && this.chatEntitlementService.entitlement !== ChatEntitlement.Available;
-        this.addButton.enabled = hasPlan && vendorsWithoutModels.length > 0;
-        this.dropdownActions = ( vendorsWithoutModels.map(vendor => toAction({
-            id: `enable-${vendor.vendor}`,
-            label: vendor.displayName,
-            run: async () => {
-                await this.enableProvider(vendor.vendor);
-            }
-        })));
+        this.delayedFiltering.trigger(() => {
+            this.viewModel.filter(this.searchWidget.getValue());
+        });
     }
     async enableProvider(vendorId) {
         await this.languageModelsService.selectLanguageModels({ vendor: vendorId }, true);
-        await this.viewModel.resolve();
-        this.refreshTable();
+        await this.viewModel.refresh();
     }
     layout(height, width) {
         width = width - 24;
@@ -768,9 +907,10 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
     clearSearch() {
         this.searchWidget.setValue('');
     }
-    async refresh() {
-        const refreshPromise = this.viewModel.resolve().then(() => this.refreshTable());
-        await this.editorProgressService.showWhile(refreshPromise, 300);
+    render() {
+        if (this.viewModel.shouldRefilter()) {
+            this.viewModel.filter(this.searchWidget.getValue());
+        }
     }
 };
 ChatModelsWidget = ChatModelsWidget_1 = ( __decorate([