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

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

@@ -142,6 +142,8 @@ export class ChatViewTreeWidget extends TreeWidget {
 
     onScrollLockChange?: (temporaryLocked: boolean) => void;
 
+    protected lastScrollTop = 0;
+
     set shouldScrollToEnd(shouldScrollToEnd: boolean) {
         this._shouldScrollToEnd = shouldScrollToEnd;
         this.shouldScrollToRow = this._shouldScrollToEnd;
@@ -189,6 +191,9 @@ export class ChatViewTreeWidget extends TreeWidget {
                 this.handleScrollEvent(scrollEvent);
             })
         ]);
+
+        // Initialize lastScrollTop with current scroll position
+        this.lastScrollTop = this.getCurrentScrollTop(undefined);
     }
 
     public setEnabled(enabled: boolean): void {
@@ -196,20 +201,39 @@ export class ChatViewTreeWidget extends TreeWidget {
         this.update();
     }
 
-    protected handleScrollEvent(_scrollEvent: unknown): void {
-        // Check if we're at the bottom of the view
+    protected handleScrollEvent(scrollEvent: unknown): void {
+        // Get current scroll position
+        const currentScrollTop = this.getCurrentScrollTop(scrollEvent);
         const isAtBottom = this.isScrolledToBottom();
 
-        // Only handle temporary scroll lock if auto-scroll is currently enabled
+        // 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) {
-            if (!isAtBottom) {
-                // User scrolled away from bottom, enable temporary lock
+            // 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);
             }
-        } else if (isAtBottom) {
-            // User scrolled back to bottom, disable temporary lock
-            this.setTemporaryScrollLock(false);
+            // 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 {
@@ -217,6 +241,32 @@ export class ChatViewTreeWidget extends TreeWidget {
         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();

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

@@ -136,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.`);
                 }
@@ -182,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);

package/src/browser/style/index.css

@@ -200,22 +200,28 @@ div:last-child > .theia-ChatNode {
   margin: 0;
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
 }
 
 .theia-ChatInput-ChatContext-Element {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   border-radius: calc(var(--theia-ui-padding) * 2 / 3);
   border: var(--theia-border-width) solid var(--theia-dropdown-border);
   padding: 2px 4px 2px 6px;
-  height: 18px;
   line-height: 16px;
   min-width: 0;
   user-select: none;
   cursor: pointer;
 }
 
+.theia-ChatInput-ChatContext-Row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
 .theia-ChatInput-ChatContext-labelParts {
   flex: 1;
   min-width: 0;
@@ -497,6 +503,32 @@ div:last-child > .theia-ChatNode {
   padding-left: 8px !important;
 }
 
+.theia-ChatInput-ImagePreview-Item {
+  position: relative;
+  border: var(--theia-border-width) solid var(--theia-dropdown-border);
+  border-radius: 4px;
+  overflow: hidden;
+  height: 100px;
+  width: 120px;
+}
+
+.theia-ChatInput-ChatContext-ImageRow {
+  margin-top: 4px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.theia-ChatInput-ImageContext-Element {
+  min-width: 150px;
+}
+
+.theia-ChatInput-ImagePreview-Item img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .theia-ChatInputOptions {
   width: 100%;
   height: 25px;
@@ -706,7 +738,7 @@ div:last-child > .theia-ChatNode {
   background: var(--theia-menu-background);
   border: 1px solid var(--theia-menu-border);
   border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -900,6 +932,7 @@ details[open].collapsible-arguments .collapsible-arguments-summary {
   margin-bottom: 10px;
   height: calc(100% - 50px);
 }
+
 .monaco-session-settings-dialog {
   flex: 1;
   min-height: 350px;
@@ -909,6 +942,7 @@ details[open].collapsible-arguments .collapsible-arguments-summary {
   border: 1px solid var(--theia-editorWidget-border);
   margin-bottom: 10px;
 }
+
 .session-settings-error {
   color: var(--theia-errorForeground);
   min-height: 1em;
@@ -924,3 +958,144 @@ details[open].collapsible-arguments .collapsible-arguments-summary {
   padding-block-end: 8px;
   user-select: none;
 }
+
+/* Delegation response styles */
+.theia-delegation-container {
+  border: 2px solid var(--theia-sideBarSectionHeader-border);
+  border-radius: 8px;
+  margin: 8px 0;
+  background-color: var(--theia-sideBar-background);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.delegation-response-details {
+  width: 100%;
+}
+
+.delegation-summary {
+  cursor: pointer;
+  padding: 12px 16px;
+  background-color: var(--theia-editorGroupHeader-tabsBackground);
+  border-radius: 6px 6px 0 0;
+  border-bottom: 1px solid var(--theia-sideBarSectionHeader-border);
+  list-style: none;
+  position: relative;
+}
+
+.delegation-summary:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.delegation-summary::before {
+  content: '\25BC';
+  /* Down arrow */
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease;
+  color: var(--theia-descriptionForeground);
+  font-size: 12px;
+}
+
+.delegation-response-details:not([open]) .delegation-summary::before {
+  transform: translateY(-50%) rotate(-90deg);
+  /* Right arrow when closed */
+}
+
+.delegation-response-details:not([open]) .delegation-summary {
+  border-bottom: none;
+  border-radius: 6px;
+}
+
+.delegation-summary::-webkit-details-marker {
+  display: none;
+}
+
+.delegation-summary::marker {
+  content: '';
+}
+
+.delegation-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 16px;
+}
+
+.delegation-agent {
+  flex: 1;
+  /* Takes up available space */
+  font-size: 14px;
+  color: var(--theia-foreground);
+}
+
+.delegation-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  /* Leave space for the arrow */
+  margin-right: 24px;
+}
+
+.delegation-status-icon {
+  font-size: 16px;
+}
+
+.delegation-status-icon.codicon-loading {
+  animation: spin 2s linear infinite;
+  color: var(--theia-progressBar-background);
+}
+
+.delegation-status-icon.codicon-check {
+  color: var(--theia-charts-green);
+}
+
+.delegation-status-icon.codicon-error {
+  color: var(--theia-errorForeground);
+}
+
+.delegation-status-icon.codicon-cancel {
+  color: var(--theia-charts-orange);
+}
+
+.delegation-status-text {
+  color: var(--theia-descriptionForeground);
+  font-weight: normal;
+}
+
+.delegation-content {
+  padding: 16px;
+}
+
+.delegation-prompt-section {
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--theia-sideBarSectionHeader-border);
+}
+
+.delegation-prompt {
+  margin-top: 6px;
+  padding: 8px 12px;
+  background-color: var(--theia-editor-background);
+  border-radius: 4px;
+  border: 1px solid var(--theia-dropdown-border);
+  font-style: italic;
+  color: var(--theia-descriptionForeground);
+}
+
+.delegation-response-section {
+  margin-top: 16px;
+}
+
+.delegation-response-section>strong {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--theia-foreground);
+}
+
+.delegation-response-placeholder {
+  margin-top: 8px;
+  min-height: 40px;
+}