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

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

@@ -31,6 +31,16 @@ 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';
 
+interface CompletionSource<T> {
+    triggerCharacter: string;
+    getItems: () => T[];
+    kind: monaco.languages.CompletionItemKind;
+    getId: (item: T) => string;
+    getName: (item: T) => string;
+    getDescription: (item: T) => string;
+    command?: monaco.languages.Command;
+}
+
 @injectable()
 export class ChatViewLanguageContribution implements FrontendApplicationContribution {
 
@@ -49,39 +59,84 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
     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: [PromptText.AGENT_CHAR],
-            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideAgentCompletions(model, position),
+        this.registerCompletionProviders();
+
+        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);
+    }
+
+    protected registerCompletionProviders(): void {
+        this.registerStandardCompletionProvider({
+            triggerCharacter: PromptText.AGENT_CHAR,
+            getItems: () => this.agentService.getAgents(),
+            kind: monaco.languages.CompletionItemKind.Value,
+            getId: agent => `${agent.id} `,
+            getName: agent => agent.name,
+            getDescription: agent => agent.description
         });
-        monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
-            triggerCharacters: [PromptText.VARIABLE_CHAR],
-            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideVariableCompletions(model, position),
+
+        this.registerStandardCompletionProvider({
+            triggerCharacter: PromptText.VARIABLE_CHAR,
+            getItems: () => this.variableService.getVariables(),
+            kind: monaco.languages.CompletionItemKind.Variable,
+            getId: variable => variable.args?.some(arg => !arg.isOptional) ? variable.name + PromptText.VARIABLE_SEPARATOR_CHAR : `${variable.name} `,
+            getName: variable => variable.name,
+            getDescription: variable => variable.description,
+            command: {
+                title: nls.localize('theia/ai/chat-ui/selectVariableArguments', 'Select variable arguments'),
+                id: VARIABLE_ARGUMENT_PICKER_COMMAND,
+            }
+        });
+
+        this.registerStandardCompletionProvider({
+            triggerCharacter: PromptText.FUNCTION_CHAR,
+            getItems: () => this.toolInvocationRegistry.getAllFunctions(),
+            kind: monaco.languages.CompletionItemKind.Function,
+            getId: tool => `${tool.id} `,
+            getName: tool => tool.name,
+            getDescription: tool => tool.description ?? ''
         });
+
+        // Register the variable argument completion provider (special case)
         monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
             triggerCharacters: [PromptText.VARIABLE_CHAR, PromptText.VARIABLE_SEPARATOR_CHAR],
-            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideVariableWithArgCompletions(model, position),
+            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> =>
+                this.provideVariableWithArgCompletions(model, position),
         });
+    }
+
+    protected registerStandardCompletionProvider<T>(source: CompletionSource<T>): void {
         monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
-            triggerCharacters: [PromptText.FUNCTION_CHAR],
-            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideToolCompletions(model, position),
+            triggerCharacters: [source.triggerCharacter],
+            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> =>
+                this.provideCompletions(model, position, source),
         });
-
-        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 {
-        // Check if the character before the current position is the trigger character
+        const wordInfo = model.getWordUntilPosition(position);
         const lineContent = model.getLineContent(position.lineNumber);
-        const characterBefore = lineContent[position.column - 2]; // Get the character before the current position
+        // one to the left, and -1 for 0-based index
+        const characterBeforeCurrentWord = lineContent[wordInfo.startColumn - 1 - 1];
 
-        if (characterBefore !== triggerCharacter) {
-            // Do not return agent suggestions if the user didn't just type the trigger character
+        if (characterBeforeCurrentWord !== triggerCharacter) {
             return undefined;
         }
 
-        // Calculate the range from the position of the trigger character
-        const wordInfo = model.getWordUntilPosition(position);
+        // we are not at the beginning of the line
+        if (wordInfo.startColumn > 2) {
+            const charBeforeTrigger = model.getValueInRange({
+                startLineNumber: position.lineNumber,
+                startColumn: wordInfo.startColumn - 2,
+                endLineNumber: position.lineNumber,
+                endColumn: wordInfo.startColumn - 1
+            });
+            // If the character before the trigger is not whitespace, don't provide completions
+            if (!/\s/.test(charBeforeTrigger)) {
+                return undefined;
+            }
+        }
+
         return new monaco.Range(
             position.lineNumber,
             wordInfo.startColumn,
@@ -90,73 +145,65 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
         );
     }
 
-    private getSuggestions<T>(
+    protected provideCompletions<T>(
         model: monaco.editor.ITextModel,
         position: monaco.Position,
-        triggerChar: string,
-        items: T[],
-        kind: monaco.languages.CompletionItemKind,
-        getId: (item: T) => string,
-        getName: (item: T) => string,
-        getDescription: (item: T) => string,
-        command?: monaco.languages.Command
+        source: CompletionSource<T>
     ): ProviderResult<monaco.languages.CompletionList> {
-        const completionRange = this.getCompletionRange(model, position, triggerChar);
+        const completionRange = this.getCompletionRange(model, position, source.triggerCharacter);
         if (completionRange === undefined) {
             return { suggestions: [] };
         }
+
+        const items = source.getItems();
         const suggestions = items.map(item => ({
-            insertText: getId(item),
-            kind: kind,
-            label: getName(item),
+            insertText: source.getId(item),
+            kind: source.kind,
+            label: source.getName(item),
             range: completionRange,
-            detail: getDescription(item),
-            command
+            detail: source.getDescription(item),
+            command: source.command
         }));
+
         return { suggestions };
     }
 
-    provideAgentCompletions(model: monaco.editor.ITextModel, position: monaco.Position): ProviderResult<monaco.languages.CompletionList> {
-        return this.getSuggestions(
-            model,
-            position,
-            PromptText.AGENT_CHAR,
-            this.agentService.getAgents(),
-            monaco.languages.CompletionItemKind.Value,
-            agent => agent.id,
-            agent => agent.name,
-            agent => agent.description
-        );
-    }
+    async provideVariableWithArgCompletions(model: monaco.editor.ITextModel, position: monaco.Position): Promise<monaco.languages.CompletionList> {
+        // Get the text of the current line up to the cursor position
+        const textUntilPosition = model.getValueInRange({
+            startLineNumber: position.lineNumber,
+            startColumn: 1,
+            endLineNumber: position.lineNumber,
+            endColumn: position.column,
+        });
 
-    provideVariableCompletions(model: monaco.editor.ITextModel, position: monaco.Position): ProviderResult<monaco.languages.CompletionList> {
-        return this.getSuggestions(
-            model,
-            position,
-            PromptText.VARIABLE_CHAR,
-            this.variableService.getVariables(),
-            monaco.languages.CompletionItemKind.Variable,
-            variable => variable.name,
-            variable => variable.name,
-            variable => variable.description,
-            {
-                title: nls.localize('theia/ai/chat-ui/selectVariableArguments', 'Select variable arguments'),
-                id: VARIABLE_ARGUMENT_PICKER_COMMAND,
-            }
-        );
-    }
+        // Regex that captures the variable name in contexts like "#varname" or "#var-name:args"
+        // Matches only when # is at the beginning of the string or after whitespace
+        const variableRegex = /(?:^|\s)#([\w-]*)/;
+        const match = textUntilPosition.match(variableRegex);
+
+        if (!match) {
+            return { suggestions: [] };
+        }
+
+        const currentVariableName = match[1];
+        const hasColonSeparator = textUntilPosition.includes(`${currentVariableName}:`);
 
-    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) {
+            // If we have a variable:arg pattern, only process the matching variable
+            if (hasColonSeparator && variable.name !== currentVariableName) {
+                continue;
+            }
+
             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,
@@ -166,20 +213,8 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
                 }
             }
         }
