@theia/ai-chat-ui 1.63.0-next.0 → 1.63.0-next.52

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

@@ -13,22 +13,26 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { ChangeSet, ChatAgent, ChatChangeEvent, ChatModel, ChatRequestModel, ChatService, ChatSuggestion } from '@theia/ai-chat';
-import { Disposable, DisposableCollection, InMemoryResources, URI, nls } from '@theia/core';
+import {
+    ChangeSet, ChangeSetElement, ChatAgent, ChatChangeEvent, ChatHierarchyBranch,
+    ChatModel, ChatRequestModel, ChatService, ChatSuggestion, EditableChatRequestModel
+} from '@theia/ai-chat';
+import { ChangeSetDecoratorService } from '@theia/ai-chat/lib/browser/change-set-decorator-service';
+import { ImageContextVariable } from '@theia/ai-chat/lib/common/image-context-variable';
+import { AIVariableResolutionRequest } from '@theia/ai-core';
+import { FrontendVariableService } from '@theia/ai-core/lib/browser';
+import { DisposableCollection, InMemoryResources, URI, nls } from '@theia/core';
 import { ContextMenuRenderer, LabelProvider, Message, OpenerService, 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';
 import * as React from '@theia/core/shared/react';
 import { IMouseEvent } from '@theia/monaco-editor-core';
-import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-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 { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
 import { ChangeSetActionRenderer, ChangeSetActionService } from './change-set-actions/change-set-action-service';
-import { ChangeSetDecoratorService } from '@theia/ai-chat/lib/browser/change-set-decorator-service';
 import { ChatInputAgentSuggestions } from './chat-input-agent-suggestions';
+import { CHAT_VIEW_LANGUAGE_EXTENSION } from './chat-view-language-contribution';
+import { ContextVariablePicker } from './context-variable-picker';
 
 type Query = (query: string) => Promise<void>;
 type Unpin = () => void;
@@ -88,6 +92,14 @@ export class AIChatInputWidget extends ReactWidget {
 
     protected isEnabled = false;
 
+    private _branch?: ChatHierarchyBranch;
+    set branch(branch: ChatHierarchyBranch | undefined) {
+        if (this._branch !== branch) {
+            this._branch = branch;
+            this.update();
+        }
+    }
+
     private _onQuery: Query;
     set onQuery(query: Query) {
         this._onQuery = query;
@@ -120,7 +132,7 @@ export class AIChatInputWidget extends ReactWidget {
         this.onDisposeForChatModel.dispose();
         this.onDisposeForChatModel = new DisposableCollection();
         this.onDisposeForChatModel.push(chatModel.onDidChange(event => {
-            if (event.kind === 'addVariable' || event.kind === 'removeVariable') {
+            if (event.kind === 'addVariable' || event.kind === 'removeVariable' || event.kind === 'addRequest' || event.kind === 'changeHierarchyBranch') {
                 this.update();
             }
         }));
@@ -137,6 +149,7 @@ export class AIChatInputWidget extends ReactWidget {
     protected init(): void {
         this.id = AIChatInputWidget.ID;
         this.title.closable = false;
+        this.toDispose.push(this.resources.add(this.getResourceUri(), ''));
         this.update();
     }
 
@@ -154,24 +167,36 @@ export class AIChatInputWidget extends ReactWidget {
     }
 
     protected render(): React.ReactNode {
+        const branch = this._branch;
+        const chatModel = this._chatModel;
+
+        // State of the input widget's action buttons depends on the state of the currently active or last processed
+        // request, if there is one. If the chat model has branched, then the current request is the last on the
+        // branch. Otherwise, it's the last request in the chat model.
+        const currentRequest: ChatRequestModel | undefined = branch?.items?.at(-1)?.element ?? chatModel.getRequests().at(-1);
+        const isEditing = !!(currentRequest && (EditableChatRequestModel.isEditing(currentRequest)));
+        const isPending = () => !!(currentRequest && !isEditing && ChatRequestModel.isInProgress(currentRequest));
+        const pending = isPending();
+
         return (
             <ChatInput
+                branch={this._branch}
                 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)}
+                onPaste={this.onPaste.bind(this)}
                 onDeleteChangeSet={this._onDeleteChangeSet.bind(this)}
                 onDeleteChangeSetElement={this._onDeleteChangeSetElement.bind(this)}
                 onAddContextElement={this.addContextElement.bind(this)}
                 onDeleteContextElement={this.deleteContextElement.bind(this)}
-                context={this.getContext()}
                 onOpenContextElement={this.openContextElement.bind(this)}
+                context={this.getContext()}
                 chatModel={this._chatModel}
                 pinnedAgent={this._pinnedAgent}
                 editorProvider={this.editorProvider}
-                resources={this.resources}
-                resourceUriProvider={this.getResourceUri.bind(this)}
+                uri={this.getResourceUri()}
                 contextMenuCallback={this.handleContextMenu.bind(this)}
                 isEnabled={this.isEnabled}
                 setEditorRef={editor => {
@@ -188,6 +213,14 @@ export class AIChatInputWidget extends ReactWidget {
                 initialValue={this._initialValue}
                 openerService={this.openerService}
                 suggestions={this._chatModel.suggestions}
+                currentRequest={currentRequest}
+                isEditing={isEditing}
+                pending={pending}
+                onResponseChanged={() => {
+                    if (isPending() !== pending) {
+                        this.update();
+                    }
+                }}
             />
         );
     }
@@ -226,6 +259,26 @@ export class AIChatInputWidget extends ReactWidget {
         });
     }
 
+    protected onPaste(event: ClipboardEvent): void {
+        this.variableService.getPasteResult(event, { type: 'ai-chat-input-widget' }).then(result => {
+            result.variables.forEach(variable => this.addContext(variable));
+            if (result.text) {
+                const position = this.editorRef?.getControl().getPosition();
+                if (position && result.text) {
+                    this.editorRef?.getControl().executeEdits('paste', [{
+                        range: {
+                            startLineNumber: position.lineNumber,
+                            startColumn: position.column,
+                            endLineNumber: position.lineNumber,
+                            endColumn: position.column
+                        },
+                        text: result.text
+                    }]);
+                }
+            }
+        });
+    }
+
     protected async openContextElement(request: AIVariableResolutionRequest): Promise<void> {
         const session = this.chatService.getSessions().find(candidate => candidate.model.id === this._chatModel.id);
         const context = { session };
@@ -269,13 +322,15 @@ export class AIChatInputWidget extends ReactWidget {
 }
 
 interface ChatInputProperties {
+    branch?: ChatHierarchyBranch;
     onCancel: (requestModel: ChatRequestModel) => void;
     onQuery: (query: string) => void;
     onUnpin: () => void;
     onDragOver: (event: React.DragEvent) => void;
     onDrop: (event: React.DragEvent) => void;
+    onPaste: (event: ClipboardEvent) => void;
     onDeleteChangeSet: (sessionId: string) => void;
-    onDeleteChangeSetElement: (sessionId: string, index: number) => void;
+    onDeleteChangeSetElement: (sessionId: string, uri: URI) => void;
     onAddContextElement: () => void;
     onDeleteContextElement: (index: number) => void;
     onOpenContextElement: OpenContextElement;
@@ -284,8 +339,7 @@ interface ChatInputProperties {
     chatModel: ChatModel;
     pinnedAgent?: ChatAgent;
     editorProvider: MonacoEditorProvider;
-    resources: InMemoryResources;
-    resourceUriProvider: () => URI;
+    uri: URI;
     contextMenuCallback: (event: IMouseEvent) => void;
     setEditorRef: (editor: SimpleMonacoEditor | undefined) => void;
     showContext?: boolean;
@@ -297,37 +351,55 @@ interface ChatInputProperties {
     decoratorService: ChangeSetDecoratorService;
     initialValue?: string;
     openerService: OpenerService;
-    suggestions: readonly ChatSuggestion[]
+    suggestions: readonly ChatSuggestion[];
+    currentRequest?: ChatRequestModel;
+    isEditing: boolean;
+    pending: boolean;
+    onResponseChanged: () => void;
 }
 
 const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInputProperties) => {
     const onDeleteChangeSet = () => props.onDeleteChangeSet(props.chatModel.id);
-    const onDeleteChangeSetElement = (index: number) => props.onDeleteChangeSetElement(props.chatModel.id, index);
+    const onDeleteChangeSetElement = (uri: URI) => props.onDeleteChangeSetElement(props.chatModel.id, uri);
 
-    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,
-                props.decoratorService,
-                props.actionService.getActionsForChangeset(props.chatModel.changeSet),
-                onDeleteChangeSet,
-                onDeleteChangeSetElement
-            )
-            : undefined
-    );
+        () => buildChangeSetUI(
+            props.chatModel.changeSet,
+            props.labelProvider,
+            props.decoratorService,
+            props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+            onDeleteChangeSet,
+            onDeleteChangeSetElement
+        ));
 
     // eslint-disable-next-line no-null/no-null
     const editorContainerRef = React.useRef<HTMLDivElement | null>(null);
     // eslint-disable-next-line no-null/no-null
     const placeholderRef = React.useRef<HTMLDivElement | null>(null);
     const editorRef = React.useRef<SimpleMonacoEditor | undefined>(undefined);
+    // eslint-disable-next-line no-null/no-null
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    // Handle paste events on the container
+    const handlePaste = React.useCallback((event: ClipboardEvent) => {
+        props.onPaste(event);
+    }, [props.onPaste]);
+
+    // Set up paste handler on the container div
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (container) {
+            container.addEventListener('paste', handlePaste, true);
+            return () => {
+                container.removeEventListener('paste', handlePaste, true);
+            };
+        }
+        return undefined;
+    }, [handlePaste]);
 
     React.useEffect(() => {
-        const uri = props.resourceUriProvider();
-        const resource = props.resources.add(uri, '');
+        const uri = props.uri;
         const createInputElement = async () => {
             const paddingTop = 6;
             const lineHeight = 20;
@@ -403,7 +475,6 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         createInputElement();
 
         return () => {
-            resource.dispose();
             props.setEditorRef(undefined);
             if (editorRef.current) {
                 editorRef.current.dispose();
@@ -411,66 +482,42 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         };
     }, []);
 
-    const responseListenerRef = React.useRef<Disposable>();
-    // track chat model updates to keep our UI in sync
-    // - keep "inProgress" in sync with the request state
-    // - keep "changeSetUI" in sync with the change set
     React.useEffect(() => {
+        setChangeSetUI(buildChangeSetUI(
+            props.chatModel.changeSet,
+            props.labelProvider,
+            props.decoratorService,
+            props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+            onDeleteChangeSet,
+            onDeleteChangeSetElement
+        ));
         const listener = props.chatModel.onDidChange(event => {
-            if (event.kind === 'addRequest') {
-                if (event.request) {
-                    setInProgress(ChatRequestModel.isInProgress(event.request));
-                }
-                responseListenerRef.current?.dispose();
-                responseListenerRef.current = event.request.response.onDidChange(() =>
-                    setInProgress(ChatRequestModel.isInProgress(event.request))
-                );
-            } else if (ChatChangeEvent.isChangeSetEvent(event)) {
-                if (event.kind === 'removeChangeSet') {
-                    setChangeSetUI(undefined);
-                } else if (event.kind === 'setChangeSet' || 'updateChangeSet') {
-                    setChangeSetUI(buildChangeSetUI(
-                        event.changeSet,
-                        props.labelProvider,
-                        props.decoratorService,
-                        props.actionService.getActionsForChangeset(event.changeSet),
-                        onDeleteChangeSet,
-                        onDeleteChangeSetElement
-                    ));
-                }
+            if (ChatChangeEvent.isChangeSetEvent(event)) {
+                setChangeSetUI(buildChangeSetUI(
+                    props.chatModel.changeSet,
+                    props.labelProvider,
+                    props.decoratorService,
+                    props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+                    onDeleteChangeSet,
+                    onDeleteChangeSetElement
+                ));
             }
         });
-        setChangeSetUI(props.chatModel.changeSet
-            ? buildChangeSetUI(
-                props.chatModel.changeSet,
-                props.labelProvider,
-                props.decoratorService,
-                props.actionService.getActionsForChangeset(props.chatModel.changeSet),
-                onDeleteChangeSet,
-                onDeleteChangeSetElement
-            )
-            : undefined);
         return () => {
-            listener?.dispose();
-            responseListenerRef.current?.dispose();
-            responseListenerRef.current = undefined;
+            listener.dispose();
         };
-    }, [props.chatModel]);
+    }, [props.chatModel, props.labelProvider, props.decoratorService, props.actionService]);
 
     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();
-    });
+    }, [props.actionService, props.chatModel.changeSet]);
 
     React.useEffect(() => {
         const disposable = props.decoratorService.onDidChangeDecorations(() => {
-            if (!props.chatModel.changeSet) {
-                return;
-            }
             setChangeSetUI(buildChangeSetUI(
                 props.chatModel.changeSet,
                 props.labelProvider,
@@ -493,9 +540,13 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         if (!value || value.trim().length === 0) {
             return;
         }
-        setInProgress(true);
+
         props.onQuery(value);
         setValue('');
+
+        if (editorRef.current) {
+            editorRef.current.document.textEditorModel.setValue('');
+        }
     }, [props.context, props.onQuery, setValue]);
 
     const onKeyDown = React.useCallback((event: React.KeyboardEvent) => {
@@ -571,19 +622,38 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             : []),
     ] as Option[];
 
-    const rightOptions = inProgress
-        ? [{
+    let rightOptions: Option[] = [];
+    const { currentRequest: latestRequest, isEditing, pending, onResponseChanged } = props;
+    React.useEffect(() => {
+        if (!latestRequest) {
+            return;
+        }
+        const disposable = latestRequest.response.onDidChange(onResponseChanged);
+        return () => disposable.dispose();
+    }, [latestRequest, onResponseChanged]);
+    if (isEditing) {
+        rightOptions = [{
+            title: nls.localize('theia/ai/chat-ui/send', 'Send (Enter)'),
+            handler: () => {
+                if (props.isEnabled) {
+                    submit(editorRef.current?.document.textEditorModel.getValue() || '');
+                }
+            },
+            className: 'codicon-send',
+            disabled: isInputEmpty || !props.isEnabled
+        }];
+    } else if (pending) {
+        rightOptions = [{
             title: nls.localize('theia/ai/chat-ui/cancel', 'Cancel (Esc)'),
             handler: () => {
-                const latestRequest = getLatestRequest(props.chatModel);
                 if (latestRequest) {
                     props.onCancel(latestRequest);
                 }
-                setInProgress(false);
             },
             className: 'codicon-stop-circle'
-        }]
-        : [{
+        }];
+    } else {
+        rightOptions = [{
             title: nls.localize('theia/ai/chat-ui/send', 'Send (Enter)'),
             handler: () => {
                 if (props.isEnabled) {
@@ -593,24 +663,27 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             className: 'codicon-send',
             disabled: isInputEmpty || !props.isEnabled
         }];
+    }
 
     const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement, props.onOpenContextElement);
 
-    return <div className='theia-ChatInput' onDragOver={props.onDragOver} onDrop={props.onDrop}    >
-        {props.showSuggestions !== false && <ChatInputAgentSuggestions suggestions={props.suggestions} opener={props.openerService} />}
-        {props.showChangeSet && 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'>{nls.localizeByDefault('Ask a question')}</div>
-            </div>
-            {props.context && props.context.length > 0 &&
-                <ChatContext context={contextUI.context} />
+    return (
+        <div className='theia-ChatInput' onDragOver={props.onDragOver} onDrop={props.onDrop} ref={containerRef}>
+            {props.showSuggestions !== false && <ChatInputAgentSuggestions suggestions={props.suggestions} opener={props.openerService} />}
+            {props.showChangeSet && changeSetUI?.elements &&
+                <ChangeSetBox changeSet={changeSetUI} />
             }
-            <ChatInputOptions leftOptions={leftOptions} rightOptions={rightOptions} />
+            <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'>{nls.localizeByDefault('Ask a question')}</div>
+                </div>
+                {props.context && props.context.length > 0 &&
+                    <ChatContext context={contextUI.context} />
+                }
+                <ChatInputOptions leftOptions={leftOptions} rightOptions={rightOptions} />
+            </div>
         </div>
-    </div>;
+    );
 };
 
 const noPropagation = (handler: () => void) => (e: React.MouseEvent) => {
@@ -624,28 +697,21 @@ const buildChangeSetUI = (
     decoratorService: ChangeSetDecoratorService,
     actions: ChangeSetActionRenderer[],
     onDeleteChangeSet: () => void,
-    onDeleteChangeSetElement: (index: number) => void
-): ChangeSetUI => ({
-    title: changeSet.title,
-    changeSet,
-    deleteChangeSet: onDeleteChangeSet,
-    elements: changeSet.getElements().map(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),
-        additionalInfoSuffixIcon: decoratorService.getAdditionalInfoSuffixIcon(element),
-        openChange: element?.openChange?.bind(element),
-        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))
-    } satisfies ChangeSetUIElement)),
-    actions
-});
+    onDeleteChangeSetElement: (uri: URI) => void
+): ChangeSetUI | undefined => {
+    const elements = changeSet.getElements();
+    return elements.length ? ({
+        title: changeSet.title,
+        changeSet,
+        deleteChangeSet: onDeleteChangeSet,
+        elements: changeSet.getElements().map(element => toUiElement(element, onDeleteChangeSetElement, labelProvider, decoratorService)),
+        actions
+    }) : undefined;
+};
 
 interface ChangeSetUIElement {
     name: string;
+    uri: string;
     iconClass: string;
     nameClass: string;
     additionalInfo: string;
@@ -677,48 +743,70 @@ const ChangeSetBox: React.FunctionComponent<{ changeSet: ChangeSetUI }> = React.
         </div>
         <div className='theia-ChatInput-ChangeSet-List'>
             <ul>
-                {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}`}>
-                        </div>
-                        <div className='theia-ChatInput-ChangeSet-labelParts'>
-                            <span className={`theia-ChatInput-ChangeSet-title ${element.nameClass}`}>
-                                {element.name}
-                            </span>
-                            <div className='theia-ChatInput-ChangeSet-additionalInfo'>
-                                {element.additionalInfo && <span>{element.additionalInfo}</span>}
-                                {element.additionalInfoSuffixIcon
-                                    && <div className={`theia-ChatInput-ChangeSet-AdditionalInfo-SuffixIcon ${element.additionalInfoSuffixIcon.join(' ')}`}></div>}
-                            </div>
-                        </div>
-                        <div className='theia-ChatInput-ChangeSet-Actions'>
-                            {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>
-                ))}
+                {elements.map(element => ChangeSetElement(element))}
             </ul>
         </div>
     </div>
 ));
 
+function toUiElement(element: ChangeSetElement,
+    onDeleteChangeSetElement: (uri: URI) => void,
+    labelProvider: LabelProvider,
+    decoratorService: ChangeSetDecoratorService
+): ChangeSetUIElement {
+    return ({
+        open: element.open?.bind(element),
+        uri: element.uri.toString(),
+        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),
+        additionalInfoSuffixIcon: decoratorService.getAdditionalInfoSuffixIcon(element),
+        openChange: element?.openChange?.bind(element),
+        apply: element.state !== 'applied' ? element?.apply?.bind(element) : undefined,
+        revert: element.state === 'applied' || element.state === 'stale' ? element?.revert?.bind(element) : undefined,
+        delete: () => onDeleteChangeSetElement(element.uri)
+    } satisfies ChangeSetUIElement);
+}
+
+const ChangeSetElement: React.FC<ChangeSetUIElement> = element => (
+    <li key={element.uri} title={nls.localize('theia/ai/chat-ui/openDiff', 'Open Diff')} onClick={() => element.openChange?.()}>
+        <div className={`theia-ChatInput-ChangeSet-Icon ${element.iconClass}`}>
+        </div>
+        <div className='theia-ChatInput-ChangeSet-labelParts'>
+            <span className={`theia-ChatInput-ChangeSet-title ${element.nameClass}`}>
+                {element.name}
+            </span>
+            <div className='theia-ChatInput-ChangeSet-additionalInfo'>
+                {element.additionalInfo && <span>{element.additionalInfo}</span>}
+                {element.additionalInfoSuffixIcon
+                    && <div className={`theia-ChatInput-ChangeSet-AdditionalInfo-SuffixIcon ${element.additionalInfoSuffixIcon.join(' ')}`}></div>}
+            </div>
+        </div>
+        <div className='theia-ChatInput-ChangeSet-Actions'>
+            {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>
+);
+
 interface ChatInputOptionsProps {
     leftOptions: Option[];
     rightOptions: Option[];
@@ -766,11 +854,6 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ left
     </div>
 );
 
-function getLatestRequest(chatModel: ChatModel): ChatRequestModel | undefined {
-    const requests = chatModel.getRequests();
-    return requests.length > 0 ? requests[requests.length - 1] : undefined;
-}
-
 function buildContextUI(
     context: readonly AIVariableResolutionRequest[] | undefined,
     labelProvider: LabelProvider,
@@ -782,6 +865,7 @@ function buildContextUI(
     }
     return {
         context: context.map((element, index) => ({
+            variable: element,
             name: labelProvider.getName(element),
             iconClass: labelProvider.getIcon(element),
             nameClass: element.variable.name,
@@ -795,6 +879,7 @@ function buildContextUI(
 
 interface ChatContextUI {
     context: {
+        variable: AIVariableResolutionRequest,
         name: string;
         iconClass: string;
         nameClass: string;
@@ -808,20 +893,45 @@ interface ChatContextUI {
 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}`} />
-                    <div className="theia-ChatInput-ChatContext-labelParts">
-                        <span className={`theia-ChatInput-ChatContext-title ${element.nameClass}`}>
-                            {element.name}
-                        </span>
-                        <span className='theia-ChatInput-ChatContext-additionalInfo'>
-                            {element.additionalInfo}
-                        </span>
+            {context.map((element, index) => {
+                if (ImageContextVariable.isImageContextRequest(element.variable)) {
+                    const variable = ImageContextVariable.parseRequest(element.variable)!;
+                    return <li key={index} className="theia-ChatInput-ChatContext-Element theia-ChatInput-ImageContext-Element"
+                        title={variable.name ?? variable.wsRelativePath} onClick={() => element.open?.()}>
+                        <div className="theia-ChatInput-ChatContext-Row">
+                            <div className={`theia-ChatInput-ChatContext-Icon ${element.iconClass}`} />
+                            <div className="theia-ChatInput-ChatContext-labelParts">
+                                <span className={`theia-ChatInput-ChatContext-title ${element.nameClass}`}>
+                                    {variable.name ?? variable.wsRelativePath?.split('/').pop()}
+                                </span>
+                                <span className='theia-ChatInput-ChatContext-additionalInfo'>
+                                    {element.additionalInfo}
+                                </span>
+                            </div>
+                            <span className="codicon codicon-close action" title={nls.localizeByDefault('Delete')} onClick={e => { e.stopPropagation(); element.delete(); }} />
+                        </div>
+                        <div className="theia-ChatInput-ChatContext-ImageRow">
+                            <div className='theia-ChatInput-ImagePreview-Item'>
+                                <img src={`data:${variable.mimeType};base64,${variable.data}`} alt={variable.name} />
+                            </div>
+                        </div>
+                    </li>;
+                }
+                return <li key={index} className="theia-ChatInput-ChatContext-Element" title={element.details} onClick={() => element.open?.()}>
+                    <div className="theia-ChatInput-ChatContext-Row">
+                        <div className={`theia-ChatInput-ChatContext-Icon ${element.iconClass}`} />
+                        <div className="theia-ChatInput-ChatContext-labelParts">
+                            <span className={`theia-ChatInput-ChatContext-title ${element.nameClass}`}>
+                                {element.name}
+                            </span>
+                            <span className='theia-ChatInput-ChatContext-additionalInfo'>
+                                {element.additionalInfo}
+                            </span>
+                        </div>
+                        <span className="codicon codicon-close action" title={nls.localizeByDefault('Delete')} onClick={e => { e.stopPropagation(); element.delete(); }} />
                     </div>
-                    <span className="codicon codicon-close action" title={nls.localizeByDefault('Delete')} onClick={e => { e.stopPropagation(); element.delete(); }} />
-                </li>
-            ))}
+                </li>;
+            })}
         </ul>
     </div>
 );