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

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

@@ -64,7 +64,8 @@ import { AIChatTreeInputFactory, type AIChatTreeInputWidget } from './chat-view-
 // TODO Instead of directly operating on the ChatRequestModel we could use an intermediate view model
 export interface RequestNode extends TreeNode {
     request: ChatRequestModel,
-    branch: ChatHierarchyBranch
+    branch: ChatHierarchyBranch,
+    sessionId: string
 }
 export const isRequestNode = (node: TreeNode): node is RequestNode => 'request' in node;
 
@@ -75,7 +76,8 @@ export const isEditableRequestNode = (node: TreeNode): node is EditableRequestNo
 
 // TODO Instead of directly operating on the ChatResponseModel we could use an intermediate view model
 export interface ResponseNode extends TreeNode {
-    response: ChatResponseModel
+    response: ChatResponseModel,
+    sessionId: string
 }
 export const isResponseNode = (node: TreeNode): node is ResponseNode => 'response' in node;
 
@@ -136,6 +138,12 @@ export class ChatViewTreeWidget extends TreeWidget {
 
     protected isEnabled = false;
 
+    protected chatModelId: string;
+
+    onScrollLockChange?: (temporaryLocked: boolean) => void;
+
+    protected lastScrollTop = 0;
+
     set shouldScrollToEnd(shouldScrollToEnd: boolean) {
         this._shouldScrollToEnd = shouldScrollToEnd;
         this.shouldScrollToRow = this._shouldScrollToEnd;
@@ -178,8 +186,14 @@ export class ChatViewTreeWidget extends TreeWidget {
                     widget.setEnabled(change);
                 });
                 this.update();
+            }),
+            this.onScroll(scrollEvent => {
+                this.handleScrollEvent(scrollEvent);
             })
         ]);
