@theia/ai-core 1.58.3 → 1.59.0-next.62

package/src/browser/ai-configuration/agent-configuration-widget.tsx

@@ -1,324 +0,0 @@
-// *****************************************************************************
-// Copyright (C) 2024 EclipseSource GmbH.
-//
-// This program and the accompanying materials are made available under the
-// terms of the Eclipse Public License v. 2.0 which is available at
-// http://www.eclipse.org/legal/epl-2.0.
-//
-// This Source Code may also be made available under the following Secondary
-// Licenses when the conditions for such availability set forth in the Eclipse
-// Public License v. 2.0 are satisfied: GNU General Public License, version 2
-// with the GNU Classpath Exception which is available at
-// https://www.gnu.org/software/classpath/license.html.
-//
-// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
-// *****************************************************************************
-
-import { codicon, ReactWidget } from '@theia/core/lib/browser';
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
-import * as React from '@theia/core/shared/react';
-import {
-    Agent,
-    AISettingsService,
-    AIVariableService,
-    LanguageModel,
-    LanguageModelRegistry,
-    matchVariablesRegEx,
-    PROMPT_FUNCTION_REGEX,
-    PromptCustomizationService,
-    PromptService,
-} from '../../common';
-import { LanguageModelRenderer } from './language-model-renderer';
-import { TemplateRenderer } from './template-settings-renderer';
-import { AIConfigurationSelectionService } from './ai-configuration-service';
-import { AIVariableConfigurationWidget } from './variable-configuration-widget';
-import { AgentService } from '../../common/agent-service';
-
-interface ParsedPrompt {
-    functions: string[];
-    globalVariables: string[];
-    agentSpecificVariables: string[];
-};
-
-@injectable()
-export class AIAgentConfigurationWidget extends ReactWidget {
-
-    static readonly ID = 'ai-agent-configuration-container-widget';
-    static readonly LABEL = 'Agents';
-
-    @inject(AgentService)
-    protected readonly agentService: AgentService;
-
-    @inject(LanguageModelRegistry)
-    protected readonly languageModelRegistry: LanguageModelRegistry;
-
-    @inject(PromptCustomizationService)
-    protected readonly promptCustomizationService: PromptCustomizationService;
-
-    @inject(AISettingsService)
-    protected readonly aiSettingsService: AISettingsService;
-
-    @inject(AIConfigurationSelectionService)
-    protected readonly aiConfigurationSelectionService: AIConfigurationSelectionService;
-
-    @inject(AIVariableService)
-    protected readonly variableService: AIVariableService;
-
-    @inject(PromptService)
-    protected promptService: PromptService;
-
-    protected languageModels: LanguageModel[] | undefined;
-
-    @postConstruct()
-    protected init(): void {
-        this.id = AIAgentConfigurationWidget.ID;
-        this.title.label = AIAgentConfigurationWidget.LABEL;
-        this.title.closable = false;
-
-        this.languageModelRegistry.getLanguageModels().then(models => {
-            this.languageModels = models ?? [];
-            this.update();
-        });
-        this.toDispose.push(this.languageModelRegistry.onChange(({ models }) => {
-            this.languageModels = models;
-            this.update();
-        }));
-        this.toDispose.push(this.promptCustomizationService.onDidChangePrompt(() => this.update()));
-
-        this.aiSettingsService.onDidChange(() => this.update());
-        this.aiConfigurationSelectionService.onDidAgentChange(() => this.update());
-        this.agentService.onDidChangeAgents(() => this.update());
-        this.update();
-    }
-
-    protected render(): React.ReactNode {
-        return <div className='ai-agent-configuration-main'>
-            <div className='configuration-agents-list preferences-tree-widget theia-TreeContainer' style={{ width: '25%' }}>
-                <ul>
-                    {this.agentService.getAllAgents().map(agent =>
-                        <li key={agent.id} className='theia-TreeNode theia-CompositeTreeNode theia-ExpandableTreeNode' onClick={() => this.setActiveAgent(agent)}>
-                            {this.renderAgentName(agent)}
-                        </li>
-                    )}
-                </ul>
-                <div className='configuration-agents-add'>
-                    <button style={{ marginLeft: 0 }} className='theia-button main' onClick={() => this.addCustomAgent()}>Add Custom Agent</button>
-                </div>
-            </div>
-            <div className='configuration-agent-panel preferences-editor-widget'>
-                {this.renderAgentDetails()}
-            </div>
-        </div>;
-    }
-
-    private renderAgentName(agent: Agent): React.ReactNode {
-        const tagsSuffix = agent.tags?.length ? <span>{agent.tags.map(tag => <span key={tag} className='agent-tag'>{tag}</span>)}</span> : '';
-        return <span>{agent.name} {tagsSuffix}</span>;
-    }
-
-    private renderAgentDetails(): React.ReactNode {
-        const agent = this.aiConfigurationSelectionService.getActiveAgent();
-        if (!agent) {
-            return <div>Please select an Agent first!</div>;
-        }
-
-        const enabled = this.agentService.isEnabled(agent.id);
-
-        const parsedPromptParts = this.parsePromptTemplatesForVariableAndFunction(agent);
-        const globalVariables = Array.from(new Set([...parsedPromptParts.globalVariables, ...agent.variables]));
-        const functions = Array.from(new Set([...parsedPromptParts.functions, ...agent.functions]));
-
-        return <div key={agent.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
-            <div className='settings-section-title settings-section-category-title' style={{ paddingLeft: 0, paddingBottom: 10 }}>{this.renderAgentName(agent)}</div>
-            <div style={{ paddingBottom: 10 }}>{agent.description}</div>
-            <div style={{ paddingBottom: 10 }}>
-                <label>
-                    <input type="checkbox" checked={enabled} onChange={this.toggleAgentEnabled} />
-                    Enable Agent
-                </label>
-            </div>
-            <div className="settings-section-subcategory-title ai-settings-section-subcategory-title">
-                Prompt Templates
-            </div>
-            <div className="ai-templates">
-                {(() => {
-                    const defaultTemplates = agent.promptTemplates?.filter(template => !template.variantOf) || [];
-                    return defaultTemplates.length > 0 ? (
-                        defaultTemplates.map(template => (
-                            <div key={agent.id + '.' + template.id}>
-                                <TemplateRenderer
-                                    key={agent.id + '.' + template.id}
-                                    agentId={agent.id}
-                                    template={template}
-                                    promptService={this.promptService}
-                                    aiSettingsService={this.aiSettingsService}
-                                    promptCustomizationService={this.promptCustomizationService}
-                                />
-                            </div>
-                        ))
-                    ) : (
-                        <div>No default template available</div>
-                    );
-                })()}
-            </div>
-
-            <div className='ai-lm-requirements'>
-                <LanguageModelRenderer
-                    agent={agent}
-                    languageModels={this.languageModels}
-                    aiSettingsService={this.aiSettingsService}
-                    languageModelRegistry={this.languageModelRegistry} />
-            </div>
-            <div>
-                <span>Used Global Variables:</span>
-                <ul className='variable-references'>
-                    <AgentGlobalVariables variables={globalVariables} showVariableConfigurationTab={this.showVariableConfigurationTab.bind(this)} />
-                </ul>
-            </div>
-            <div>
-                <span>Used agent-specific Variables:</span>
-                <ul className='variable-references'>
-                    <AgentSpecificVariables
-                        promptVariables={parsedPromptParts.agentSpecificVariables}
-                        agent={agent}
-                    />
-                </ul>
-            </div>
-            <div>
-                <span>Used Functions:</span>
-                <ul className='function-references'>
-                    <AgentFunctions functions={functions} />
-                </ul>
-            </div>
-        </div>;
-    }
-
-    private parsePromptTemplatesForVariableAndFunction(agent: Agent): ParsedPrompt {
-        const promptTemplates = agent.promptTemplates;
-        const result: ParsedPrompt = { functions: [], globalVariables: [], agentSpecificVariables: [] };
-        promptTemplates.forEach(template => {
-            const storedPrompt = this.promptService.getUnresolvedPrompt(template.id);
-            const prompt = storedPrompt?.template ?? template.template;
-            const variableMatches = matchVariablesRegEx(prompt);
-
-            variableMatches.forEach(match => {
-                const variableId = match[1];
-                // if the variable is part of the variable service and not part of the agent specific variables then it is a global variable
-                if (this.variableService.hasVariable(variableId) &&
-                    agent.agentSpecificVariables.find(v => v.name === variableId) === undefined) {
-                    result.globalVariables.push(variableId);
-                } else {
-                    result.agentSpecificVariables.push(variableId);
-                }
-            });
-
-            const functionMatches = [...prompt.matchAll(PROMPT_FUNCTION_REGEX)];
-            functionMatches.forEach(match => {
-                const functionId = match[1];
-                result.functions.push(functionId);
-            });
-
-        });
-        return result;
-    }
-
-    protected showVariableConfigurationTab(): void {
-        this.aiConfigurationSelectionService.selectConfigurationTab(AIVariableConfigurationWidget.ID);
-    }
-
-    protected addCustomAgent(): void {
-        this.promptCustomizationService.openCustomAgentYaml();
-    }
-
-    protected setActiveAgent(agent: Agent): void {
-        this.aiConfigurationSelectionService.setActiveAgent(agent);
-        this.update();
-    }
-
-    private toggleAgentEnabled = () => {
-        const agent = this.aiConfigurationSelectionService.getActiveAgent();
-        if (!agent) {
-            return false;
-        }
-        const enabled = this.agentService.isEnabled(agent.id);
-        if (enabled) {
-            this.agentService.disableAgent(agent.id);
-        } else {
-            this.agentService.enableAgent(agent.id);
-        }
-        this.update();
-    };
-
-}
-interface AgentGlobalVariablesProps {
-    variables: string[];
-    showVariableConfigurationTab: () => void;
-}
-const AgentGlobalVariables = ({ variables: globalVariables, showVariableConfigurationTab }: AgentGlobalVariablesProps) => {
-    if (globalVariables.length === 0) {
-        return <>None</>;
-    }
-    return <>
-        {globalVariables.map(variableId => <li key={variableId} className='theia-TreeNode theia-CompositeTreeNode theia-ExpandableTreeNode theia-mod-selected'>
-            <div key={variableId} onClick={() => { showVariableConfigurationTab(); }} className='variable-reference'>
-                <span>{variableId}</span>
-                <i className={codicon('chevron-right')}></i>
-            </div></li>)}
-
-    </>;
-};
-
-interface AgentFunctionsProps {
-    functions: string[];
-}
-const AgentFunctions = ({ functions }: AgentFunctionsProps) => {
-    if (functions.length === 0) {
-        return <>None</>;
-    }
-    return <>
-        {functions.map(functionId => <li key={functionId} className='variable-reference'>
-            <span>{functionId}</span>
-        </li>)}
-    </>;
-};
-
-interface AgentSpecificVariablesProps {
-    promptVariables: string[];
-    agent: Agent;
-}
-const AgentSpecificVariables = ({ promptVariables, agent }: AgentSpecificVariablesProps) => {
-    const agentDefinedVariablesName = agent.agentSpecificVariables.map(v => v.name);
-    const variables = Array.from(new Set([...promptVariables, ...agentDefinedVariablesName]));
-    if (variables.length === 0) {
-        return <>None</>;
-    }
-    return <>
-        {variables.map(variableId =>
-            <AgentSpecifcVariable
-                key={variableId}
-                variableId={variableId}
-                agent={agent}
-                promptVariables={promptVariables} />
-
-        )}
-    </>;
-};
-interface AgentSpecifcVariableProps {
-    variableId: string;
-    agent: Agent;
-    promptVariables: string[];
-}
-const AgentSpecifcVariable = ({ variableId, agent, promptVariables }: AgentSpecifcVariableProps) => {
-    const agentDefinedVariable = agent.agentSpecificVariables.find(v => v.name === variableId);
-    const undeclared = agentDefinedVariable === undefined;
-    const notUsed = !promptVariables.includes(variableId) && agentDefinedVariable?.usedInPrompt === true;
-    return <li key={variableId}>
-        <div><span>Name:</span> <span>{variableId}</span></div>
-        {undeclared ? <div><span>Undeclared</span></div> :
-            (<>
-                <div><span>Description:</span> <span>{agentDefinedVariable.description}</span></div>
-                {notUsed && <div>Not used in prompt</div>}
-            </>)}
-        <hr />
-    </li>;
-};

package/src/browser/ai-configuration/ai-configuration-service.ts

@@ -1,43 +0,0 @@
-// *****************************************************************************
-// Copyright (C) 2024 EclipseSource GmbH.
-//
-// This program and the accompanying materials are made available under the
-// terms of the Eclipse Public License v. 2.0 which is available at
-// http://www.eclipse.org/legal/epl-2.0.
-//
-// This Source Code may also be made available under the following Secondary
-// Licenses when the conditions for such availability set forth in the Eclipse
-// Public License v. 2.0 are satisfied: GNU General Public License, version 2
-// with the GNU Classpath Exception which is available at
-// https://www.gnu.org/software/classpath/license.html.
-//
-// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
-// *****************************************************************************
-
-import { Emitter } from '@theia/core';
-import { injectable } from '@theia/core/shared/inversify';
-import { Agent } from '../../common';
-
-@injectable()
-export class AIConfigurationSelectionService {
-    protected activeAgent?: Agent;
-
-    protected readonly onDidSelectConfigurationEmitter = new Emitter<string>();
-    onDidSelectConfiguration = this.onDidSelectConfigurationEmitter.event;
-
-    protected readonly onDidAgentChangeEmitter = new Emitter<Agent | undefined>();
-    onDidAgentChange = this.onDidSelectConfigurationEmitter.event;
-
-    public getActiveAgent(): Agent | undefined {
-        return this.activeAgent;
-    }
-
-    public setActiveAgent(agent?: Agent): void {
-        this.activeAgent = agent;
-        this.onDidAgentChangeEmitter.fire(agent);
-    }
-
-    public selectConfigurationTab(widgetId: string): void {
-        this.onDidSelectConfigurationEmitter.fire(widgetId);
-    }
-}

package/src/browser/ai-configuration/ai-configuration-view-contribution.ts

@@ -1,54 +0,0 @@
-// *****************************************************************************
-// Copyright (C) 2024 EclipseSource GmbH.
-//
-// This program and the accompanying materials are made available under the
-// terms of the Eclipse Public License v. 2.0 which is available at
-// http://www.eclipse.org/legal/epl-2.0.
-//
-// This Source Code may also be made available under the following Secondary
-// Licenses when the conditions for such availability set forth in the Eclipse
-// Public License v. 2.0 are satisfied: GNU General Public License, version 2
-// with the GNU Classpath Exception which is available at
-// https://www.gnu.org/software/classpath/license.html.
-//
-// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
-// *****************************************************************************
-import { FrontendApplication } from '@theia/core/lib/browser';
-import { injectable } from '@theia/core/shared/inversify';
-import { AIViewContribution } from '../ai-view-contribution';
-import { AIConfigurationContainerWidget } from './ai-configuration-widget';
-import { Command, CommandRegistry } from '@theia/core';
-
-export const AI_CONFIGURATION_TOGGLE_COMMAND_ID = 'aiConfiguration:toggle';
-export const OPEN_AI_CONFIG_VIEW = Command.toLocalizedCommand({
-    id: 'aiConfiguration:open',
-    label: 'Open AI Configuration view',
-});
-
-@injectable()
-export class AIAgentConfigurationViewContribution extends AIViewContribution<AIConfigurationContainerWidget> {
-
-    constructor() {
-        super({
-            widgetId: AIConfigurationContainerWidget.ID,
-            widgetName: AIConfigurationContainerWidget.LABEL,
-            defaultWidgetOptions: {
-                area: 'main',
-                rank: 100
-            },
-            toggleCommandId: AI_CONFIGURATION_TOGGLE_COMMAND_ID
-        });
-    }
-
-    async initializeLayout(_app: FrontendApplication): Promise<void> {
-        await this.openView();
-    }
-
-    override registerCommands(commands: CommandRegistry): void {
-        super.registerCommands(commands);
-        commands.registerCommand(OPEN_AI_CONFIG_VIEW, {
-            execute: () => this.openView({ activate: true }),
-        });
-    }
-}
-

package/src/browser/ai-configuration/ai-configuration-widget.tsx

@@ -1,80 +0,0 @@
-// *****************************************************************************
-// Copyright (C) 2024 EclipseSource GmbH.
-//
-// This program and the accompanying materials are made available under the
-// terms of the Eclipse Public License v. 2.0 which is available at
-// http://www.eclipse.org/legal/epl-2.0.
-//
-// This Source Code may also be made available under the following Secondary
-// Licenses when the conditions for such availability set forth in the Eclipse
-// Public License v. 2.0 are satisfied: GNU General Public License, version 2
-// with the GNU Classpath Exception which is available at
-// https://www.gnu.org/software/classpath/license.html.
-//
-// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
-// *****************************************************************************
-
-import { BaseWidget, BoxLayout, codicon, DockPanel, WidgetManager } from '@theia/core/lib/browser';
-import { TheiaDockPanel } from '@theia/core/lib/browser/shell/theia-dock-panel';
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
-import '../../../src/browser/style/index.css';
-import { AIAgentConfigurationWidget } from './agent-configuration-widget';
-import { AIVariableConfigurationWidget } from './variable-configuration-widget';
-import { AIConfigurationSelectionService } from './ai-configuration-service';
-
-@injectable()
-export class AIConfigurationContainerWidget extends BaseWidget {
-
-    static readonly ID = 'ai-configuration';
-    static readonly LABEL = '✨ AI Configuration [Experimental]';
-    protected dockpanel: DockPanel;
-
-    @inject(TheiaDockPanel.Factory)
-    protected readonly dockPanelFactory: TheiaDockPanel.Factory;
-    @inject(WidgetManager)
-    protected readonly widgetManager: WidgetManager;
-    @inject(AIConfigurationSelectionService)
-    protected readonly aiConfigurationSelectionService: AIConfigurationSelectionService;
-
-    protected agentsWidget: AIAgentConfigurationWidget;
-    protected variablesWidget: AIVariableConfigurationWidget;
-
-    @postConstruct()
-    protected init(): void {
-        this.id = AIConfigurationContainerWidget.ID;
-        this.title.label = AIConfigurationContainerWidget.LABEL;
-        this.title.closable = true;
-        this.addClass('theia-settings-container');
-        this.title.iconClass = codicon('hubot');
-        this.initUI();
-        this.initListeners();
-    }
-
-    protected async initUI(): Promise<void> {
-        const layout = (this.layout = new BoxLayout({ direction: 'top-to-bottom', spacing: 0 }));
-        this.dockpanel = this.dockPanelFactory({
-            mode: 'multiple-document',
-            spacing: 0
-        });
-        BoxLayout.setStretch(this.dockpanel, 1);
-        layout.addWidget(this.dockpanel);
-        this.dockpanel.addClass('ai-configuration-widget');
-
-        this.agentsWidget = await this.widgetManager.getOrCreateWidget(AIAgentConfigurationWidget.ID);
-        this.variablesWidget = await this.widgetManager.getOrCreateWidget(AIVariableConfigurationWidget.ID);
-        this.dockpanel.addWidget(this.agentsWidget);
-        this.dockpanel.addWidget(this.variablesWidget);
-
-        this.update();
-    }
-
-    protected initListeners(): void {
-        this.aiConfigurationSelectionService.onDidSelectConfiguration(widgetId => {
-            if (widgetId === AIAgentConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.agentsWidget);
-            } else if (widgetId === AIVariableConfigurationWidget.ID) {
-                this.dockpanel.activateWidget(this.variablesWidget);
-            }
-        });
-    }
-}

