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

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

@@ -13,8 +13,8 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { ChangeSet, ChangeSetElement, ChatChangeEvent, ChatModel, ChatRequestModel } from '@theia/ai-chat';
-import { Disposable, UntitledResourceResolver } from '@theia/core';
+import { ChangeSet, ChatAgent, ChatChangeEvent, ChatModel, ChatRequestModel } from '@theia/ai-chat';
+import { Disposable, DisposableCollection, InMemoryResources, URI, nls } from '@theia/core';
 import { ContextMenuRenderer, LabelProvider, Message, ReactWidget } from '@theia/core/lib/browser';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable, optional, postConstruct } from '@theia/core/shared/inversify';
@@ -23,8 +23,13 @@ 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 { FrontendVariableService } from '@theia/ai-core/lib/browser';
+import { ContextVariablePicker } from './context-variable-picker';
+import { ChangeSetActionRenderer, ChangeSetActionService } from './change-set-actions/change-set-action-service';
 
 type Query = (query: string) => Promise<void>;
+type Unpin = () => void;
 type Cancel = (requestModel: ChatRequestModel) => void;
 type DeleteChangeSet = (requestModel: ChatRequestModel) => void;
 type DeleteChangeSetElement = (requestModel: ChatRequestModel, index: number) => void;
@@ -32,6 +37,7 @@ type DeleteChangeSetElement = (requestModel: ChatRequestModel, index: number) =>
 export const AIChatInputConfiguration = Symbol('AIChatInputConfiguration');
 export interface AIChatInputConfiguration {
     showContext?: boolean;
+    showPinnedAgent?: boolean;
 }
 
 @injectable()
@@ -42,8 +48,8 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(MonacoEditorProvider)
     protected readonly editorProvider: MonacoEditorProvider;
 
-    @inject(UntitledResourceResolver)
-    protected readonly untitledResourceResolver: UntitledResourceResolver;
+    @inject(InMemoryResources)
+    protected readonly resources: InMemoryResources;
 
     @inject(ContextMenuRenderer)
     protected readonly contextMenuRenderer: ContextMenuRenderer;
@@ -51,9 +57,18 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(AIChatInputConfiguration) @optional()
     protected readonly configuration: AIChatInputConfiguration | undefined;
 
+    @inject(FrontendVariableService)
+    protected readonly variableService: FrontendVariableService;
+
     @inject(LabelProvider)
     protected readonly labelProvider: LabelProvider;
 
+    @inject(ContextVariablePicker)
+    protected readonly contextVariablePicker: ContextVariablePicker;
+
+    @inject(ChangeSetActionService)
+    protected readonly changeSetActionService: ChangeSetActionService;
+
     protected editorRef: MonacoEditor | undefined = undefined;
     private editorReady = new Deferred<void>();
 
