@theia/ai-core 1.46.0-next.241

package/src/browser/frontend-prompt-customization-service.ts

@@ -0,0 +1,243 @@
+// *****************************************************************************
+// 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 { DisposableCollection, URI, Event, Emitter } from '@theia/core';
+import { OpenerService } from '@theia/core/lib/browser';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { PromptCustomizationService, CustomAgentDescription } from '../common';
+import { BinaryBuffer } from '@theia/core/lib/common/buffer';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { FileChangesEvent } from '@theia/filesystem/lib/common/files';
+import { AICorePreferences, PREFERENCE_NAME_PROMPT_TEMPLATES } from './ai-core-preferences';
+import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
+import { load, dump } from 'js-yaml';
+import { PROMPT_TEMPLATE_EXTENSION } from './prompttemplate-contribution';
+
+const templateEntry = {
+    id: 'my_agent',
+    name: 'My Agent',
+    description: 'This is an example agent. Please adapt the properties to fit your needs.',
+    prompt: 'You are an example agent. Be nice and helpful to the user.',
+    defaultLLM: 'openai/gpt-4o'
+};
+
+@injectable()
+export class FrontendPromptCustomizationServiceImpl implements PromptCustomizationService {
+
+    @inject(EnvVariablesServer)
+    protected readonly envVariablesServer: EnvVariablesServer;
+
+    @inject(AICorePreferences)
+    protected readonly preferences: AICorePreferences;
+
+    @inject(FileService)
+    protected readonly fileService: FileService;
+
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
+    protected readonly trackedTemplateURIs = new Set<string>();
+    protected templates = new Map<string, string>();
+
+    protected toDispose = new DisposableCollection();
+
+    private readonly onDidChangePromptEmitter = new Emitter<string>();
+    readonly onDidChangePrompt: Event<string> = this.onDidChangePromptEmitter.event;
+
+    private readonly onDidChangeCustomAgentsEmitter = new Emitter<void>();
+    readonly onDidChangeCustomAgents = this.onDidChangeCustomAgentsEmitter.event;
+
+    @postConstruct()
+    protected init(): void {
+        this.preferences.onPreferenceChanged(event => {
+            if (event.preferenceName === PREFERENCE_NAME_PROMPT_TEMPLATES) {
+                this.update();
+            }
+        });
+        this.update();
+    }
+
+    protected async update(): Promise<void> {
+        this.toDispose.dispose();
+        // we need to assign a local variable, so that updates running in parallel don't interfere with each other
+        const _templates = new Map<string, string>();
+        this.templates = _templates;
+        this.trackedTemplateURIs.clear();
+
+        const templateURI = await this.getTemplatesDirectoryURI();
+
+        this.toDispose.push(this.fileService.watch(templateURI, { recursive: true, excludes: [] }));
+        this.toDispose.push(this.fileService.onDidFilesChange(async (event: FileChangesEvent) => {
+            if (event.changes.some(change => change.resource.toString().endsWith('customAgents.yml'))) {
+                this.onDidChangeCustomAgentsEmitter.fire();
+            }
+            // check deleted templates
+            for (const deletedFile of event.getDeleted()) {
+                if (this.trackedTemplateURIs.has(deletedFile.resource.toString())) {
+                    this.trackedTemplateURIs.delete(deletedFile.resource.toString());
+                    const templateId = this.removePromptTemplateSuffix(deletedFile.resource.path.name);
+                    _templates.delete(templateId);
+                    this.onDidChangePromptEmitter.fire(templateId);
+                }
+            }
+            // check updated templates
+            for (const updatedFile of event.getUpdated()) {
+                if (this.trackedTemplateURIs.has(updatedFile.resource.toString())) {
+                    const fileContent = await this.fileService.read(updatedFile.resource);
+                    const templateId = this.removePromptTemplateSuffix(updatedFile.resource.path.name);
+                    _templates.set(templateId, fileContent.value);
+                    this.onDidChangePromptEmitter.fire(templateId);
+                }
+            }
+            // check new templates
+            for (const addedFile of event.getAdded()) {
+                if (addedFile.resource.parent.toString() === templateURI.toString() && addedFile.resource.path.ext === PROMPT_TEMPLATE_EXTENSION) {
+                    this.trackedTemplateURIs.add(addedFile.resource.toString());
+                    const fileContent = await this.fileService.read(addedFile.resource);
+                    const templateId = this.removePromptTemplateSuffix(addedFile.resource.path.name);
+                    _templates.set(templateId, fileContent.value);
+                    this.onDidChangePromptEmitter.fire(templateId);
+                }
+            }
+
+        }));
+
+        this.onDidChangeCustomAgentsEmitter.fire();
+
+        if (!(await this.fileService.exists(templateURI))) {
+            return;
+        }
+        const stat = await this.fileService.resolve(templateURI);
+        if (stat.children === undefined) {
+            return;
+        }
+
+        for (const file of stat.children) {
+            if (!file.isFile) {
+                continue;
+            }
+            const fileURI = file.resource;
+            if (fileURI.path.ext === PROMPT_TEMPLATE_EXTENSION) {
+                this.trackedTemplateURIs.add(fileURI.toString());
+                const fileContent = await this.fileService.read(fileURI);
+                const templateId = this.removePromptTemplateSuffix(file.name);
+                _templates.set(templateId, fileContent.value);
+                this.onDidChangePromptEmitter.fire(templateId);
+            }
+        }
+    }
+
+    protected async getTemplatesDirectoryURI(): Promise<URI> {
+        const templatesFolder = this.preferences[PREFERENCE_NAME_PROMPT_TEMPLATES];
+        if (templatesFolder && templatesFolder.trim().length > 0) {
+            return URI.fromFilePath(templatesFolder);
+        }
+        const theiaConfigDir = await this.envVariablesServer.getConfigDirUri();
+        return new URI(theiaConfigDir).resolve('prompt-templates');
+    }
+
+    protected async getTemplateURI(templateId: string): Promise<URI> {
+        return (await this.getTemplatesDirectoryURI()).resolve(`${templateId}${PROMPT_TEMPLATE_EXTENSION}`);
+    }
+
+    protected removePromptTemplateSuffix(filename: string): string {
+        const suffix = PROMPT_TEMPLATE_EXTENSION;
+        if (filename.endsWith(suffix)) {
+            return filename.slice(0, -suffix.length);
+        }
+        return filename;
+    }
+
+    isPromptTemplateCustomized(id: string): boolean {
+        return this.templates.has(id);
+    }
+
+    getCustomizedPromptTemplate(id: string): string | undefined {
+        return this.templates.get(id);
+    }
+
+    getCustomPromptTemplateIDs(): string[] {
+        return Array.from(this.templates.keys());
+    }
+
+    async editTemplate(id: string, defaultContent?: string): Promise<void> {
+        const editorUri = await this.getTemplateURI(id);
+        if (! await this.fileService.exists(editorUri)) {
+            await this.fileService.createFile(editorUri, BinaryBuffer.fromString(defaultContent ?? ''));
+        }
+        const openHandler = await this.openerService.getOpener(editorUri);
+        openHandler.open(editorUri);
+    }
+
+    async resetTemplate(id: string): Promise<void> {
+        const editorUri = await this.getTemplateURI(id);
+        if (await this.fileService.exists(editorUri)) {
+            await this.fileService.delete(editorUri);
+        }
+    }
+
+    getTemplateIDFromURI(uri: URI): string | undefined {
+        const id = this.removePromptTemplateSuffix(uri.path.name);
+        if (this.templates.has(id)) {
+            return id;
+        }
+        return undefined;
+    }
+
+    async getCustomAgents(): Promise<CustomAgentDescription[]> {
+        const customAgentYamlUri = (await this.getTemplatesDirectoryURI()).resolve('customAgents.yml');
+        const yamlExists = await this.fileService.exists(customAgentYamlUri);
+        if (!yamlExists) {
+            return [];
+        }
+        const fileContent = await this.fileService.read(customAgentYamlUri, { encoding: 'utf-8' });
+        try {
+            const doc = load(fileContent.value);
+            if (!Array.isArray(doc) || !doc.every(entry => CustomAgentDescription.is(entry))) {
+                console.debug('Invalid customAgents.yml file content');
+                return [];
+            }
+            const readAgents = doc as CustomAgentDescription[];
+            // make sure all agents are unique (id and name)
+            const uniqueAgentIds = new Set<string>();
+            const uniqueAgents: CustomAgentDescription[] = [];
+            readAgents.forEach(agent => {
+                if (uniqueAgentIds.has(agent.id)) {
+                    return;
+                }
+                uniqueAgentIds.add(agent.id);
+                uniqueAgents.push(agent);
+            });
+            return uniqueAgents;
+        } catch (e) {
+            console.debug(e.message, e);
+            return [];
+        }
+    }
+
+    async openCustomAgentYaml(): Promise<void> {
+        const customAgentYamlUri = (await this.getTemplatesDirectoryURI()).resolve('customAgents.yml');
+        const content = dump([templateEntry]);
+        if (! await this.fileService.exists(customAgentYamlUri)) {
+            await this.fileService.createFile(customAgentYamlUri, BinaryBuffer.fromString(content));
+        } else {
+            const fileContent = (await this.fileService.readFile(customAgentYamlUri)).value;
+            await this.fileService.writeFile(customAgentYamlUri, BinaryBuffer.concat([fileContent, BinaryBuffer.fromString(content)]));
+        }
+        const openHandler = await this.openerService.getOpener(customAgentYamlUri);
+        openHandler.open(customAgentYamlUri);
+    }
+}

