@theia/ai-chat-ui 1.58.3 → 1.59.0-next.72

package/src/browser/chat-response-renderer/{ai-editor-manager.ts → ai-selection-resolver.ts}

@@ -14,11 +14,11 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { CancellationToken, ContributionProvider, Prioritizeable, RecursivePartial, URI } from '@theia/core';
-import { inject, injectable, named } from '@theia/core/shared/inversify';
+import { CancellationToken, RecursivePartial, URI } from '@theia/core';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import { EditorOpenerOptions, EditorWidget, Range } from '@theia/editor/lib/browser';
 
-import { EditorPreviewManager } from '@theia/editor-preview/lib/browser/editor-preview-manager';
+import { EditorSelectionResolver } from '@theia/editor/lib/browser/editor-manager';
 import { DocumentSymbol } from '@theia/monaco-editor-core/esm/vs/editor/common/languages';
 import { TextModel } from '@theia/monaco-editor-core/esm/vs/editor/common/model/textModel';
 import { ILanguageFeaturesService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languageFeatures';
@@ -29,17 +29,8 @@ import { MonacoToProtocolConverter } from '@theia/monaco/lib/browser/monaco-to-p
 /** Regex to match GitHub-style position and range declaration with line (L) and column (C) */
 export const LOCATION_REGEX = /#L(\d+)?(?:C(\d+))?(?:-L(\d+)?(?:C(\d+))?)?$/;
 
-export const AIEditorSelectionResolver = Symbol('AIEditorSelectionResolver');
-export interface AIEditorSelectionResolver {
-    /**
-     * The priority of the resolver. A higher value resolver will be called before others.
-     */
-    priority?: number;
-    resolveSelection(widget: EditorWidget, options: EditorOpenerOptions, uri?: URI): Promise<RecursivePartial<Range> | undefined>
-}
-
 @injectable()
-export class GitHubSelectionResolver implements AIEditorSelectionResolver {
+export class GitHubSelectionResolver implements EditorSelectionResolver {
     priority = 100;
 
     async resolveSelection(widget: EditorWidget, options: EditorOpenerOptions, uri?: URI): Promise<RecursivePartial<Range> | undefined> {
@@ -67,7 +58,7 @@ export class GitHubSelectionResolver implements AIEditorSelectionResolver {
 }
 
 @injectable()
-export class TypeDocSymbolSelectionResolver implements AIEditorSelectionResolver {
+export class TypeDocSymbolSelectionResolver implements EditorSelectionResolver {
     priority = 50;
 
     @inject(MonacoToProtocolConverter) protected readonly m2p: MonacoToProtocolConverter;
@@ -123,7 +114,7 @@ export class TypeDocSymbolSelectionResolver implements AIEditorSelectionResolver
 }
 
 @injectable()
-export class TextFragmentSelectionResolver implements AIEditorSelectionResolver {
+export class TextFragmentSelectionResolver implements EditorSelectionResolver {
     async resolveSelection(widget: EditorWidget, options: EditorOpenerOptions, uri?: URI): Promise<RecursivePartial<Range> | undefined> {
         if (!uri) {
             return;
@@ -151,33 +142,3 @@ export class TextFragmentSelectionResolver implements AIEditorSelectionResolver
         return uri.fragment;
     }
 }
-
-@injectable()
-export class AIEditorManager extends EditorPreviewManager {
-    @inject(ContributionProvider) @named(AIEditorSelectionResolver)
-    protected readonly resolvers: ContributionProvider<AIEditorSelectionResolver>;
-
-    protected override async revealSelection(widget: EditorWidget, options: EditorOpenerOptions = {}, uri?: URI): Promise<void> {
-        if (!options.selection) {
-            options.selection = await this.resolveSelection(options, widget, uri);
-        }
-        super.revealSelection(widget, options, uri);
-    }
-
-    protected async resolveSelection(options: EditorOpenerOptions, widget: EditorWidget, uri: URI | undefined): Promise<RecursivePartial<Range> | undefined> {
-        if (!options.selection) {
-            const orderedResolvers = Prioritizeable.prioritizeAllSync(this.resolvers.getContributions(), resolver => resolver.priority ?? 1);
-            for (const linkResolver of orderedResolvers) {
-                try {
-                    const selection = await linkResolver.value.resolveSelection(widget, options, uri);
-                    if (selection) {
-                        return selection;
-                    }
-                } catch (error) {
-                    console.error(error);
-                }
-            }
-        }
-        return undefined;
-    }
-}

package/src/browser/chat-response-renderer/code-part-renderer.tsx

@@ -23,6 +23,7 @@ import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { inject, injectable, named } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { ReactNode } from '@theia/core/shared/react';
+import { nls } from '@theia/core/lib/common/nls';
 import { Position } from '@theia/core/shared/vscode-languageserver-protocol';
 import { EditorManager, EditorWidget } from '@theia/editor/lib/browser';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
@@ -113,7 +114,7 @@ export class CodePartRenderer
     private getTitle(uri: URI | undefined, language: string | undefined): string {
         // If there is a URI, use the file name as the title. Otherwise, use the language as the title.
         // If there is no language, use a generic fallback title.
-        return uri?.path?.toString().split('/').pop() ?? language ?? 'Generated Code';
+        return uri?.path?.toString().split('/').pop() ?? language ?? nls.localize('theia/ai/chat-ui/code-part-renderer/generatedCode', 'Generated Code');
     }
 
     /**
@@ -157,7 +158,7 @@ const CopyToClipboardButton = (props: { code: string, clipboardService: Clipboar
     const copyCodeToClipboard = React.useCallback(() => {
         clipboardService.writeText(code);
     }, [code, clipboardService]);
-    return <div className='button codicon codicon-copy' title='Copy' role='button' onClick={copyCodeToClipboard}></div>;
+    return <div className='button codicon codicon-copy' title={nls.localizeByDefault('Copy')} role='button' onClick={copyCodeToClipboard}></div>;
 };
 
 @injectable()
@@ -189,7 +190,7 @@ const InsertCodeAtCursorButton = (props: { code: string, editorManager: EditorMa
             }]);
         }
     }, [code, editorManager]);
-    return <div className='button codicon codicon-insert' title='Insert at Cursor' role='button' onClick={insertCode}></div>;
+    return <div className='button codicon codicon-insert' title={nls.localizeByDefault('Insert at Cursor')} role='button' onClick={insertCode}></div>;
 };
 
 /**

package/src/browser/chat-response-renderer/index.ts

@@ -13,7 +13,7 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-export * from './ai-editor-manager';
+export * from './ai-selection-resolver';
 export * from './code-part-renderer';
 export * from './command-part-renderer';
 export * from './error-part-renderer';

package/src/browser/chat-response-renderer/text-part-renderer.tsx

@@ -18,6 +18,7 @@ import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { injectable } from '@theia/core/shared/inversify';
 import { ChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ReactNode } from '@theia/core/shared/react';
+import { nls } from '@theia/core/lib/common/nls';
 import * as React from '@theia/core/shared/react';
 
 @injectable()
@@ -30,6 +31,8 @@ export class TextPartRenderer implements ChatResponsePartRenderer<ChatResponseCo
         if (response && ChatResponseContent.hasAsString(response)) {
             return <span>{response.asString()}</span>;
         }
-        return <span>Can't display response, please check your ChatResponsePartRenderers! {JSON.stringify(response)}</span>;
+        return <span>
+            {nls.localize('theia/ai/chat-ui/text-part-renderer/cantDisplay',
+                "Can't display response, please check your ChatResponsePartRenderers!")} {JSON.stringify(response)}</span>;
     }
 }

package/src/browser/chat-response-renderer/toolcall-part-renderer.tsx

@@ -18,6 +18,7 @@ import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { injectable } from '@theia/core/shared/inversify';
 import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ReactNode } from '@theia/core/shared/react';
+import { nls } from '@theia/core/lib/common/nls';
 import * as React from '@theia/core/shared/react';
 
 @injectable()
@@ -35,14 +36,14 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             <h4 className='theia-toolCall'>
                 {response.finished ? (
                     <details>
-                        <summary>Ran {response.name}
+                        <summary>{nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
                             ({this.renderCollapsibleArguments(response.arguments)})
                         </summary>
                         <pre>{this.tryPrettyPrintJson(response)}</pre>
                     </details>
                 ) : (
                     <span>
-                        <Spinner /> Running {response.name}({this.renderCollapsibleArguments(response.arguments)})
+                        <Spinner /> {nls.localizeByDefault('Running')} {response.name}({this.renderCollapsibleArguments(response.arguments)})
                     </span>
                 )}
             </h4>
@@ -82,7 +83,12 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             }
         } catch (e) {
             if (typeof responseContent !== 'string') {
-                responseContent = `The content could not be converted to string: '${e.message}'. This is the original content: '${responseContent}'.`;
+                responseContent = nls.localize(
+                    'theia/ai/chat-ui/toolcall-part-renderer/prettyPrintError',
+                    "The content could not be converted to string: '{0}'. This is the original content: '{1}'.",
+                    e.message,
+                    responseContent
+                );
             }
             // fall through
         }

package/src/browser/chat-tree-view/chat-view-tree-widget.tsx

@@ -47,6 +47,7 @@ import {
     postConstruct
 } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
+import { nls } from '@theia/core/lib/common/nls';
 
 import { ChatNodeToolbarActionContribution } from '../chat-node-toolbar-action-contribution';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
@@ -151,43 +152,51 @@ export class ChatViewTreeWidget extends TreeWidget {
         return <div className={'theia-ResponseNode'}>
             <div className='theia-ResponseNode-Content' key={'disabled-message'}>
                 <div className="disable-message">
-                    <span className="section-header"> 🚀 Experimental AI Feature Available!</span>
+                    <span className="section-header">{
+                        nls.localize('theia/ai/chat-ui/chat-view-tree-widget/aiFeatureHeader', '🚀 AI Features Available (Alpha Version)!')}
+                    </span>
                     <div className="section-title">
-                        <p><code>Currently, all AI Features are disabled!</code></p>
+                        <p><code>{nls.localize('theia/ai/chat-ui/chat-view-tree-widget/featuresDisabled', 'Currently, all AI Features are disabled!')}</code></p>
                     </div>
                     <div className="section-title">
-                        <p>How to Enable Experimental AI Features:</p>
+                        <p>{nls.localize('theia/ai/chat-ui/chat-view-tree-widget/howToEnable', 'How to Enable the AI Features:')}</p>
                     </div>
                     <div className="section-content">
-                        <p>To enable the experimental AI features, please go to &nbsp;
-                            {this.renderLinkButton('the settings menu', CommonCommands.OPEN_PREFERENCES.id)}
+                        <p>To enable the AI features, please go to &nbsp;
+                            {this.renderLinkButton(nls.localize('theia/ai/chat-ui/chat-view-tree-widget/settingsMenu', 'the settings menu'), CommonCommands.OPEN_PREFERENCES.id)}
                             &nbsp;and locate the <strong>AI Features</strong> section.</p>
                         <ol>
-                            <li>Toggle the switch for <strong>'Ai-features: Enable'</strong>.</li>
+                            <li>Toggle the switch for <strong>{nls.localize('theia/ai/chat-ui/chat-view-tree-widget/aiFeaturesEnable', 'Ai-features: Enable')}</strong>.</li>
                             <li>Provide at least one LLM provider (e.g. OpenAI), also see <a href="https://theia-ide.org/docs/user_ai/" target="_blank">the documentation</a>
                                 for more information.</li>
                         </ol>
-                        <p>This will activate the new AI capabilities in the app. Please remember, these features are still in development, so they may change or be unstable. 🚧</p>
+                        <p>This will activate the AI capabilities in the app. Please remember, these features are <strong>in an alpha state</strong>,
+                            so they may change and we are working on improving them 🚧.<br></br>
+                            Please support us by <a href="https://github.com/eclipse-theia/theia">providing feedback
+                            </a>!</p>
                     </div>
 
                     <div className="section-title">
                         <p>Currently Supported Views and Features:</p>
                     </div>
                     <div className="section-content">
-                        <p>Once the experimental AI features are enabled, you can access the following views and features:</p>
+                        <p>Once the AI features are enabled, you can access the following views and features:</p>
                         <ul>
                             <li>Code Completion</li>
                             <li>Terminal Assistance (via CTRL+I in a terminal)</li>
                             <li>This Chat View (features the following agents):
                                 <ul>
                                     <li>Universal Chat Agent</li>
-                                    <li>Workspace Chat Agent</li>
+                                    <li>Coder Chat Agent</li>
+                                    <li>Architect Chat Agent</li>
                                     <li>Command Chat Agent</li>
                                     <li>Orchestrator Chat Agent</li>
                                 </ul>
                             </li>
-                            <li>{this.renderLinkButton('AI History View', 'aiHistory:open')}</li>
-                            <li>{this.renderLinkButton('AI Configuration View', 'aiConfiguration:open')}</li>
+                            <li>{this.renderLinkButton(nls.localize('theia/ai/chat-ui/chat-view-tree-widget/aiHistoryView', 'AI History View'), 'aiHistory:open')}</li>
+                            <li>{this.renderLinkButton(
+                                nls.localize('theia/ai/chat-ui/chat-view-tree-widget/aiConfigurationView', 'AI Configuration View'), 'aiConfiguration:open')}
+                            </li>
                         </ul>
                         <p>See <a href="https://theia-ide.org/docs/user_ai/" target="_blank">the documentation</a> for more information.</p>
                     </div>
@@ -307,8 +316,9 @@ export class ChatViewTreeWidget extends TreeWidget {
                     }}>
                     {this.getAgentLabel(node)}
                 </h3>
-                {inProgress && !waitingForInput && <span className='theia-ChatContentInProgress'>Generating</span>}
-                {inProgress && waitingForInput && <span className='theia-ChatContentInProgress'>Waiting for input</span>}
+                {inProgress && !waitingForInput && <span className='theia-ChatContentInProgress'>{nls.localizeByDefault('Generating')}</span>}
+                {inProgress && waitingForInput && <span className='theia-ChatContentInProgress'>{
+                    nls.localize('theia/ai/chat-ui/chat-view-tree-widget/waitingForInput', 'Waiting for input')}</span>}
                 <div className='theia-ChatNodeToolbar'>
                     {!inProgress &&
                         toolbarContributions.length > 0 &&
@@ -338,9 +348,9 @@ export class ChatViewTreeWidget extends TreeWidget {
     private getAgentLabel(node: RequestNode | ResponseNode): string {
         if (isRequestNode(node)) {
             // TODO find user name
-            return 'You';
+            return nls.localize('theia/ai/chat-ui/chat-view-tree-widget/you', 'You');
         }
-        return this.getAgent(node)?.name ?? 'AI';
+        return this.getAgent(node)?.name ?? nls.localize('theia/ai/chat-ui/chat-view-tree-widget/ai', 'AI');
     }
 
     private getAgent(node: RequestNode | ResponseNode): ChatAgent | undefined {
@@ -420,7 +430,7 @@ export class ChatViewTreeWidget extends TreeWidget {
             [-1, undefined])[1];
         if (!renderer) {
             console.error('No renderer found for content', content);
-            return <div>Error: No renderer found</div>;
+            return <div>{nls.localize('theia/ai/chat-ui/chat-view-tree-widget/noRenderer', 'Error: No renderer found')}</div>;
         }
         return renderer.render(content, node);
     }

package/src/browser/chat-view-contribution.ts

@@ -69,7 +69,7 @@ export class ChatViewMenuContribution implements MenuContribution, CommandContri
                     const parent = extractRequestOrResponseNodes(args).find(arg => arg.parent)?.parent;
                     const text = parent?.children
                         .filter(isRequestOrResponseNode)
-                        .map(child => this.getText(child))
+                        .map(child => this.getCopyText(child))
                         .join('\n\n---\n\n');
                     if (text) {
                         this.clipboardService.writeText(text);
@@ -93,19 +93,19 @@ export class ChatViewMenuContribution implements MenuContribution, CommandContri
     }
 
     protected copyMessage(args: (RequestNode | ResponseNode)[]): void {
-        const text = this.getTextAndJoin(args);
+        const text = this.getCopyTextAndJoin(args);
         this.clipboardService.writeText(text);
     }
 
-    protected getTextAndJoin(args: (RequestNode | ResponseNode)[] | undefined): string {
-        return args !== undefined ? args.map(arg => this.getText(arg)).join() : '';
+    protected getCopyTextAndJoin(args: (RequestNode | ResponseNode)[] | undefined): string {
+        return args !== undefined ? args.map(arg => this.getCopyText(arg)).join() : '';
     }
 
-    protected getText(arg: RequestNode | ResponseNode): string {
+    protected getCopyText(arg: RequestNode | ResponseNode): string {
         if (isRequestNode(arg)) {
             return arg.request.request.text;
         } else if (isResponseNode(arg)) {
-            return arg.response.response.asString();
+            return arg.response.response.asDisplayString();
         }
         return '';
     }

package/src/browser/chat-view-language-contribution.ts

@@ -13,18 +13,24 @@
 //
 // 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 { FrontendApplication, FrontendApplicationContribution } from '@theia/core/lib/browser';
+import { ChatAgentService } from '@theia/ai-chat';
+import { AIContextVariable, AIVariableService } from '@theia/ai-core/lib/common';
+import { PromptText } from '@theia/ai-core/lib/common/prompt-text';
+import { ToolInvocationRegistry } from '@theia/ai-core/lib/common/tool-invocation-registry';
+import { MaybePromise, nls } from '@theia/core';
+import { ApplicationShell, FrontendApplication, FrontendApplicationContribution } from '@theia/core/lib/browser';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import * as monaco from '@theia/monaco-editor-core';
-import { ContributionProvider, MaybePromise } from '@theia/core';
 import { ProviderResult } from '@theia/monaco-editor-core/esm/vs/editor/common/languages';
-import { ChatAgentService } from '@theia/ai-chat';
-import { AIVariableService } from '@theia/ai-core/lib/common';
-import { ToolProvider } from '@theia/ai-core/lib/common/tool-invocation-registry';
+import { ChatViewWidget } from './chat-view-widget';
 
 export const CHAT_VIEW_LANGUAGE_ID = 'theia-ai-chat-view-language';
 export const CHAT_VIEW_LANGUAGE_EXTENSION = 'aichatviewlanguage';
 
+const VARIABLE_RESOLUTION_CONTEXT = { context: 'chat-input-autocomplete' };
+const VARIABLE_ARGUMENT_PICKER_COMMAND = 'trigger-variable-argument-picker';
+const VARIABLE_ADD_CONTEXT_COMMAND = 'add-context-variable';
+
 @injectable()
 export class ChatViewLanguageContribution implements FrontendApplicationContribution {
 
@@ -34,25 +40,34 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
     @inject(AIVariableService)
     protected readonly variableService: AIVariableService;
 
-    @inject(ContributionProvider)
-    @named(ToolProvider)
-    private providers: ContributionProvider<ToolProvider>;
+    @inject(ToolInvocationRegistry)
+    protected readonly toolInvocationRegistry: ToolInvocationRegistry;
+
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
 
     onStart(_app: FrontendApplication): MaybePromise<void> {
         monaco.languages.register({ id: CHAT_VIEW_LANGUAGE_ID, extensions: [CHAT_VIEW_LANGUAGE_EXTENSION] });
 
         monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
-            triggerCharacters: ['@'],
+            triggerCharacters: [PromptText.AGENT_CHAR],
             provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideAgentCompletions(model, position),
         });
         monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
-            triggerCharacters: ['#'],
+            triggerCharacters: [PromptText.VARIABLE_CHAR],
             provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideVariableCompletions(model, position),
         });
         monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
-            triggerCharacters: ['~'],
+            triggerCharacters: [PromptText.VARIABLE_CHAR, PromptText.VARIABLE_SEPARATOR_CHAR],
+            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideVariableWithArgCompletions(model, position),
+        });
+        monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
+            triggerCharacters: [PromptText.FUNCTION_CHAR],
             provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideToolCompletions(model, position),
         });
+
+        monaco.editor.registerCommand(VARIABLE_ARGUMENT_PICKER_COMMAND, this.triggerVariableArgumentPicker.bind(this));
+        monaco.editor.registerCommand(VARIABLE_ADD_CONTEXT_COMMAND, (_, ...args) => args.length > 1 ? this.addContextVariable(args[0], args[1]) : undefined);
     }
 
     getCompletionRange(model: monaco.editor.ITextModel, position: monaco.Position, triggerCharacter: string): monaco.Range | undefined {
@@ -65,7 +80,7 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
             return undefined;
         }
 
-        // Calculate the range from the position of the '@' character
+        // Calculate the range from the position of the trigger character
         const wordInfo = model.getWordUntilPosition(position);
         return new monaco.Range(
             position.lineNumber,
@@ -83,7 +98,8 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
         kind: monaco.languages.CompletionItemKind,
         getId: (item: T) => string,
         getName: (item: T) => string,
-        getDescription: (item: T) => string
+        getDescription: (item: T) => string,
+        command?: monaco.languages.Command
     ): ProviderResult<monaco.languages.CompletionList> {
         const completionRange = this.getCompletionRange(model, position, triggerChar);
         if (completionRange === undefined) {
@@ -95,6 +111,7 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
             label: getName(item),
             range: completionRange,
             detail: getDescription(item),
+            command
         }));
         return { suggestions };
     }
@@ -103,7 +120,7 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
         return this.getSuggestions(
             model,
             position,
-            '@',
+            PromptText.AGENT_CHAR,
             this.agentService.getAgents(),
             monaco.languages.CompletionItemKind.Value,
             agent => agent.id,
@@ -116,25 +133,92 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
         return this.getSuggestions(
             model,
             position,
-            '#',
+            PromptText.VARIABLE_CHAR,
             this.variableService.getVariables(),
             monaco.languages.CompletionItemKind.Variable,
             variable => variable.name,
             variable => variable.name,
-            variable => variable.description
+            variable => variable.description,
+            {
+                title: nls.localize('theia/ai/chat-ui/selectVariableArguments', 'Select variable arguments'),
+                id: VARIABLE_ARGUMENT_PICKER_COMMAND,
+            }
         );
     }
 
+    async provideVariableWithArgCompletions(model: monaco.editor.ITextModel, position: monaco.Position): Promise<monaco.languages.CompletionList> {
+        const variables = this.variableService.getVariables();
+        const suggestions: monaco.languages.CompletionItem[] = [];
+        for (const variable of variables) {
+            const provider = await this.variableService.getArgumentCompletionProvider(variable.name);
+            if (provider) {
+                const items = await provider(model, position);
+                if (items) {
+                    suggestions.push(...items.map(item => ({
+                        ...item,
+                        // trigger command to check if we should add a context variable
+                        command: {
+                            title: nls.localize('theia/ai/chat-ui/addContextVariable', 'Add context variable'),
+                            id: VARIABLE_ADD_CONTEXT_COMMAND,
+                            arguments: [variable.name, item.insertText]
+                        }
+                    })));
+                }
+            }
+        }
+        return { suggestions };
+    }
+
     provideToolCompletions(model: monaco.editor.ITextModel, position: monaco.Position): ProviderResult<monaco.languages.CompletionList> {
         return this.getSuggestions(
             model,
             position,
-            '~',
-            this.providers.getContributions().map(provider => provider.getTool()),
+            PromptText.FUNCTION_CHAR,
+            this.toolInvocationRegistry.getAllFunctions(),
             monaco.languages.CompletionItemKind.Function,
             tool => tool.id,
             tool => tool.name,
             tool => tool.description ?? ''
         );
     }
+
+    protected async triggerVariableArgumentPicker(): Promise<void> {
+        const inputEditor = monaco.editor.getEditors().find(editor => editor.hasTextFocus());
+        if (!inputEditor) {
+            return;
+        }
+        const model = inputEditor.getModel();
+        const position = inputEditor.getPosition();
+        if (!model || !position) {
+            return;
+        }
+        const variableName = model.getWordAtPosition(position)?.word;
+        if (!variableName) {
+            return;
+        }
+        const provider = await this.variableService.getArgumentPicker(variableName, VARIABLE_RESOLUTION_CONTEXT);
+        if (!provider) {
+            return;
+        }
+        const arg = await provider(VARIABLE_RESOLUTION_CONTEXT);
+        if (!arg) {
+            return;
+        }
+        inputEditor.executeEdits('variable-argument-picker', [{
+            range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+            text: PromptText.VARIABLE_SEPARATOR_CHAR + arg
+        }]);
+        await this.addContextVariable(variableName, arg);
+    }
+
+    protected async addContextVariable(variableName: string, arg: string | undefined): Promise<void> {
+        const variable = this.variableService.getVariable(variableName);
+        if (!variable || !AIContextVariable.is(variable)) {
+            return;
+        }
+        const widget = this.shell.getWidgetById(ChatViewWidget.ID);
+        if (widget instanceof ChatViewWidget) {
+            widget.addContext({ variable, arg });
+        }
+    }
 }

package/src/browser/chat-view-widget.tsx

@@ -21,6 +21,7 @@ import { inject, injectable, postConstruct } from '@theia/core/shared/inversify'
 import { AIChatInputWidget } from './chat-input-widget';
 import { ChatViewTreeWidget } from './chat-tree-view/chat-view-tree-widget';
 import { AIActivationService } from '@theia/ai-core/lib/browser/ai-activation-service';
+import { AIVariableResolutionRequest } from '@theia/ai-core';
 
 export namespace ChatViewWidget {
     export interface State {
@@ -32,7 +33,7 @@ export namespace ChatViewWidget {
 export class ChatViewWidget extends BaseWidget implements ExtractableWidget, StatefulWidget {
 
     public static ID = 'chat-view-widget';
-    static LABEL = `✨ ${nls.localizeByDefault('Chat')} [Experimental]`;
+    static LABEL = `${nls.localizeByDefault('Chat')}`;
 
     @inject(ChatService)
     protected chatService: ChatService;
@@ -91,8 +92,10 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         this.chatSession = this.chatService.createSession();
 
         this.inputWidget.onQuery = this.onQuery.bind(this);
+        this.inputWidget.onUnpin = this.onUnpin.bind(this);
         this.inputWidget.onCancel = this.onCancel.bind(this);
         this.inputWidget.chatModel = this.chatSession.model;
+        this.inputWidget.pinnedAgent = this.chatSession.pinnedAgent;
         this.inputWidget.onDeleteChangeSet = this.onDeleteChangeSet.bind(this);
         this.inputWidget.onDeleteChangeSetElement = this.onDeleteChangeSetElement.bind(this);
         this.treeWidget.trackChatModel(this.chatSession.model);
@@ -117,6 +120,7 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
                     this.chatSession = session;
                     this.treeWidget.trackChatModel(this.chatSession.model);
                     this.inputWidget.chatModel = this.chatSession.model;
+                    this.inputWidget.pinnedAgent = this.chatSession.pinnedAgent;
                     if (event.focus) {
                         this.show();
                     }
@@ -160,15 +164,15 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     protected async onQuery(query: string): Promise<void> {
         if (query.length === 0) { return; }
 
-        const chatRequest: ChatRequest = {
-            text: query
-        };
-
+        const chatRequest: ChatRequest = { text: query };
         const requestProgress = await this.chatService.sendRequest(this.chatSession.id, chatRequest);
         requestProgress?.responseCompleted.then(responseModel => {
             if (responseModel.isError) {
-                this.messageService.error(responseModel.errorObject?.message ?? 'An error occurred during chat service invocation.');
+                this.messageService.error(responseModel.errorObject?.message ??
+                    nls.localize('theia/ai/chat-ui/errorChatInvocation', 'An error occurred during chat service invocation.'));
             }
+        }).finally(() => {
+            this.inputWidget.pinnedAgent = this.chatSession.pinnedAgent;
         });
         if (!requestProgress) {
             this.messageService.error(`Was not able to send request "${chatRequest.text}" to session ${this.chatSession.id}`);
@@ -177,6 +181,11 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         // Tree Widget currently tracks the ChatModel itself. Therefore no notification necessary.
     }
 
+    protected onUnpin(): void {
+        this.chatSession.pinnedAgent = undefined;
+        this.inputWidget.pinnedAgent = this.chatSession.pinnedAgent;
+    }
+
     protected onCancel(requestModel: ChatRequestModel): void {
         this.chatService.cancelRequest(requestModel.session.id, requestModel.id);
     }
@@ -204,4 +213,8 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     get isExtractable(): boolean {
         return this.secondaryWindow === undefined;
     }
+
+    addContext(variable: AIVariableResolutionRequest): void {
+        this.inputWidget.addContext(variable);
+    }
 }