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

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

@@ -13,8 +13,11 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { ChangeSet, ChatAgent, ChatChangeEvent, ChatModel, ChatRequestModel, ChatService, ChatSuggestion } from '@theia/ai-chat';
-import { Disposable, DisposableCollection, InMemoryResources, URI, nls } from '@theia/core';
+import {
+    ChangeSet, ChangeSetElement, ChatAgent, ChatChangeEvent, ChatModel, ChatRequestModel,
+    ChatService, ChatSuggestion, EditableChatRequestModel, ChatHierarchyBranch
+} from '@theia/ai-chat';
+import { DisposableCollection, InMemoryResources, URI, nls } from '@theia/core';
 import { ContextMenuRenderer, LabelProvider, Message, OpenerService, ReactWidget } from '@theia/core/lib/browser';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable, optional, postConstruct } from '@theia/core/shared/inversify';
@@ -88,6 +91,14 @@ export class AIChatInputWidget extends ReactWidget {
 
     protected isEnabled = false;
 
+    private _branch?: ChatHierarchyBranch;
+    set branch(branch: ChatHierarchyBranch | undefined) {
+        if (this._branch !== branch) {
+            this._branch = branch;
+            this.update();
+        }
+    }
+
     private _onQuery: Query;
     set onQuery(query: Query) {
         this._onQuery = query;
@@ -120,7 +131,7 @@ export class AIChatInputWidget extends ReactWidget {
         this.onDisposeForChatModel.dispose();
         this.onDisposeForChatModel = new DisposableCollection();
         this.onDisposeForChatModel.push(chatModel.onDidChange(event => {
-            if (event.kind === 'addVariable' || event.kind === 'removeVariable') {
+            if (event.kind === 'addVariable' || event.kind === 'removeVariable' || event.kind === 'addRequest' || event.kind === 'changeHierarchyBranch') {
                 this.update();
             }
         }));
@@ -137,6 +148,7 @@ export class AIChatInputWidget extends ReactWidget {
     protected init(): void {
         this.id = AIChatInputWidget.ID;
         this.title.closable = false;
+        this.toDispose.push(this.resources.add(this.getResourceUri(), ''));
         this.update();
     }
 
@@ -154,8 +166,20 @@ export class AIChatInputWidget extends ReactWidget {
     }
 
     protected render(): React.ReactNode {
+        const branch = this._branch;
+        const chatModel = this._chatModel;
+
+        // State of the input widget's action buttons depends on the state of the currently active or last processed
+        // request, if there is one. If the chat model has branched, then the current request is the last on the
+        // branch. Otherwise, it's the last request in the chat model.
+        const currentRequest: ChatRequestModel | undefined = branch?.items?.at(-1)?.element ?? chatModel.getRequests().at(-1);
+        const isEditing = !!(currentRequest && (EditableChatRequestModel.isEditing(currentRequest)));
+        const isPending = () => !!(currentRequest && !isEditing && ChatRequestModel.isInProgress(currentRequest));
+        const pending = isPending();
+
         return (
             <ChatInput
+                branch={this._branch}
                 onQuery={this._onQuery.bind(this)}
                 onUnpin={this._onUnpin.bind(this)}
                 onCancel={this._onCancel.bind(this)}
@@ -165,13 +189,12 @@ export class AIChatInputWidget extends ReactWidget {
                 onDeleteChangeSetElement={this._onDeleteChangeSetElement.bind(this)}
                 onAddContextElement={this.addContextElement.bind(this)}
                 onDeleteContextElement={this.deleteContextElement.bind(this)}
-                context={this.getContext()}
                 onOpenContextElement={this.openContextElement.bind(this)}
+                context={this.getContext()}
                 chatModel={this._chatModel}
                 pinnedAgent={this._pinnedAgent}
                 editorProvider={this.editorProvider}
-                resources={this.resources}
-                resourceUriProvider={this.getResourceUri.bind(this)}
+                uri={this.getResourceUri()}
                 contextMenuCallback={this.handleContextMenu.bind(this)}
                 isEnabled={this.isEnabled}
                 setEditorRef={editor => {
@@ -188,6 +211,14 @@ export class AIChatInputWidget extends ReactWidget {
                 initialValue={this._initialValue}
                 openerService={this.openerService}
                 suggestions={this._chatModel.suggestions}
+                currentRequest={currentRequest}
+                isEditing={isEditing}
+                pending={pending}
+                onResponseChanged={() => {
+                    if (isPending() !== pending) {
+                        this.update();
+                    }
+                }}
             />
         );
     }
@@ -269,13 +300,14 @@ export class AIChatInputWidget extends ReactWidget {
 }
 
 interface ChatInputProperties {
+    branch?: ChatHierarchyBranch;
     onCancel: (requestModel: ChatRequestModel) => void;
     onQuery: (query: string) => void;
     onUnpin: () => void;
     onDragOver: (event: React.DragEvent) => void;
     onDrop: (event: React.DragEvent) => void;
     onDeleteChangeSet: (sessionId: string) => void;
-    onDeleteChangeSetElement: (sessionId: string, index: number) => void;
+    onDeleteChangeSetElement: (sessionId: string, uri: URI) => void;
     onAddContextElement: () => void;
     onDeleteContextElement: (index: number) => void;
     onOpenContextElement: OpenContextElement;
@@ -284,8 +316,7 @@ interface ChatInputProperties {
     chatModel: ChatModel;
     pinnedAgent?: ChatAgent;
     editorProvider: MonacoEditorProvider;
-    resources: InMemoryResources;
-    resourceUriProvider: () => URI;
+    uri: URI;
     contextMenuCallback: (event: IMouseEvent) => void;
     setEditorRef: (editor: SimpleMonacoEditor | undefined) => void;
     showContext?: boolean;
@@ -297,27 +328,27 @@ interface ChatInputProperties {
     decoratorService: ChangeSetDecoratorService;
     initialValue?: string;
     openerService: OpenerService;
-    suggestions: readonly ChatSuggestion[]
+    suggestions: readonly ChatSuggestion[];
+    currentRequest?: ChatRequestModel;
+    isEditing: boolean;
+    pending: boolean;
+    onResponseChanged: () => void;
 }
 
 const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInputProperties) => {
     const onDeleteChangeSet = () => props.onDeleteChangeSet(props.chatModel.id);
-    const onDeleteChangeSetElement = (index: number) => props.onDeleteChangeSetElement(props.chatModel.id, index);
+    const onDeleteChangeSetElement = (uri: URI) => props.onDeleteChangeSetElement(props.chatModel.id, uri);
 
-    const [inProgress, setInProgress] = React.useState(false);
     const [isInputEmpty, setIsInputEmpty] = React.useState(true);
     const [changeSetUI, setChangeSetUI] = React.useState(
-        () => props.chatModel.changeSet
-            ? buildChangeSetUI(
-                props.chatModel.changeSet,
-                props.labelProvider,
-                props.decoratorService,
-                props.actionService.getActionsForChangeset(props.chatModel.changeSet),
-                onDeleteChangeSet,
-                onDeleteChangeSetElement
-            )
-            : undefined
-    );
+        () => buildChangeSetUI(
+            props.chatModel.changeSet,
+            props.labelProvider,
+            props.decoratorService,
+            props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+            onDeleteChangeSet,
+            onDeleteChangeSetElement
+        ));
 
     // eslint-disable-next-line no-null/no-null
     const editorContainerRef = React.useRef<HTMLDivElement | null>(null);
@@ -326,8 +357,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     const editorRef = React.useRef<SimpleMonacoEditor | undefined>(undefined);
 
     React.useEffect(() => {
-        const uri = props.resourceUriProvider();
-        const resource = props.resources.add(uri, '');
+        const uri = props.uri;
         const createInputElement = async () => {
             const paddingTop = 6;
             const lineHeight = 20;
@@ -403,7 +433,6 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         createInputElement();
 
         return () => {
-            resource.dispose();
             props.setEditorRef(undefined);
             if (editorRef.current) {
                 editorRef.current.dispose();
@@ -411,55 +440,34 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         };
     }, []);
 
-    const responseListenerRef = React.useRef<Disposable>();
-    // track chat model updates to keep our UI in sync
-    // - keep "inProgress" in sync with the request state
-    // - keep "changeSetUI" in sync with the change set
     React.useEffect(() => {
+        setChangeSetUI(buildChangeSetUI(
+            props.chatModel.changeSet,
+            props.labelProvider,
+            props.decoratorService,
+            props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+            onDeleteChangeSet,
+            onDeleteChangeSetElement
+        ));
         const listener = props.chatModel.onDidChange(event => {
-            if (event.kind === 'addRequest') {
-                if (event.request) {
-                    setInProgress(ChatRequestModel.isInProgress(event.request));
-                }
-                responseListenerRef.current?.dispose();
-                responseListenerRef.current = event.request.response.onDidChange(() =>
-                    setInProgress(ChatRequestModel.isInProgress(event.request))
-                );
-            } else if (ChatChangeEvent.isChangeSetEvent(event)) {
-                if (event.kind === 'removeChangeSet') {
-                    setChangeSetUI(undefined);
-                } else if (event.kind === 'setChangeSet' || 'updateChangeSet') {
-                    setChangeSetUI(buildChangeSetUI(
-                        event.changeSet,
-                        props.labelProvider,
-                        props.decoratorService,
-                        props.actionService.getActionsForChangeset(event.changeSet),
-                        onDeleteChangeSet,
-                        onDeleteChangeSetElement
-                    ));
-                }
+            if (ChatChangeEvent.isChangeSetEvent(event)) {
+                setChangeSetUI(buildChangeSetUI(
+                    props.chatModel.changeSet,
+                    props.labelProvider,
+                    props.decoratorService,
+                    props.actionService.getActionsForChangeset(props.chatModel.changeSet),
+                    onDeleteChangeSet,
+                    onDeleteChangeSetElement
+                ));
             }
         });
-        setChangeSetUI(props.chatModel.changeSet
-            ? buildChangeSetUI(
-                props.chatModel.changeSet,
-                props.labelProvider,
-                props.decoratorService,
-                props.actionService.getActionsForChangeset(props.chatModel.changeSet),
-                onDeleteChangeSet,
-                onDeleteChangeSetElement
-            )
-            : undefined);
         return () => {
-            listener?.dispose();
-            responseListenerRef.current?.dispose();
-            responseListenerRef.current = undefined;
+            listener.dispose();
         };
-    }, [props.chatModel]);
+    }, [props.chatModel, props.labelProvider, props.decoratorService, props.actionService]);
 
     React.useEffect(() => {
         const disposable = props.actionService.onDidChange(() => {
-            if (!props.chatModel.changeSet) { return; }
             const newActions = props.actionService.getActionsForChangeset(props.chatModel.changeSet);
             setChangeSetUI(current => !current ? current : { ...current, actions: newActions });
         });
@@ -468,9 +476,6 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
 
     React.useEffect(() => {
         const disposable = props.decoratorService.onDidChangeDecorations(() => {
-            if (!props.chatModel.changeSet) {
-                return;
-            }
             setChangeSetUI(buildChangeSetUI(
                 props.chatModel.changeSet,
                 props.labelProvider,
@@ -493,7 +498,6 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         if (!value || value.trim().length === 0) {
             return;
         }
-        setInProgress(true);
         props.onQuery(value);
         setValue('');
     }, [props.context, props.onQuery, setValue]);
@@ -571,19 +575,38 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             : []),
     ] as Option[];
 
-    const rightOptions = inProgress
-        ? [{
+    let rightOptions: Option[] = [];
+    const { currentRequest: latestRequest, isEditing, pending, onResponseChanged } = props;
+    React.useEffect(() => {
+        if (!latestRequest) {
+            return;
+        }
+        const disposable = latestRequest.response.onDidChange(onResponseChanged);
+        return () => disposable.dispose();
+    }, [latestRequest, onResponseChanged]);
+    if (isEditing) {
+        rightOptions = [{
+            title: nls.localize('theia/ai/chat-ui/send', 'Send (Enter)'),
+            handler: () => {
+                if (props.isEnabled) {
+                    submit(editorRef.current?.document.textEditorModel.getValue() || '');
+                }
+            },
+            className: 'codicon-send',
+            disabled: isInputEmpty || !props.isEnabled
+        }];
+    } else if (pending) {
+        rightOptions = [{
             title: nls.localize('theia/ai/chat-ui/cancel', 'Cancel (Esc)'),
             handler: () => {
-                const latestRequest = getLatestRequest(props.chatModel);
                 if (latestRequest) {
                     props.onCancel(latestRequest);
                 }
-                setInProgress(false);
             },
             className: 'codicon-stop-circle'
-        }]
-        : [{
+        }];
+    } else {
+        rightOptions = [{
             title: nls.localize('theia/ai/chat-ui/send', 'Send (Enter)'),
             handler: () => {
                 if (props.isEnabled) {
@@ -593,6 +616,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             className: 'codicon-send',
             disabled: isInputEmpty || !props.isEnabled
         }];
+    }
 
     const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement, props.onOpenContextElement);
 
@@ -624,28 +648,21 @@ const buildChangeSetUI = (
     decoratorService: ChangeSetDecoratorService,
     actions: ChangeSetActionRenderer[],
     onDeleteChangeSet: () => void,
-    onDeleteChangeSetElement: (index: number) => void
-): ChangeSetUI => ({
-    title: changeSet.title,
-    changeSet,
-    deleteChangeSet: onDeleteChangeSet,
-    elements: changeSet.getElements().map(element => ({
-        open: element.open?.bind(element),
-        iconClass: element.icon ?? labelProvider.getIcon(element.uri) ?? labelProvider.fileIcon,
-        nameClass: `${element.type} ${element.state}`,
-        name: element.name ?? labelProvider.getName(element.uri),
-        additionalInfo: element.additionalInfo ?? labelProvider.getDetails(element.uri),
-        additionalInfoSuffixIcon: decoratorService.getAdditionalInfoSuffixIcon(element),
-        openChange: element?.openChange?.bind(element),
-        apply: element.state !== 'applied' ? element?.apply?.bind(element) : undefined,
-        revert: element.state === 'applied' || element.state === 'stale' ? element?.revert?.bind(element) : undefined,
-        delete: () => onDeleteChangeSetElement(changeSet.getElements().indexOf(element))
-    } satisfies ChangeSetUIElement)),
-    actions
-});
+    onDeleteChangeSetElement: (uri: URI) => void
+): ChangeSetUI | undefined => {
+    const elements = changeSet.getElements();
+    return elements.length ? ({
+        title: changeSet.title,
+        changeSet,
+        deleteChangeSet: onDeleteChangeSet,
+        elements: changeSet.getElements().map(element => toUiElement(element, onDeleteChangeSetElement, labelProvider, decoratorService)),
+        actions
+    }) : undefined;
+};
 
 interface ChangeSetUIElement {
     name: string;
+    uri: string;
     iconClass: string;
     nameClass: string;
     additionalInfo: string;
@@ -677,48 +694,70 @@ const ChangeSetBox: React.FunctionComponent<{ changeSet: ChangeSetUI }> = React.
         </div>
         <div className='theia-ChatInput-ChangeSet-List'>
             <ul>
-                {elements.map((element, index) => (
-                    <li key={index} title={nls.localize('theia/ai/chat-ui/openDiff', 'Open Diff')} onClick={() => element.openChange?.()}>
-                        <div className={`theia-ChatInput-ChangeSet-Icon ${element.iconClass}`}>
-                        </div>
-                        <div className='theia-ChatInput-ChangeSet-labelParts'>
-                            <span className={`theia-ChatInput-ChangeSet-title ${element.nameClass}`}>
-                                {element.name}
-                            </span>
-                            <div className='theia-ChatInput-ChangeSet-additionalInfo'>
-                                {element.additionalInfo && <span>{element.additionalInfo}</span>}
-                                {element.additionalInfoSuffixIcon
-                                    && <div className={`theia-ChatInput-ChangeSet-AdditionalInfo-SuffixIcon ${element.additionalInfoSuffixIcon.join(' ')}`}></div>}
-                            </div>
-                        </div>
-                        <div className='theia-ChatInput-ChangeSet-Actions'>
-                            {element.open && (
-                                <span
-                                    className='codicon codicon-file action'
-                                    title={nls.localize('theia/ai/chat-ui/openOriginalFile', 'Open Original File')}
-                                    onClick={noPropagation(() => element.open!())}
-                                />)}
-                            {element.revert && (
-                                <span
-                                    className='codicon codicon-discard action'
-                                    title={nls.localizeByDefault('Revert')}
-                                    onClick={noPropagation(() => element.revert!())}
-                                />)}
-                            {element.apply && (
-                                <span
-                                    className='codicon codicon-check action'
-                                    title={nls.localizeByDefault('Apply')}
-                                    onClick={noPropagation(() => element.apply!())}
-                                />)}
-                            <span className='codicon codicon-close action' title={nls.localizeByDefault('Delete')} onClick={noPropagation(() => element.delete())} />
-                        </div>
-                    </li>
-                ))}
+                {elements.map(element => ChangeSetElement(element))}
             </ul>
         </div>
     </div>
 ));
 
+function toUiElement(element: ChangeSetElement,
+    onDeleteChangeSetElement: (uri: URI) => void,
+    labelProvider: LabelProvider,
+    decoratorService: ChangeSetDecoratorService
+): ChangeSetUIElement {
+    return ({
+        open: element.open?.bind(element),
+        uri: element.uri.toString(),
+        iconClass: element.icon ?? labelProvider.getIcon(element.uri) ?? labelProvider.fileIcon,
+        nameClass: `${element.type} ${element.state}`,
+        name: element.name ?? labelProvider.getName(element.uri),
+        additionalInfo: element.additionalInfo ?? labelProvider.getDetails(element.uri),
+        additionalInfoSuffixIcon: decoratorService.getAdditionalInfoSuffixIcon(element),
+        openChange: element?.openChange?.bind(element),
+        apply: element.state !== 'applied' ? element?.apply?.bind(element) : undefined,
+        revert: element.state === 'applied' || element.state === 'stale' ? element?.revert?.bind(element) : undefined,
+        delete: () => onDeleteChangeSetElement(element.uri)
+    } satisfies ChangeSetUIElement);
+}
+
+const ChangeSetElement: React.FC<ChangeSetUIElement> = element => (
+    <li key={element.uri} title={nls.localize('theia/ai/chat-ui/openDiff', 'Open Diff')} onClick={() => element.openChange?.()}>
+        <div className={`theia-ChatInput-ChangeSet-Icon ${element.iconClass}`}>
+        </div>
+        <div className='theia-ChatInput-ChangeSet-labelParts'>
+            <span className={`theia-ChatInput-ChangeSet-title ${element.nameClass}`}>
+                {element.name}
+            </span>
+            <div className='theia-ChatInput-ChangeSet-additionalInfo'>
+                {element.additionalInfo && <span>{element.additionalInfo}</span>}
+                {element.additionalInfoSuffixIcon
+                    && <div className={`theia-ChatInput-ChangeSet-AdditionalInfo-SuffixIcon ${element.additionalInfoSuffixIcon.join(' ')}`}></div>}
+            </div>
+        </div>
+        <div className='theia-ChatInput-ChangeSet-Actions'>
+            {element.open && (
+                <span
+                    className='codicon codicon-file action'
+                    title={nls.localize('theia/ai/chat-ui/openOriginalFile', 'Open Original File')}
+                    onClick={noPropagation(() => element.open!())}
+                />)}
+            {element.revert && (
+                <span
+                    className='codicon codicon-discard action'
+                    title={nls.localizeByDefault('Revert')}
+                    onClick={noPropagation(() => element.revert!())}
+                />)}
+            {element.apply && (
+                <span
+                    className='codicon codicon-check action'
+                    title={nls.localizeByDefault('Apply')}
+                    onClick={noPropagation(() => element.apply!())}
+                />)}
+            <span className='codicon codicon-close action' title={nls.localizeByDefault('Delete')} onClick={noPropagation(() => element.delete())} />
+        </div>
+    </li>
+);
+
 interface ChatInputOptionsProps {
     leftOptions: Option[];
     rightOptions: Option[];
@@ -766,11 +805,6 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ left
     </div>
 );
 
-function getLatestRequest(chatModel: ChatModel): ChatRequestModel | undefined {
-    const requests = chatModel.getRequests();
-    return requests.length > 0 ? requests[requests.length - 1] : undefined;
-}
-
 function buildContextUI(
     context: readonly AIVariableResolutionRequest[] | undefined,
     labelProvider: LabelProvider,

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

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

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

@@ -0,0 +1,173 @@
+// *****************************************************************************
+// 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 * as React from '@theia/core/shared/react';
+import { nls } from '@theia/core/lib/common/nls';
+import { codicon } from '@theia/core/lib/browser';
+import { ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
+
+/**
+ * States the tool confirmation component can be in
+ */
+export type ToolConfirmationState = 'waiting' | 'approved' | 'denied';
+
+export interface ToolConfirmationProps {
+    response: ToolCallChatResponseContent;
+    onApprove: (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 }) => {
+    const [state, setState] = React.useState<ToolConfirmationState>('waiting');
+    // Track selected mode for each action
+    const [approveMode, setApproveMode] = 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 handleApprove = React.useCallback(() => {
+        setState('approved');
+        onApprove(approveMode);
+    }, [onApprove, approveMode]);
+
+    const handleDeny = React.useCallback(() => {
+        setState('denied');
+        onDeny(denyMode);
+    }, [onDeny, denyMode]);
+
+    if (state === 'approved') {
+        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>
+        );
+    }
+
+    if (state === 'denied') {
+        return (
+            <div className="theia-tool-confirmation-status denied">
+                <span className={codicon('close')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/denied', 'Tool execution denied')}
+            </div>
+        );
+    }
+
+    // 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') {
+            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');
+            }
+        } else {
+            switch (mode) {
+                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny', 'Deny');
+                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-session', 'Deny for this Chat');
+                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-forever', 'Always Deny');
+            }
+        }
+    };
+    // Main button label is always the same as the dropdown label for the selected mode
+    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') {
+            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');
+            }
+        } else {
+            switch (mode) {
+                case 'once': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-tooltip', 'Deny this tool call once');
+                case 'session': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-session-tooltip', 'Deny all calls of this tool for this chat session');
+                case 'forever': return nls.localize('theia/ai/chat-ui/toolconfirmation/deny-forever-tooltip', 'Always deny this tool');
+            }
+        }
+    };
+
+    // 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 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`}
+                    onClick={handleMain}
+                >
+                    {mainButtonLabel(type, selectedMode)}
+                </button>
+                <button
+                    className={`theia-button ${type === 'approve' ? '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'}
+                >
+                    <span className={codicon('chevron-down')}></span>
+                </button>
+                {dropdownOpen === type && (
+                    <ul
+                        className="theia-tool-confirmation-dropdown-menu"
+                        onMouseLeave={() => setDropdownOpen(undefined)}
+                    >
+                        {otherModes.map(mode => (
+                            <li
+                                key={mode}
+                                className="theia-tool-confirmation-dropdown-item"
+                                onClick={() => {
+                                    setMode(mode);
+                                    setDropdownOpen(undefined);
+                                }}
+                                title={modeTooltip(type, mode)}
+                            >
+                                {modeLabel(type, mode)}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <div className="theia-tool-confirmation">
+            <div className="theia-tool-confirmation-header">
+                <span className={codicon('shield')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/header', 'Confirm Tool Execution')}
+            </div>
+            <div className="theia-tool-confirmation-info">
+                <div className="theia-tool-confirmation-name">
+                    <span className="label">{nls.localize('theia/ai/chat-ui/toolconfirmation/tool', 'Tool')}:</span>
+                    <span className="value">{response.name}</span>
+                </div>
+            </div>
+            <div className="theia-tool-confirmation-actions">
+                {renderSplitButton('deny')}
+                {renderSplitButton('approve')}
+            </div>
+        </div>
+    );
+};