@@ -63,6 +78,10 @@ export class AIChatInputWidget extends ReactWidget {
     set onQuery(query: Query) {
         this._onQuery = query;
     }
+    private _onUnpin: Unpin;
+    set onUnpin(unpin: Unpin) {
+        this._onUnpin = unpin;
+    }
     private _onCancel: Cancel;
     set onCancel(cancel: Cancel) {
         this._onCancel = cancel;
@@ -75,11 +94,25 @@ export class AIChatInputWidget extends ReactWidget {
     set onDeleteChangeSetElement(deleteChangeSetElement: DeleteChangeSetElement) {
         this._onDeleteChangeSetElement = deleteChangeSetElement;
     }
+
+    protected onDisposeForChatModel = new DisposableCollection();
     private _chatModel: ChatModel;
     set chatModel(chatModel: ChatModel) {
+        this.onDisposeForChatModel.dispose();
+        this.onDisposeForChatModel = new DisposableCollection();
+        this.onDisposeForChatModel.push(chatModel.onDidChange(event => {
+            if (event.kind === 'addVariable' || event.kind === 'removeVariable') {
+                this.update();
+            }
+        }));
         this._chatModel = chatModel;
         this.update();
     }
+    private _pinnedAgent: ChatAgent | undefined;
+    set pinnedAgent(pinnedAgent: ChatAgent | undefined) {
+        this._pinnedAgent = pinnedAgent;
+        this.update();
+    }
 
     @postConstruct()
     protected init(): void {
@@ -101,12 +134,19 @@ export class AIChatInputWidget extends ReactWidget {
         return (
             <ChatInput
                 onQuery={this._onQuery.bind(this)}
+                onUnpin={this._onUnpin.bind(this)}
                 onCancel={this._onCancel.bind(this)}
+                onDragOver={this.onDragOver.bind(this)}
+                onDrop={this.onDrop.bind(this)}
                 onDeleteChangeSet={this._onDeleteChangeSet.bind(this)}
                 onDeleteChangeSetElement={this._onDeleteChangeSetElement.bind(this)}
+                onAddContextElement={this.addContextElement.bind(this)}
+                onDeleteContextElement={this.deleteContextElement.bind(this)}
+                context={this._chatModel.context.getVariables()}
                 chatModel={this._chatModel}
+                pinnedAgent={this._pinnedAgent}
                 editorProvider={this.editorProvider}
-                untitledResourceResolver={this.untitledResourceResolver}
+                resources={this.resources}
                 contextMenuCallback={this.handleContextMenu.bind(this)}
                 isEnabled={this.isEnabled}
                 setEditorRef={editor => {
@@ -114,16 +154,64 @@ export class AIChatInputWidget extends ReactWidget {
                     this.editorReady.resolve();
                 }}
                 showContext={this.configuration?.showContext}
+                showPinnedAgent={this.configuration?.showPinnedAgent}
                 labelProvider={this.labelProvider}
+                actionService={this.changeSetActionService}
             />
         );
     }
 
+    protected onDragOver(event: React.DragEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        this.node.classList.add('drag-over');
+        if (event.dataTransfer?.types.includes('text/plain')) {
+            event.dataTransfer!.dropEffect = 'copy';
+        } else {
+            event.dataTransfer!.dropEffect = 'link';
+        }
+    }
+
+    protected onDrop(event: React.DragEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        this.node.classList.remove('drag-over');
+        const dataTransferText = event.dataTransfer?.getData('text/plain');
+        const position = this.editorRef?.getControl().getTargetAtClientPoint(event.clientX, event.clientY)?.position;
+        this.variableService.getDropResult(event.nativeEvent, { type: 'ai-chat-input-widget' }).then(result => {
+            result.variables.forEach(variable => this.addContext(variable));
+            const text = result.text ?? dataTransferText;
+            if (position && text) {
+                this.editorRef?.getControl().executeEdits('drag-and-drop', [{
+                    range: {
+                        startLineNumber: position.lineNumber,
+                        startColumn: position.column,
+                        endLineNumber: position.lineNumber,
+                        endColumn: position.column
+                    },
+                    text
+                }]);
+            }
+        });
+    }
+
     public setEnabled(enabled: boolean): void {
         this.isEnabled = enabled;
         this.update();
     }
 
+    protected addContextElement(): void {
+        this.contextVariablePicker.pickContextVariable().then(contextElement => {
+            if (contextElement) {
+                this._chatModel.context.addVariables(contextElement);
+            }
+        });
+    }
+
+    protected deleteContextElement(index: number): void {
+        this._chatModel.context.deleteVariables(index);
+    }
+
     protected handleContextMenu(event: IMouseEvent): void {
         this.contextMenuRenderer.render({
             menuPath: AIChatInputWidget.CONTEXT_MENU,
@@ -132,21 +220,33 @@ export class AIChatInputWidget extends ReactWidget {
         event.preventDefault();
     }
 
+    addContext(variable: AIVariableResolutionRequest): void {
+        this._chatModel.context.addVariables(variable);
+    }
 }
 
 interface ChatInputProperties {
     onCancel: (requestModel: ChatRequestModel) => void;
     onQuery: (query: string) => void;
+    onUnpin: () => void;
+    onDragOver: (event: React.DragEvent) => void;
+    onDrop: (event: React.DragEvent) => void;
     onDeleteChangeSet: (sessionId: string) => void;
     onDeleteChangeSetElement: (sessionId: string, index: number) => void;
+    onAddContextElement: () => void;
+    onDeleteContextElement: (index: number) => void;
+    context?: readonly AIVariableResolutionRequest[];
     isEnabled?: boolean;
     chatModel: ChatModel;
+    pinnedAgent?: ChatAgent;
     editorProvider: MonacoEditorProvider;
-    untitledResourceResolver: UntitledResourceResolver;
+    resources: InMemoryResources;
     contextMenuCallback: (event: IMouseEvent) => void;
     setEditorRef: (editor: MonacoEditor | undefined) => void;
     showContext?: boolean;
+    showPinnedAgent?: boolean;
     labelProvider: LabelProvider;
+    actionService: ChangeSetActionService;
 }
 
 const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInputProperties) => {
@@ -156,7 +256,15 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     const [inProgress, setInProgress] = React.useState(false);
     const [isInputEmpty, setIsInputEmpty] = React.useState(true);
     const [changeSetUI, setChangeSetUI] = React.useState(
-        () => props.chatModel.changeSet ? buildChangeSetUI(props.chatModel.changeSet, props.labelProvider, onDeleteChangeSet, onDeleteChangeSetElement) : undefined
+        () => props.chatModel.changeSet
+            ? buildChangeSetUI(
+                props.chatModel.changeSet,
+                props.labelProvider,
+                props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+                onDeleteChangeSet,
+                onDeleteChangeSetElement
+            )
+            : undefined
     );
 
     // eslint-disable-next-line no-null/no-null
@@ -166,12 +274,13 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     const editorRef = React.useRef<MonacoEditor | undefined>(undefined);
 
     React.useEffect(() => {
+        const uri = new URI(`ai-chat:/input.${CHAT_VIEW_LANGUAGE_EXTENSION}`);
+        const resource = props.resources.add(uri, '');
         const createInputElement = async () => {
             const paddingTop = 6;
             const lineHeight = 20;
             const maxHeight = 240;
-            const resource = await props.untitledResourceResolver.createUntitledResource('', CHAT_VIEW_LANGUAGE_EXTENSION);
-            const editor = await props.editorProvider.createInline(resource.uri, editorContainerRef.current!, {
+            const editor = await props.editorProvider.createInline(uri, editorContainerRef.current!, {
                 language: CHAT_VIEW_LANGUAGE_EXTENSION,
                 // Disable code lens, inlay hints and hover support to avoid console errors from other contributions
                 codeLens: false,
@@ -234,7 +343,9 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             props.setEditorRef(editor);
         };
         createInputElement();
+
         return () => {
+            resource.dispose();
             props.setEditorRef(undefined);
             if (editorRef.current) {
                 editorRef.current.dispose();
@@ -257,14 +368,28 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                     setInProgress(ChatRequestModel.isInProgress(event.request))
                 );
             } else if (ChatChangeEvent.isChangeSetEvent(event)) {
-                if (event.changeSet) {
-                    setChangeSetUI(buildChangeSetUI(event.changeSet, props.labelProvider, onDeleteChangeSet, onDeleteChangeSetElement));
-                } else {
+                if (event.kind === 'removeChangeSet') {
                     setChangeSetUI(undefined);
+                } else if (event.kind === 'setChangeSet' || 'updateChangeSet') {
+                    setChangeSetUI(buildChangeSetUI(
+                        event.changeSet,
+                        props.labelProvider,
+                        props.actionService.getActionsForChangeset(event.changeSet),
+                        onDeleteChangeSet,
+                        onDeleteChangeSetElement
+                    ));
                 }
             }
         });
-        setChangeSetUI(props.chatModel.changeSet ? buildChangeSetUI(props.chatModel.changeSet, props.labelProvider, onDeleteChangeSet, onDeleteChangeSetElement) : undefined);
+        setChangeSetUI(props.chatModel.changeSet
+            ? buildChangeSetUI(
+                props.chatModel.changeSet,
+                props.labelProvider,
+                props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+                onDeleteChangeSet,
+                onDeleteChangeSetElement
+            )
+            : undefined);
         return () => {
             listener?.dispose();
             responseListenerRef.current?.dispose();
@@ -272,7 +397,16 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         };
     }, [props.chatModel]);
 
-    function submit(value: string): void {
+    React.useEffect(() => {
+        const disposable = props.actionService.onDidChange(() => {
+            if (!props.chatModel.changeSet) { return; }
+            const newActions = props.actionService.getActionsForChangeset(props.chatModel.changeSet);
+            setChangeSetUI(current => !current ? current : { ...current, actions: newActions });
+        });
+        return () => disposable.dispose();
+    });
+
+    const submit = React.useCallback(function submit(value: string): void {
         if (!value || value.trim().length === 0) {
             return;
         }
@@ -281,7 +415,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         if (editorRef.current) {
             editorRef.current.document.textEditorModel.setValue('');
         }
-    }
+    }, [props.context, props.onQuery, editorRef]);
 
     const onKeyDown = React.useCallback((event: React.KeyboardEvent) => {
         if (!props.isEnabled) {
@@ -291,7 +425,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             event.preventDefault();
             submit(editorRef.current?.document.textEditorModel.getValue() || '');
         }
-    }, [props.isEnabled]);
+    }, [props.isEnabled, submit]);
 
     const handleInputFocus = () => {
         hidePlaceholderIfEditorFilled();
@@ -319,15 +453,46 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         }
     };
 
-    const leftOptions = props.showContext ? [{
-        title: 'Attach elements to context',
-        handler: () => { /* TODO */ },
-        className: 'codicon-add'
-    }] : [];
+    const handlePin = () => {
+        if (editorRef.current) {
+            editorRef.current.getControl().getModel()?.applyEdits([{
+                range: {
+                    startLineNumber: 1,
+                    startColumn: 1,
+                    endLineNumber: 1,
+                    endColumn: 1
+                },
+                text: '@ ',
+            }]);
+            editorRef.current.getControl().setPosition({ lineNumber: 1, column: 2 });
+            editorRef.current.getControl().getAction('editor.action.triggerSuggest')?.run();
+        }
+    };
+
+    const leftOptions = [
+        ...(props.showContext
+            ? [{
+                title: nls.localize('theia/ai/chat-ui/attachToContext', 'Attach elements to context'),
+                handler: () => props.onAddContextElement(),
+                className: 'codicon-add'
+            }]
+            : []),
+        ...(props.showPinnedAgent
+            ? [{
+                title: props.pinnedAgent ? nls.localize('theia/ai/chat-ui/unpinAgent', 'Unpin Agent') : nls.localize('theia/ai/chat-ui/pinAgent', 'Pin Agent'),
+                handler: props.pinnedAgent ? props.onUnpin : handlePin,
+                className: 'at-icon',
+                text: {
+                    align: 'right',
+                    content: props.pinnedAgent && props.pinnedAgent.name
+                },
+            }]
+            : []),
+    ] as Option[];
 
     const rightOptions = inProgress
         ? [{
-            title: 'Cancel (Esc)',
+            title: nls.localize('theia/ai/chat-ui/cancel', 'Cancel (Esc)'),
             handler: () => {
                 const latestRequest = getLatestRequest(props.chatModel);
                 if (latestRequest) {
@@ -338,7 +503,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             className: 'codicon-stop-circle'
         }]
         : [{
-            title: 'Send (Enter)',
+            title: nls.localize('theia/ai/chat-ui/send', 'Send (Enter)'),
             handler: () => {
                 if (props.isEnabled) {
                     submit(editorRef.current?.document.textEditorModel.getValue() || '');
@@ -348,14 +513,19 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             disabled: isInputEmpty || !props.isEnabled
         }];
 
-    return <div className='theia-ChatInput'>
+    const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement);
+
+    return <div className='theia-ChatInput' onDragOver={props.onDragOver} onDrop={props.onDrop}    >
         {changeSetUI?.elements &&
             <ChangeSetBox changeSet={changeSetUI} />
         }
         <div className='theia-ChatInput-Editor-Box'>
             <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 ref={placeholderRef} className='theia-ChatInput-Editor-Placeholder'>{nls.localizeByDefault('Ask a question')}</div>
             </div>
+            {props.context && props.context.length > 0 &&
+                <ChatContext context={contextUI.context} />
+            }
             <ChatInputOptions leftOptions={leftOptions} rightOptions={rightOptions} />
         </div>
     </div>;
@@ -366,22 +536,28 @@ const noPropagation = (handler: () => void) => (e: React.MouseEvent) => {
     e.stopPropagation();
 };
 
-const buildChangeSetUI = (changeSet: ChangeSet, labelProvider: LabelProvider, onDeleteChangeSet: () => void, onDeleteChangeSetElement: (index: number) => void): ChangeSetUI => ({
+const buildChangeSetUI = (
+    changeSet: ChangeSet,
+    labelProvider: LabelProvider,
+    actions: ChangeSetActionRenderer[],
+    onDeleteChangeSet: () => void,
+    onDeleteChangeSetElement: (index: number) => void
+): ChangeSetUI => ({
     title: changeSet.title,
-    disabled: !hasPendingElementsToAccept(changeSet),
-    acceptAllPendingElements: () => acceptAllPendingElements(changeSet),
-    delete: () => onDeleteChangeSet(),
+    changeSet,
+    deleteChangeSet: onDeleteChangeSet,
     elements: changeSet.getElements().map(element => ({
-        open: element?.open?.bind(element),
+        open: element.open?.bind(element),
         iconClass: element.icon ?? labelProvider.getIcon(element.uri) ?? labelProvider.fileIcon,
         nameClass: `${element.type} ${element.state}`,
         name: element.name ?? labelProvider.getName(element.uri),
         additionalInfo: element.additionalInfo ?? labelProvider.getDetails(element.uri),
         openChange: element?.openChange?.bind(element),
-        accept: element.state !== 'applied' ? element?.accept?.bind(element) : undefined,
-        discard: element.state === 'applied' ? element?.discard?.bind(element) : undefined,
+        apply: element.state !== 'applied' ? element?.apply?.bind(element) : undefined,
+        revert: element.state === 'applied' || element.state === 'stale' ? element?.revert?.bind(element) : undefined,
         delete: () => onDeleteChangeSetElement(changeSet.getElements().indexOf(element))
-    }))
+    })),
+    actions
 });
 
 interface ChangeSetUIElement {
@@ -391,58 +567,69 @@ interface ChangeSetUIElement {
     additionalInfo: string;
     open?: () => void;
     openChange?: () => void;
-    accept?: () => void;
-    discard?: () => void;
+    apply?: () => void;
+    revert?: () => void;
     delete: () => void;
 }
 
 interface ChangeSetUI {
+    changeSet: ChangeSet;
     title: string;
-    disabled: boolean;
-    acceptAllPendingElements: () => void;
-    delete: () => void;
+    deleteChangeSet: () => void;
     elements: ChangeSetUIElement[];
+    actions: ChangeSetActionRenderer[];
 }
 
-const ChangeSetBox: React.FunctionComponent<{ changeSet: ChangeSetUI }> = ({ changeSet }) => (
+/** Memo because the parent element rerenders on every key press in the chat widget. */
+const ChangeSetBox: React.FunctionComponent<{ changeSet: ChangeSetUI }> = React.memo(({ changeSet: { changeSet, title, deleteChangeSet, elements, actions } }) => (
     <div className='theia-ChatInput-ChangeSet-Box'>
         <div className='theia-ChatInput-ChangeSet-Header'>
-            <h3>{changeSet.title}</h3>
+            <h3>{title}</h3>
             <div className='theia-ChatInput-ChangeSet-Header-Actions'>
-                <button
-                    className='theia-button'
-                    disabled={changeSet.disabled}
-                    title='Accept all pending changes'
-                    onClick={() => changeSet.acceptAllPendingElements()}
-                >
-                    Accept
-                </button>
-                <span className='codicon codicon-close action' title='Delete Change Set' onClick={() => changeSet.delete()} />
+                {actions.map(action => <div key={action.id} className='theia-changeSet-Action'>{action.render(changeSet)}</div>)}
+                <span className='codicon codicon-close action' title={nls.localize('theia/ai/chat-ui/deleteChangeSet', 'Delete Change Set')} onClick={() => deleteChangeSet()} />
             </div>
         </div>
         <div className='theia-ChatInput-ChangeSet-List'>
             <ul>
-                {changeSet.elements.map((element, index) => (
-                    <li key={index} title='Open Diff' onClick={() => element.openChange?.()}>
+                {elements.map((element, index) => (
+                    <li key={index} title={nls.localize('theia/ai/chat-ui/openDiff', 'Open Diff')} onClick={() => element.openChange?.()}>
                         <div className={`theia-ChatInput-ChangeSet-Icon ${element.iconClass}`} />
-                        <span className={`theia-ChatInput-ChangeSet-title ${element.nameClass}`}>
-                            {element.name}
-                        </span>
-                        <span className='theia-ChatInput-ChangeSet-additionalInfo'>
-                            {element.additionalInfo}
+                        <span className='theia-ChatInput-ChangeSet-labelParts'>
+                            <span className={`theia-ChatInput-ChangeSet-title ${element.nameClass}`}>
+                                {element.name}
+                            </span>
+                            <span className='theia-ChatInput-ChangeSet-additionalInfo'>
+                                {element.additionalInfo}
+                            </span>
                         </span>
                         <div className='theia-ChatInput-ChangeSet-Actions'>
-                            {element.open && (<span className='codicon codicon-file action' title='Open Original File' onClick={noPropagation(() => element.open!())} />)}
-                            {element.discard && (<span className='codicon codicon-discard action' title='Undo' onClick={noPropagation(() => element.discard!())} />)}
-                            {element.accept && (<span className='codicon codicon-check action' title='Accept' onClick={noPropagation(() => element.accept!())} />)}
-                            <span className='codicon codicon-close action' title='Delete' onClick={noPropagation(() => element.delete())} />
+                            {element.open && (
+                                <span
+                                    className='codicon codicon-file action'
+                                    title={nls.localize('theia/ai/chat-ui/openOriginalFile', 'Open Original File')}
+                                    onClick={noPropagation(() => element.open!())}
+                                />)}
+                            {element.revert && (
+                                <span
+                                    className='codicon codicon-discard action'
+                                    title={nls.localizeByDefault('Revert')}
+                                    onClick={noPropagation(() => element.revert!())}
+                                />)}
+                            {element.apply && (
+                                <span
+                                    className='codicon codicon-check action'
+                                    title={nls.localizeByDefault('Apply')}
+                                    onClick={noPropagation(() => element.apply!())}
+                                />)}
+                            <span className='codicon codicon-close action' title={nls.localizeByDefault('Delete')} onClick={noPropagation(() => element.delete())} />
                         </div>
                     </li>
                 ))}
             </ul>
         </div>
     </div>
-);
+));
 
 interface ChatInputOptionsProps {
     leftOptions: Option[];
@@ -454,6 +641,10 @@ interface Option {
     handler: () => void;
     className: string;
     disabled?: boolean;
+    text?: {
+        align?: 'left' | 'right';
+        content: string;
+    };
 }
 
 const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ leftOptions, rightOptions }) => (
@@ -462,38 +653,79 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ left
             {leftOptions.map((option, index) => (
                 <span
                     key={index}
-                    className={`codicon ${option.className} option ${option.disabled ? 'disabled' : ''}`}
+                    className={`option ${option.disabled ? 'disabled' : ''} ${option.text?.align === 'right' ? 'reverse' : ''}`}
                     title={option.title}
                     onClick={option.handler}
-                />
+                >
+                    <span>{option.text?.content}</span>
+                    <span className={`codicon ${option.className}`} />
+                </span>
             ))}
         </div>
         <div className="theia-ChatInputOptions-right">
             {rightOptions.map((option, index) => (
                 <span
                     key={index}
-                    className={`codicon ${option.className} option ${option.disabled ? 'disabled' : ''}`}
+                    className={`option ${option.disabled ? 'disabled' : ''} ${option.text?.align === 'right' ? 'reverse' : ''}`}
                     title={option.title}
                     onClick={option.handler}
-                />
+                >
+                    <span>{option.text?.content}</span>
+                    <span className={`codicon ${option.className}`} />
+                </span>
             ))}
         </div>
     </div>
 );
 
-function acceptAllPendingElements(changeSet: ChangeSet): void {
-    acceptablePendingElements(changeSet).forEach(e => e.accept!());
+function getLatestRequest(chatModel: ChatModel): ChatRequestModel | undefined {
+    const requests = chatModel.getRequests();
+    return requests.length > 0 ? requests[requests.length - 1] : undefined;
 }
 
-function hasPendingElementsToAccept(changeSet: ChangeSet): boolean | undefined {
-    return acceptablePendingElements(changeSet).length > 0;
+function buildContextUI(context: readonly 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),
+        }))
+    };
 }
 
-function acceptablePendingElements(changeSet: ChangeSet): ChangeSetElement[] {
-    return changeSet.getElements().filter(e => e.accept && (e.state === undefined || e.state === 'pending'));
+interface ChatContextUI {
+    context: {
+        name: string;
+        iconClass: string;
+        nameClass: string;
+        additionalInfo?: string;
+        details?: string;
+        delete: () => void;
+        open?: () => void;
+    }[];
 }
 
-function getLatestRequest(chatModel: ChatModel): ChatRequestModel | undefined {
-    const requests = chatModel.getRequests();
-    return requests.length > 0 ? requests[requests.length - 1] : undefined;
-}
+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={nls.localizeByDefault('Delete')} onClick={() => element.delete()} />
+                </li>
+            ))}
+        </ul>
+    </div>
+);