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

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

@@ -15,15 +15,22 @@
 // *****************************************************************************
 
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
-import { injectable } from '@theia/core/shared/inversify';
+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 * 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';
 
 @injectable()
 export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
 
+    @inject(ToolConfirmationManager)
+    protected toolConfirmationManager: ToolConfirmationManager;
+
     canHandle(response: ChatResponseContent): number {
         if (ToolCallChatResponseContent.is(response)) {
             return 10;
@@ -31,23 +38,20 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
         return -1;
     }
 
-    render(response: ToolCallChatResponseContent): ReactNode {
-        return (
-            <h4 className='theia-toolCall'>
-                {response.finished ? (
-                    <details>
-                        <summary>{nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
-                            ({this.renderCollapsibleArguments(response.arguments)})
-                        </summary>
-                        <pre>{this.tryPrettyPrintJson(response)}</pre>
-                    </details>
-                ) : (
-                    <span>
-                        <Spinner /> {nls.localizeByDefault('Running')} {response.name}({this.renderCollapsibleArguments(response.arguments)})
-                    </span>
-                )}
-            </h4>
-        );
+    render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        const chatId = parentNode.sessionId;
+        const confirmationMode = response.name ? this.getToolConfirmationSettings(response.name, chatId) : ToolConfirmationMode.DISABLED;
+        return <ToolCallContent
+            response={response}
+            confirmationMode={confirmationMode}
+            toolConfirmationManager={this.toolConfirmationManager}
+            chatId={chatId}
+            renderCollapsibleArguments={this.renderCollapsibleArguments.bind(this)}
+            tryPrettyPrintJson={this.tryPrettyPrintJson.bind(this)} />;
+    }
+
+    protected getToolConfirmationSettings(responseId: string, chatId: string): ToolConfirmationMode {
+        return this.toolConfirmationManager.getConfirmationMode(responseId, chatId);
     }
 
     protected renderCollapsibleArguments(args: string | undefined): ReactNode {
@@ -97,5 +101,97 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
 }
 
 const Spinner = () => (
-    <i className="fa fa-spinner fa-spin"></i>
+    <span className={codicon('loading')}></span>
 );
+
+interface ToolCallContentProps {
+    response: ToolCallChatResponseContent;
+    confirmationMode: ToolConfirmationMode;
+    toolConfirmationManager: ToolConfirmationManager;
+    chatId: string;
+    renderCollapsibleArguments: (args: string | undefined) => ReactNode;
+    tryPrettyPrintJson: (response: ToolCallChatResponseContent) => string | undefined;
+}
+
+/**
+ * A function component to handle tool call rendering and confirmation
+ */
+const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmationMode, toolConfirmationManager, chatId, tryPrettyPrintJson, renderCollapsibleArguments }) => {
+    const [confirmationState, setConfirmationState] = React.useState<ToolConfirmationState>('waiting');
+
+    React.useEffect(() => {
+        if (confirmationMode === ToolConfirmationMode.YOLO) {
+            response.confirm();
+            setConfirmationState('approved');
+            return;
+        } else if (confirmationMode === ToolConfirmationMode.DISABLED) {
+            response.deny();
+            setConfirmationState('denied');
+            return;
+        }
+        response.confirmed.then(
+            confirmed => {
+                if (confirmed === true) {
+                    setConfirmationState('approved');
+                } else {
+                    setConfirmationState('denied');
+                }
+            }
+        )
+            .catch(() => {
+                setConfirmationState('denied');
+            });
+    }, [response, confirmationMode]);
+
+    const handleApprove = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
+        if (mode === 'forever' && response.name) {
+            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.YOLO);
+        } else if (mode === 'session' && response.name) {
+            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.YOLO, chatId);
+        }
+        response.confirm();
+    }, [response, toolConfirmationManager, chatId]);
+
+    const handleDeny = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
+        if (mode === 'forever' && response.name) {
+            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.DISABLED);
+        } else if (mode === 'session' && response.name) {
+            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.DISABLED, chatId);
+        }
+        response.deny();
+    }, [response, toolConfirmationManager, chatId]);
+
+    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}
+                    </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 */}
+            {confirmationState === 'waiting' && (
+                <ToolConfirmation
+                    response={response}
+                    onApprove={handleApprove}
+                    onDeny={handleDeny}
+                />
+            )}
+        </div>
+    );
+};

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

