feat(chat): Enable users to add context to chat requests

This PR introduces support for adding context elements (e.g., files, symbols, or variables) to chat requests, allowing chat agents to leverage additional context without embedding it directly in user input. - Extended the existing *variable* concept with `AIContextVariable`. - Context variables can provide a dedicated `contextValue` that agents can use separately from the chat request text. - Context variables can be included in chat requests in two ways: 1. Providing `AIVariableResolutionRequest` alongside the `ChatRequest`. 2. Mentioning a context variable directly in the chat request text (e.g., `#file:abc.txt`). - Extended the chat input widget to display and manage context variables. - Users can add context variables via: 1. A `+` button, opening a quick pick list of available context variables. 2. Typing a context variable (`#` prefix), with auto-completion support. - Theia’s label provider is used to display context variables in a user-friendly format. - Enhanced support for variable arguments when adding context variables via the UI. - Introduced: - `AIVariableArgPicker` for UI-based argument selection. - `AIVariableArgCompletionProvider` for auto-completion of variable arguments. - Added a new context variable `#file` that accepts a file path as an argument. - Refactored `QuickFileSelectService` for consistent file path selection across argument pickers and completion providers. - `ChatService` now resolves context variables and attaches `ResolvedAIContextVariable` objects to `ChatRequestModel`. - Variables can both: - Replace occurrences in chat text (`ResolvedAIVariable.value`). - Provide a separate `contextValue` for the chat model. Fixes #14839
eclipse-theia · Feb 4, 2025 · 52825d5 · 52825d5
1 parent b752ea6
commit 52825d5
Show file tree

Hide file tree

Showing 27 changed files with 1,285 additions and 315 deletions.
diff --git a/packages/ai-chat-ui/src/browser/ai-chat-ui-frontend-module.ts b/packages/ai-chat-ui/src/browser/ai-chat-ui-frontend-module.ts
@@ -18,7 +18,9 @@ import { bindContributionProvider, CommandContribution, MenuContribution } from
 import { bindViewContribution, FrontendApplicationContribution, WidgetFactory } from '@theia/core/lib/browser';
 import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { ContainerModule, interfaces } from '@theia/core/shared/inversify';
+import { EditorPreviewManager } from '@theia/editor-preview/lib/browser/editor-preview-manager';
 import { EditorManager } from '@theia/editor/lib/browser';
+import '../../src/browser/style/index.css';
 import { AIChatContribution } from './ai-chat-ui-contribution';
 import { AIChatInputConfiguration, AIChatInputWidget } from './chat-input-widget';
 import { ChatNodeToolbarActionContribution } from './chat-node-toolbar-action-contribution';
@@ -41,15 +43,14 @@ import {
     TextFragmentSelectionResolver,
     TypeDocSymbolSelectionResolver,
 } from './chat-response-renderer/ai-editor-manager';
+import { QuestionPartRenderer } from './chat-response-renderer/question-part-renderer';
 import { createChatViewTreeWidget } from './chat-tree-view';
 import { ChatViewTreeWidget } from './chat-tree-view/chat-view-tree-widget';
 import { ChatViewMenuContribution } from './chat-view-contribution';
 import { ChatViewLanguageContribution } from './chat-view-language-contribution';
 import { ChatViewWidget } from './chat-view-widget';
 import { ChatViewWidgetToolbarContribution } from './chat-view-widget-toolbar-contribution';
-import { EditorPreviewManager } from '@theia/editor-preview/lib/browser/editor-preview-manager';
-import { QuestionPartRenderer } from './chat-response-renderer/question-part-renderer';
-import '../../src/browser/style/index.css';
+import { ContextVariablePicker } from './context-variable-picker';
 
 export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bindViewContribution(bind, AIChatContribution);
@@ -61,7 +62,7 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
 
     bind(AIChatInputWidget).toSelf();
     bind(AIChatInputConfiguration).toConstantValue({
-        showContext: false
+        showContext: true
     });
     bind(WidgetFactory).toDynamicValue(({ container }) => ({
         id: AIChatInputWidget.ID,
@@ -76,6 +77,8 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
         createWidget: () => container.get(ChatViewTreeWidget)
     })).inSingletonScope();
 