+
+        // Initialize lastScrollTop with current scroll position
+        this.lastScrollTop = this.getCurrentScrollTop(undefined);
     }
 
     public setEnabled(enabled: boolean): void {
@@ -187,6 +201,72 @@ export class ChatViewTreeWidget extends TreeWidget {
         this.update();
     }
 
+    protected handleScrollEvent(scrollEvent: unknown): void {
+        // Get current scroll position
+        const currentScrollTop = this.getCurrentScrollTop(scrollEvent);
+        const isAtBottom = this.isScrolledToBottom();
+
+        // Determine scroll direction
+        const isScrollingUp = currentScrollTop < this.lastScrollTop;
+        const isScrollingDown = currentScrollTop > this.lastScrollTop;
+
+        // Handle scroll lock logic based on direction and position
+        // The key insight is that we only enable temporary lock when scrolling UP,
+        // and only disable it when scrolling DOWN to the bottom. This prevents
+        // the jitter when users try to scroll up by just a few pixels from the bottom.
+        if (this.shouldScrollToEnd) {
+            // Auto-scroll is enabled, check if we need to enable temporary lock
+            if (isScrollingUp) {
+                // User is scrolling up and not at bottom - enable temporary lock
+                this.setTemporaryScrollLock(true);
+            }
+            // Note: We don't disable temporary lock when scrolling down while shouldScrollToEnd is true
+            // because that would cause jitter. The lock will be disabled when user reaches bottom.
+        } else {
+            // Temporary lock is active, check if we should disable it
+            if (isScrollingDown && isAtBottom) {
+                // User scrolled back to bottom - disable temporary lock
+                this.setTemporaryScrollLock(false);
+            }
+            // Note: We don't change the lock state when scrolling up while locked,
+            // as the user is intentionally scrolling away from auto-scroll behavior.
+        }
+
+        // Update last scroll position for next comparison
+        this.lastScrollTop = currentScrollTop;
+    }
+
+    protected setTemporaryScrollLock(enabled: boolean): void {
+        // Immediately apply scroll lock changes without delay
+        this.onScrollLockChange?.(enabled);
+    }
+
+    protected getCurrentScrollTop(scrollEvent: unknown): number {
+        // For virtualized trees, try to get scroll position from the virtualized view
+        if (this.props.virtualized !== false && this.view) {
+            const scrollState = this.getVirtualizedScrollState();
+            if (scrollState !== undefined) {
+                return scrollState.scrollTop;
+            }
+        }
+
+        // Try to extract scroll position from the scroll event
+        if (scrollEvent && typeof scrollEvent === 'object' && 'scrollTop' in scrollEvent) {
+            const scrollEventWithScrollTop = scrollEvent as { scrollTop: unknown };
+            const scrollTop = scrollEventWithScrollTop.scrollTop;
+            if (typeof scrollTop === 'number' && !isNaN(scrollTop)) {
+                return scrollTop;
+            }
+        }
+
+        // Last resort: use DOM scroll position
+        if (this.node && typeof this.node.scrollTop === 'number') {
+            return this.node.scrollTop;
+        }
+
+        return 0;
+    }
+
     protected override renderTree(model: TreeModel): React.ReactNode {
         if (!this.isEnabled) {
             return this.renderDisabledMessage();
@@ -214,7 +294,8 @@ export class ChatViewTreeWidget extends TreeWidget {
             get request(): ChatRequestModel {
                 return branch.get();
             },
-            branch
+            branch,
+            sessionId: this.chatModelId
         };
     }
 
@@ -222,7 +303,8 @@ export class ChatViewTreeWidget extends TreeWidget {
         return {
             id: response.id,
             parent: this.model.root as CompositeTreeNode,
-            response
+            response,
+            sessionId: this.chatModelId
         };
     }
 
@@ -292,6 +374,7 @@ export class ChatViewTreeWidget extends TreeWidget {
     protected async recreateModelTree(chatModel: ChatModel): Promise<void> {
         if (CompositeTreeNode.is(this.model.root)) {
             const nodes: TreeNode[] = [];
+            this.chatModelId = chatModel.id;
             chatModel.getBranches().forEach(branch => {
                 const request = branch.get();
                 nodes.push(this.mapRequestToNode(branch));
@@ -426,7 +509,8 @@ export class ChatViewTreeWidget extends TreeWidget {
                             initialValue: editableNode.request.message.request.text,
                             onQuery: async query => {
                                 editableNode.request.submitEdit({ text: query });
-                            }
+                            },
+                            branch: editableNode.branch
                         });
 
                         this.chatInputs.set(editableNode.id, widget);

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

@@ -0,0 +1,101 @@
+// *****************************************************************************
+// 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, named } from '@theia/core/shared/inversify';
+import { ProgressMessage } from '../chat-progress-message';
+import { ChatViewTreeWidget, ResponseNode } from './chat-view-tree-widget';
+import * as React from '@theia/core/shared/react';
+import { ContributionProvider } from '@theia/core';
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { ChatNodeToolbarActionContribution } from '../chat-node-toolbar-action-contribution';
+import { ChatResponseContent } from '@theia/ai-chat';
+import { ContextMenuRenderer, TreeNode } from '@theia/core/lib/browser';
+import { nls } from '@theia/core/lib/common/nls';
+
+/**
+ * Subset of the ChatViewTreeWidget used to render ResponseNodes for delegated prompts.
+ */
+@injectable()
+export class SubChatWidget {
+
+    @inject(ContributionProvider) @named(ChatResponsePartRenderer)
+    protected readonly chatResponsePartRenderers: ContributionProvider<ChatResponsePartRenderer<ChatResponseContent>>;
+
+    @inject(ContributionProvider) @named(ChatNodeToolbarActionContribution)
+    protected readonly chatNodeToolbarActionContributions: ContributionProvider<ChatNodeToolbarActionContribution>;
+
+    @inject(ContextMenuRenderer) contextMenuRenderer: ContextMenuRenderer;
+
+    renderChatResponse(node: ResponseNode): React.ReactNode {
+        return (
+            <div className={'theia-ResponseNode'}>
+                {!node.response.isComplete
+                    && node.response.response.content.length === 0
+                    && node.response.progressMessages
+                        .filter(c => c.show === 'untilFirstContent')
+                        .map((c, i) =>
+                            <ProgressMessage {...c} key={`${node.id}-progress-untilFirstContent-${i}`} />
+                        )
+                }
+                {node.response.response.content.map((c, i) =>
+                    <div className='theia-ResponseNode-Content' key={`${node.id}-content-${i}`}>{this.getChatResponsePartRenderer(c, node)}</div>
+                )}
+                {!node.response.isComplete
+                    && node.response.progressMessages
+                        .filter(c => c.show === 'whileIncomplete')
+                        .map((c, i) =>
+                            <ProgressMessage {...c} key={`${node.id}-progress-whileIncomplete-${i}`} />
+                        )
+                }
+                {node.response.progressMessages
+                    .filter(c => c.show === 'forever')
+                    .map((c, i) =>
+                        <ProgressMessage {...c} key={`${node.id}-progress-afterComplete-${i}`} />
+                    )
+                }
+            </div>
+        );
+    }
+
+    protected getChatResponsePartRenderer(content: ChatResponseContent, node: ResponseNode): React.ReactNode {
+        const renderer = this.chatResponsePartRenderers.getContributions().reduce<[number, ChatResponsePartRenderer<ChatResponseContent> | undefined]>(
+            (prev, current) => {
+                const prio = current.canHandle(content);
+                if (prio > prev[0]) {
+                    return [prio, current];
+                } return prev;
+            },
+            [-1, undefined])[1];
+        if (!renderer) {
+            console.error('No renderer found for content', content);
+            return <div>{nls.localize('theia/ai/chat-ui/chat-view-tree-widget/noRenderer', 'Error: No renderer found')}</div>;
+        }
+        return renderer.render(content, node);
+    }
+
+    protected handleContextMenu(node: TreeNode | undefined, event: React.MouseEvent<HTMLElement>): void {
+        this.contextMenuRenderer.render({
+            menuPath: ChatViewTreeWidget.CONTEXT_MENU,
+            anchor: { x: event.clientX, y: event.clientY },
+            args: [node],
+            context: event.currentTarget
+        });
+        event.preventDefault();
+    }
+}
+
+export const SubChatWidgetFactory = Symbol('SubChatWidgetFactory');
+export type SubChatWidgetFactory = () => SubChatWidget;

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

@@ -43,6 +43,12 @@ export namespace ChatCommands {
         id: 'ai-chat.new-with-task-context',
     };
 
+    export const AI_CHAT_INITIATE_SESSION_WITH_TASK_CONTEXT = Command.toLocalizedCommand({
+        id: 'ai-chat.initiate-session-with-task-context',
+        label: 'Task Context: Initiate Session',
+        category: CHAT_CATEGORY
+    }, undefined, CHAT_CATEGORY_KEY);
+
     export const AI_CHAT_SUMMARIZE_CURRENT_SESSION = Command.toLocalizedCommand({
         id: 'ai-chat-summary-current-session',
         iconClass: codicon('go-to-editing-session'),

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

@@ -117,7 +117,7 @@ export class ChatViewMenuContribution implements MenuContribution, CommandContri
 
     protected getCopyText(arg: RequestNode | ResponseNode): string {
         if (isRequestNode(arg)) {
-            return arg.request.request.text;
+            return arg.request.request.text ?? '';
         } else if (isResponseNode(arg)) {
             return arg.response.response.asDisplayString();
         }

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

@@ -13,7 +13,7 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { CommandService, deepClone, Emitter, Event, MessageService } from '@theia/core';
+import { CommandService, deepClone, Emitter, Event, MessageService, URI } from '@theia/core';
 import { ChatRequest, ChatRequestModel, ChatService, ChatSession, isActiveSessionChangedEvent, MutableChatModel } from '@theia/ai-chat';
 import { BaseWidget, codicon, ExtractableWidget, Message, PanelLayout, PreferenceService, StatefulWidget } from '@theia/core/lib/browser';
 import { nls } from '@theia/core/lib/common/nls';
@@ -28,6 +28,7 @@ import { FrontendVariableService } from '@theia/ai-core/lib/browser';
 export namespace ChatViewWidget {
     export interface State {
         locked?: boolean;
+        temporaryLocked?: boolean;
     }
 }
 
@@ -60,7 +61,7 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
 
     protected chatSession: ChatSession;
 
-    protected _state: ChatViewWidget.State = { locked: false };
+    protected _state: ChatViewWidget.State = { locked: false, temporaryLocked: false };
     protected readonly onStateChangedEmitter = new Emitter<ChatViewWidget.State>();
 
     secondaryWindow: Window | undefined;
@@ -87,7 +88,8 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
             this.treeWidget,
             this.inputWidget,
             this.onStateChanged(newState => {
-                this.treeWidget.shouldScrollToEnd = !newState.locked;
+                const shouldScrollToEnd = !newState.locked && !newState.temporaryLocked;
+                this.treeWidget.shouldScrollToEnd = shouldScrollToEnd;
                 this.update();
             })
         ]);
@@ -107,6 +109,7 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         this.inputWidget.onDeleteChangeSet = this.onDeleteChangeSet.bind(this);
         this.inputWidget.onDeleteChangeSetElement = this.onDeleteChangeSetElement.bind(this);
         this.treeWidget.trackChatModel(this.chatSession.model);
+        this.treeWidget.onScrollLockChange = this.onScrollLockChange.bind(this);
 
         this.initListeners();
 
@@ -133,9 +136,6 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
                     this.treeWidget.trackChatModel(this.chatSession.model);
                     this.inputWidget.chatModel = this.chatSession.model;
                     this.inputWidget.pinnedAgent = this.chatSession.pinnedAgent;
-                    if (event.focus) {
-                        this.show();
-                    }
                 } else {
                     console.warn(`Session with ${event.sessionId} not found.`);
                 }
@@ -161,6 +161,8 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         if (oldState.locked) {
             copy.locked = oldState.locked;
         }
+        // Don't restore temporary lock state as it should reset on restart
+        copy.temporaryLocked = false;
         this.state = copy;
     }
 
@@ -177,8 +179,8 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         return this.onStateChangedEmitter.event;
     }
 
-    protected async onQuery(query: string | ChatRequest): Promise<void> {
-        const chatRequest: ChatRequest = typeof query === 'string' ? { text: query } : { ...query };
+    protected async onQuery(query?: string | ChatRequest): Promise<void> {
+        const chatRequest: ChatRequest = !query ? { text: '' } : typeof query === 'string' ? { text: query } : { ...query };
         if (chatRequest.text.length === 0) { return; }
 
         const requestProgress = await this.chatService.sendRequest(this.chatSession.id, chatRequest);
@@ -210,16 +212,27 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         this.chatService.deleteChangeSet(sessionId);
     }
 
-    protected onDeleteChangeSetElement(sessionId: string, index: number): void {
-        this.chatService.deleteChangeSetElement(sessionId, index);
+    protected onDeleteChangeSetElement(sessionId: string, uri: URI): void {
+        this.chatService.deleteChangeSetElement(sessionId, uri);
+    }
+
+    protected onScrollLockChange(temporaryLocked: boolean): void {
+        this.setTemporaryLock(temporaryLocked);
     }
 
     lock(): void {
-        this.state = { ...deepClone(this.state), locked: true };
+        this.state = { ...deepClone(this.state), locked: true, temporaryLocked: false };
     }
 
     unlock(): void {
-        this.state = { ...deepClone(this.state), locked: false };
+        this.state = { ...deepClone(this.state), locked: false, temporaryLocked: false };
+    }
+
+    setTemporaryLock(locked: boolean): void {
+        // Only set temporary lock if not permanently locked
+        if (!this.state.locked) {
+            this.state = { ...deepClone(this.state), temporaryLocked: locked };
+        }
     }
 
     get isLocked(): boolean {