@@ -19,7 +19,7 @@ import { AIChatInputWidget, type AIChatInputConfiguration } from '../chat-input-
 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 { ChatRequestModel, EditableChatRequestModel, ChatHierarchyBranch } from '@theia/ai-chat';
 import type { AIVariableResolutionRequest } from '@theia/ai-core';
 import { Key } from '@theia/core/lib/browser';
 
@@ -29,6 +29,10 @@ export interface AIChatTreeInputConfiguration extends AIChatInputConfiguration {
 export const AIChatTreeInputArgs = Symbol('AIChatTreeInputArgs');
 export interface AIChatTreeInputArgs {
     node: EditableRequestNode;
+    /**
+     * The branch of the chat tree for this request node (used by the input widget for state tracking).
+     */
+    branch?: ChatHierarchyBranch;
     initialValue?: string;
     onQuery: (query: string) => Promise<void>;
     onUnpin?: () => void;
@@ -60,6 +64,13 @@ export class AIChatTreeInputWidget extends AIChatInputWidget {
     @postConstruct()
     protected override init(): void {
         super.init();
+        this.updateBranch();
+
+        const request = this.requestNode.request;
+        this.toDispose.push(request.session.onDidChange(() => {
+            this.updateBranch();
+        }));
+
         this.addKeyListener(this.node, Key.ESCAPE, () => {
             this.request.cancelEdit();
         });
@@ -71,6 +82,10 @@ export class AIChatTreeInputWidget extends AIChatInputWidget {
         });
     }
 
+    protected updateBranch(): void {
+        this.branch = this.args.branch ?? this.requestNode.branch;
+    }
+
     protected override getResourceUri(): URI {
         return new URI(`ai-chat:/${this.requestNode.id}-input.${CHAT_VIEW_LANGUAGE_EXTENSION}`);
     }

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,10 @@ export class ChatViewTreeWidget extends TreeWidget {
 
     protected isEnabled = false;
 
+    protected chatModelId: string;
+
+    onScrollLockChange?: (temporaryLocked: boolean) => void;
+
     set shouldScrollToEnd(shouldScrollToEnd: boolean) {
         this._shouldScrollToEnd = shouldScrollToEnd;
         this.shouldScrollToRow = this._shouldScrollToEnd;
@@ -178,6 +184,9 @@ export class ChatViewTreeWidget extends TreeWidget {
                     widget.setEnabled(change);
                 });
                 this.update();
+            }),
+            this.onScroll(scrollEvent => {
+                this.handleScrollEvent(scrollEvent);
             })
         ]);
     }
@@ -187,6 +196,27 @@ export class ChatViewTreeWidget extends TreeWidget {
         this.update();
     }
 
+    protected handleScrollEvent(_scrollEvent: unknown): void {
+        // Check if we're at the bottom of the view
+        const isAtBottom = this.isScrolledToBottom();
+
+        // Only handle temporary scroll lock if auto-scroll is currently enabled
+        if (this.shouldScrollToEnd) {
+            if (!isAtBottom) {
+                // User scrolled away from bottom, enable temporary lock
+                this.setTemporaryScrollLock(true);
+            }
+        } else if (isAtBottom) {
+            // User scrolled back to bottom, disable temporary lock
+            this.setTemporaryScrollLock(false);
+        }
+    }
+
+    protected setTemporaryScrollLock(enabled: boolean): void {
+        // Immediately apply scroll lock changes without delay
+        this.onScrollLockChange?.(enabled);
+    }
+
     protected override renderTree(model: TreeModel): React.ReactNode {
         if (!this.isEnabled) {
             return this.renderDisabledMessage();
@@ -214,7 +244,8 @@ export class ChatViewTreeWidget extends TreeWidget {
             get request(): ChatRequestModel {
                 return branch.get();
             },
-            branch
+            branch,
+            sessionId: this.chatModelId
         };
     }
 
@@ -222,7 +253,8 @@ export class ChatViewTreeWidget extends TreeWidget {
         return {
             id: response.id,
             parent: this.model.root as CompositeTreeNode,
-            response
+            response,
+            sessionId: this.chatModelId
         };
     }
 
@@ -292,6 +324,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 +459,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-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();
 
@@ -161,6 +164,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;
     }
 