package/src/browser/frontend-variable-service.ts

@@ -0,0 +1,26 @@
+// *****************************************************************************
+// 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 { injectable } from '@theia/core/shared/inversify';
+import { DefaultAIVariableService } from '../common';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser';
+
+@injectable()
+export class FrontendVariableService extends DefaultAIVariableService implements FrontendApplicationContribution {
+    onStart(): void {
+        this.initContributions();
+    }
+}

package/src/browser/index.ts

@@ -0,0 +1,26 @@
+// *****************************************************************************
+// 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
+// *****************************************************************************
+
+export * from './ai-activation-service';
+export * from './ai-core-frontend-application-contribution';
+export * from './ai-core-frontend-module';
+export * from './ai-core-preferences';
+export * from './ai-settings-service';
+export * from './ai-view-contribution';
+export * from './frontend-language-model-registry';
+export * from './frontend-variable-service';
+export * from './prompttemplate-contribution';
+export * from './theia-variable-contribution';

package/src/browser/prompttemplate-contribution.ts

@@ -0,0 +1,252 @@
+// *****************************************************************************
+// 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 { inject, injectable, named } from '@theia/core/shared/inversify';
+import { GrammarDefinition, GrammarDefinitionProvider, LanguageGrammarDefinitionContribution, TextmateRegistry } from '@theia/monaco/lib/browser/textmate';
+import * as monaco from '@theia/monaco-editor-core';
+import { Command, CommandContribution, CommandRegistry, ContributionProvider, MessageService } from '@theia/core';
+import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+
+import { codicon, Widget } from '@theia/core/lib/browser';
+import { EditorWidget, ReplaceOperation } from '@theia/editor/lib/browser';
+import { PromptCustomizationService, PromptService, ToolProvider } from '../common';
+import { ProviderResult } from '@theia/monaco-editor-core/esm/vs/editor/common/languages';
+
+const PROMPT_TEMPLATE_LANGUAGE_ID = 'theia-ai-prompt-template';
+const PROMPT_TEMPLATE_TEXTMATE_SCOPE = 'source.prompttemplate';
+
+export const PROMPT_TEMPLATE_EXTENSION = '.prompttemplate';
+
+export const DISCARD_PROMPT_TEMPLATE_CUSTOMIZATIONS: Command = {
+    id: 'theia-ai-prompt-template:discard',
+    iconClass: codicon('discard'),
+    category: 'Theia AI Prompt Templates'
+};
+
+// TODO this command is mainly for testing purposes
+export const SHOW_ALL_PROMPTS_COMMAND: Command = {
+    id: 'theia-ai-prompt-template:show-prompts-command',
+    label: 'Show all prompts',
+    iconClass: codicon('beaker'),
+    category: 'Theia AI Prompt Templates',
+};
+
+@injectable()
+export class PromptTemplateContribution implements LanguageGrammarDefinitionContribution, CommandContribution, TabBarToolbarContribution {
+
+    @inject(PromptService)
+    private readonly promptService: PromptService;
+
+    @inject(MessageService)
+    private readonly messageService: MessageService;
+
+    @inject(PromptCustomizationService)
+    protected readonly customizationService: PromptCustomizationService;
+
+    @inject(ContributionProvider)
+    @named(ToolProvider)
+    private toolProviders: ContributionProvider<ToolProvider>;
+
+    readonly config: monaco.languages.LanguageConfiguration =
+        {
+            'brackets': [
+                ['${', '}'],
+                ['~{', '}']
+            ],
+            'autoClosingPairs': [
+                { 'open': '${', 'close': '}' },
+                { 'open': '~{', 'close': '}' },
+            ],
+            'surroundingPairs': [
+                { 'open': '${', 'close': '}' },
+                { 'open': '~{', 'close': '}' }
+            ]
+        };
+
+    registerTextmateLanguage(registry: TextmateRegistry): void {
+        monaco.languages.register({
+            id: PROMPT_TEMPLATE_LANGUAGE_ID,
+            'aliases': [
+                'Theia AI Prompt Templates'
+            ],
+            'extensions': [
+                PROMPT_TEMPLATE_EXTENSION,
+            ],
+            'filenames': []
+        });
+
+        monaco.languages.setLanguageConfiguration(PROMPT_TEMPLATE_LANGUAGE_ID, this.config);
+
+        monaco.languages.registerCompletionItemProvider(PROMPT_TEMPLATE_LANGUAGE_ID, {
+            // Monaco only supports single character trigger characters
+            triggerCharacters: ['{'],
+            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideFunctionCompletions(model, position),
+        });
+
+        const textmateGrammar = require('../../data/prompttemplate.tmLanguage.json');
+        const grammarDefinitionProvider: GrammarDefinitionProvider = {
+            getGrammarDefinition: function (): Promise<GrammarDefinition> {
+                return Promise.resolve({
+                    format: 'json',
+                    content: textmateGrammar
+                });
+            }
+        };
+        registry.registerTextmateGrammarScope(PROMPT_TEMPLATE_TEXTMATE_SCOPE, grammarDefinitionProvider);
+
+        registry.mapLanguageIdToTextmateGrammar(PROMPT_TEMPLATE_LANGUAGE_ID, PROMPT_TEMPLATE_TEXTMATE_SCOPE);
+    }
+
+    provideFunctionCompletions(model: monaco.editor.ITextModel, position: monaco.Position): ProviderResult<monaco.languages.CompletionList> {
+        return this.getSuggestions(
+            model,
+            position,
+            '~{',
+            this.toolProviders.getContributions().map(provider => provider.getTool()),
+            monaco.languages.CompletionItemKind.Function,
+            tool => tool.id,
+            tool => tool.name,
+            tool => tool.description ?? ''
+        );
+    }
+
+    getCompletionRange(model: monaco.editor.ITextModel, position: monaco.Position, triggerCharacters: string): monaco.Range | undefined {
+        // Check if the characters before the current position are the trigger characters
+        const lineContent = model.getLineContent(position.lineNumber);
+        const triggerLength = triggerCharacters.length;
+        const charactersBefore = lineContent.substring(
+            position.column - triggerLength - 1,
+            position.column - 1
+        );
+
+        if (charactersBefore !== triggerCharacters) {
+            // Do not return agent suggestions if the user didn't just type the trigger characters
+            return undefined;
+        }
+
+        // Calculate the range from the position of the trigger characters
+        const wordInfo = model.getWordUntilPosition(position);
+        return new monaco.Range(
+            position.lineNumber,
+            wordInfo.startColumn,
+            position.lineNumber,
+            position.column
+        );
+    }
+
+    private getSuggestions<T>(
+        model: monaco.editor.ITextModel,
+        position: monaco.Position,
+        triggerChars: string,
+        items: T[],
+        kind: monaco.languages.CompletionItemKind,
+        getId: (item: T) => string,
+        getName: (item: T) => string,
+        getDescription: (item: T) => string
+    ): ProviderResult<monaco.languages.CompletionList> {
+        const completionRange = this.getCompletionRange(model, position, triggerChars);
+        if (completionRange === undefined) {
+            return { suggestions: [] };
+        }
+        const suggestions = items.map(item => ({
+            insertText: getId(item),
+            kind: kind,
+            label: getName(item),
+            range: completionRange,
+            detail: getDescription(item),
+        }));
+        return { suggestions };
+    }
+
+    registerCommands(commands: CommandRegistry): void {
+        commands.registerCommand(DISCARD_PROMPT_TEMPLATE_CUSTOMIZATIONS, {
+            isVisible: (widget: Widget) => this.isPromptTemplateWidget(widget),
+            isEnabled: (widget: EditorWidget) => this.canDiscard(widget),
+            execute: (widget: EditorWidget) => this.discard(widget)
+        });
+
+        commands.registerCommand(SHOW_ALL_PROMPTS_COMMAND, {
+            execute: () => this.showAllPrompts()
+        });
+    }
+
+    protected isPromptTemplateWidget(widget: Widget): boolean {
+        if (widget instanceof EditorWidget) {
+            return PROMPT_TEMPLATE_LANGUAGE_ID === widget.editor.document.languageId;
+        }
+        return false;
+    }
+
+    protected canDiscard(widget: EditorWidget): boolean {
+        const resourceUri = widget.editor.uri;
+        const id = this.customizationService.getTemplateIDFromURI(resourceUri);
+        if (id === undefined) {
+            return false;
+        }
+        const rawPrompt = this.promptService.getRawPrompt(id);
+        const defaultPrompt = this.promptService.getDefaultRawPrompt(id);
+        return rawPrompt?.template !== defaultPrompt?.template;
+    }
+
+    protected async discard(widget: EditorWidget): Promise<void> {
+        const resourceUri = widget.editor.uri;
+        const id = this.customizationService.getTemplateIDFromURI(resourceUri);
+        if (id === undefined) {
+            return;
+        }
+        const defaultPrompt = this.promptService.getDefaultRawPrompt(id);
+        if (defaultPrompt === undefined) {
+            return;
+        }
+
+        const source: string = widget.editor.document.getText();
+        const lastLine = widget.editor.document.getLineContent(widget.editor.document.lineCount);
+
+        const replaceOperation: ReplaceOperation = {
+            range: {
+                start: {
+                    line: 0,
+                    character: 0
+                },
+                end: {
+                    line: widget.editor.document.lineCount,
+                    character: lastLine.length
+                }
+            },
+            text: defaultPrompt.template
+        };
+
+        await widget.editor.replaceText({
+            source,
+            replaceOperations: [replaceOperation]
+        });
+    }
+
+    private showAllPrompts(): void {
+        const allPrompts = this.promptService.getAllPrompts();
+        Object.keys(allPrompts).forEach(id => {
+            this.messageService.info(`Prompt Template ID: ${id}\n${allPrompts[id].template}`, 'Got it');
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: DISCARD_PROMPT_TEMPLATE_CUSTOMIZATIONS.id,
+            command: DISCARD_PROMPT_TEMPLATE_CUSTOMIZATIONS.id,
+            tooltip: 'Discard Customizations'
+        });
+    }
+}

