@theia/ai-chat 1.63.0-next.24 → 1.63.0

package/src/browser/change-set-file-element.ts

@@ -14,16 +14,29 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { DisposableCollection, Emitter, URI } from '@theia/core';
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
-import { Replacement } from '@theia/core/lib/common/content-replacer';
 import { ConfigurableInMemoryResources, ConfigurableMutableReferenceResource } from '@theia/ai-core';
+import { CancellationToken, DisposableCollection, Emitter, URI } from '@theia/core';
+import { ConfirmDialog } from '@theia/core/lib/browser';
+import { Replacement } from '@theia/core/lib/common/content-replacer';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { EditorPreferences } from '@theia/editor/lib/browser';
+import { FileSystemPreferences } from '@theia/filesystem/lib/browser';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { IReference } from '@theia/monaco-editor-core/esm/vs/base/common/lifecycle';
+import { TrimTrailingWhitespaceCommand } from '@theia/monaco-editor-core/esm/vs/editor/common/commands/trimTrailingWhitespaceCommand';
+import { Selection } from '@theia/monaco-editor-core/esm/vs/editor/common/core/selection';
+import { CommandExecutor } from '@theia/monaco-editor-core/esm/vs/editor/common/cursor/cursor';
+import { formatDocumentWithSelectedProvider, FormattingMode } from '@theia/monaco-editor-core/esm/vs/editor/contrib/format/browser/format';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+import { IInstantiationService } from '@theia/monaco-editor-core/esm/vs/platform/instantiation/common/instantiation';
+import { MonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
+import { insertFinalNewline } from '@theia/monaco/lib/browser/monaco-utilities';
+import { MonacoEditorModel } from '@theia/monaco/lib/browser/monaco-editor-model';
 import { ChangeSetElement } from '../common';
 import { createChangeSetFileUri } from './change-set-file-resource';
 import { ChangeSetFileService } from './change-set-file-service';
-import { FileService } from '@theia/filesystem/lib/browser/file-service';
-import { ConfirmDialog } from '@theia/core/lib/browser';
-import { ChangeSetDecoratorService } from './change-set-decorator-service';
+import { Deferred } from '@theia/core/lib/common/promise-util';
+import { MonacoCodeActionService } from '@theia/monaco/lib/browser';
 
 export const ChangeSetFileElementFactory = Symbol('ChangeSetFileElementFactory');
 export type ChangeSetFileElementFactory = (elementProps: ChangeSetElementArgs) => ChangeSetFileElement;
@@ -62,35 +75,70 @@ export class ChangeSetFileElement implements ChangeSetElement {
     @inject(ChangeSetFileService)
     protected readonly changeSetFileService: ChangeSetFileService;
 
-    @inject(ChangeSetDecoratorService)
-    protected readonly changeSetDecoratorService: ChangeSetDecoratorService;
-
     @inject(FileService)
     protected readonly fileService: FileService;
 
     @inject(ConfigurableInMemoryResources)
     protected readonly inMemoryResources: ConfigurableInMemoryResources;
 
-    @inject(ChangeSetFileElementFactory) protected readonly factory: ChangeSetFileElementFactory;
+    @inject(MonacoTextModelService)
+    protected readonly monacoTextModelService: MonacoTextModelService;
+
+    @inject(EditorPreferences)
+    protected readonly editorPreferences: EditorPreferences;
+
+    @inject(FileSystemPreferences)
+    protected readonly fileSystemPreferences: FileSystemPreferences;
+
+    @inject(MonacoCodeActionService)
+    protected readonly codeActionService: MonacoCodeActionService;
 
     protected readonly toDispose = new DisposableCollection();
     protected _state: ChangeSetElementState;
 
-    protected originalContent: string | undefined;
+    private _originalContent: string | undefined;
+    protected _initialized = false;
+    protected _initializationPromise: Promise<void> | undefined;
+    protected _targetStateWithCodeActions: string | undefined;
+    protected codeActionDeferred?: Deferred<string>;
 
     protected readonly onDidChangeEmitter = new Emitter<void>();
     readonly onDidChange = this.onDidChangeEmitter.event;
-    protected _readOnlyResource: ConfigurableMutableReferenceResource;
-    protected _changeResource: ConfigurableMutableReferenceResource;
+    protected _readOnlyResource?: ConfigurableMutableReferenceResource;
+    protected _changeResource?: ConfigurableMutableReferenceResource;
 
     @postConstruct()
     init(): void {
+        this._initializationPromise = this.initializeAsync();
         this.toDispose.push(this.onDidChangeEmitter);
     }
 
+    protected async initializeAsync(): Promise<void> {
+        await this.obtainOriginalContent();
+        this.listenForOriginalFileChanges();
+        this._initialized = true;
+    }
+
+    /**
+     * Ensures that the element is fully initialized before proceeding.
+     * This includes loading the original content from the file system.
+     */
+    async ensureInitialized(): Promise<void> {
+        await this._initializationPromise;
+    }
+
+    /**
+     * Returns true if the element has been fully initialized.
+     */
+    get isInitialized(): boolean {
+        return this._initialized;
+    }
+
     protected async obtainOriginalContent(): Promise<void> {
-        this.originalContent = await this.changeSetFileService.read(this.uri);
-        this.readOnlyResource.update({ contents: this.originalContent ?? '' });
+        this._originalContent = await this.changeSetFileService.read(this.uri);
+        if (this._readOnlyResource) {
+            this.readOnlyResource.update({ contents: this._originalContent ?? '' });
+        }
     }
 
     protected getInMemoryUri(uri: URI): ConfigurableMutableReferenceResource {
@@ -100,10 +148,14 @@ export class ChangeSetFileElement implements ChangeSetElement {
     protected listenForOriginalFileChanges(): void {
         this.toDispose.push(this.fileService.onDidFilesChange(async event => {
             if (!event.contains(this.uri)) { return; }
+            if (!this._initialized && this._initializationPromise) {
+                // make sure we are initialized
+                await this._initializationPromise;
+            }
             // If we are applied, the tricky thing becomes the question what to revert to; otherwise, what to apply.
             const newContent = await this.changeSetFileService.read(this.uri).catch(() => '');
             this.readOnlyResource.update({ contents: newContent });
-            if (newContent === this.originalContent) {
+            if (newContent === this._originalContent) {
                 this.state = 'pending';
             } else if (newContent === this.targetState) {
                 this.state = 'applied';
@@ -120,10 +172,19 @@ export class ChangeSetFileElement implements ChangeSetElement {
     protected get readOnlyResource(): ConfigurableMutableReferenceResource {
         if (!this._readOnlyResource) {
             this._readOnlyResource = this.getInMemoryUri(ChangeSetFileElement.toReadOnlyUri(this.uri, this.elementProps.chatSessionId));
-            this._readOnlyResource.update({ autosaveable: false, readOnly: true });
+            this._readOnlyResource.update({
+                autosaveable: false,
+                readOnly: true,
+                contents: this._originalContent ?? ''
+            });
             this.toDispose.push(this._readOnlyResource);
-            this.obtainOriginalContent();
-            this.listenForOriginalFileChanges();
+
+            // If not yet initialized, update the resource once initialization completes
+            if (!this._initialized) {
+                this._initializationPromise?.then(() => {
+                    this._readOnlyResource?.update({ contents: this._originalContent ?? '' });
+                });
+            }
         }
         return this._readOnlyResource;
     }
@@ -135,7 +196,8 @@ export class ChangeSetFileElement implements ChangeSetElement {
     protected get changeResource(): ConfigurableMutableReferenceResource {
         if (!this._changeResource) {
             this._changeResource = this.getInMemoryUri(createChangeSetFileUri(this.elementProps.chatSessionId, this.uri));
-            this._changeResource.update({ autosaveable: false });
+            this._changeResource.update({ autosaveable: false, contents: this.targetState });
+            this.applyCodeActionsToTargetState();
             this.toDispose.push(this._changeResource);
         }
         return this._changeResource;
@@ -180,15 +242,37 @@ export class ChangeSetFileElement implements ChangeSetElement {
         return this.elementProps.data;
     };
 
+    get originalContent(): string | undefined {
+        if (!this._initialized && this._initializationPromise) {
+            console.warn('Accessing originalContent before initialization is complete. Consider using async methods.');
+        }
+        return this._originalContent;
+    }
+
+    /**
+     * Gets the original content of the file asynchronously.
+     * Ensures initialization is complete before returning the content.
+     */
+    async getOriginalContent(): Promise<string | undefined> {
+        await this.ensureInitialized();
+        return this._originalContent;
+    }
+
     get targetState(): string {
+        return this._targetStateWithCodeActions ?? this.elementProps.targetState ?? '';
+    }
+
+    get originalTargetState(): string {
         return this.elementProps.targetState ?? '';
     }
 
     async open(): Promise<void> {
+        await this.ensureInitialized();
         this.changeSetFileService.open(this);
     }
 
     async openChange(): Promise<void> {
+        await this.ensureInitialized();
         this.changeSetFileService.openDiff(
             this.readOnlyUri,
             this.changedUri
@@ -196,15 +280,18 @@ export class ChangeSetFileElement implements ChangeSetElement {
     }
 
     async apply(contents?: string): Promise<void> {
+        await this.ensureInitialized();
         if (!await this.confirm('Apply')) { return; }
-        if (!(await this.changeSetFileService.trySave(this.changedUri))) {
-            if (this.type === 'delete') {
-                await this.changeSetFileService.delete(this.uri);
-                this.state = 'applied';
-            } else {
-                await this.writeChanges(contents);
-            }
+
+        if (this.type === 'delete') {
+            await this.changeSetFileService.delete(this.uri);
+            this.state = 'applied';
+            this.changeSetFileService.closeDiff(this.readOnlyUri);
+            return;
         }
+
+        // Load Monaco model for the base file URI and apply changes
+        await this.applyChangesWithMonaco(contents);
         this.changeSetFileService.closeDiff(this.readOnlyUri);
     }
 
@@ -213,28 +300,145 @@ export class ChangeSetFileElement implements ChangeSetElement {
         this.state = 'applied';
     }
 
+    /**
+     * Applies changes using Monaco utilities, including loading the model for the base file URI,
+     * setting the value to the intended state, and running code actions on save.
+     */
+    protected async applyChangesWithMonaco(contents?: string): Promise<void> {
+        let modelReference: IReference<MonacoEditorModel> | undefined;
+
+        try {
+            modelReference = await this.monacoTextModelService.createModelReference(this.uri);
+            const model = modelReference.object;
+            const targetContent = contents ?? this.targetState;
+            model.textEditorModel.setValue(targetContent);
+
+            const languageId = model.languageId;
+            const uriStr = this.uri.toString();
+
+            await this.codeActionService.applyOnSaveCodeActions(model.textEditorModel, languageId, uriStr, CancellationToken.None);
+            await this.applyFormatting(model, languageId, uriStr);
+
+            await model.save();
+            this.state = 'applied';
+
+        } catch (error) {
+            console.error('Failed to apply changes with Monaco:', error);
+            await this.writeChanges(contents);
+        } finally {
+            modelReference?.dispose();
+        }
+    }
+
+    protected applyCodeActionsToTargetState(): Promise<string> {
+        if (!this.codeActionDeferred) {
+            this.codeActionDeferred = new Deferred();
+            this.codeActionDeferred.resolve(this.doApplyCodeActionsToTargetState());
+        }
+        return this.codeActionDeferred.promise;
+    }
+
+    protected async doApplyCodeActionsToTargetState(): Promise<string> {
+        const targetState = this.originalTargetState;
+        if (!targetState) {
+            this._targetStateWithCodeActions = '';
+            return this._targetStateWithCodeActions;
+        }
+
+        let tempResource: ConfigurableMutableReferenceResource | undefined;
+        let tempModel: IReference<MonacoEditorModel> | undefined;
+        try {
+            // Create a temporary model to apply code actions
+            const tempUri = new URI(`untitled://changeset/${Date.now()}${this.uri.path.ext}`);
+            tempResource = this.inMemoryResources.add(tempUri, { contents: this.targetState });
+            tempModel = await this.monacoTextModelService.createModelReference(tempUri);
+            tempModel.object.suppressOpenEditorWhenDirty = true;
+            tempModel.object.textEditorModel.setValue(this.targetState);
+
+            const languageId = tempModel.object.languageId;
+            const uriStr = this.uri.toString();
+
+            await this.codeActionService.applyOnSaveCodeActions(tempModel.object.textEditorModel, languageId, uriStr, CancellationToken.None);
+
+            // Apply formatting and other editor preferences
+            await this.applyFormatting(tempModel.object, languageId, uriStr);
+
+            this._targetStateWithCodeActions = tempModel.object.textEditorModel.getValue();
+            if (this._changeResource?.contents === this.elementProps.targetState) {
+                this._changeResource?.update({ contents: this.targetState });
+            }
+        } catch (error) {
+            console.warn('Failed to apply code actions to target state:', error);
+            this._targetStateWithCodeActions = targetState;
+        } finally {
+            tempModel?.dispose();
+            tempResource?.dispose();
+        }
+
+        return this.targetState;
+    }
+
+    /**
+     * Applies formatting preferences like format on save, trim trailing whitespace, and insert final newline.
+     */
+    protected async applyFormatting(model: MonacoEditorModel, languageId: string, uriStr: string): Promise<void> {
+        try {
+            const formatOnSave = this.editorPreferences.get({ preferenceName: 'editor.formatOnSave', overrideIdentifier: languageId }, undefined, uriStr);
+            if (formatOnSave) {
+                const instantiation = StandaloneServices.get(IInstantiationService);
+                await instantiation.invokeFunction(
+                    formatDocumentWithSelectedProvider,
+                    model.textEditorModel,
+                    FormattingMode.Explicit,
+                    { report(): void { } },
+                    CancellationToken.None, true
+                );
+            }
+
+            const trimTrailingWhitespace = this.fileSystemPreferences.get({ preferenceName: 'files.trimTrailingWhitespace', overrideIdentifier: languageId }, undefined, uriStr);
+            if (trimTrailingWhitespace) {
+                const ttws = new TrimTrailingWhitespaceCommand(new Selection(1, 1, 1, 1), [], false);
+                CommandExecutor.executeCommands(model.textEditorModel, [], [ttws]);
+            }
+
+            const shouldInsertFinalNewline = this.fileSystemPreferences.get({ preferenceName: 'files.insertFinalNewline', overrideIdentifier: languageId }, undefined, uriStr);
+            if (shouldInsertFinalNewline) {
+                insertFinalNewline(model);
+            }
+        } catch (error) {
+            console.warn('Failed to apply formatting:', error);
+        }
+    }
+
     onShow(): void {
-        this.changeResource.update({ contents: this.targetState, onSave: content => this.writeChanges(content) });
+        this.changeResource.update({
+            contents: this.targetState,
+            onSave: async content => {
+                // Use Monaco utilities when saving from the change resource
+                await this.applyChangesWithMonaco(content);
+            }
+        });
     }
 
     async revert(): Promise<void> {
+        await this.ensureInitialized();
         if (!await this.confirm('Revert')) { return; }
         this.state = 'pending';
         if (this.type === 'add') {
             await this.changeSetFileService.delete(this.uri);
-        } else if (this.originalContent) {
-            await this.changeSetFileService.write(this.uri, this.originalContent);
+        } else if (this._originalContent) {
+            await this.changeSetFileService.write(this.uri, this._originalContent);
         }
     }
 
     async confirm(verb: string): Promise<boolean> {
         if (this._state !== 'stale') { return true; }
         await this.openChange();
-        const thing = await new ConfirmDialog({
+        const answer = await new ConfirmDialog({
             title: `${verb} suggestion.`,
             msg: `The file ${this.uri.path.toString()} has changed since this suggestion was created. Are you certain you wish to ${verb.toLowerCase()} the change?`
         }).open(true);
-        return !!thing;
+        return !!answer;
     }
 
     dispose(): void {

package/src/browser/chat-tool-preferences.ts

@@ -29,7 +29,7 @@ import {
  * Enum for tool confirmation modes
  */
 export enum ToolConfirmationMode {
-    YOLO = 'yolo',
+    ALWAYS_ALLOW = 'always_allow',
     CONFIRM = 'confirm',
     DISABLED = 'disabled'
 }
@@ -43,7 +43,7 @@ export const chatToolPreferences: PreferenceSchema = {
             type: 'object',
             additionalProperties: {
                 type: 'string',
-                enum: [ToolConfirmationMode.YOLO, ToolConfirmationMode.CONFIRM, ToolConfirmationMode.DISABLED],
+                enum: [ToolConfirmationMode.ALWAYS_ALLOW, ToolConfirmationMode.CONFIRM, ToolConfirmationMode.DISABLED],
                 enumDescriptions: [
                     nls.localize('theia/ai/chat/toolConfirmation/yolo/description', 'Execute tools automatically without confirmation'),
                     nls.localize('theia/ai/chat/toolConfirmation/confirm/description', 'Ask for confirmation before executing tools'),
@@ -110,7 +110,7 @@ export class ToolConfirmationManager {
         if (toolConfirmation['*']) {
             return toolConfirmation['*'];
         }
-        return ToolConfirmationMode.YOLO; // Default to YOLO
+        return ToolConfirmationMode.ALWAYS_ALLOW; // Default to Always Allow
     }
 
     /**
@@ -121,7 +121,7 @@ export class ToolConfirmationManager {
         // Determine the global default (star entry), or fallback to schema default
         let starMode = current['*'];
         if (starMode === undefined) {
-            starMode = ToolConfirmationMode.YOLO;
+            starMode = ToolConfirmationMode.ALWAYS_ALLOW;
         }
         if (mode === starMode) {
             // Remove the toolId entry if it exists

package/src/browser/chat-tool-request-service.ts

@@ -42,7 +42,7 @@ export class FrontendChatToolRequestService extends ChatToolRequestService {
                     case ToolConfirmationMode.DISABLED:
                         return { denied: true, message: `Tool ${toolRequest.id} is disabled` };
 
-                    case ToolConfirmationMode.YOLO:
+                    case ToolConfirmationMode.ALWAYS_ALLOW:
                         // Execute immediately without confirmation
                         return toolRequest.handler(arg_string, request);
 

package/src/browser/delegation-response-content.ts

@@ -0,0 +1,55 @@
+// *****************************************************************************
+// Copyright (C) 2025 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+import { isObject } from '@theia/core';
+import { ChatRequestInvocation, ChatResponseContent } from '../common';
+
+/**
+ * Response Content created when an Agent delegates a prompt to another agent.
+ * Contains agent id, delegated prompt, and the response.
+ */
+export class DelegationResponseContent implements ChatResponseContent {
+    kind = 'AgentDelegation';
+
+    /**
+     * @param agentId The id of the agent to whom the task was delegated
+     * @param prompt The prompt that was delegated
+     * @param response The response from the delegated agent
+     */
+    constructor(
+        public agentId: string,
+        public prompt: string,
+        public response: ChatRequestInvocation
+    ) {
+        // Empty
+    }
+
+    asString(): string {
+        const json = {
+            agentId: this.agentId,
+            prompt: this.prompt
+        };
+        return JSON.stringify(json);
+    }
+}
+
+export function isDelegationResponseContent(
+    value: unknown
+): value is DelegationResponseContent {
+    return (
+        isObject<DelegationResponseContent>(value) &&
+        value.kind === 'AgentDelegation'
+    );
+}

package/src/browser/file-chat-variable-contribution.ts

@@ -17,13 +17,14 @@
 import { AIVariableContext, AIVariableResolutionRequest, PromptText } from '@theia/ai-core';
 import { AIVariableCompletionContext, AIVariableDropResult, FrontendVariableContribution, FrontendVariableService } from '@theia/ai-core/lib/browser';
 import { FILE_VARIABLE } from '@theia/ai-core/lib/browser/file-variable-contribution';
-import { CancellationToken, QuickInputService, URI } from '@theia/core';
+import { CancellationToken, ILogger, QuickInputService, URI } from '@theia/core';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import * as monaco from '@theia/monaco-editor-core';
 import { FileQuickPickItem, QuickFileSelectService } from '@theia/file-search/lib/browser/quick-file-select-service';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { VARIABLE_ADD_CONTEXT_COMMAND } from './ai-chat-frontend-contribution';
+import { IMAGE_CONTEXT_VARIABLE, ImageContextVariable } from '../common/image-context-variable';
 
 @injectable()
 export class FileChatVariableContribution implements FrontendVariableContribution {
@@ -39,8 +40,12 @@ export class FileChatVariableContribution implements FrontendVariableContributio
     @inject(QuickFileSelectService)
     protected readonly quickFileSelectService: QuickFileSelectService;
 
+    @inject(ILogger)
+    protected readonly logger: ILogger;
+
     registerVariables(service: FrontendVariableService): void {
         service.registerArgumentPicker(FILE_VARIABLE, this.triggerArgumentPicker.bind(this));
+        service.registerArgumentPicker(IMAGE_CONTEXT_VARIABLE, this.imageArgumentPicker.bind(this));
         service.registerArgumentCompletionProvider(FILE_VARIABLE, this.provideArgumentCompletionItems.bind(this));
         service.registerDropHandler(this.handleDrop.bind(this));
     }
@@ -68,6 +73,57 @@ export class FileChatVariableContribution implements FrontendVariableContributio
         });
     }
 
+    protected async imageArgumentPicker(): Promise<string | undefined> {
+        const quickPick = this.quickInputService.createQuickPick();
+        quickPick.title = 'Select an image file';
+
+        // Get all files and filter only image files
+        const allPicks = await this.quickFileSelectService.getPicks();
+        quickPick.items = allPicks.filter(item => {
+            if (FileQuickPickItem.is(item)) {
+                return this.isImageFile(item.uri.path.toString());
+            }
+            return false;
+        });
+
+        const updateItems = async (value: string) => {
+            const filteredPicks = await this.quickFileSelectService.getPicks(value, CancellationToken.None);
+            quickPick.items = filteredPicks.filter(item => {
+                if (FileQuickPickItem.is(item)) {
+                    return this.isImageFile(item.uri.path.toString());
+                }
+                return false;
+            });
+        };
+
+        const onChangeListener = quickPick.onDidChangeValue(updateItems);
+        quickPick.show();
+
+        return new Promise(resolve => {
+            quickPick.onDispose(onChangeListener.dispose);
+            quickPick.onDidAccept(async () => {
+                const selectedItem = quickPick.selectedItems[0];
+                if (selectedItem && FileQuickPickItem.is(selectedItem)) {
+                    quickPick.dispose();
+                    const filePath = await this.wsService.getWorkspaceRelativePath(selectedItem.uri);
+                    const fileName = selectedItem.uri.displayName;
+                    const base64Data = await this.fileToBase64(selectedItem.uri);
+                    const mimeType = this.getMimeTypeFromExtension(selectedItem.uri.path.toString());
+
+                    // Create the argument string in the required format
+                    const imageVarArgs: ImageContextVariable = {
+                        name: fileName,
+                        wsRelativePath: filePath,
+                        data: base64Data,
+                        mimeType: mimeType
+                    };
+
+                    resolve(ImageContextVariable.createArgString(imageVarArgs));
+                }
+            });
+        });
+    }
+
     protected async provideArgumentCompletionItems(
         model: monaco.editor.ITextModel,
         position: monaco.Position,
@@ -106,6 +162,50 @@ export class FileChatVariableContribution implements FrontendVariableContributio
         );
     }
 
+    /**
+     * Checks if a file is an image based on its extension.
+     */
+    protected isImageFile(filePath: string): boolean {
+        const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.webp'];
+        const extension = filePath.toLowerCase().substring(filePath.lastIndexOf('.'));
+        return imageExtensions.includes(extension);
+    }
+
+    /**
+     * Determines the MIME type based on file extension.
+     */
+    protected getMimeTypeFromExtension(filePath: string): string {
+        const extension = filePath.toLowerCase().substring(filePath.lastIndexOf('.'));
+        const mimeTypes: { [key: string]: string } = {
+            '.jpg': 'image/jpeg',
+            '.jpeg': 'image/jpeg',
+            '.png': 'image/png',
+            '.gif': 'image/gif',
+            '.bmp': 'image/bmp',
+            '.svg': 'image/svg+xml',
+            '.webp': 'image/webp'
+        };
+        return mimeTypes[extension] || 'application/octet-stream';
+    }
+
+    /**
+     * Converts a file to base64 data URL.
+     */
+    protected async fileToBase64(uri: URI): Promise<string> {
+        try {
+            const fileContent = await this.fileService.readFile(uri);
+            const uint8Array = new Uint8Array(fileContent.value.buffer);
+            let binary = '';
+            for (let i = 0; i < uint8Array.length; i++) {
+                binary += String.fromCharCode(uint8Array[i]);
+            }
+            return btoa(binary);
+        } catch (error) {
+            this.logger.error('Error reading file content:', error);
+            return '';
+        }
+    }
+
     protected async handleDrop(event: DragEvent, _: AIVariableContext): Promise<AIVariableDropResult | undefined> {
         const data = event.dataTransfer?.getData('selected-tree-nodes');
         if (!data) {
@@ -126,11 +226,25 @@ export class FileChatVariableContribution implements FrontendVariableContributio
                 const uri = URI.fromFilePath(filePath);
                 if (await this.fileService.exists(uri)) {
                     const wsRelativePath = await this.wsService.getWorkspaceRelativePath(uri);
-                    variables.push({
-                        variable: FILE_VARIABLE,
-                        arg: wsRelativePath
-                    });
-                    texts.push(`${PromptText.VARIABLE_CHAR}${FILE_VARIABLE.name}${PromptText.VARIABLE_SEPARATOR_CHAR}${wsRelativePath}`);
+                    const fileName = uri.displayName;
+
+                    if (this.isImageFile(filePath)) {
+                        const base64Data = await this.fileToBase64(uri);
+                        const mimeType = this.getMimeTypeFromExtension(filePath);
+                        variables.push(ImageContextVariable.createRequest({
+                            [ImageContextVariable.name]: fileName,
+                            [ImageContextVariable.wsRelativePath]: wsRelativePath,
+                            [ImageContextVariable.data]: base64Data,
+                            [ImageContextVariable.mimeType]: mimeType
+                        }));
+                        // we do not want to push a text for image variables
+                    } else {
+                        variables.push({
+                            variable: FILE_VARIABLE,
+                            arg: wsRelativePath
+                        });
+                        texts.push(`${PromptText.VARIABLE_CHAR}${FILE_VARIABLE.name}${PromptText.VARIABLE_SEPARATOR_CHAR}${wsRelativePath}`);
+                    }
                 }
             }
 

package/src/browser/frontend-chat-service.ts

@@ -32,17 +32,8 @@ export class FrontendChatServiceImpl extends ChatServiceImpl {
     @inject(ChangeSetFileService)
     protected readonly changeSetFileService: ChangeSetFileService;
 
-    protected override getAgent(parsedRequest: ParsedChatRequest, session: ChatSession): ChatAgent | undefined {
-        let agent = this.initialAgentSelection(parsedRequest);
-        if (!this.preferenceService.get<boolean>(PIN_CHAT_AGENT_PREF)) {
-            return agent;
-        }
-        if (!session.pinnedAgent && agent && agent.id !== this.defaultChatAgentId?.id) {
-            session.pinnedAgent = agent;
-        } else if (session.pinnedAgent && this.getMentionedAgent(parsedRequest) === undefined) {
-            agent = session.pinnedAgent;
-        }
-        return agent;
+    protected override isPinChatAgentEnabled(): boolean {
+        return this.preferenceService.get<boolean>(PIN_CHAT_AGENT_PREF, true);
     }
 
     protected override initialAgentSelection(parsedRequest: ParsedChatRequest): ChatAgent | undefined {