@@ -210,16 +215,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 {

package/src/browser/style/index.css

@@ -624,6 +624,179 @@ div:last-child > .theia-ChatNode {
   cursor: pointer;
 }
 
+/* Tool confirmation styles */
+.theia-tool-confirmation {
+  margin: 10px 0;
+  padding: 12px;
+  border: 1px solid var(--theia-dropdown-border);
+  border-radius: 4px;
+  background-color: var(--theia-editorWidget-background);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
+}
+
+.theia-tool-confirmation-header {
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: var(--theia-foreground);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.theia-tool-confirmation-info {
+  margin-bottom: 12px;
+}
+
+.theia-tool-confirmation-name,
+.theia-tool-confirmation-args {
+  margin-bottom: 4px;
+}
+
+.theia-tool-confirmation-name .label,
+.theia-tool-confirmation-args .label {
+  font-weight: bold;
+  margin-right: 6px;
+}
+
+.theia-tool-confirmation-args pre.value {
+  margin: 6px 0;
+  padding: 8px;
+  background-color: var(--theia-editor-background);
+  border-radius: 3px;
+  max-height: 150px;
+  overflow: auto;
+}
+
+.theia-tool-confirmation-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0;
+}
+
+.theia-tool-confirmation-split-button {
+  display: inline-flex;
+  position: relative;
+}
+
+.theia-tool-confirmation-main-btn {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  margin-right: 0 !important;
+}
+
+.theia-tool-confirmation-chevron-btn {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  width: 24px !important;
+  min-width: 24px !important;
+  max-width: 24px !important;
+  padding: 0 !important;
+  margin-left: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.theia-tool-confirmation-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  min-width: 180px;
+  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);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.theia-tool-confirmation-dropdown-item {
+  padding: 6px 16px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.theia-tool-confirmation-dropdown-item:hover {
+  background: var(--theia-list-hoverBackground, #e5e5e5);
+}
+
+.theia-tool-confirmation-status {
+  margin: 10px 0;
+  padding: 12px;
+  border: 1px solid var(--theia-dropdown-border);
+  border-radius: 4px;
+  background-color: var(--theia-editorWidget-background);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
+}
+
+.theia-tool-confirmation-header {
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: var(--theia-foreground);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.theia-tool-confirmation-info {
+  margin-bottom: 12px;
+}
+
+.theia-tool-confirmation-name,
+.theia-tool-confirmation-args {
+  margin-bottom: 4px;
+}
+
+.theia-tool-confirmation-name .label,
+.theia-tool-confirmation-args .label {
+  font-weight: bold;
+  margin-right: 6px;
+}
+
+.theia-tool-confirmation-args pre.value {
+  margin: 6px 0;
+  padding: 8px;
+  background-color: var(--theia-editor-background);
+  border-radius: 3px;
+  max-height: 150px;
+  overflow: auto;
+}
+
+.theia-tool-confirmation-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.theia-tool-confirmation-status {
+  padding: 8px;
+  margin: 10px 0;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.theia-tool-confirmation-status.approved {
+  background-color: var(--theia-successBackground);
+  color: var(--theia-successForeground);
+}
+
+.theia-tool-confirmation-status.denied {
+  background-color: var(--theia-errorBackground);
+  color: var(--theia-errorForeground);
+}
+
+.theia-tool-pending {
+  color: var(--theia-descriptionForeground);
+}
+
+.theia-tool-denied {
+  color: var(--theia-errorForeground);
+}
+
 .theia-toolCall .fa,
 .theia-toolCall details summary::marker,
 .theia-thinking .fa,