package/src/browser/ai-configuration/language-model-renderer.tsx

@@ -1,113 +0,0 @@
-// *****************************************************************************
-// Copyright (C) 2024 EclipseSource GmbH.
-//
-// This program and the accompanying materials are made available under the
-// terms of the Eclipse Public License v. 2.0 which is available at
-// http://www.eclipse.org/legal/epl-2.0.
-//
-// This Source Code may also be made available under the following Secondary
-// Licenses when the conditions for such availability set forth in the Eclipse
-// Public License v. 2.0 are satisfied: GNU General Public License, version 2
-// with the GNU Classpath Exception which is available at
-// https://www.gnu.org/software/classpath/license.html.
-//
-// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
-// *****************************************************************************
-import * as React from '@theia/core/shared/react';
-import { Agent, LanguageModelRequirement } from '../../common';
-import { LanguageModel, LanguageModelRegistry } from '../../common/language-model';
-import { AISettingsService } from '../../common/settings-service';
-import { Mutable } from '@theia/core';
-
-export interface LanguageModelSettingsProps {
-    agent: Agent;
-    languageModels?: LanguageModel[];
-    aiSettingsService: AISettingsService;
-    languageModelRegistry: LanguageModelRegistry;
-}
-
-export const LanguageModelRenderer: React.FC<LanguageModelSettingsProps> = (
-    { agent, languageModels, aiSettingsService, languageModelRegistry }) => {
-
-    const findLanguageModelRequirement = async (purpose: string): Promise<LanguageModelRequirement | undefined> => {
-        const requirementSetting = await aiSettingsService.getAgentSettings(agent.id);
-        return requirementSetting?.languageModelRequirements?.find(e => e.purpose === purpose);
-    };
-
-    const [lmRequirementMap, setLmRequirementMap] = React.useState<Record<string, LanguageModelRequirement>>({});
-
-    React.useEffect(() => {
-        const computeLmRequirementMap = async () => {
-            const map = await agent.languageModelRequirements.reduce(async (accPromise, curr) => {
-                const acc = await accPromise;
-                // take the agents requirements and override them with the user settings if present
-                const lmRequirement = await findLanguageModelRequirement(curr.purpose) ?? curr;
-                // if no llm is selected through the identifier, see what would be the default
-                if (!lmRequirement.identifier) {
-                    const llm = await languageModelRegistry.selectLanguageModel({ agent: agent.id, ...lmRequirement });
-                    (lmRequirement as Mutable<LanguageModelRequirement>).identifier = llm?.id;
-                }
-                acc[curr.purpose] = lmRequirement;
-                return acc;
-            }, Promise.resolve({} as Record<string, LanguageModelRequirement>));
-            setLmRequirementMap(map);
-        };
-        computeLmRequirementMap();
-    }, []);
-
-    const renderLanguageModelMetadata = (requirement: LanguageModelRequirement, index: number) => {
-        const languageModel = languageModels?.find(model => model.id === requirement.identifier);
-        if (!languageModel) {
-            return <div></div>;
-        }
-
-        return <>
-            <div>{requirement.purpose}</div>
-            <div key={index}>
-                {languageModel.id && <p><strong>Identifier: </strong> {languageModel.id}</p>}
-                {languageModel.name && <p><strong>Name: </strong> {languageModel.name}</p>}
-                {languageModel.vendor && <p><strong>Vendor: </strong> {languageModel.vendor}</p>}
-                {languageModel.version && <p><strong>Version: </strong> {languageModel.version}</p>}
-                {languageModel.family && <p><strong>Family: </strong> {languageModel.family}</p>}
-                {languageModel.maxInputTokens && <p><strong>Min Input Tokens: </strong> {languageModel.maxInputTokens}</p>}
-                {languageModel.maxOutputTokens && <p><strong>Max Output Tokens: </strong> {languageModel.maxOutputTokens}</p>}
-            </div>
-        </>;
-
-    };
-
-    const onSelectedModelChange = (purpose: string, event: React.ChangeEvent<HTMLSelectElement>): void => {
-        const newLmRequirementMap = { ...lmRequirementMap, [purpose]: { purpose, identifier: event.target.value } };
-        aiSettingsService.updateAgentSettings(agent.id, { languageModelRequirements: Object.values(newLmRequirementMap) });
-        setLmRequirementMap(newLmRequirementMap);
-    };
-
-    return <div className='language-model-container'>
-        {Object.values(lmRequirementMap).map((requirements, index) => (
-            <React.Fragment key={index}>
-                <div><strong>Purpose:</strong></div>
-                <div>
-                    {/* language model metadata */}
-                    {renderLanguageModelMetadata(requirements, index)}
-                    {/* language model selector */}
-                    <>
-                        <label className="theia-header no-select" htmlFor={`model-select-${agent.id}`}>Language Model:</label>
-                        <select
-                            className="theia-select"
-                            id={`model-select-${agent.id}`}
-                            value={requirements.identifier}
-                            onChange={event => onSelectedModelChange(requirements.purpose, event)}
-                        >
-                            <option value=""></option>
-                            {languageModels?.sort((a, b) => (a.name ?? a.id).localeCompare(b.name ?? b.id)).map(model => (
-                                <option key={model.id} value={model.id}>{model.name ?? model.id}</option>
-                            ))}
-                        </select>
-                    </>
-                    <hr />
-                </div>
-            </React.Fragment>
-        ))}
-
-    </div>;
-};