+    bind(ContextVariablePicker).toSelf().inSingletonScope();
+
     bind(ChatResponsePartRenderer).to(HorizontalLayoutPartRenderer).inSingletonScope();
     bind(ChatResponsePartRenderer).to(ErrorPartRenderer).inSingletonScope();
     bind(ChatResponsePartRenderer).to(MarkdownPartRenderer).inSingletonScope();

diff --git a/packages/ai-chat-ui/src/browser/chat-input-widget.tsx b/packages/ai-chat-ui/src/browser/chat-input-widget.tsx
@@ -23,8 +23,10 @@ import { IMouseEvent } from '@theia/monaco-editor-core';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
 import { CHAT_VIEW_LANGUAGE_EXTENSION } from './chat-view-language-contribution';
+import { AIVariableResolutionRequest } from '@theia/ai-core';
+import { ContextVariablePicker } from './context-variable-picker';
 
-type Query = (query: string) => Promise<void>;
+type Query = (query: string, context?: AIVariableResolutionRequest[]) => Promise<void>;
 type Cancel = (requestModel: ChatRequestModel) => void;
 type DeleteChangeSet = (requestModel: ChatRequestModel) => void;
 type DeleteChangeSetElement = (requestModel: ChatRequestModel, index: number) => void;
@@ -54,11 +56,16 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(LabelProvider)
     protected readonly labelProvider: LabelProvider;
 
+    @inject(ContextVariablePicker)
+    protected readonly contextVariablePicker: ContextVariablePicker;
+
     protected editorRef: MonacoEditor | undefined = undefined;
     private editorReady = new Deferred<void>();
 
     protected isEnabled = false;
 
