@theia/ai-chat-ui 1.60.2 → 1.61.0

package/src/browser/chat-input-agent-suggestions.tsx

@@ -0,0 +1,85 @@
+// *****************************************************************************
+// Copyright (C) 2025 EclipseSource GmbH and others.
+//
+// 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 * as React from '@theia/core/shared/react';
+import { DeclaredEventsEventListenerObject, useMarkdownRendering } from './chat-response-renderer/markdown-part-renderer';
+import { OpenerService } from '@theia/core/lib/browser';
+import { ChatSuggestion, ChatSuggestionCallback } from '@theia/ai-chat';
+import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
+
+interface ChatInputAgentSuggestionsProps {
+    suggestions: readonly ChatSuggestion[];
+    opener: OpenerService;
+}
+
+function getText(suggestion: ChatSuggestion): string {
+    if (typeof suggestion === 'string') { return suggestion; }
+    if ('value' in suggestion) { return suggestion.value; }
+    if (typeof suggestion.content === 'string') { return suggestion.content; }
+    return suggestion.content.value;
+}
+
+function getContent(suggestion: ChatSuggestion): string | MarkdownString {
+    if (typeof suggestion === 'string') { return suggestion; }
+    if ('value' in suggestion) { return suggestion; }
+    return suggestion.content;
+}
+
+export const ChatInputAgentSuggestions: React.FC<ChatInputAgentSuggestionsProps> = ({ suggestions, opener }) => (
+    !!suggestions?.length && <div className="chat-agent-suggestions">
+        {suggestions.map(suggestion => <ChatInputAgentSuggestion
+            key={getText(suggestion)}
+            suggestion={suggestion}
+            opener={opener}
+            handler={ChatSuggestionCallback.is(suggestion) ? new ChatSuggestionClickHandler(suggestion) : undefined}
+        />)}
+    </div>
+);
+
+interface ChatInputAgestSuggestionProps {
+    suggestion: ChatSuggestion;
+    opener: OpenerService;
+    handler?: DeclaredEventsEventListenerObject;
+}
+
+const ChatInputAgentSuggestion: React.FC<ChatInputAgestSuggestionProps> = ({ suggestion, opener, handler }) => {
+    const ref = useMarkdownRendering(getContent(suggestion), opener, true, handler);
+    return <div className="chat-agent-suggestion" style={(!handler || ChatSuggestionCallback.containsCallbackLink(suggestion)) ? undefined : { cursor: 'pointer' }} ref={ref} />;
+};
+
+class ChatSuggestionClickHandler implements DeclaredEventsEventListenerObject {
+    constructor(protected readonly suggestion: ChatSuggestionCallback) { }
+    handleEvent(event: Event): boolean {
+        const { target, currentTarget } = event;
+        if (event.type !== 'click' || !(target instanceof Element)) { return false; }
+        const link = target.closest('a[href^="_callback"]');
+        if (link) {
+            this.suggestion.callback();
+            return true;
+        }
+        if (!(currentTarget instanceof Element)) {
+            this.suggestion.callback();
+            return true;
+        }
+        const containedLink = currentTarget.querySelector('a[href^="_callback"]');
+        // Whole body should count.
+        if (!containedLink) {
+            this.suggestion.callback();
+            return true;
+        }
+        return false;
+    }
+}

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

@@ -13,31 +13,35 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { ChangeSet, ChatAgent, ChatChangeEvent, ChatModel, ChatRequestModel } from '@theia/ai-chat';
+import { ChangeSet, ChatAgent, ChatChangeEvent, ChatModel, ChatRequestModel, ChatService, ChatSuggestion } from '@theia/ai-chat';
 import { Disposable, DisposableCollection, InMemoryResources, URI, nls } from '@theia/core';