-        return { suggestions };
-    }
 
-    provideToolCompletions(model: monaco.editor.ITextModel, position: monaco.Position): ProviderResult<monaco.languages.CompletionList> {
-        return this.getSuggestions(
-            model,
-            position,
-            PromptText.FUNCTION_CHAR,
-            this.toolInvocationRegistry.getAllFunctions(),
-            monaco.languages.CompletionItemKind.Function,
-            tool => tool.id,
-            tool => tool.name,
-            tool => tool.description ?? ''
-        );
+        return { suggestions };
     }
 
     protected async triggerVariableArgumentPicker(): Promise<void> {
@@ -187,35 +222,57 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
         if (!inputEditor) {
             return;
         }
+
         const model = inputEditor.getModel();
         const position = inputEditor.getPosition();
         if (!model || !position) {
             return;
         }
-        const variableName = model.getWordAtPosition(position)?.word;
+
+        // // Get the word at cursor
+        const wordInfo = model.getWordUntilPosition(position);
+
+        // account for the variable separator character if present
+        let endOfWordPosition = position.column;
+        if (wordInfo.word === '' && this.getCharacterBeforePosition(model, position) === PromptText.VARIABLE_SEPARATOR_CHAR) {
+            endOfWordPosition = position.column - 1;
+        } else {
+            return;
+        }
+
+        const variableName = model.getWordAtPosition({ ...position, column: endOfWordPosition })?.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
+            text: arg
         }]);
+
         await this.addContextVariable(variableName, arg);
     }
 
+    protected getCharacterBeforePosition(model: monaco.editor.ITextModel, position: monaco.Position): string {
+        return model.getLineContent(position.lineNumber)[position.column - 1 - 1];
+    }
+
     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/style/index.css

@@ -405,6 +405,10 @@ div:last-child > .theia-ChatNode {
   border-color: var(--theia-focusBorder);
 }
 
+.theia-ChatInput-Editor-Box .monaco-editor {
+  outline-color: var(--theia-editor-background);
+}
+
 .theia-ChatInput-Editor {
   width: 100%;
   height: auto;
@@ -449,7 +453,7 @@ div:last-child > .theia-ChatNode {
 .theia-ChatInputOptions {
   width: 100%;
   height: 25px;
-  padding-left: 6px;
+  padding-left: 3px;
   padding-right: 6px;
   display: flex;
   justify-content: space-between;
@@ -461,7 +465,7 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInputOptions .theia-ChatInputOptions-right {
-  margin-right: 12px;
+  margin-right: 8px;
 }
 
 .theia-ChatInputOptions .option {
@@ -493,7 +497,7 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInputOptions .reverse {
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
 }
 
 .theia-CodePartRenderer-root {
@@ -504,6 +508,10 @@ div:last-child > .theia-ChatNode {
   border-radius: 4px;
 }
 
+.theia-CodePartRenderer-root .monaco-editor {
+  outline-color: var(--theia-editor-background);
+}
+
 .theia-CodePartRenderer-left {
   flex-grow: 1;
 }