@codingame/monaco-vscode-chat-service-override 22.1.9 → 23.0.0

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

@@ -0,0 +1,787 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
+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 { 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';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+import { defaultButtonStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
+import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
+import { WorkbenchTable } from '@codingame/monaco-vscode-api/vscode/vs/platform/list/browser/listService';
+import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+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 { 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 { 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 { 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 { 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 { 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;
+registerCss(chatModelsWidget);
+const $ = $$1;
+const HEADER_HEIGHT = 30;
+const VENDOR_ROW_HEIGHT = 30;
+const MODEL_ROW_HEIGHT = 26;
+class ModelsFilterAction extends Action {
+    constructor() {
+        super('workbench.models.filter', ( localize(5283, "Filter")), ThemeIcon.asClassName(Codicon.filter));
+    }
+    async run() {
+    }
+}
+function toggleFilter(currentQuery, query, alternativeQueries = []) {
+    const allQueries = [query, ...alternativeQueries];
+    const isChecked = ( allQueries.some(q => currentQuery.includes(q)));
+    if (!isChecked) {
+        const trimmedQuery = currentQuery.trim();
+        return trimmedQuery ? `${trimmedQuery} ${query}` : query;
+    }
+    else {
+        let queryWithRemovedFilter = currentQuery;
+        for (const q of allQueries) {
+            queryWithRemovedFilter = queryWithRemovedFilter.replace(q, '');
+        }
+        return queryWithRemovedFilter.replace(/\s+/g, ' ').trim();
+    }
+}
+let ModelsSearchFilterDropdownMenuActionViewItem = class ModelsSearchFilterDropdownMenuActionViewItem extends DropdownMenuActionViewItem {
+    constructor(action, options, searchWidget, viewModel, contextMenuService) {
+        super(action, { getActions: () => this.getActions() }, contextMenuService, {
+            ...options,
+            classNames: action.class,
+            anchorAlignmentProvider: () => AnchorAlignment.RIGHT,
+            menuAsChild: true
+        });
+        this.searchWidget = searchWidget;
+        this.viewModel = viewModel;
+    }
+    createProviderAction(vendor, displayName) {
+        const query = `@provider:"${displayName}"`;
+        const currentQuery = this.searchWidget.getValue();
+        const isChecked = currentQuery.includes(query) || currentQuery.includes(`@provider:${vendor}`);
+        return {
+            id: `provider-${vendor}`,
+            label: displayName,
+            tooltip: ( localize(5284, "Filter by {0}", displayName)),
+            class: undefined,
+            enabled: true,
+            checked: isChecked,
+            run: () => this.toggleFilterAndSearch(query, [`@provider:${vendor}`])
+        };
+    }
+    createCapabilityAction(capability, label) {
+        const query = `@capability:${capability}`;
+        const currentQuery = this.searchWidget.getValue();
+        const isChecked = currentQuery.includes(query);
+        return {
+            id: `capability-${capability}`,
+            label,
+            tooltip: ( localize(5285, "Filter by {0}", label)),
+            class: undefined,
+            enabled: true,
+            checked: isChecked,
+            run: () => this.toggleFilterAndSearch(query)
+        };
+    }
+    createVisibleAction(visible, label) {
+        const query = `@visible:${visible}`;
+        const oppositeQuery = `@visible:${!visible}`;
+        const currentQuery = this.searchWidget.getValue();
+        const isChecked = currentQuery.includes(query);
+        return {
+            id: `visible-${visible}`,
+            label,
+            tooltip: ( localize(5286, "Filter by {0}", label)),
+            class: undefined,
+            enabled: true,
+            checked: isChecked,
+            run: () => this.toggleFilterAndSearch(query, [oppositeQuery])
+        };
+    }
+    toggleFilterAndSearch(query, alternativeQueries = []) {
+        const currentQuery = this.searchWidget.getValue();
+        const newQuery = toggleFilter(currentQuery, query, alternativeQueries);
+        this.searchWidget.setValue(newQuery);
+        this.searchWidget.focus();
+    }
+    getActions() {
+        const actions = [];
+        actions.push(this.createVisibleAction(true, ( localize(5287, 'Visible'))));
+        actions.push(this.createVisibleAction(false, ( localize(5288, 'Hidden'))));
+        actions.push(( new Separator()));
+        actions.push(this.createCapabilityAction('tools', ( localize(5289, 'Tools'))), this.createCapabilityAction('vision', ( localize(5290, 'Vision'))), this.createCapabilityAction('agent', ( localize(5291, '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)
+            )));
+        }
+        return actions;
+    }
+};
+ModelsSearchFilterDropdownMenuActionViewItem = ( __decorate([
+    ( __param(4, IContextMenuService))
+], ModelsSearchFilterDropdownMenuActionViewItem));
+class Delegate {
+    constructor() {
+        this.headerRowHeight = HEADER_HEIGHT;
+    }
+    getHeight(element) {
+        return isVendorEntry(element) ? VENDOR_ROW_HEIGHT : MODEL_ROW_HEIGHT;
+    }
+}
+class ModelsTableColumnRenderer {
+    renderElement(element, index, templateData) {
+        templateData.elementDisposables.clear();
+        const isVendor = isVendorEntry(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);
+        if (isVendor) {
+            this.renderVendorElement(element, index, templateData);
+        }
+        else {
+            this.renderModelElement(element, index, templateData);
+        }
+    }
+    disposeTemplate(templateData) {
+        templateData.elementDisposables.dispose();
+        templateData.disposables.dispose();
+    }
+}
+let GutterColumnRenderer = class GutterColumnRenderer extends ModelsTableColumnRenderer {
+    static { GutterColumnRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'gutter'; }
+    constructor(languageModelsService) {
+        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;
+    }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const elementDisposables = ( new DisposableStore());
+        container.classList.add('models-gutter-column');
+        const actionBar = disposables.add(( new ActionBar(container)));
+        return {
+            rowContainer: container.parentElement,
+            container,
+            actionBar,
+            disposables,
+            elementDisposables
+        };
+    }
+    renderElement(entry, index, templateData) {
+        templateData.actionBar.clear();
+        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)));
+        }
+    }
+    createToggleCollapseAction(entry) {
+        const label = entry.collapsed ? ( localize(5292, 'Expand')) : ( localize(5293, 'Collapse'));
+        return {
+            id: 'toggleCollapse',
+            label,
+            tooltip: label,
+            enabled: true,
+            class: ThemeIcon.asClassName(entry.collapsed ? Codicon.chevronRight : Codicon.chevronDown),
+            run: () => {
+                this._onDidToggleCollapse.fire(entry.vendorEntry.vendor);
+            }
+        };
+    }
+    renderModelElement(entry, index, templateData) {
+        const { modelEntry } = entry;
+        const isVisible = modelEntry.metadata.isUserSelectable ?? false;
+        const toggleVisibilityAction = toAction({
+            id: 'toggleVisibility',
+            label: isVisible ? ( localize(5294, 'Hide')) : ( localize(5295, 'Show')),
+            class: `model-visibility-toggle ${isVisible ? `${ThemeIcon.asClassName(Codicon.eyeClosed)} model-visible` : `${ThemeIcon.asClassName(Codicon.eye)} model-hidden`}`,
+            tooltip: isVisible ? ( localize(5296, 'Hide in the chat model picker')) : ( localize(5297, 'Show in the chat model picker')),
+            checked: !isVisible,
+            run: async () => {
+                const newVisibility = !isVisible;
+                this.languageModelsService.updateModelPickerPreference(modelEntry.identifier, newVisibility);
+                this._onDidChange.fire();
+            }
+        });
+        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'; }
+    constructor(hoverService) {
+        super();
+        this.hoverService = hoverService;
+        this.templateId = ModelNameColumnRenderer_1.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const elementDisposables = ( new DisposableStore());
+        const nameContainer = append(container, $('.model-name-container'));
+        const nameLabel = disposables.add(( new HighlightedLabel(append(nameContainer, $('.model-name')))));
+        const statusIcon = append(nameContainer, $('.model-status-icon'));
+        const actionBar = disposables.add(( new ActionBar(append(nameContainer, $('.model-name-actions')))));
+        return {
+            container,
+            statusIcon,
+            nameLabel,
+            actionBar,
+            disposables,
+            elementDisposables
+        };
+    }
+    renderElement(entry, index, templateData) {
+        clearNode(templateData.statusIcon);
+        templateData.actionBar.clear();
+        super.renderElement(entry, index, templateData);
+    }
+    renderVendorElement(entry, index, templateData) {
+        templateData.nameLabel.set(entry.vendorEntry.vendorDisplayName, undefined);
+    }
+    renderModelElement(entry, index, templateData) {
+        const { modelEntry, modelNameMatches } = entry;
+        templateData.statusIcon.className = 'model-status-icon';
+        if (modelEntry.metadata.statusIcon) {
+            templateData.statusIcon.classList.add(...ThemeIcon.asClassNameArray(modelEntry.metadata.statusIcon));
+            templateData.statusIcon.style.display = '';
+        }
+        else {
+            templateData.statusIcon.style.display = 'none';
+        }
+        templateData.nameLabel.set(modelEntry.metadata.name, modelNameMatches);
+        const markdown = ( new MarkdownString('', { isTrusted: true, supportThemeIcons: true }));
+        markdown.appendMarkdown(`**${entry.modelEntry.metadata.name}**`);
+        if (entry.modelEntry.metadata.id !== entry.modelEntry.metadata.version) {
+            markdown.appendMarkdown(`&nbsp;<span style="background-color:#8080802B;">&nbsp;_${entry.modelEntry.metadata.id}@${entry.modelEntry.metadata.version}_&nbsp;</span>`);
+        }
+        else {
+            markdown.appendMarkdown(`&nbsp;<span style="background-color:#8080802B;">&nbsp;_${entry.modelEntry.metadata.id}_&nbsp;</span>`);
+        }
+        markdown.appendText(`\n`);
+        if (entry.modelEntry.metadata.statusIcon && entry.modelEntry.metadata.tooltip) {
+            if (entry.modelEntry.metadata.statusIcon) {
+                markdown.appendMarkdown(`$(${entry.modelEntry.metadata.statusIcon.id})&nbsp;`);
+            }
+            markdown.appendMarkdown(`${entry.modelEntry.metadata.tooltip}`);
+            markdown.appendText(`\n`);
+        }
+        if (!entry.modelEntry.metadata.isUserSelectable) {
+            markdown.appendMarkdown(`\n\n${( localize(5298, 'This model is hidden in the chat model picker'))}`);
+        }
+        templateData.elementDisposables.add(this.hoverService.setupDelayedHoverAtMouse(templateData.container, () => ({
+            content: markdown,
+            appearance: {
+                compact: true,
+                skipFadeInAnimation: true,
+            }
+        })));
+    }
+};
+ModelNameColumnRenderer = ModelNameColumnRenderer_1 = ( __decorate([
+    ( __param(0, IHoverService))
+], ModelNameColumnRenderer));
+class MultiplierColumnRenderer extends ModelsTableColumnRenderer {
+    constructor() {
+        super(...arguments);
+        this.templateId = MultiplierColumnRenderer.TEMPLATE_ID;
+    }
+    static { this.TEMPLATE_ID = 'multiplier'; }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const elementDisposables = ( new DisposableStore());
+        const multiplierElement = append(container, $('.model-multiplier'));
+        return {
+            container,
+            multiplierElement,
+            disposables,
+            elementDisposables
+        };
+    }
+    renderVendorElement(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 : '-';
+    }
+}
+let TokenLimitsColumnRenderer = class TokenLimitsColumnRenderer extends ModelsTableColumnRenderer {
+    static { TokenLimitsColumnRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'tokenLimits'; }
+    constructor(hoverService) {
+        super();
+        this.hoverService = hoverService;
+        this.templateId = TokenLimitsColumnRenderer_1.TEMPLATE_ID;
+    }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const elementDisposables = ( new DisposableStore());
+        const tokenLimitsElement = append(container, $('.model-token-limits'));
+        return {
+            container,
+            tokenLimitsElement,
+            disposables,
+            elementDisposables
+        };
+    }
+    renderElement(entry, index, templateData) {
+        clearNode(templateData.tokenLimitsElement);
+        super.renderElement(entry, index, templateData);
+    }
+    renderVendorElement(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(5299, '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(5300, 'Input'))})`);
+                addSeparator = true;
+            }
+            if (modelEntry.metadata.maxOutputTokens) {
+                const outputDiv = append(templateData.tokenLimitsElement, $('.token-limit-item'));
+                append(outputDiv, $('span.codicon.codicon-arrow-up'));
+                const outputText = append(outputDiv, $('span'));
+                outputText.textContent = formatTokenCount(modelEntry.metadata.maxOutputTokens);
+                if (addSeparator) {
+                    markdown.appendText(`  |  `);
+                }
+                markdown.appendMarkdown(`$(arrow-up) ${modelEntry.metadata.maxOutputTokens} (${( localize(5301, 'Output'))})`);
+            }
+        }
+        templateData.elementDisposables.add(this.hoverService.setupDelayedHoverAtMouse(templateData.container, () => ({
+            content: markdown,
+            appearance: {
+                compact: true,
+                skipFadeInAnimation: true,
+            }
+        })));
+    }
+};
+TokenLimitsColumnRenderer = TokenLimitsColumnRenderer_1 = ( __decorate([
+    ( __param(0, IHoverService))
+], TokenLimitsColumnRenderer));
+class CapabilitiesColumnRenderer extends ModelsTableColumnRenderer {
+    constructor() {
+        super(...arguments);
+        this.templateId = CapabilitiesColumnRenderer.TEMPLATE_ID;
+        this._onDidClickCapability = ( new Emitter());
+        this.onDidClickCapability = this._onDidClickCapability.event;
+    }
+    static { this.TEMPLATE_ID = 'capabilities'; }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const elementDisposables = ( new DisposableStore());
+        const metadataRow = append(container, $('.model-metadata'));
+        return {
+            container,
+            metadataRow,
+            disposables,
+            elementDisposables
+        };
+    }
+    renderElement(entry, index, templateData) {
+        clearNode(templateData.metadataRow);
+        super.renderElement(entry, index, templateData);
+    }
+    renderVendorElement(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(5302, 'Tools')), 'tools'));
+        }
+        if (modelEntry.metadata.capabilities?.vision) {
+            templateData.elementDisposables.add(this.createCapabilityButton(templateData.metadataRow, capabilityMatches?.includes('vision') || false, ( localize(5303, 'Vision')), 'vision'));
+        }
+    }
+    createCapabilityButton(container, isActive, label, capability) {
+        const disposables = ( new DisposableStore());
+        const buttonContainer = append(container, $('.model-badge-container'));
+        const button = disposables.add(( new Button(buttonContainer, { secondary: true })));
+        button.element.classList.add('model-capability');
+        button.element.classList.toggle('active', isActive);
+        button.label = label;
+        disposables.add(button.onDidClick(() => this._onDidClickCapability.fire(capability)));
+        return disposables;
+    }
+}
+let ActionsColumnRenderer = class ActionsColumnRenderer extends ModelsTableColumnRenderer {
+    static { ActionsColumnRenderer_1 = this; }
+    static { this.TEMPLATE_ID = 'actions'; }
+    constructor(commandService) {
+        super();
+        this.commandService = commandService;
+        this.templateId = ActionsColumnRenderer_1.TEMPLATE_ID;
+        this._onDidChange = ( new Emitter());
+        this.onDidChange = this._onDidChange.event;
+    }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const elementDisposables = ( new DisposableStore());
+        const parent = append(container, $('.actions-column'));
+        const actionBar = disposables.add(( new ActionBar(parent)));
+        return {
+            container,
+            actionBar,
+            disposables,
+            elementDisposables
+        };
+    }
+    renderElement(entry, index, templateData) {
+        templateData.actionBar.clear();
+        super.renderElement(entry, index, templateData);
+    }
+    renderVendorElement(entry, index, templateData) {
+        if (entry.vendorEntry.managementCommand) {
+            const { vendorEntry } = entry;
+            const action = toAction({
+                id: 'manageVendor',
+                label: ( localize(5304, 'Manage {0}...', entry.vendorEntry.vendorDisplayName)),
+                class: ThemeIcon.asClassName(Codicon.gear),
+                run: async () => {
+                    await this.commandService.executeCommand(vendorEntry.managementCommand, vendorEntry.vendor);
+                    this._onDidChange.fire();
+                }
+            });
+            templateData.actionBar.push(action, { icon: true, label: false });
+        }
+    }
+    renderModelElement(entry, index, templateData) {
+    }
+};
+ActionsColumnRenderer = ActionsColumnRenderer_1 = ( __decorate([
+    ( __param(0, ICommandService))
+], ActionsColumnRenderer));
+function formatTokenCount(count) {
+    if (count >= 1000000) {
+        return `${(count / 1000000).toFixed(1)}M`;
+    }
+    else if (count >= 1000) {
+        return `${(count / 1000).toFixed(0)}K`;
+    }
+    return ( count.toString());
+}
+let ChatModelsWidget = class ChatModelsWidget extends Disposable {
+    static { ChatModelsWidget_1 = this; }
+    static { this.NUM_INSTANCES = 0; }
+    constructor(languageModelsService, instantiationService, extensionService, contextMenuService, chatEntitlementService, editorProgressService, commandService, contextKeyService) {
+        super();
+        this.languageModelsService = languageModelsService;
+        this.instantiationService = instantiationService;
+        this.extensionService = extensionService;
+        this.contextMenuService = contextMenuService;
+        this.chatEntitlementService = chatEntitlementService;
+        this.editorProgressService = editorProgressService;
+        this.commandService = commandService;
+        this.dropdownActions = [];
+        this.searchFocusContextKey = CONTEXT_MODELS_SEARCH_FOCUS.bindTo(contextKeyService);
+        this.delayedFiltering = ( new Delayer(300));
+        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();
+        });
+        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(5305, "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 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}"`));
+                }
+                else if (lastPart.startsWith('@capability:')) {
+                    return SEARCH_SUGGESTIONS.CAPABILITIES;
+                }
+                else if (lastPart.startsWith('@visible:')) {
+                    return SEARCH_SUGGESTIONS.VISIBILITY;
+                }
+                else if (lastPart.startsWith('@')) {
+                    return SEARCH_SUGGESTIONS.FILTER_TYPES;
+                }
+                return [];
+            }
+        }, placeholder, `chatModelsWidget:searchinput:${ChatModelsWidget_1.NUM_INSTANCES++}`, {
+            placeholderText: placeholder,
+            styleOverrides: {
+                inputBorder: settingsTextInputBorder
+            },
+            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(5306, "Clear Search")), ThemeIcon.asClassName(preferencesClearInputIcon), false, () => {
+            this.searchWidget.setValue('');
+            this.searchWidget.focus();
+        })));
+        this._register(this.searchWidget.onInputDidChange(() => {
+            clearSearchAction.enabled = !!this.searchWidget.getValue();
+        }));
+        this.searchActionsContainer = append(searchContainer, $('.models-search-actions'));
+        const actions = [clearSearchAction, filterAction];
+        const toolBar = this._register(( new ToolBar(this.searchActionsContainer, this.contextMenuService, {
+            actionViewItemProvider: (action, options) => {
+                if (action.id === filterAction.id) {
+                    return this.instantiationService.createInstance(ModelsSearchFilterDropdownMenuActionViewItem, action, options, this.searchWidget, this.viewModel);
+                }
+                return undefined;
+            },
+            getKeyBinding: () => undefined
+        })));
+        toolBar.setActions(actions);
+        this.searchWidget.inputWidget.getContainerDomNode().style.paddingRight = `${getTotalWidth(this.searchActionsContainer) + 12}px`;
+        this.addButtonContainer = append(searchAndButtonContainer, $('.section-title-actions'));
+        const buttonOptions = {
+            ...defaultButtonStyles,
+            supportIcons: true,
+        };
+        this.addButton = this._register(( new Button(this.addButtonContainer, buttonOptions)));
+        this.addButton.label = `$(${Codicon.add.id}) ${( localize(5307, 'Add Models...'))}`;
+        this.addButton.element.classList.add('models-add-model-button');
+        this.addButton.enabled = false;
+        this._register(this.addButton.onDidClick((e) => {
+            if (this.dropdownActions.length > 0) {
+                this.contextMenuService.showContextMenu({
+                    getAnchor: () => this.addButton.element,
+                    getActions: () => this.dropdownActions,
+                });
+            }
+        }));
+        this.tableContainer = append(container, $('.models-table-container'));
+        const gutterColumnRenderer = this.instantiationService.createInstance(GutterColumnRenderer);
+        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 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()), [
+            {
+                label: '',
+                tooltip: '',
+                weight: 0.05,
+                minimumWidth: 40,
+                maximumWidth: 40,
+                templateId: GutterColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+            {
+                label: ( localize(5308, 'Name')),
+                tooltip: '',
+                weight: 0.40,
+                minimumWidth: 200,
+                templateId: ModelNameColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+            {
+                label: ( localize(5309, 'Capabilities')),
+                tooltip: '',
+                weight: 0.30,
+                minimumWidth: 180,
+                templateId: CapabilitiesColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+            {
+                label: ( localize(5310, 'Context Size')),
+                tooltip: '',
+                weight: 0.1,
+                minimumWidth: 140,
+                templateId: TokenLimitsColumnRenderer.TEMPLATE_ID,
+                project(row) { return row; }
+            },
+            {
+                label: ( localize(5311, 'Multiplier')),
+                tooltip: '',
+                weight: 0.1,
+                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; }
+            },
+        ], [
+            gutterColumnRenderer,
+            modelNameColumnRenderer,
+            costColumnRenderer,
+            tokenLimitsColumnRenderer,
+            capabilitiesColumnRenderer,
+            actionsColumnRenderer,
+        ], {
+            identityProvider: { getId: (e) => e.id },
+            horizontalScrolling: false,
+            accessibilityProvider: {
+                getAriaLabel: (e) => {
+                    if (isVendorEntry(e)) {
+                        return localize(5312, '{0} provider', e.vendorEntry.vendorDisplayName);
+                    }
+                    return localize(
+                        5313,
+                        '{0} from {1}',
+                        e.modelEntry.metadata.name,
+                        e.modelEntry.vendorDisplayName
+                    );
+                },
+                getWidgetAriaLabel: () => ( localize(5314, 'Language Models'))
+            },
+            multipleSelectionSupport: false,
+            setRowLineHeight: false,
+            openOnSingleClick: false,
+            alwaysConsumeMouseWheel: false,
+        }));
+        this._register(this.table.onContextMenu(e => {
+            if (!e.element) {
+                return;
+            }
+            const entry = e.element;
+            if (isVendorEntry(entry) && entry.vendorEntry.managementCommand) {
+                const actions = [
+                    toAction({
+                        id: 'manageVendor',
+                        label: ( localize(5304, 'Manage {0}...', entry.vendorEntry.vendorDisplayName)),
+                        run: async () => {
+                            await this.commandService.executeCommand(entry.vendorEntry.managementCommand, entry.vendorEntry.vendor);
+                            await this.viewModel.resolve();
+                            this.refreshTable();
+                        }
+                    })
+                ];
+                this.contextMenuService.showContextMenu({
+                    getAnchor: () => e.anchor,
+                    getActions: () => actions
+                });
+            }
+        }));
+    }
+    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);
+            }
+        })));
+    }
+    async enableProvider(vendorId) {
+        await this.languageModelsService.selectLanguageModels({ vendor: vendorId }, true);
+        await this.viewModel.resolve();
+        this.refreshTable();
+    }
+    layout(height, width) {
+        width = width - 24;
+        this.searchWidget.layout(new Dimension(width - this.searchActionsContainer.clientWidth - this.addButtonContainer.clientWidth - 8, 22));
+        const tableHeight = height - 40;
+        this.tableContainer.style.height = `${tableHeight}px`;
+        this.table.layout(tableHeight, width);
+    }
+    focusSearch() {
+        this.searchWidget.focus();
+    }
+    search(filter) {
+        this.focusSearch();
+        this.searchWidget.setValue(filter);
+    }
+    clearSearch() {
+        this.searchWidget.setValue('');
+    }
+    async refresh() {
+        const refreshPromise = this.viewModel.resolve().then(() => this.refreshTable());
+        await this.editorProgressService.showWhile(refreshPromise, 300);
+    }
+};
+ChatModelsWidget = ChatModelsWidget_1 = ( __decorate([
+    ( __param(0, ILanguageModelsService)),
+    ( __param(1, IInstantiationService)),
+    ( __param(2, IExtensionService)),
+    ( __param(3, IContextMenuService)),
+    ( __param(4, IChatEntitlementService)),
+    ( __param(5, IEditorProgressService)),
+    ( __param(6, ICommandService)),
+    ( __param(7, IContextKeyService))
+], ChatModelsWidget));
+
+export { ChatModelsWidget };