-import { ContextMenuRenderer, LabelProvider, Message, ReactWidget } from '@theia/core/lib/browser';
+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 { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+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 { 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';
 
 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;
+type OpenContextElement = (request: AIVariableResolutionRequest) => unknown;
 
 export const AIChatInputConfiguration = Symbol('AIChatInputConfiguration');
 export interface AIChatInputConfiguration {
     showContext?: boolean;
     showPinnedAgent?: boolean;
+    showChangeSet?: boolean;
 }
 
 @injectable()
@@ -69,8 +73,17 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(ChangeSetActionService)
     protected readonly changeSetActionService: ChangeSetActionService;
 
-    protected editorRef: MonacoEditor | undefined = undefined;
-    private editorReady = new Deferred<void>();
+    @inject(ChangeSetDecoratorService)
+    protected readonly changeSetDecoratorService: ChangeSetDecoratorService;
+
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
+    @inject(ChatService)
+    protected readonly chatService: ChatService;
+
+    protected editorRef: SimpleMonacoEditor | undefined = undefined;
+    protected readonly editorReady = new Deferred<void>();
 
     protected isEnabled = false;
 
@@ -95,6 +108,11 @@ export class AIChatInputWidget extends ReactWidget {
         this._onDeleteChangeSetElement = deleteChangeSetElement;
     }
 
+    private _initialValue?: string;
+    set initialValue(value: string | undefined) {
+        this._initialValue = value;
+    }
+
     protected onDisposeForChatModel = new DisposableCollection();
     private _chatModel: ChatModel;
     set chatModel(chatModel: ChatModel) {
@@ -130,6 +148,10 @@ export class AIChatInputWidget extends ReactWidget {
         });
     }
 
+    protected getResourceUri(): URI {
+        return new URI(`ai-chat:/input.${CHAT_VIEW_LANGUAGE_EXTENSION}`);
+    }
+
     protected render(): React.ReactNode {
         return (
             <ChatInput
@@ -142,11 +164,13 @@ export class AIChatInputWidget extends ReactWidget {
                 onDeleteChangeSetElement={this._onDeleteChangeSetElement.bind(this)}
                 onAddContextElement={this.addContextElement.bind(this)}
                 onDeleteContextElement={this.deleteContextElement.bind(this)}
-                context={this._chatModel.context.getVariables()}
+                context={this.getContext()}
+                onOpenContextElement={this.openContextElement.bind(this)}
                 chatModel={this._chatModel}
                 pinnedAgent={this._pinnedAgent}
                 editorProvider={this.editorProvider}
                 resources={this.resources}
+                resourceUriProvider={this.getResourceUri.bind(this)}
                 contextMenuCallback={this.handleContextMenu.bind(this)}
                 isEnabled={this.isEnabled}
                 setEditorRef={editor => {
@@ -155,8 +179,13 @@ export class AIChatInputWidget extends ReactWidget {
                 }}
                 showContext={this.configuration?.showContext}
                 showPinnedAgent={this.configuration?.showPinnedAgent}
+                showChangeSet={this.configuration?.showChangeSet}
                 labelProvider={this.labelProvider}
                 actionService={this.changeSetActionService}
+                decoratorService={this.changeSetDecoratorService}
+                initialValue={this._initialValue}
+                openerService={this.openerService}
+                suggestions={this._chatModel.suggestions}
             />
         );
     }
@@ -195,6 +224,12 @@ export class AIChatInputWidget extends ReactWidget {
         });
     }
 
+    protected async openContextElement(request: AIVariableResolutionRequest): Promise<void> {
+        const session = this.chatService.getSessions().find(candidate => candidate.model.id === this._chatModel.id);
+        const context = { session };
+        await this.variableService.open(request, context);
+    }
+
     public setEnabled(enabled: boolean): void {
         this.isEnabled = enabled;
         this.update();
@@ -203,7 +238,7 @@ export class AIChatInputWidget extends ReactWidget {
     protected addContextElement(): void {
         this.contextVariablePicker.pickContextVariable().then(contextElement => {
             if (contextElement) {
-                this._chatModel.context.addVariables(contextElement);
+                this.addContext(contextElement);
             }
         });
     }
@@ -225,6 +260,10 @@ export class AIChatInputWidget extends ReactWidget {
     addContext(variable: AIVariableResolutionRequest): void {
         this._chatModel.context.addVariables(variable);
     }
+
+    protected getContext(): readonly AIVariableResolutionRequest[] {
+        return this._chatModel.context.getVariables();
+    }
 }
 
 interface ChatInputProperties {
@@ -237,18 +276,25 @@ interface ChatInputProperties {
     onDeleteChangeSetElement: (sessionId: string, index: number) => void;
     onAddContextElement: () => void;
     onDeleteContextElement: (index: number) => void;
+    onOpenContextElement: OpenContextElement;
     context?: readonly AIVariableResolutionRequest[];
     isEnabled?: boolean;
     chatModel: ChatModel;
     pinnedAgent?: ChatAgent;
     editorProvider: MonacoEditorProvider;
     resources: InMemoryResources;
+    resourceUriProvider: () => URI;
     contextMenuCallback: (event: IMouseEvent) => void;
-    setEditorRef: (editor: MonacoEditor | undefined) => void;
+    setEditorRef: (editor: SimpleMonacoEditor | undefined) => void;
     showContext?: boolean;
     showPinnedAgent?: boolean;
+    showChangeSet?: boolean;
     labelProvider: LabelProvider;
     actionService: ChangeSetActionService;
+    decoratorService: ChangeSetDecoratorService;
+    initialValue?: string;
+    openerService: OpenerService;
+    suggestions: readonly ChatSuggestion[]
 }
 
 const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInputProperties) => {
@@ -262,6 +308,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             ? buildChangeSetUI(
                 props.chatModel.changeSet,
                 props.labelProvider,
+                props.decoratorService,
                 props.actionService.getActionsForChangeset(props.chatModel.changeSet),
                 onDeleteChangeSet,
                 onDeleteChangeSetElement
@@ -273,16 +320,16 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     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<MonacoEditor | undefined>(undefined);
+    const editorRef = React.useRef<SimpleMonacoEditor | undefined>(undefined);
 
     React.useEffect(() => {
-        const uri = new URI(`ai-chat:/input.${CHAT_VIEW_LANGUAGE_EXTENSION}`);
+        const uri = props.resourceUriProvider();
         const resource = props.resources.add(uri, '');
         const createInputElement = async () => {
             const paddingTop = 6;
             const lineHeight = 20;
             const maxHeight = 240;
-            const editor = await props.editorProvider.createInline(uri, editorContainerRef.current!, {
+            const editor = await props.editorProvider.createSimpleInline(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,
@@ -323,6 +370,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                     editorContainerRef.current.style.height = `${Math.min(contentHeight, maxHeight)}px`;
                 }
             };
+
             editor.getControl().onDidChangeModelContent(() => {
                 const value = editor.getControl().getValue();
                 setIsInputEmpty(!value || value.length === 0);
@@ -343,6 +391,10 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
 
             editorRef.current = editor;
             props.setEditorRef(editor);
+
+            if (props.initialValue) {
+                setValue(props.initialValue);
+            }
         };
         createInputElement();
 
@@ -376,6 +428,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                     setChangeSetUI(buildChangeSetUI(
                         event.changeSet,
                         props.labelProvider,
+                        props.decoratorService,
                         props.actionService.getActionsForChangeset(event.changeSet),
                         onDeleteChangeSet,
                         onDeleteChangeSetElement
@@ -387,6 +440,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             ? buildChangeSetUI(
                 props.chatModel.changeSet,
                 props.labelProvider,
+                props.decoratorService,
                 props.actionService.getActionsForChangeset(props.chatModel.changeSet),
                 onDeleteChangeSet,
                 onDeleteChangeSetElement
@@ -408,16 +462,37 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         return () => disposable.dispose();
     });
 
+    React.useEffect(() => {
+        const disposable = props.decoratorService.onDidChangeDecorations(() => {
+            if (!props.chatModel.changeSet) {
+                return;
+            }
+            setChangeSetUI(buildChangeSetUI(
+                props.chatModel.changeSet,
+                props.labelProvider,
+                props.decoratorService,
+                props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+                onDeleteChangeSet,
+                onDeleteChangeSetElement
+            ));
+        });
+        return () => disposable.dispose();
+    });
+
+    const setValue = React.useCallback((value: string) => {
+        if (editorRef.current && !editorRef.current.document.isDisposed()) {
+            editorRef.current.document.textEditorModel.setValue(value);
+        }
+    }, [editorRef]);
+
     const submit = React.useCallback(function submit(value: string): void {
         if (!value || value.trim().length === 0) {
             return;
         }
         setInProgress(true);
         props.onQuery(value);
-        if (editorRef.current) {
-            editorRef.current.document.textEditorModel.setValue('');
-        }
-    }, [props.context, props.onQuery, editorRef]);
+        setValue('');
+    }, [props.context, props.onQuery, setValue]);
 
     const onKeyDown = React.useCallback((event: React.KeyboardEvent) => {
         if (!props.isEnabled) {
@@ -515,10 +590,11 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             disabled: isInputEmpty || !props.isEnabled
         }];
 
-    const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement);
+    const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement, props.onOpenContextElement);
 
     return <div className='theia-ChatInput' onDragOver={props.onDragOver} onDrop={props.onDrop}    >
-        {changeSetUI?.elements &&
+        {<ChatInputAgentSuggestions suggestions={props.suggestions} opener={props.openerService} />}
+        {props.showChangeSet && changeSetUI?.elements &&
             <ChangeSetBox changeSet={changeSetUI} />
         }
         <div className='theia-ChatInput-Editor-Box'>
@@ -541,6 +617,7 @@ const noPropagation = (handler: () => void) => (e: React.MouseEvent) => {
 const buildChangeSetUI = (
     changeSet: ChangeSet,
     labelProvider: LabelProvider,
+    decoratorService: ChangeSetDecoratorService,
     actions: ChangeSetActionRenderer[],
     onDeleteChangeSet: () => void,
     onDeleteChangeSetElement: (index: number) => void
@@ -554,11 +631,12 @@ const buildChangeSetUI = (
         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
 });
 
@@ -567,6 +645,7 @@ interface ChangeSetUIElement {
     iconClass: string;
     nameClass: string;
     additionalInfo: string;
+    additionalInfoSuffixIcon?: string[];
     open?: () => void;
     openChange?: () => void;
     apply?: () => void;
@@ -596,15 +675,18 @@ const ChangeSetBox: React.FunctionComponent<{ changeSet: ChangeSetUI }> = React.
             <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}`} />
-                        <span className='theia-ChatInput-ChangeSet-labelParts'>
+                        <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>
-                            <span className='theia-ChatInput-ChangeSet-additionalInfo'>
-                                {element.additionalInfo}
-                            </span>
-                        </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
@@ -685,7 +767,12 @@ function getLatestRequest(chatModel: ChatModel): ChatRequestModel | undefined {
     return requests.length > 0 ? requests[requests.length - 1] : undefined;
 }
 
-function buildContextUI(context: readonly AIVariableResolutionRequest[] | undefined, labelProvider: LabelProvider, onDeleteContextElement: (index: number) => void): ChatContextUI {
+function buildContextUI(
+    context: readonly AIVariableResolutionRequest[] | undefined,
+    labelProvider: LabelProvider,
+    onDeleteContextElement: (index: number) => void,
+    onOpen: OpenContextElement
+): ChatContextUI {
     if (!context) {
         return { context: [] };
     }
@@ -697,6 +784,7 @@ function buildContextUI(context: readonly AIVariableResolutionRequest[] | undefi
             additionalInfo: labelProvider.getDetails(element),
             details: labelProvider.getLongName(element),
             delete: () => onDeleteContextElement(index),
+            open: () => onOpen(element)
         }))
     };
 }
@@ -719,13 +807,15 @@ const ChatContext: React.FunctionComponent<ChatContextUI> = ({ context }) => (
             {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()} />
+                    <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(); }} />
                 </li>
             ))}
         </ul>

package/src/browser/chat-node-toolbar-action-contribution.ts

@@ -13,7 +13,10 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { RequestNode, ResponseNode } from './chat-tree-view';
+import { Command, nls } from '@theia/core';
+import { codicon } from '@theia/core/lib/browser';
+import { isRequestNode, RequestNode, ResponseNode } from './chat-tree-view';
+import { EditableChatRequestModel } from '@theia/ai-chat';
 
 export interface ChatNodeToolbarAction {
     /**
@@ -61,3 +64,39 @@ export interface ChatNodeToolbarActionContribution {
      */
     getToolbarActions(node: RequestNode | ResponseNode): ChatNodeToolbarAction[];
 }
+
+export namespace ChatNodeToolbarCommands {
+    const CHAT_NODE_TOOLBAR_CATEGORY = 'ChatNodeToolbar';
+    const CHAT_NODE_TOOLBAR_CATEGORY_KEY = nls.getDefaultKey(CHAT_NODE_TOOLBAR_CATEGORY);
+
+    export const EDIT = Command.toLocalizedCommand({
+        id: 'chat:node:toolbar:edit-request',
+        category: CHAT_NODE_TOOLBAR_CATEGORY,
+    }, '', CHAT_NODE_TOOLBAR_CATEGORY_KEY);
+
+    export const CANCEL = Command.toLocalizedCommand({
+        id: 'chat:node:toolbar:cancel-request',
+        category: CHAT_NODE_TOOLBAR_CATEGORY,
+    }, '', CHAT_NODE_TOOLBAR_CATEGORY_KEY);
+}
+
+export class DefaultChatNodeToolbarActionContribution implements ChatNodeToolbarActionContribution {
+    getToolbarActions(node: RequestNode | ResponseNode): ChatNodeToolbarAction[] {
+        if (isRequestNode(node)) {
+            if (EditableChatRequestModel.isEditing(node.request)) {
+                return [{
+                    commandId: ChatNodeToolbarCommands.CANCEL.id,
+                    icon: codicon('close'),
+                    tooltip: nls.localize('theia/ai/chat-ui/node/toolbar/cancel', 'Cancel'),
+                }];
+            }
+            return [{
+                commandId: ChatNodeToolbarCommands.EDIT.id,
+                icon: codicon('edit'),
+                tooltip: nls.localize('theia/ai/chat-ui/node/toolbar/edit', 'Edit'),
+            }];
+        } else {
+            return [];
+        }
+    }
+}

package/src/browser/chat-progress-message.tsx

@@ -0,0 +1,40 @@
+// *****************************************************************************
+// 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 { ChatProgressMessage } from '@theia/ai-chat';
+import * as React from '@theia/core/shared/react';
+
+export type ProgressMessageProps = Omit<ChatProgressMessage, 'kind' | 'id' | 'show'>;
+
+export const ProgressMessage = (c: ProgressMessageProps) => (
+    <div className='theia-ResponseNode-ProgressMessage'>
+        <Indicator {...c} /> {c.content}
+    </div>
+);
+
+export const Indicator = (progressMessage: ProgressMessageProps) => (
+    <span className='theia-ResponseNode-ProgressMessage-Indicator'>
+        {progressMessage.status === 'inProgress' &&
+            <i className={'fa fa-spinner fa-spin ' + progressMessage.status}></i>
+        }
+        {progressMessage.status === 'completed' &&
+            <i className={'fa fa-check ' + progressMessage.status}></i>
+        }
+        {progressMessage.status === 'failed' &&
+            <i className={'fa fa-warning ' + progressMessage.status}></i>
+        }
+    </span>
+);

package/src/browser/chat-response-renderer/code-part-renderer.tsx

@@ -26,7 +26,7 @@ import { ReactNode } from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
 import { Position } from '@theia/core/shared/vscode-languageserver-protocol';
 import { EditorManager, EditorWidget } from '@theia/editor/lib/browser';
-import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
 import { MonacoLanguages } from '@theia/monaco/lib/browser/monaco-languages';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
@@ -206,11 +206,11 @@ export const CodeWrapper = (props: {
 }) => {
     // eslint-disable-next-line no-null/no-null
     const ref = React.useRef<HTMLDivElement | null>(null);
-    const editorRef = React.useRef<MonacoEditor | undefined>(undefined);
+    const editorRef = React.useRef<SimpleMonacoEditor | undefined>(undefined);
 
     const createInputElement = async () => {
         const resource = await props.untitledResourceResolver.createUntitledResource(undefined, props.language);
-        const editor = await props.editorProvider.createInline(resource.uri, ref.current!, {
+        const editor = await props.editorProvider.createSimpleInline(resource.uri, ref.current!, {
             readOnly: true,
             autoSizing: true,
             scrollBeyondLastLine: false,

package/src/browser/chat-response-renderer/index.ts

@@ -22,3 +22,4 @@ export * from './markdown-part-renderer';
 export * from './text-part-renderer';
 export * from './toolcall-part-renderer';
 export * from './thinking-part-renderer';
+export * from './progress-part-renderer';

package/src/browser/chat-response-renderer/markdown-part-renderer.tsx

@@ -60,6 +60,10 @@ const MarkdownRender = ({ response, openerService }: { response: MarkdownChatRes
     return <div ref={ref}></div>;
 };
 
+export interface DeclaredEventsEventListenerObject extends EventListenerObject {
+    handledEvents?: (keyof HTMLElementEventMap)[];
+}
+
 /**
  * This hook uses markdown-it directly to render markdown.
  * The reason to use markdown-it directly is that the MarkdownRenderer is
@@ -72,9 +76,17 @@ const MarkdownRender = ({ response, openerService }: { response: MarkdownChatRes
  * @param markdown the string to render as markdown
  * @param skipSurroundingParagraph whether to remove a surrounding paragraph element (default: false)
  * @param openerService the service to handle link opening
+ * @param eventHandler `handleEvent` will be called by default for `click` events and additionally
+ * for all events enumerated in {@link DeclaredEventsEventListenerObject.handledEvents}. If `handleEvent` returns `true`,
+ * no additional handlers will be run for the event.
  * @returns the ref to use in an element to render the markdown
  */
-export const useMarkdownRendering = (markdown: string | MarkdownString, openerService: OpenerService, skipSurroundingParagraph: boolean = false) => {
+export const useMarkdownRendering = (
+    markdown: string | MarkdownString,
+    openerService: OpenerService,
+    skipSurroundingParagraph: boolean = false,
+    eventHandler?: DeclaredEventsEventListenerObject
+) => {
     // null is valid in React
     // eslint-disable-next-line no-null/no-null
     const ref = useRef<HTMLDivElement | null>(null);
@@ -98,6 +110,7 @@ export const useMarkdownRendering = (markdown: string | MarkdownString, openerSe
 
         // intercept link clicks to use the Theia OpenerService instead of the default browser behavior
         const handleClick = (event: MouseEvent) => {
+            if ((eventHandler?.handleEvent(event) as unknown) === true) {return; }
             let target = event.target as HTMLElement;
             while (target && target.tagName !== 'A') {
                 target = target.parentElement as HTMLElement;
@@ -112,7 +125,11 @@ export const useMarkdownRendering = (markdown: string | MarkdownString, openerSe
         };
 
         ref?.current?.addEventListener('click', handleClick);
-        return () => ref.current?.removeEventListener('click', handleClick);
+        eventHandler?.handledEvents?.forEach(eventType => eventType !== 'click' && ref?.current?.addEventListener(eventType, eventHandler));
+        return () => {
+            ref.current?.removeEventListener('click', handleClick);
+            eventHandler?.handledEvents?.forEach(eventType => eventType !== 'click' && ref?.current?.removeEventListener(eventType, eventHandler));
+        };
     }, [markdownString, skipSurroundingParagraph, openerService]);
 
     return ref;