@codingame/monaco-vscode-chat-service-override 32.0.2 → 33.0.4

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

@@ -5,6 +5,8 @@ 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, append, clearNode, getTotalWidth, Dimension } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
+import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
 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';
@@ -46,7 +48,7 @@ const VENDOR_ROW_HEIGHT = 30;
 const MODEL_ROW_HEIGHT = 26;
 class ModelsFilterAction extends Action {
     constructor() {
-        super("workbench.models.filter", ( localize(6409, "Filter")), ThemeIcon.asClassName(Codicon.filter));
+        super("workbench.models.filter", ( localize(6469, "Filter")), ThemeIcon.asClassName(Codicon.filter));
     }
     async run() {}
 }
@@ -97,7 +99,7 @@ let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropd
         return {
             id: `provider-${vendor}`,
             label: displayName,
-            tooltip: ( localize(6410, "Filter by {0}", displayName)),
+            tooltip: ( localize(6470, "Filter by {0}", displayName)),
             class: undefined,
             enabled: true,
             checked: isChecked,
@@ -114,7 +116,7 @@ let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropd
         return {
             id: `capability-${capability}`,
             label,
-            tooltip: ( localize(6411, "Filter by {0}", label)),
+            tooltip: ( localize(6471, "Filter by {0}", label)),
             class: undefined,
             enabled: true,
             checked: isChecked,
@@ -130,7 +132,7 @@ let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropd
     }
     getActions() {
         const actions = [];
-        actions.push(this.createCapabilityAction("tools", ( localize(6412, "Tools"))), this.createCapabilityAction("vision", ( localize(6413, "Vision"))), this.createCapabilityAction("agent", ( localize(6414, "Agent Mode"))));
+        actions.push(this.createCapabilityAction("tools", ( localize(6472, "Tools"))), this.createCapabilityAction("vision", ( localize(6473, "Vision"))), this.createCapabilityAction("agent", ( localize(6474, "Agent Mode"))));
         const configuredVendors = this.viewModel.getConfiguredVendors();
         if (configuredVendors.length > 1) {
             actions.push(( new Separator()));
@@ -212,7 +214,7 @@ class GutterColumnRenderer extends ModelsTableColumnRenderer {
         if (templateData.listRowElement) {
             templateData.listRowElement.setAttribute("aria-expanded", entry.collapsed ? "false" : "true");
         }
-        const label = entry.collapsed ? ( localize(6415, "Expand")) : ( localize(6416, "Collapse"));
+        const label = entry.collapsed ? ( localize(6475, "Expand")) : ( localize(6476, "Collapse"));
         const toggleCollapseAction = {
             id: "toggleCollapse",
             label,
@@ -381,18 +383,18 @@ let CombinedCostColumnRenderer = class CombinedCostColumnRenderer extends Models
         } = entry.model.metadata;
         const hasCost = inputCost !== undefined || outputCost !== undefined || cacheCost !== undefined;
         if (hasCost) {
-            templateData.inputCell.textContent = inputCost !== undefined ? ( localize(6417, "In: {0}", inputCost)) : "";
-            templateData.outputCell.textContent = outputCost !== undefined ? ( localize(6418, "Out: {0}", outputCost)) : "";
-            templateData.cacheCell.textContent = cacheCost !== undefined ? ( localize(6419, "Cache: {0}", cacheCost)) : "";
+            templateData.inputCell.textContent = inputCost !== undefined ? ( localize(6477, "In: {0}", inputCost)) : "";
+            templateData.outputCell.textContent = outputCost !== undefined ? ( localize(6478, "Out: {0}", outputCost)) : "";
+            templateData.cacheCell.textContent = cacheCost !== undefined ? ( localize(6479, "Cache: {0}", cacheCost)) : "";
             const parts = [];
             if (inputCost !== undefined) {
-                parts.push(inputCost === 1 ? ( localize(6420, "Input: {0} credit per 1M tokens", inputCost)) : ( localize(6421, "Input: {0} credits per 1M tokens", inputCost)));
+                parts.push(inputCost === 1 ? ( localize(6480, "Input: {0} credit per 1M tokens", inputCost)) : ( localize(6481, "Input: {0} credits per 1M tokens", inputCost)));
             }
             if (outputCost !== undefined) {
-                parts.push(outputCost === 1 ? ( localize(6422, "Output: {0} credit per 1M tokens", outputCost)) : ( localize(6423, "Output: {0} credits per 1M tokens", outputCost)));
+                parts.push(outputCost === 1 ? ( localize(6482, "Output: {0} credit per 1M tokens", outputCost)) : ( localize(6483, "Output: {0} credits per 1M tokens", outputCost)));
             }
             if (cacheCost !== undefined) {
-                parts.push(cacheCost === 1 ? ( localize(6424, "Cache: {0} credit per 1M tokens", cacheCost)) : ( localize(6425, "Cache: {0} credits per 1M tokens", cacheCost)));
+                parts.push(cacheCost === 1 ? ( localize(6484, "Cache: {0} credit per 1M tokens", cacheCost)) : ( localize(6485, "Cache: {0} credits per 1M tokens", cacheCost)));
             }
             templateData.elementDisposables.add(
                 this.hoverService.setupDelayedHoverAtMouse(templateData.container, () => ({
@@ -409,7 +411,7 @@ let CombinedCostColumnRenderer = class CombinedCostColumnRenderer extends Models
                 templateData.inputCell.textContent = pricingText;
                 templateData.elementDisposables.add(
                     this.hoverService.setupDelayedHoverAtMouse(templateData.container, () => ({
-                        content: ( localize(6426, "Pricing: {0}", pricingText)),
+                        content: ( localize(6486, "Pricing: {0}", pricingText)),
                         appearance: {
                             compact: true,
                             skipFadeInAnimation: true
@@ -463,7 +465,7 @@ let TokenLimitsColumnRenderer = class TokenLimitsColumnRenderer extends ModelsTa
             const tokenDiv = append(templateData.tokenLimitsElement, $(".token-limit-item"));
             const tokenText = append(tokenDiv, $("span"));
             tokenText.textContent = formatTokenCount(totalTokens);
-            markdown.appendMarkdown(`${( localize(6427, "Context Size"))}: `);
+            markdown.appendMarkdown(`${( localize(6487, "Context Size"))}: `);
             markdown.appendMarkdown(`${formatTokenCount(totalTokens)}`);
         }
         templateData.elementDisposables.add(
@@ -518,7 +520,7 @@ class CapabilitiesColumnRenderer extends ModelsTableColumnRenderer {
             templateData.elementDisposables.add(this.createCapabilityButton(
                 templateData.metadataRow,
                 capabilityMatches?.includes("toolCalling") || false,
-                ( localize(6428, "Tools")),
+                ( localize(6488, "Tools")),
                 "tools"
             ));
         }
@@ -526,7 +528,7 @@ class CapabilitiesColumnRenderer extends ModelsTableColumnRenderer {
             templateData.elementDisposables.add(this.createCapabilityButton(
                 templateData.metadataRow,
                 capabilityMatches?.includes("vision") || false,
-                ( localize(6429, "Vision")),
+                ( localize(6489, "Vision")),
                 "vision"
             ));
         }
@@ -601,17 +603,17 @@ let ActionsColumnRenderer = class ActionsColumnRenderer extends ModelsTableColum
         if (vendorEntry.vendor.configuration) {
             secondaryActions.push(toAction({
                 id: "configureAction",
-                label: ( localize(6430, "Configure...")),
+                label: ( localize(6490, "Configure...")),
                 run: () => this.languageModelsService.configureLanguageModelsProviderGroup(vendorEntry.vendor.vendor, vendorEntry.group.name)
             }));
             secondaryActions.push(toAction({
                 id: "deleteAction",
-                label: ( localize(6431, "Delete")),
+                label: ( localize(6491, "Delete")),
                 class: ThemeIcon.asClassName(Codicon.trash),
                 run: async () => {
                     const result = await this.dialogService.confirm({
                         type: "info",
-                        message: ( localize(6432, "Would you like to delete {0}?", vendorEntry.group.name))
+                        message: ( localize(6492, "Would you like to delete {0}?", vendorEntry.group.name))
                     });
                     if (!result.confirmed) {
                         return;
@@ -623,7 +625,7 @@ let ActionsColumnRenderer = class ActionsColumnRenderer extends ModelsTableColum
         } else if (vendorEntry.vendor.managementCommand) {
             primaryActions.push(toAction({
                 id: "manageVendor",
-                label: ( localize(6433, "Manage {0}...", vendorEntry.group.name)),
+                label: ( localize(6493, "Manage {0}...", vendorEntry.group.name)),
                 class: ThemeIcon.asClassName(Codicon.gear),
                 run: async () => {
                     await this.commandService.executeCommand(vendorEntry.vendor.managementCommand, vendorEntry.vendor.vendor);
@@ -635,17 +637,36 @@ let ActionsColumnRenderer = class ActionsColumnRenderer extends ModelsTableColum
     }
     renderGroupElement(entry, index, templateData) {}
     renderModelElement(entry, index, templateData) {
-        const configActions = this.languageModelsService.getModelConfigurationActions(entry.model.identifier);
-        if (configActions.length === 0 && !entry.model.metadata.configurationSchema) {
-            return;
+        const primaryActions = [];
+        if (entry.model.metadata.id !== "auto") {
+            primaryActions.push(this.createPinAction(entry.model.identifier));
         }
+        const configActions = this.languageModelsService.getModelConfigurationActions(entry.model.identifier);
         const secondaryActions = [...configActions];
-        secondaryActions.push(toAction({
-            id: "configureModel",
-            label: ( localize(6434, "Configure...")),
-            run: () => this.languageModelsService.configureModel(entry.model.identifier)
-        }));
-        templateData.actionBar.setActions([], secondaryActions);
+        if (configActions.length > 0 || entry.model.metadata.configurationSchema) {
+            secondaryActions.push(toAction({
+                id: "configureModel",
+                label: ( localize(6494, "Configure...")),
+                run: () => this.languageModelsService.configureModel(entry.model.identifier)
+            }));
+        }
+        templateData.actionBar.setActions(primaryActions, secondaryActions);
+    }
+    createPinAction(modelIdentifier) {
+        const isPinned = this.languageModelsService.isModelPinned(modelIdentifier);
+        return toAction({
+            id: isPinned ? `unpin.${modelIdentifier}` : `pin.${modelIdentifier}`,
+            label: isPinned ? ( localize(6495, "Unpin Model")) : ( localize(6496, "Pin Model")),
+            class: ThemeIcon.asClassName(isPinned ? Codicon.pinned : Codicon.pin),
+            run: () => {
+                if (isPinned) {
+                    this.languageModelsService.unpinModel(modelIdentifier);
+                } else {
+                    this.languageModelsService.pinModel(modelIdentifier);
+                }
+                this.viewModel.refresh();
+            }
+        });
     }
 };
 ActionsColumnRenderer = ActionsColumnRenderer_1 = ( __decorate([( __param(1, IInstantiationService)), ( __param(2, ILanguageModelsService)), ( __param(3, IDialogService)), ( __param(4, ICommandService)), ( __param(5, IContextMenuService))], ActionsColumnRenderer));
@@ -714,6 +735,7 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
         this.contextKeyService = contextKeyService;
         this._onDidChangeItemCount = this._register(( new Emitter()));
         this.onDidChangeItemCount = this._onDidChangeItemCount.event;
+        this.tableMinWidth = 0;
         this.dropdownActions = [];
         this.tableDisposables = this._register(( new DisposableStore()));
         this.searchFocusContextKey = CONTEXT_MODELS_SEARCH_FOCUS.bindTo(this.contextKeyService);
@@ -726,7 +748,7 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
     }
     create(container) {
         const searchAndButtonContainer = append(container, $(".models-search-and-button-container"));
-        const placeholder = ( localize(6435, "Type to search..."));
+        const placeholder = ( localize(6497, "Type to search..."));
         const searchContainer = append(searchAndButtonContainer, $(".models-search-container"));
         this.searchWidget = this._register(
             this.instantiationService.createInstance(SuggestEnabledInput, "chatModelsWidget.searchbox", searchContainer, {
@@ -757,8 +779,8 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
             })
         );
         const filterAction = this._register(( new ModelsFilterAction()));
-        const clearSearchAction = this._register(( new Action("workbench.models.clearSearch", ( localize(6436, "Clear Search")), ThemeIcon.asClassName(preferencesClearInputIcon), false, () => this.clearSearch())));
-        const collapseAllAction = this._register(( new Action("workbench.models.collapseAll", ( localize(6437, "Collapse All")), ThemeIcon.asClassName(Codicon.collapseAll), false, () => {
+        const clearSearchAction = this._register(( new Action("workbench.models.clearSearch", ( localize(6498, "Clear Search")), ThemeIcon.asClassName(preferencesClearInputIcon), false, () => this.clearSearch())));
+        const collapseAllAction = this._register(( new Action("workbench.models.collapseAll", ( localize(6499, "Collapse All")), ThemeIcon.asClassName(Codicon.collapseAll), false, () => {
             this.viewModel.collapseAll();
         })));
         collapseAllAction.enabled = ( this.viewModel.viewModelEntries.some(e => isLanguageModelGroupEntry(e) || isLanguageModelProviderEntry(e)));
@@ -791,7 +813,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(6438, "Add Models..."))}`;
+        this.addButton.label = `$(${Codicon.add.id}) ${( localize(6500, "Add Models..."))}`;
         this.addButton.element.classList.add("models-add-model-button");
         this.updateAddModelsButton();
         this._register(this.addButton.onDidClick(e => {
@@ -809,9 +831,15 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
             this.updateAddModelsButton();
             this.createTable();
         }));
+        this._register(
+            this.chatEntitlementService.onDidChangeUsageBasedBilling(() => this.createTable())
+        );
         this._register(
             this.languageModelsService.onDidChangeLanguageModelVendors(() => this.updateAddModelsButton())
         );
+        this._register(
+            this.languageModelsService.onDidChangePinnedModels(() => this.viewModel.refresh())
+        );
         this._register(this.contextKeyService.onDidChangeContext(e => {
             if (e.affectsSome(( new Set(["github.copilot.clientByokEnabled"])))) {
                 this.updateAddModelsButton();
@@ -821,6 +849,15 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
     createTable() {
         this.tableDisposables.clear();
         clearNode(this.tableContainer);
+        this.tableViewport = $(".models-table-viewport");
+        this.tableInner = append(this.tableViewport, $(".models-table-inner"));
+        this.tableScrollable = this.tableDisposables.add(( new DomScrollableElement(this.tableViewport, {
+            horizontal: ScrollbarVisibility.Auto,
+            vertical: ScrollbarVisibility.Hidden,
+            useShadows: false,
+            scrollYToX: true
+        })));
+        this.tableContainer.appendChild(this.tableScrollable.getDomNode());
         const gutterColumnRenderer = this.instantiationService.createInstance(GutterColumnRenderer, this.viewModel);
         const modelNameColumnRenderer = this.instantiationService.createInstance(ModelNameColumnRenderer);
         const combinedCostColumnRenderer = this.instantiationService.createInstance(CombinedCostColumnRenderer);
@@ -848,7 +885,7 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 return row;
             }
         }, {
-            label: ( localize(6439, "Name")),
+            label: ( localize(6501, "Name")),
             tooltip: "",
             weight: 0.35,
             minimumWidth: 200,
@@ -857,11 +894,9 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 return row;
             }
         }];
-        const hasAnyCostFields = ( this.viewModel.viewModelEntries.some(
-            e => !isLanguageModelProviderEntry(e) && !isLanguageModelGroupEntry(e) && !isStatusEntry(e) && (e.model.metadata.inputCost !== undefined || e.model.metadata.outputCost !== undefined || e.model.metadata.cacheCost !== undefined)
-        ));
+        const isUBB = this.chatEntitlementService.quotas.usageBasedBilling === true;
         columns.push({
-            label: ( localize(6440, "Context Size")),
+            label: ( localize(6502, "Context Size")),
             tooltip: "",
             weight: 0.1,
             minimumWidth: 140,
@@ -870,7 +905,7 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 return row;
             }
         }, {
-            label: ( localize(6441, "Capabilities")),
+            label: ( localize(6503, "Capabilities")),
             tooltip: "",
             weight: 0.15,
             minimumWidth: 180,
@@ -879,10 +914,10 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 return row;
             }
         }, {
-            label: hasAnyCostFields ? ( localize(6442, "Cost (Credits per 1M Tokens)")) : ( localize(6443, "Pricing")),
+            label: isUBB ? ( localize(6504, "Cost (Credits per 1M Tokens)")) : ( localize(6505, "Pricing")),
             tooltip: "",
-            weight: hasAnyCostFields ? 0.24 : 0.15,
-            minimumWidth: hasAnyCostFields ? 240 : 200,
+            weight: isUBB ? 0.24 : 0.15,
+            minimumWidth: isUBB ? 240 : 200,
             templateId: CombinedCostColumnRenderer.TEMPLATE_ID,
             project(row) {
                 return row;
@@ -898,8 +933,10 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 return row;
             }
         });
+        this.tableMinWidth = columns.reduce((sum, c) => sum + c.minimumWidth, 0);
+        this.tableInner.style.minWidth = `${this.tableMinWidth}px`;
         this.table = this.tableDisposables.add(
-            this.instantiationService.createInstance(WorkbenchTable, "ModelsWidget", this.tableContainer, ( new Delegate()), columns, [
+            this.instantiationService.createInstance(WorkbenchTable, "ModelsWidget", this.tableInner, ( new Delegate()), columns, [
                 gutterColumnRenderer,
                 modelNameColumnRenderer,
                 combinedCostColumnRenderer,
@@ -915,50 +952,50 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                 accessibilityProvider: {
                     getAriaLabel: e => {
                         if (isLanguageModelProviderEntry(e)) {
-                            return localize(6444, "{0} Models", e.vendorEntry.group.name);
+                            return localize(6506, "{0} Models", e.vendorEntry.group.name);
                         } else if (isLanguageModelGroupEntry(e)) {
-                            return e.id === "visible" ? ( localize(6445, "Visible Models")) : ( localize(6446, "Hidden Models"));
+                            return e.id === "visible" ? ( localize(6507, "Visible Models")) : ( localize(6508, "Hidden Models"));
                         } else if (isStatusEntry(e)) {
-                            return localize(6447, "Status: {0}", e.message);
+                            return localize(6509, "Status: {0}", e.message);
                         }
                         const ariaLabels = [];
                         ariaLabels.push(( localize(
-                            6448,
+                            6510,
                             "{0} from {1}",
                             e.model.metadata.name,
                             e.model.provider.vendor.displayName
                         )));
                         if (e.model.metadata.maxInputTokens || e.model.metadata.maxOutputTokens) {
                             const totalTokens = (e.model.metadata.maxInputTokens ?? 0) + (e.model.metadata.maxOutputTokens ?? 0);
-                            ariaLabels.push(( localize(6449, "Context size: {0} tokens", formatTokenCount(totalTokens))));
+                            ariaLabels.push(( localize(6511, "Context size: {0} tokens", formatTokenCount(totalTokens))));
                         }
                         if (e.model.metadata.capabilities) {
                             ariaLabels.push(( localize(
-                                6450,
+                                6512,
                                 "Capabilities: {0}",
                                 ( Object.keys(e.model.metadata.capabilities)).join(", ")
                             )));
                         }
                         const pricingText = e.model.metadata.pricing ?? "-";
                         if (pricingText !== "-") {
-                            ariaLabels.push(( localize(6451, "Pricing: {0}", pricingText)));
+                            ariaLabels.push(( localize(6513, "Pricing: {0}", pricingText)));
                         }
                         if (e.model.metadata.inputCost !== undefined) {
-                            ariaLabels.push(e.model.metadata.inputCost === 1 ? ( localize(6452, "Input cost: {0} credit per 1M tokens", e.model.metadata.inputCost)) : ( localize(6453, "Input cost: {0} credits per 1M tokens", e.model.metadata.inputCost)));
+                            ariaLabels.push(e.model.metadata.inputCost === 1 ? ( localize(6514, "Input cost: {0} credit per 1M tokens", e.model.metadata.inputCost)) : ( localize(6515, "Input cost: {0} credits per 1M tokens", e.model.metadata.inputCost)));
                         }
                         if (e.model.metadata.outputCost !== undefined) {
-                            ariaLabels.push(e.model.metadata.outputCost === 1 ? ( localize(6454, "Output cost: {0} credit per 1M tokens", e.model.metadata.outputCost)) : ( localize(
-                                6455,
+                            ariaLabels.push(e.model.metadata.outputCost === 1 ? ( localize(6516, "Output cost: {0} credit per 1M tokens", e.model.metadata.outputCost)) : ( localize(
+                                6517,
                                 "Output cost: {0} credits per 1M tokens",
                                 e.model.metadata.outputCost
                             )));
                         }
                         if (e.model.metadata.cacheCost !== undefined) {
-                            ariaLabels.push(e.model.metadata.cacheCost === 1 ? ( localize(6456, "Cache cost: {0} credit per 1M tokens", e.model.metadata.cacheCost)) : ( localize(6457, "Cache cost: {0} credits per 1M tokens", e.model.metadata.cacheCost)));
+                            ariaLabels.push(e.model.metadata.cacheCost === 1 ? ( localize(6518, "Cache cost: {0} credit per 1M tokens", e.model.metadata.cacheCost)) : ( localize(6519, "Cache cost: {0} credits per 1M tokens", e.model.metadata.cacheCost)));
                         }
                         return ariaLabels.join(". ");
                     },
-                    getWidgetAriaLabel: () => ( localize(6458, "Language Models"))
+                    getWidgetAriaLabel: () => ( localize(6520, "Language Models"))
                 },
                 multipleSelectionSupport: true,
                 setRowLineHeight: false,
@@ -979,6 +1016,24 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
             let configureGroup;
             let configureVendor;
             if (selectedModelEntries.length) {
+                const pinnableEntries = selectedModelEntries.filter(e => e.model.metadata.id !== "auto");
+                if (pinnableEntries.length > 0) {
+                    const allPinned = pinnableEntries.every(e => this.languageModelsService.isModelPinned(e.model.identifier));
+                    actions.push(toAction({
+                        id: allPinned ? "unpinModels" : "pinModels",
+                        label: allPinned ? ( localize(6495, "Unpin Model")) : ( localize(6496, "Pin Model")),
+                        class: ThemeIcon.asClassName(allPinned ? Codicon.pinned : Codicon.pin),
+                        run: () => {
+                            for (const entry of pinnableEntries) {
+                                if (allPinned) {
+                                    this.languageModelsService.unpinModel(entry.model.identifier);
+                                } else {
+                                    this.languageModelsService.pinModel(entry.model.identifier);
+                                }
+                            }
+                        }
+                    }));
+                }
                 if (selectedModelEntries.length === 1) {
                     const configActions = this.languageModelsService.getModelConfigurationActions(selectedModelEntries[0].model.identifier);
                     if (configActions.length) {
@@ -1009,7 +1064,7 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                     if (configureVendor.managementCommand) {
                         actions.push(toAction({
                             id: "configureVendor",
-                            label: ( localize(6459, "Configure")),
+                            label: ( localize(6521, "Configure")),
                             run: async () => {
                                 await this.commandService.executeCommand(configureVendor.managementCommand, configureVendor.vendor);
                                 await this.viewModel.refresh();
@@ -1018,7 +1073,7 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
                     } else {
                         actions.push(toAction({
                             id: "configureVendor",
-                            label: ( localize(6459, "Configure")),
+                            label: ( localize(6521, "Configure")),
                             run: () => this.languageModelsService.configureLanguageModelsProviderGroup(configureVendor.vendor, configureGroup)
                         }));
                     }
@@ -1078,16 +1133,29 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
         const configurableVendors = this.languageModelsService.getVendors().filter(vendor => vendor.managementCommand || vendor.configuration);
         const entitlement = this.chatEntitlementService.entitlement;
         const isManagedEntitlement = entitlement === ChatEntitlement.Business || entitlement === ChatEntitlement.Enterprise;
-        const supportsAddingModels = this.chatEntitlementService.isInternal || (isManagedEntitlement && this.chatEntitlementService.clientByokEnabled) || (entitlement !== ChatEntitlement.Unknown && entitlement !== ChatEntitlement.Available && !isManagedEntitlement);
+        const supportsAddingModels = this.chatEntitlementService.isInternal || this.chatEntitlementService.clientByokEnabled || (entitlement !== ChatEntitlement.Unknown && entitlement !== ChatEntitlement.Available && !isManagedEntitlement);
         this.addButton.enabled = supportsAddingModels && configurableVendors.length > 0;
-        this.addButton.setTitle(!supportsAddingModels && isManagedEntitlement ? ( localize(6460, "Adding models is managed by your organization")) : "");
-        this.dropdownActions = ( configurableVendors.map(vendor => toAction({
+        this.addButton.setTitle(!supportsAddingModels && isManagedEntitlement ? ( localize(6522, "Adding models is managed by your organization")) : "");
+        const customEndpointVendor = configurableVendors.find(v => v.vendor === "customendpoint");
+        const customOaiVendor = configurableVendors.find(v => v.vendor === "customoai");
+        const sortedVendors = configurableVendors.filter(v => v.vendor !== "customendpoint" && v.vendor !== "customoai").sort((a, b) => a.displayName.localeCompare(b.displayName));
+        if (customOaiVendor) {
+            sortedVendors.push(customOaiVendor);
+        }
+        const toVendorAction = vendor => toAction({
             id: `enable-${vendor.vendor}`,
             label: vendor.displayName,
             run: async () => {
                 await this.addModelsForVendor(vendor);
             }
-        })));
+        });
+        this.dropdownActions = ( sortedVendors.map(toVendorAction));
+        if (customEndpointVendor) {
+            if (this.dropdownActions.length > 0) {
+                this.dropdownActions.push(( new Separator()));
+            }
+            this.dropdownActions.push(toVendorAction(customEndpointVendor));
+        }
     }
     filterModels() {
         this.delayedFiltering.trigger(() => {
@@ -1106,7 +1174,9 @@ let ChatModelsWidget = class ChatModelsWidget extends Disposable {
         ));
         const tableHeight = height - 40;
         this.tableContainer.style.height = `${tableHeight}px`;
-        this.table.layout(tableHeight, width);
+        const tableWidth = Math.max(width, this.tableMinWidth);
+        this.table.layout(tableHeight, tableWidth);
+        this.tableScrollable?.scanDomNode();
     }
     focusSearch() {
         this.searchWidget.focus();

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

@@ -52,6 +52,28 @@
 	width: 100%;
 	border-spacing: 0;
 	border-collapse: separate;
+	overflow: hidden;
+}
+
+.models-widget .models-table-container > .monaco-scrollable-element {
+	width: 100%;
+	height: 100%;
+}
+
+.models-widget .models-table-container .models-table-viewport {
+	width: 100%;
+	height: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scrollbar-width: none;
+}
+
+.models-widget .models-table-container .models-table-viewport::-webkit-scrollbar {
+	display: none;
+}
+
+.models-widget .models-table-container .models-table-inner {
+	height: 100%;
 }
 
 .models-widget .models-table-container .monaco-table-tr {

package/vscode/src/vs/workbench/contrib/chat/browser/chatOutputItemRenderer.d.ts

@@ -4,12 +4,19 @@ import { Disposable, IDisposable } from "@codingame/monaco-vscode-api/vscode/vs/
 import { URI } from "@codingame/monaco-vscode-api/vscode/vs/base/common/uri";
 import { IContextKeyService } from "@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service";
 import { ExtensionIdentifier } from "@codingame/monaco-vscode-api/vscode/vs/platform/extensions/common/extensions";
+import { IStorageService } from "@codingame/monaco-vscode-api/vscode/vs/platform/storage/common/storage.service";
 import { IWebview } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/webview/browser/webview";
 import { IWebviewService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/webview/browser/webview.service";
 import { IExtensionService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/services/extensions/common/extensions.service";
+import { IChatWidgetService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chat.service";
 import { IChatOutputRendererService } from "@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/browser/chatOutputItemRenderer.service";
 export interface IChatOutputItemRenderer {
-    renderOutputPart(mime: string, data: Uint8Array, webview: IWebview, token: CancellationToken): Promise<void>;
+    renderOutputPart(mime: string, data: Uint8Array, webview: IWebview, context: IChatOutputRenderContext, token: CancellationToken): Promise<void>;
+}
+export interface IChatOutputRenderContext {
+    readonly codeBlockContext?: {
+        readonly languageIdentifier: string;
+    };
 }
 export interface RegisterOptions {
     readonly extension?: {
@@ -23,19 +30,32 @@ export interface RenderedOutputPart extends IDisposable {
     reinitialize(): void;
 }
 export interface RenderOutputPartWebviewOptions {
-    readonly origin?: string;
+    readonly title?: string;
     readonly webviewState?: string;
+    readonly chatSessionResource?: URI;
+}
+export interface RenderCodeBlockWebviewOptions extends RenderOutputPartWebviewOptions {
+    readonly chatSessionResource: URI;
 }
 export declare class ChatOutputRendererService extends Disposable implements IChatOutputRendererService {
     private readonly _contextKeyService;
     private readonly _extensionService;
     private readonly _webviewService;
+    private readonly _chatWidgetService;
     _serviceBrand: undefined;
+    private readonly _originStore;
     private readonly _contributions;
     private readonly _renderers;
-    constructor(_contextKeyService: IContextKeyService, _extensionService: IExtensionService, _webviewService: IWebviewService);
+    constructor(_contextKeyService: IContextKeyService, _extensionService: IExtensionService, _webviewService: IWebviewService, _chatWidgetService: IChatWidgetService, storageService: IStorageService);
     registerRenderer(viewType: string, renderer: IChatOutputItemRenderer, options: RegisterOptions): IDisposable;
+    hasCodeBlockRenderer(languageIdentifier: string): boolean;
     renderOutputPart(mime: string, data: Uint8Array, parent: HTMLElement, webviewOptions: RenderOutputPartWebviewOptions, token: CancellationToken): Promise<RenderedOutputPart>;
+    renderCodeBlock(languageIdentifier: string, data: Uint8Array, parent: HTMLElement, webviewOptions: RenderCodeBlockWebviewOptions, token: CancellationToken): Promise<RenderedOutputPart>;
+    private doRenderOutputPart;
+    private delegateScrollToChatWidget;
+    private getOrigin;
+    private getRendererForMime;
+    private getRendererForCodeBlock;
     private getRenderer;
     private updateContributions;
 }