+    protected context: AIVariableResolutionRequest[] = [];
+
     private _onQuery: Query;
     set onQuery(query: Query) {
         this._onQuery = query;
@@ -75,6 +82,7 @@ export class AIChatInputWidget extends ReactWidget {
     set onDeleteChangeSetElement(deleteChangeSetElement: DeleteChangeSetElement) {
         this._onDeleteChangeSetElement = deleteChangeSetElement;
     }
+
     private _chatModel: ChatModel;
     set chatModel(chatModel: ChatModel) {
         this._chatModel = chatModel;
@@ -104,6 +112,9 @@ export class AIChatInputWidget extends ReactWidget {
                 onCancel={this._onCancel.bind(this)}
                 onDeleteChangeSet={this._onDeleteChangeSet.bind(this)}
                 onDeleteChangeSetElement={this._onDeleteChangeSetElement.bind(this)}
+                onAddContextElement={this.addContextElement.bind(this)}
+                onDeleteContextElement={this.deleteContextElement.bind(this)}
+                context={this.context}
                 chatModel={this._chatModel}
                 editorProvider={this.editorProvider}
                 untitledResourceResolver={this.untitledResourceResolver}
@@ -124,6 +135,20 @@ export class AIChatInputWidget extends ReactWidget {
         this.update();
     }
 
+    protected addContextElement(): void {
+        this.contextVariablePicker.pickContextVariable().then(contextElement => {
+            if (contextElement) {
+                this.context.push(contextElement);
+                this.update();
+            }
+        });
+    }
+
+    protected deleteContextElement(index: number): void {
+        this.context.splice(index, 1);
+        this.update();
+    }
+
     protected handleContextMenu(event: IMouseEvent): void {
         this.contextMenuRenderer.render({
             menuPath: AIChatInputWidget.CONTEXT_MENU,
@@ -132,13 +157,20 @@ export class AIChatInputWidget extends ReactWidget {
         event.preventDefault();
     }
 
+    addContext(variable: AIVariableResolutionRequest): void {
+        this.context.push(variable);
+        this.update();
+    }
 }
 
 interface ChatInputProperties {
     onCancel: (requestModel: ChatRequestModel) => void;
-    onQuery: (query: string) => void;
+    onQuery: (query: string, context?: AIVariableResolutionRequest[]) => void;
     onDeleteChangeSet: (sessionId: string) => void;
     onDeleteChangeSetElement: (sessionId: string, index: number) => void;
+    onAddContextElement: () => void;
+    onDeleteContextElement: (index: number) => void;
+    context?: AIVariableResolutionRequest[];
     isEnabled?: boolean;
     chatModel: ChatModel;
     editorProvider: MonacoEditorProvider;
@@ -234,6 +266,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             props.setEditorRef(editor);
         };
         createInputElement();
+
         return () => {
             props.setEditorRef(undefined);
             if (editorRef.current) {
@@ -277,7 +310,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             return;
         }
         setInProgress(true);
-        props.onQuery(value);
+        props.onQuery(value, props.context);
         if (editorRef.current) {
             editorRef.current.document.textEditorModel.setValue('');
         }
@@ -321,7 +354,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
 
     const leftOptions = props.showContext ? [{
         title: 'Attach elements to context',
-        handler: () => { /* TODO */ },
+        handler: () => props.onAddContextElement(),
         className: 'codicon-add'
     }] : [];
 
@@ -348,6 +381,8 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             disabled: isInputEmpty || !props.isEnabled
         }];
 
+    const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement);
+
     return <div className='theia-ChatInput'>
         {changeSetUI?.elements &&
             <ChangeSetBox changeSet={changeSetUI} />
@@ -356,6 +391,9 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             <div className='theia-ChatInput-Editor' ref={editorContainerRef} onKeyDown={onKeyDown} onFocus={handleInputFocus} onBlur={handleInputBlur}>
                 <div ref={placeholderRef} className='theia-ChatInput-Editor-Placeholder'>Ask a question</div>
             </div>
+            {props.context && props.context.length > 0 &&
+                <ChatContext context={contextUI.context} />
+            }
             <ChatInputOptions leftOptions={leftOptions} rightOptions={rightOptions} />
         </div>
     </div>;
@@ -497,3 +535,50 @@ function getLatestRequest(chatModel: ChatModel): ChatRequestModel | undefined {
     const requests = chatModel.getRequests();
     return requests.length > 0 ? requests[requests.length - 1] : undefined;
 }
+
+function buildContextUI(context: AIVariableResolutionRequest[] | undefined, labelProvider: LabelProvider, onDeleteContextElement: (index: number) => void): ChatContextUI {
+    if (!context) {
+        return { context: [] };
+    }
+    return {
+        context: context.map((element, index) => ({
+            name: labelProvider.getName(element),
+            iconClass: labelProvider.getIcon(element),
+            nameClass: element.variable.name,
+            additionalInfo: labelProvider.getDetails(element),
+            details: labelProvider.getLongName(element),
+            delete: () => onDeleteContextElement(index),
+        }))
+    };
+}
+
+interface ChatContextUI {
+    context: {
+        name: string;
+        iconClass: string;
+        nameClass: string;
+        additionalInfo?: string;
+        details?: string;
+        delete: () => void;
+        open?: () => void;
+    }[];
+}
+
+const ChatContext: React.FunctionComponent<ChatContextUI> = ({ context }) => (
+    <div className="theia-ChatInput-ChatContext">
+        <ul>
+            {context.map((element, index) => (
+                <li key={index} className="theia-ChatInput-ChatContext-Element" title={element.details} onClick={() => element.open?.()}>
+                    <div className={`theia-ChatInput-ChatContext-Icon ${element.iconClass}`} />
+                    <span className={`theia-ChatInput-ChatContext-title ${element.nameClass}`}>
+                        {element.name}
+                    </span>
+                    <span className='theia-ChatInput-ChatContext-additionalInfo'>
+                        {element.additionalInfo}
+                    </span>
+                    <span className="codicon codicon-close action" title="Delete" onClick={() => element.delete()} />
+                </li>
+            ))}
+        </ul>
+    </div>
+);