@theia/ai-chat-ui 1.60.2 → 1.61.0

package/src/browser/chat-response-renderer/progress-part-renderer.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 { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { injectable } from '@theia/core/shared/inversify';
+import { ChatResponseContent, ProgressChatResponseContent } from '@theia/ai-chat/lib/common';
+import { ReactNode } from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
+import { ProgressMessage } from '../chat-progress-message';
+
+@injectable()
+export class ProgressPartRenderer implements ChatResponsePartRenderer<ProgressChatResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        if (ProgressChatResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+
+    render(response: ProgressChatResponseContent): ReactNode {
+        return (
+            <ProgressMessage content={response.message} status='inProgress' />
+        );
+    }
+
+}

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

@@ -0,0 +1,89 @@
+// *****************************************************************************
+// 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 { inject, injectable, optional, postConstruct } from '@theia/core/shared/inversify';
+import { AIChatInputWidget, type AIChatInputConfiguration } from '../chat-input-widget';
+import type { EditableRequestNode } from './chat-view-tree-widget';
+import { URI } from '@theia/core';
+import { CHAT_VIEW_LANGUAGE_EXTENSION } from '../chat-view-language-contribution';
+import type { ChatRequestModel, EditableChatRequestModel } from '@theia/ai-chat';
+import type { AIVariableResolutionRequest } from '@theia/ai-core';
+import { Key } from '@theia/core/lib/browser';
+
+export const AIChatTreeInputConfiguration = Symbol('AIChatTreeInputConfiguration');
+export interface AIChatTreeInputConfiguration extends AIChatInputConfiguration { }
+
+export const AIChatTreeInputArgs = Symbol('AIChatTreeInputArgs');
+export interface AIChatTreeInputArgs {
+    node: EditableRequestNode;
+    initialValue?: string;
+    onQuery: (query: string) => Promise<void>;
+    onUnpin?: () => void;
+    onCancel?: (requestModel: ChatRequestModel) => void;
+    onDeleteChangeSet?: (requestModel: ChatRequestModel) => void;
+    onDeleteChangeSetElement?: (requestModel: ChatRequestModel, index: number) => void;
+}
+export const AIChatTreeInputFactory = Symbol('AIChatTreeInputFactory');
+export type AIChatTreeInputFactory = (args: AIChatTreeInputArgs) => AIChatTreeInputWidget;
+
+@injectable()
+export class AIChatTreeInputWidget extends AIChatInputWidget {
+    public static override ID = 'chat-tree-input-widget';
+
+    @inject(AIChatTreeInputArgs)
+    protected readonly args: AIChatTreeInputArgs;
+
+    @inject(AIChatTreeInputConfiguration) @optional()
+    protected override readonly configuration: AIChatTreeInputConfiguration | undefined;
+
+    get requestNode(): EditableRequestNode {
+        return this.args.node;
+    }
+
+    get request(): EditableChatRequestModel {
+        return this.requestNode.request;
+    }
+
+    @postConstruct()
+    protected override init(): void {
+        super.init();
+        this.addKeyListener(this.node, Key.ESCAPE, () => {
+            this.request.cancelEdit();
+        });
+
+        this.editorReady.promise.then(() => {
+            if (this.editorRef) {
+                this.editorRef.focus();
+            }
+        });
+    }
+
+    protected override getResourceUri(): URI {
+        return new URI(`ai-chat:/${this.requestNode.id}-input.${CHAT_VIEW_LANGUAGE_EXTENSION}`);
+    }
+
+    override addContext(variable: AIVariableResolutionRequest): void {
+        this.request.editContextManager.addVariables(variable);
+    }
+
+    protected override getContext(): readonly AIVariableResolutionRequest[] {
+        return this.request.editContextManager.getVariables();
+    }
+
+    protected override deleteContextElement(index: number): void {
+        this.request.editContextManager.deleteVariables(index);
+    }
+}

package/src/browser/chat-tree-view/chat-view-tree-widget.tsx

@@ -17,14 +17,19 @@ import {
     ChatAgent,
     ChatAgentService,
     ChatModel,
-    ChatProgressMessage,
     ChatRequestModel,
     ChatResponseContent,
     ChatResponseModel,
+    ChatService,
+    EditableChatRequestModel,
     ParsedChatRequestAgentPart,
     ParsedChatRequestVariablePart,
+    type ChatRequest,
+    type ChatHierarchyBranch,
 } from '@theia/ai-chat';
-import { CommandRegistry, ContributionProvider } from '@theia/core';
+import { AIVariableService } from '@theia/ai-core';
+import { AIActivationService } from '@theia/ai-core/lib/browser';
+import { CommandRegistry, ContributionProvider, Disposable, DisposableCollection, Emitter } from '@theia/core';
 import {
     codicon,
     CompositeTreeNode,
@@ -38,7 +43,10 @@ import {
     TreeNode,
     TreeProps,
     TreeWidget,
+    Widget,
+    type ReactWidget
 } from '@theia/core/lib/browser';
+import { nls } from '@theia/core/lib/common/nls';
 import {
     inject,
     injectable,
@@ -47,19 +55,24 @@ import {
     postConstruct
 } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
-import { nls } from '@theia/core/lib/common/nls';
-
 import { ChatNodeToolbarActionContribution } from '../chat-node-toolbar-action-contribution';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { useMarkdownRendering } from '../chat-response-renderer/markdown-part-renderer';
-import { AIVariableService } from '@theia/ai-core';
+import { ProgressMessage } from '../chat-progress-message';
+import { AIChatTreeInputFactory, type AIChatTreeInputWidget } from './chat-view-tree-input-widget';
 
 // TODO Instead of directly operating on the ChatRequestModel we could use an intermediate view model
 export interface RequestNode extends TreeNode {
-    request: ChatRequestModel
+    request: ChatRequestModel,
+    branch: ChatHierarchyBranch
 }
 export const isRequestNode = (node: TreeNode): node is RequestNode => 'request' in node;
 
+export interface EditableRequestNode extends RequestNode {
+    request: EditableChatRequestModel
+}
+export const isEditableRequestNode = (node: TreeNode): node is EditableRequestNode => isRequestNode(node) && EditableChatRequestModel.is(node.request);
+
 // TODO Instead of directly operating on the ChatResponseModel we could use an intermediate view model
 export interface ResponseNode extends TreeNode {
     response: ChatResponseModel
@@ -105,6 +118,20 @@ export class ChatViewTreeWidget extends TreeWidget {
     @inject(ChatWelcomeMessageProvider) @optional()
     protected welcomeMessageProvider?: ChatWelcomeMessageProvider;
 
+    @inject(AIChatTreeInputFactory)
+    protected inputWidgetFactory: AIChatTreeInputFactory;
+
+    @inject(AIActivationService)
+    protected readonly activationService: AIActivationService;
+
+    @inject(ChatService)
+    protected readonly chatService: ChatService;
+
+    protected readonly onDidSubmitEditEmitter = new Emitter<ChatRequest>();
+    onDidSubmitEdit = this.onDidSubmitEditEmitter.event;
+
+    protected readonly chatInputs: Map<string, AIChatTreeInputWidget> = new Map();
+
     protected _shouldScrollToEnd = true;
 
     protected isEnabled = false;
@@ -143,6 +170,16 @@ export class ChatViewTreeWidget extends TreeWidget {
 
         this.id = ChatViewTreeWidget.ID + '-treeContainer';
         this.addClass('treeContainer');
+
+        this.toDispose.pushAll([
+            this.toDisposeOnChatModelChange,
+            this.activationService.onDidChangeActiveStatus(change => {
+                this.chatInputs.forEach(widget => {
+                    widget.setEnabled(change);
+                });
+                this.update();
+            })
+        ]);
     }
 
     public setEnabled(enabled: boolean): void {
@@ -168,11 +205,16 @@ export class ChatViewTreeWidget extends TreeWidget {
         return this.welcomeMessageProvider?.renderWelcomeMessage?.() ?? <></>;
     }
 
-    protected mapRequestToNode(request: ChatRequestModel): RequestNode {
+    protected mapRequestToNode(branch: ChatHierarchyBranch): RequestNode {
         return {
-            id: request.id,
             parent: this.model.root as CompositeTreeNode,
-            request
+            get id(): string {
+                return this.request.id;
+            },
+            get request(): ChatRequestModel {
+                return branch.get();
+            },
+            branch
         };
     }
 
@@ -184,25 +226,60 @@ export class ChatViewTreeWidget extends TreeWidget {
         };
     }
 
+    protected readonly toDisposeOnChatModelChange = new DisposableCollection();
     /**
      * Tracks the ChatModel handed over.
      * Tracking multiple chat models will result in a weird UI
      */
     public trackChatModel(chatModel: ChatModel): void {
+        this.toDisposeOnChatModelChange.dispose();
         this.recreateModelTree(chatModel);
         chatModel.getRequests().forEach(request => {
             if (!request.response.isComplete) {
                 request.response.onDidChange(() => this.scheduleUpdateScrollToRow());
             }
         });
-        this.toDispose.push(
+        this.toDisposeOnChatModelChange.pushAll([
+            Disposable.create(() => {
+                this.chatInputs.forEach(widget => widget.dispose());
+                this.chatInputs.clear();
+            }),
             chatModel.onDidChange(event => {
+                if (event.kind === 'enableEdit') {
+                    this.scrollToRow = this.rows.get(event.request.id)?.index;
+                    this.update();
+                    return;
+                } else if (event.kind === 'cancelEdit') {
+                    this.disposeChatInputWidget(event.request);
+                    this.scrollToRow = undefined;
+                    this.update();
+                    return;
+                } else if (event.kind === 'changeHierarchyBranch') {
+                    this.scrollToRow = undefined;
+                }
+
                 this.recreateModelTree(chatModel);
+
                 if (event.kind === 'addRequest' && !event.request.response.isComplete) {
                     event.request.response.onDidChange(() => this.scheduleUpdateScrollToRow());
+                } else if (event.kind === 'submitEdit') {
+                    event.branch.succeedingBranches().forEach(branch => {
+                        this.disposeChatInputWidget(branch.get());
+                    });
+                    this.onDidSubmitEditEmitter.fire(
+                        event.newRequest,
+                    );
                 }
             })
-        );
+        ]);
+    }
+
+    protected disposeChatInputWidget(request: ChatRequestModel): void {
+        const widget = this.chatInputs.get(request.id);
+        if (widget) {
+            widget.dispose();
+            this.chatInputs.delete(request.id);
+        }
     }
 
     protected override getScrollToRow(): number | undefined {
@@ -215,8 +292,9 @@ export class ChatViewTreeWidget extends TreeWidget {
     protected async recreateModelTree(chatModel: ChatModel): Promise<void> {
         if (CompositeTreeNode.is(this.model.root)) {
             const nodes: TreeNode[] = [];
-            chatModel.getRequests().forEach(request => {
-                nodes.push(this.mapRequestToNode(request));
+            chatModel.getBranches().forEach(branch => {
+                const request = branch.get();
+                nodes.push(this.mapRequestToNode(branch));
                 nodes.push(this.mapResponseToNode(request.response));
             });
             this.model.root.children = nodes;
@@ -338,6 +416,32 @@ export class ChatViewTreeWidget extends TreeWidget {
             chatAgentService={this.chatAgentService}
             variableService={this.variableService}
             openerService={this.openerService}
+            provideChatInputWidget={() => {
+                const editableNode = node;
+                if (isEditableRequestNode(editableNode)) {
+                    let widget = this.chatInputs.get(editableNode.id);
+                    if (!widget) {
+                        widget = this.inputWidgetFactory({
+                            node: editableNode,
+                            initialValue: editableNode.request.message.request.text,
+                            onQuery: async query => {
+                                editableNode.request.submitEdit({ text: query });
+                            }
+                        });
+
+                        this.chatInputs.set(editableNode.id, widget);
+
+                        widget.disposed.connect(() => {
+                            this.chatInputs.delete(editableNode.id);
+                            editableNode.request.cancelEdit();
+                        });
+                    }
+
+                    return widget;
+                }
+
+                return;
+            }}
         />;
     }
 
@@ -397,19 +501,92 @@ export class ChatViewTreeWidget extends TreeWidget {
         });
         event.preventDefault();
     }
+
+    protected override handleSpace(event: KeyboardEvent): boolean {
+        // We need to return false to prevent the handler within
+        // packages/core/src/browser/widgets/widget.ts
+        // Otherwise, the space key will never be handled by the monaco editor
+        return false;
+    }
+}
+
+interface WidgetContainerProps {
+    widget: ReactWidget;
 }
 
+const WidgetContainer: React.FC<WidgetContainerProps> = ({ widget }) => {
+    // eslint-disable-next-line no-null/no-null
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+    React.useEffect(() => {
+        if (containerRef.current && !widget.isAttached) {
+            Widget.attach(widget, containerRef.current);
+        }
+    }, [containerRef.current]);
+
+    // Clean up
+    React.useEffect(() =>
+        () => {
+            setTimeout(() => {
+                // Delay clean up to allow react to finish its rendering cycle
+                widget.clearFlag(Widget.Flag.IsAttached);
+                widget.dispose();
+            });
+        }, []);
+
+    return <div ref={containerRef} />;
+};
+
 const ChatRequestRender = (
     {
-        node, hoverService, chatAgentService, variableService, openerService
+        node, hoverService, chatAgentService, variableService, openerService,
+        provideChatInputWidget
     }: {
         node: RequestNode,
         hoverService: HoverService,
         chatAgentService: ChatAgentService,
         variableService: AIVariableService,
-        openerService: OpenerService
+        openerService: OpenerService,
+        provideChatInputWidget: () => ReactWidget | undefined,
     }) => {
     const parts = node.request.message.parts;
+    if (EditableChatRequestModel.isEditing(node.request)) {
+        const widget = provideChatInputWidget();
+        if (widget) {
+            return <div className="theia-RequestNode">
+                <WidgetContainer widget={widget}></WidgetContainer>
+            </div>;
+        }
+    }
+
+    const renderFooter = () => {
+        if (node.branch.items.length < 2) {
+            return;
+        }
+
+        const isFirst = node.branch.activeBranchIndex === 0;
+        const isLast = node.branch.activeBranchIndex === node.branch.items.length - 1;
+
+        return (
+            <div className='theia-RequestNode-Footer'>
+                <div className={`item ${isFirst ? '' : 'enabled'}`}>
+                    <div className="codicon codicon-chevron-left action-label" title="Previous" onClick={() => {
+                        node.branch.enablePrevious();
+                    }}></div>
+                </div>
+                <small>
+                    <span>{node.branch.activeBranchIndex + 1}/</span>
+                    <span>{node.branch.items.length}</span>
+                </small>
+                <div className={`item ${isLast ? '' : 'enabled'}`}>
+                    <div className='codicon codicon-chevron-right action-label' title="Next" onClick={() => {
+                        node.branch.enableNext();
+                    }}></div>
+                </div>
+            </div>
+        );
+    };
+
     return (
         <div className="theia-RequestNode">
             <p>
@@ -434,14 +611,20 @@ const ChatRequestRender = (
                             />
                         );
                     } else {
-                        // maintain the leading and trailing spaces with explicit `&nbsp;`, otherwise they would get trimmed by the markdown renderer
-                        const ref = useMarkdownRendering(part.text.replace(/^\s|\s$/g, '&nbsp;'), openerService, true);
+                        const ref = useMarkdownRendering(
+                            part.text
+                                .replace(/^[\r\n]+|[\r\n]+$/g, '') // remove excessive new lines
+                                .replace(/(^ )/g, '&nbsp;'), // enforce keeping space before
+                            openerService,
+                            true
+                        );
                         return (
                             <span key={index} ref={ref}></span>
                         );
                     }
                 })}
             </p>
+            {renderFooter()}
         </div>
     );
 };
@@ -474,23 +657,3 @@ const HoverableLabel = (
         </span>
     );
 };
-
-const ProgressMessage = (c: ChatProgressMessage) => (
-    <div className='theia-ResponseNode-ProgressMessage'>
-        <Indicator {...c} /> {c.content}
-    </div>
-);
-
-const Indicator = (progressMessage: ChatProgressMessage) => (
-    <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-view-commands.ts

@@ -38,6 +38,24 @@ export namespace ChatCommands {
         category: CHAT_CATEGORY,
         iconClass: codicon('bracket')
     }, 'Set Session Settings', CHAT_CATEGORY_KEY);
+
+    export const AI_CHAT_NEW_WITH_TASK_CONTEXT: Command = {
+        id: 'ai-chat.new-with-task-context',
+    };
+
+    export const AI_CHAT_SUMMARIZE_CURRENT_SESSION = Command.toLocalizedCommand({
+        id: 'ai-chat-summary-current-session',
+        iconClass: codicon('go-to-editing-session'),
+        label: 'Summarize Current Session',
+        category: CHAT_CATEGORY
+    }, undefined, CHAT_CATEGORY_KEY);
+
+    export const AI_CHAT_OPEN_SUMMARY_FOR_CURRENT_SESSION = Command.toLocalizedCommand({
+        id: 'ai-chat-open-current-session-summary',
+        iconClass: codicon('note'),
+        label: 'Open Current Session Summary',
+        category: CHAT_CATEGORY
+    }, undefined, CHAT_CATEGORY_KEY);
 }
 
 export const AI_CHAT_NEW_CHAT_WINDOW_COMMAND: Command = {

package/src/browser/chat-view-contribution.ts

@@ -17,9 +17,11 @@ import { Command, CommandContribution, CommandRegistry, CommandService, isObject
 import { CommonCommands, TreeNode } from '@theia/core/lib/browser';
 import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { ChatViewTreeWidget, isRequestNode, isResponseNode, RequestNode, ResponseNode } from './chat-tree-view/chat-view-tree-widget';
+import {
+    ChatViewTreeWidget, isEditableRequestNode, isRequestNode,
+    isResponseNode, RequestNode, ResponseNode, type EditableRequestNode
+} from './chat-tree-view/chat-view-tree-widget';
 import { AIChatInputWidget } from './chat-input-widget';
-import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 
 export namespace ChatViewCommands {
     export const COPY_MESSAGE = Command.toDefaultLocalizedCommand({
@@ -34,6 +36,10 @@ export namespace ChatViewCommands {
         id: 'chat.copy.code',
         label: 'Copy Code Block'
     }, 'theia/ai/chat-ui/copyCodeBlock');
+    export const EDIT = Command.toLocalizedCommand({
+        id: 'chat.edit.request',
+        label: 'Edit'
+    }, 'theia/ai/chat-ui/editRequest');
 }
 
 @injectable()
@@ -56,17 +62,6 @@ export class ChatViewMenuContribution implements MenuContribution, CommandContri
             },
             isEnabled: (...args: unknown[]) => containsRequestOrResponseNode(args)
         });
-        commands.registerHandler(CommonCommands.PASTE.id, {
-            execute: async (...args) => {
-                if (hasEditorAsFirstArg(args)) {
-                    const editor = args[0];
-                    const range = editor.selection;
-                    const newText = await this.clipboardService.readText();
-                    editor.executeEdits([{ range, newText }]);
-                }
-            },
-            isEnabled: (...args) => hasEditorAsFirstArg(args)
-        });
         commands.registerCommand(ChatViewCommands.COPY_MESSAGE, {
             execute: (...args: unknown[]) => {
                 if (containsRequestOrResponseNode(args)) {
@@ -102,6 +97,13 @@ export class ChatViewMenuContribution implements MenuContribution, CommandContri
             },
             isEnabled: (...args: unknown[]) => containsRequestOrResponseNode(args) && containsCode(args)
         });
+        commands.registerCommand(ChatViewCommands.EDIT, {
+            execute: (...args: [EditableRequestNode, ...unknown[]]) => {
+                args[0].request.enableEdit();
+            },
+            isEnabled: (...args: unknown[]) => hasAsFirstArg(args, isEditableRequestNode) && !args[0].request.isEditing,
+            isVisible: (...args: unknown[]) => hasAsFirstArg(args, isEditableRequestNode) && !args[0].request.isEditing
+        });
     }
 
     protected copyMessage(args: (RequestNode | ResponseNode)[]): void {
@@ -135,6 +137,9 @@ export class ChatViewMenuContribution implements MenuContribution, CommandContri
         menus.registerMenuAction([...ChatViewTreeWidget.CONTEXT_MENU, '_1'], {
             commandId: ChatViewCommands.COPY_CODE.id
         });
+        menus.registerMenuAction([...ChatViewTreeWidget.CONTEXT_MENU, '_1'], {
+            commandId: ChatViewCommands.EDIT.id
+        });
         menus.registerMenuAction([...AIChatInputWidget.CONTEXT_MENU, '_1'], {
             commandId: CommonCommands.COPY.id
         });
@@ -142,11 +147,10 @@ export class ChatViewMenuContribution implements MenuContribution, CommandContri
             commandId: CommonCommands.PASTE.id
         });
     }
-
 }
 
-function hasEditorAsFirstArg(args: unknown[]): args is [MonacoEditor, ...unknown[]] {
-    return args.length > 0 && args[0] instanceof MonacoEditor;
+function hasAsFirstArg<T>(args: unknown[], guard: (arg: unknown) => arg is T): args is [T, ...unknown[]] {
+    return args.length > 0 && guard(args[0]);
 }
 
 function extractRequestOrResponseNodes(args: unknown[]): (RequestNode | ResponseNode)[] {