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

package/src/browser/chat-response-renderer/delegation-response-renderer.tsx

@@ -0,0 +1,177 @@
+// *****************************************************************************
+// 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 } from '@theia/core/shared/inversify';
+import { ChatRequestInvocation, ChatResponseContent, ChatResponseModel } from '@theia/ai-chat';
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import * as React from '@theia/core/shared/react';
+import { DelegationResponseContent, isDelegationResponseContent } from '@theia/ai-chat/lib/browser/delegation-response-content';
+import { ResponseNode } from '../chat-tree-view';
+import { CompositeTreeNode } from '@theia/core/lib/browser';
+import { SubChatWidgetFactory } from '../chat-tree-view/sub-chat-widget';
+import { DisposableCollection } from '@theia/core';
+
+@injectable()
+export class DelegationResponseRenderer implements ChatResponsePartRenderer<DelegationResponseContent> {
+
+    @inject(SubChatWidgetFactory)
+    subChatWidgetFactory: SubChatWidgetFactory;
+
+    canHandle(response: ChatResponseContent): number {
+        if (isDelegationResponseContent(response)) {
+            return 10;
+        }
+        return -1;
+    }
+    render(response: DelegationResponseContent, parentNode: ResponseNode): React.ReactNode {
+        return this.renderExpandableNode(response, parentNode);
+    }
+
+    private renderExpandableNode(response: DelegationResponseContent, parentNode: ResponseNode): React.ReactNode {
+        return <DelegatedChat
+            response={response.response}
+            agentId={response.agentId}
+            prompt={response.prompt}
+            parentNode={parentNode}
+            subChatWidgetFactory={this.subChatWidgetFactory} />;
+    }
+}
+
+interface DelegatedChatProps {
+    response: ChatRequestInvocation;
+    agentId: string;
+    prompt: string;
+    parentNode: ResponseNode;
+    subChatWidgetFactory: SubChatWidgetFactory;
+}
+
+interface DelegatedChatState {
+    node?: ResponseNode;
+}
+
+class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatState> {
+    private widget: ReturnType<SubChatWidgetFactory>;
+    private readonly toDispose = new DisposableCollection();
+
+    constructor(props: DelegatedChatProps) {
+        super(props);
+        this.state = {
+            node: undefined
+        };
+        this.widget = props.subChatWidgetFactory();
+    }
+
+    override componentDidMount(): void {
+        // Start rendering as soon as the response is created (streaming mode)
+        this.props.response.responseCreated.then(chatModel => {
+            const node = mapResponseToNode(chatModel, this.props.parentNode);
+            this.setState({ node });
+
+            // Listen for changes to update the rendering as the response streams in
+            const changeListener = () => {
+                // Force re-render when the response content changes
+                this.forceUpdate();
+            };
+            this.toDispose.push(chatModel.onDidChange(changeListener));
+        }).catch(error => {
+            console.error('Failed to create delegated chat response:', error);
+            // Still try to handle completion in case of partial success
+        });
+
+        // Keep the completion handling for final cleanup if needed
+        this.props.response.responseCompleted.then(() => {
+            // Final update when response is complete
+            this.forceUpdate();
+        }).catch(error => {
+            console.error('Error in delegated chat response completion:', error);
+            // Force update anyway to show any partial content or error state
+            this.forceUpdate();
+        });
+    }
+
+    override componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    override render(): React.ReactNode {
+        const { agentId, prompt } = this.props;
+        const hasNode = !!this.state.node;
+        const isComplete = this.state.node?.response.isComplete ?? false;
+        const isCanceled = this.state.node?.response.isCanceled ?? false;
+        const isError = this.state.node?.response.isError ?? false;
+
+        let statusIcon = '';
+        let statusText = '';
+        if (hasNode) {
+            if (isComplete) {
+                statusIcon = 'codicon-check';
+                statusText = 'completed';
+            } else if (isCanceled) {
+                statusIcon = 'codicon-cancel';
+                statusText = 'canceled';
+            } else if (isError) {
+                statusIcon = 'codicon-error';
+                statusText = 'error';
+            } else {
+                statusIcon = 'codicon-loading';
+                statusText = 'generating...';
+            }
+        } else {
+            statusIcon = 'codicon-loading';
+            statusText = 'starting...';
+        }
+
+        return (
+            <div className="theia-delegation-container">
+                <details className="delegation-response-details">
+                    <summary className="delegation-summary">
+                        <div className="delegation-header">
+                            <span className="delegation-agent">
+                                <strong>Agent:</strong> {agentId}
+                            </span>
+                            <span className="delegation-status">
+                                <span className={`codicon ${statusIcon} delegation-status-icon`}></span>
+                                <span className="delegation-status-text">{statusText}</span>
+                            </span>
+                        </div>
+                    </summary>
+                    <div className="delegation-content">
+                        <div className="delegation-prompt-section">
+                            <strong>Delegated prompt:</strong>
+                            <div className="delegation-prompt">{prompt}</div>
+                        </div>
+                        <div className="delegation-response-section">
+                            <strong>Response:</strong>
+                            <div className='delegation-response-placeholder'>
+                                {hasNode && this.state.node ? this.widget.renderChatResponse(this.state.node) :
+                                    <div className="theia-ChatContentInProgress">Starting delegation...</div>
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </details>
+            </div>
+        );
+    }
+}
+
+function mapResponseToNode(response: ChatResponseModel, parentNode: ResponseNode): ResponseNode {
+    return {
+        id: response.id,
+        parent: parentNode as unknown as CompositeTreeNode,
+        response,
+        sessionId: parentNode.sessionId
+    };
+}

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

@@ -24,3 +24,4 @@ export * from './toolcall-part-renderer';
 export * from './thinking-part-renderer';
 export * from './progress-part-renderer';
 export * from './tool-confirmation';
+export * from './delegation-response-renderer';

package/src/browser/chat-response-renderer/tool-confirmation.tsx

@@ -22,38 +22,38 @@ import { ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
 /**
  * States the tool confirmation component can be in
  */
-export type ToolConfirmationState = 'waiting' | 'approved' | 'denied';
+export type ToolConfirmationState = 'waiting' | 'allowed' | 'denied';
 
 export interface ToolConfirmationProps {
     response: ToolCallChatResponseContent;
-    onApprove: (mode?: 'once' | 'session' | 'forever') => void;
+    onAllow: (mode?: 'once' | 'session' | 'forever') => void;
     onDeny: (mode?: 'once' | 'session' | 'forever') => void;
 }
 
 /**
  * Component that displays approval/denial buttons for tool execution
  */
-export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, onApprove, onDeny }) => {
+export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, onAllow, onDeny }) => {
     const [state, setState] = React.useState<ToolConfirmationState>('waiting');
     // Track selected mode for each action
-    const [approveMode, setApproveMode] = React.useState<'once' | 'session' | 'forever'>('once');
+    const [allowMode, setAllowMode] = React.useState<'once' | 'session' | 'forever'>('once');
     const [denyMode, setDenyMode] = React.useState<'once' | 'session' | 'forever'>('once');
-    const [dropdownOpen, setDropdownOpen] = React.useState<'approve' | 'deny' | undefined>(undefined);
+    const [dropdownOpen, setDropdownOpen] = React.useState<'allow' | 'deny' | undefined>(undefined);
 
-    const handleApprove = React.useCallback(() => {
-        setState('approved');
-        onApprove(approveMode);
-    }, [onApprove, approveMode]);
+    const handleAllow = React.useCallback(() => {
+        setState('allowed');
+        onAllow(allowMode);
+    }, [onAllow, allowMode]);
 
     const handleDeny = React.useCallback(() => {
         setState('denied');
         onDeny(denyMode);
     }, [onDeny, denyMode]);
 
-    if (state === 'approved') {
+    if (state === 'allowed') {
         return (
-            <div className="theia-tool-confirmation-status approved">
-                <span className={codicon('check')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/approved', 'Tool execution approved')}
+            <div className="theia-tool-confirmation-status allowed">
+                <span className={codicon('check')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/allowed', 'Tool execution allowed')}
             </div>
         );
     }
@@ -69,12 +69,12 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, on
     // Helper for dropdown options
     const MODES: Array<'once' | 'session' | 'forever'> = ['once', 'session', 'forever'];
     // Unified labels for both main button and dropdown, as requested
-    const modeLabel = (type: 'approve' | 'deny', mode: 'once' | 'session' | 'forever') => {
-        if (type === 'approve') {
+    const modeLabel = (type: 'allow' | 'deny', mode: 'once' | 'session' | 'forever') => {
+        if (type === 'allow') {
             switch (mode) {
-                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve', 'Approve');
-                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-session', 'Approve for this Chat');
-                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-forever', 'Always Approve');
+                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow', 'Allow');
+                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-session', 'Allow for this Chat');
+                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-forever', 'Always Allow');
             }
         } else {
             switch (mode) {
@@ -88,12 +88,12 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, on
     const mainButtonLabel = modeLabel; // Use the same function for both
 
     // Tooltips for dropdown options
-    const modeTooltip = (type: 'approve' | 'deny', mode: 'once' | 'session' | 'forever') => {
-        if (type === 'approve') {
+    const modeTooltip = (type: 'allow' | 'deny', mode: 'once' | 'session' | 'forever') => {
+        if (type === 'allow') {
             switch (mode) {
-                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-tooltip', 'Approve this tool call once');
-                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-session-tooltip', 'Approve all calls of this tool for this chat session');
-                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/approve-forever-tooltip', 'Always approve this tool');
+                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-tooltip', 'Allow this tool call once');
+                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-session-tooltip', 'Allow all calls of this tool for this chat session');
+                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/allow-forever-tooltip', 'Always allow this tool');
             }
         } else {
             switch (mode) {
@@ -105,27 +105,27 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, on
     };
 
     // Split button for approve/deny
-    const renderSplitButton = (type: 'approve' | 'deny') => {
-        const selectedMode = type === 'approve' ? approveMode : denyMode;
-        const setMode = type === 'approve' ? setApproveMode : setDenyMode;
-        const handleMain = type === 'approve' ? handleApprove : handleDeny;
+    const renderSplitButton = (type: 'allow' | 'deny') => {
+        const selectedMode = type === 'allow' ? allowMode : denyMode;
+        const setMode = type === 'allow' ? setAllowMode : setDenyMode;
+        const handleMain = type === 'allow' ? handleAllow : handleDeny;
         const otherModes = MODES.filter(m => m !== selectedMode);
         return (
             <div className={`theia-tool-confirmation-split-button ${type}`}
                 style={{ display: 'inline-flex', position: 'relative' }}>
                 <button
-                    className={`theia-button ${type === 'approve' ? 'primary' : 'secondary'} theia-tool-confirmation-main-btn`}
+                    className={`theia-button ${type === 'allow' ? 'primary' : 'secondary'} theia-tool-confirmation-main-btn`}
                     onClick={handleMain}
                 >
                     {mainButtonLabel(type, selectedMode)}
                 </button>
                 <button
-                    className={`theia-button ${type === 'approve' ? 'primary' : 'secondary'} theia-tool-confirmation-chevron-btn`}
+                    className={`theia-button ${type === 'allow' ? 'primary' : 'secondary'} theia-tool-confirmation-chevron-btn`}
                     onClick={() => setDropdownOpen(dropdownOpen === type ? undefined : type)}
                     aria-haspopup="true"
                     aria-expanded={dropdownOpen === type}
                     tabIndex={0}
-                    title={type === 'approve' ? 'More Approve Options' : 'More Deny Options'}
+                    title={type === 'allow' ? 'More Allow Options' : 'More Deny Options'}
                 >
                     <span className={codicon('chevron-down')}></span>
                 </button>
@@ -166,7 +166,7 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, on
             </div>
             <div className="theia-tool-confirmation-actions">
                 {renderSplitButton('deny')}
-                {renderSplitButton('approve')}
+                {renderSplitButton('allow')}
             </div>
         </div>
     );

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

@@ -19,11 +19,13 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ReactNode } from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
-import { codicon } from '@theia/core/lib/browser';
+import { codicon, OpenerService } from '@theia/core/lib/browser';
 import * as React from '@theia/core/shared/react';
 import { ToolConfirmation, ToolConfirmationState } from './tool-confirmation';
 import { ToolConfirmationManager, ToolConfirmationMode } from '@theia/ai-chat/lib/browser/chat-tool-preferences';
 import { ResponseNode } from '../chat-tree-view';
+import { useMarkdownRendering } from './markdown-part-renderer';
+import { ToolCallResult } from '@theia/ai-core';
 
 @injectable()
 export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
@@ -31,6 +33,9 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
     @inject(ToolConfirmationManager)
     protected toolConfirmationManager: ToolConfirmationManager;
 
+    @inject(OpenerService)
+    protected openerService: OpenerService;
+
     canHandle(response: ChatResponseContent): number {
         if (ToolCallChatResponseContent.is(response)) {
             return 10;
@@ -47,7 +52,52 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             toolConfirmationManager={this.toolConfirmationManager}
             chatId={chatId}
             renderCollapsibleArguments={this.renderCollapsibleArguments.bind(this)}
-            tryPrettyPrintJson={this.tryPrettyPrintJson.bind(this)} />;
+            responseRenderer={this.renderResult.bind(this)} />;
+    }
+
+    protected renderResult(response: ToolCallChatResponseContent): ReactNode {
+        const result = this.tryParse(response.result);
+        if (!result) {
+            return undefined;
+        }
+        if (typeof result === 'string') {
+            return <pre>{JSON.stringify(result, undefined, 2)}</pre>;
+        }
+        if ('content' in result) {
+            return <div className='theia-toolCall-response-content'>
+                {result.content.map((content, idx) => {
+                    switch (content.type) {
+                        case 'image': {
+                            return <div key={`content-${idx}-${content.type}`} className='theia-toolCall-image-result'>
+                                <img src={`data:${content.mimeType};base64,${content.base64data}`} />
+                            </div>;
+                        }
+                        case 'text': {
+                            return <div key={`content-${idx}-${content.type}`} className='theia-toolCall-text-result'>
+                                <MarkdownRender text={content.text} openerService={this.openerService} />
+                            </div>;
+                        }
+                        case 'audio':
+                        case 'error':
+                        default: {
+                            return <div key={`content-${idx}-${content.type}`} className='theia-toolCall-default-result'><pre>{JSON.stringify(response, undefined, 2)}</pre></div>;
+                        }
+                    }
+                })}
+            </div>;
+        }
+        return <pre>{JSON.stringify(result, undefined, 2)}</pre>;
+    }
+
+    private tryParse(result: ToolCallResult): ToolCallResult {
+        if (!result) {
+            return undefined;
+        }
+        try {
+            return typeof result === 'string' ? JSON.parse(result) : result;
+        } catch (error) {
+            return result;
+        }
     }
 
     protected getToolConfirmationSettings(responseId: string, chatId: string): ToolConfirmationMode {
@@ -75,33 +125,10 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             return args;
         }
     }
-
-    private tryPrettyPrintJson(response: ToolCallChatResponseContent): string | undefined {
-        let responseContent = response.result;
-        try {
-            if (responseContent) {
-                if (typeof responseContent === 'string') {
-                    responseContent = JSON.parse(responseContent);
-                }
-                responseContent = JSON.stringify(responseContent, undefined, 2);
-            }
-        } catch (e) {
-            if (typeof responseContent !== 'string') {
-                responseContent = nls.localize(
-                    'theia/ai/chat-ui/toolcall-part-renderer/prettyPrintError',
-                    "The content could not be converted to string: '{0}'. This is the original content: '{1}'.",
-                    e.message,
-                    responseContent
-                );
-            }
-            // fall through
-        }
-        return responseContent;
-    }
 }
 
 const Spinner = () => (
-    <span className={codicon('loading')}></span>
+    <span className={`${codicon('loading')} theia-animation-spin`}></span>
 );
 
 interface ToolCallContentProps {
@@ -110,19 +137,19 @@ interface ToolCallContentProps {
     toolConfirmationManager: ToolConfirmationManager;
     chatId: string;
     renderCollapsibleArguments: (args: string | undefined) => ReactNode;
-    tryPrettyPrintJson: (response: ToolCallChatResponseContent) => string | undefined;
+    responseRenderer: (response: ToolCallChatResponseContent) => ReactNode | undefined;
 }
 
 /**
  * A function component to handle tool call rendering and confirmation
  */
-const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmationMode, toolConfirmationManager, chatId, tryPrettyPrintJson, renderCollapsibleArguments }) => {
+const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmationMode, toolConfirmationManager, chatId, responseRenderer, renderCollapsibleArguments }) => {
     const [confirmationState, setConfirmationState] = React.useState<ToolConfirmationState>('waiting');
 
     React.useEffect(() => {
-        if (confirmationMode === ToolConfirmationMode.YOLO) {
+        if (confirmationMode === ToolConfirmationMode.ALWAYS_ALLOW) {
             response.confirm();
-            setConfirmationState('approved');
+            setConfirmationState('allowed');
             return;
         } else if (confirmationMode === ToolConfirmationMode.DISABLED) {
             response.deny();
@@ -132,7 +159,7 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
         response.confirmed.then(
             confirmed => {
                 if (confirmed === true) {
-                    setConfirmationState('approved');
+                    setConfirmationState('allowed');
                 } else {
                     setConfirmationState('denied');
                 }
@@ -143,11 +170,11 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
             });
     }, [response, confirmationMode]);
 
-    const handleApprove = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
+    const handleAllow = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
         if (mode === 'forever' && response.name) {
-            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.YOLO);
+            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.ALWAYS_ALLOW);
         } else if (mode === 'session' && response.name) {
-            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.YOLO, chatId);
+            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.ALWAYS_ALLOW, chatId);
         }
         response.confirm();
     }, [response, toolConfirmationManager, chatId]);
@@ -163,35 +190,43 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
 
     return (
         <div className='theia-toolCall'>
-            <h4>
-                {confirmationState === 'denied' ? (
-                    <span className="theia-tool-denied">
-                        <span className={codicon('error')}></span> {nls.localize('theia/ai/chat-ui/toolcall-part-renderer/denied', 'Execution denied')}: {response.name}
+            {confirmationState === 'denied' ? (
+                <span className='theia-toolCall-denied'>
+                    <span className={codicon('error')}></span> {nls.localize('theia/ai/chat-ui/toolcall-part-renderer/denied', 'Execution denied')}: {response.name}
+                </span>
+            ) : response.finished ? (
+                <details className='theia-toolCall-finished'>
+                    <summary>
+                        {nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
+                        ({renderCollapsibleArguments(response.arguments)})
+                    </summary>
+                    <div className='theia-toolCall-response-result'>
+                        {responseRenderer(response)}
+                    </div>
+                </details>
+            ) : (
+                confirmationState === 'allowed' && (
+                    <span className='theia-toolCall-allowed'>
+                        <Spinner /> {nls.localizeByDefault('Running')} {response.name}
                     </span>
-                ) : response.finished ? (
-                    <details>
-                        <summary>{nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
-                            ({renderCollapsibleArguments(response.arguments)})
-                        </summary>
-                        <pre>{tryPrettyPrintJson(response)}</pre>
-                    </details>
-                ) : (
-                    confirmationState === 'approved' && (
-                        <span>
-                            <Spinner /> {nls.localizeByDefault('Running')} {response.name}
-                        </span>
-                    )
-                )}
-            </h4>
-
-            {/* Show confirmation UI when waiting for approval */}
+                )
+            )}
+
+            {/* Show confirmation UI when waiting for allow */}
             {confirmationState === 'waiting' && (
-                <ToolConfirmation
-                    response={response}
-                    onApprove={handleApprove}
-                    onDeny={handleDeny}
-                />
+                <span className='theia-toolCall-waiting'>
+                    <ToolConfirmation
+                        response={response}
+                        onAllow={handleAllow}
+                        onDeny={handleDeny}
+                    />
+                </span>
             )}
         </div>
     );
 };
+
+const MarkdownRender = ({ text, openerService }: { text: string; openerService: OpenerService }) => {
+    const ref = useMarkdownRendering(text, openerService);
+    return <div ref={ref}></div>;
+};

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();