package/src/browser/style/index.css

@@ -0,0 +1,127 @@
+.ai-configuration-widget {
+  padding: var(--theia-ui-padding);
+}
+
+.theia-ai-settings-container {
+  padding: var(--theia-ui-padding);
+}
+
+.language-model-container {
+  padding-top: calc(2 * var(--theia-ui-padding));
+}
+
+.language-model-container .theia-select {
+  margin-left: var(--theia-ui-padding);
+}
+
+.theia-settings-container .settings-section-subcategory-title.ai-settings-section-subcategory-title {
+  padding-left: 0;
+}
+
+.ai-templates {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.template-renderer {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.template-header {
+  margin-bottom: 8px;
+}
+
+.template-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.template-select-label {
+  margin-right: 5px;
+}
+
+.template-variant-selector {
+  min-width: 120px;
+}
+
+.template-variant-selector.error {
+  border-color: var(--theia-errorForeground);
+  background-color: var(--theia-errorBackground, rgba(255, 0, 0, 0.1));
+  color: var(--theia-errorForeground);
+}
+
+#ai-variable-configuration-container-widget,
+#ai-agent-configuration-container-widget {
+  margin-top: 5px;
+}
+
+/* Variable Settings */
+#ai-variable-configuration-container-widget ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#ai-variable-configuration-container-widget .variable-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+#ai-variable-configuration-container-widget .variable-args {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+
+/* Agent Settings */
+#ai-agent-configuration-container-widget ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ai-agent-configuration-main {
+  display: flex;
+  flex-direction: row;
+}
+
+.configuration-agents-list {
+  width: 128px;
+}
+
+.configuration-agent-panel {
+  flex: 1;
+}
+
+#ai-variable-configuration-container-widget .variable-references,
+#ai-agent-configuration-container-widget .variable-references,
+#ai-agent-configuration-container-widget .function-references {
+  margin-left: 0.5rem;
+  padding: 0.5rem;
+  border-left: solid 1px var(--theia-tree-indentGuidesStroke);
+}
+
+#ai-variable-configuration-container-widget .variable-reference,
+#ai-agent-configuration-container-widget .variable-reference,
+#ai-agent-configuration-container-widget .function-reference {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.agent-tag {
+  padding: calc(var(--theia-ui-padding) * 2 / 3);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border-radius: calc(var(--theia-ui-padding) * 2 / 3);
+  background: hsla(0, 0%, 68%, 0.31);
+}
+
+.configuration-agents-add {
+  margin-top: 3em;
+  margin-left: 0;
+}