@theia/ai-chat-ui 1.71.0-next.8 → 1.71.1

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

@@ -22,4 +22,10 @@ export const ChatResponsePartRenderer = Symbol('ChatResponsePartRenderer');
 export interface ChatResponsePartRenderer<T extends ChatResponseContent> {
     canHandle(response: ChatResponseContent): number;
     render(response: T, parentNode: ResponseNode): ReactNode;
+    /**
+     * Optional method to render a compact confirmation/interaction view for this content type.
+     * Used by the delegation summary to show tool-specific confirmation UI in collapsed state.
+     * If not implemented, a generic fallback confirmation UI is used.
+     */
+    renderConfirmation?(response: T, parentNode: ResponseNode): ReactNode;
 }

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

@@ -14,8 +14,8 @@
 // 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, ToolCallChatResponseContent } from '@theia/ai-chat';
+import { inject, injectable, named } from '@theia/core/shared/inversify';
+import { ChatRequestInvocation, ChatResponseContent, ChatResponseModel, InteractiveContent, ToolCallChatResponseContent } from '@theia/ai-chat';
 import { ChatAgentService } from '@theia/ai-chat/lib/common/chat-agent-service';
 import { ToolConfirmationManager } from '@theia/ai-chat/lib/browser/chat-tool-preference-bindings';
 import { AGENT_DELEGATION_FUNCTION_ID } from '@theia/ai-core/lib/common/tool-constants';
@@ -25,8 +25,9 @@ import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { ResponseNode } from '../chat-tree-view';
 import { SubChatWidgetFactory } from '../chat-tree-view/sub-chat-widget';
 import { withToolCallConfirmation } from './tool-confirmation';
+import { extractJsonStringField } from './toolcall-utils';
 import { CompositeTreeNode, ContextMenuRenderer } from '@theia/core/lib/browser';
-import { DisposableCollection, nls } from '@theia/core';
+import { ContributionProvider, DisposableCollection, nls } from '@theia/core';
 import * as React from '@theia/core/shared/react';
 
 @injectable()
@@ -50,6 +51,9 @@ export class DelegationToolRenderer implements ChatResponsePartRenderer<ToolCall
     @inject(ContextMenuRenderer)
     protected contextMenuRenderer: ContextMenuRenderer;
 
+    @inject(ContributionProvider) @named(ChatResponsePartRenderer)
+    protected chatResponsePartRenderers: ContributionProvider<ChatResponsePartRenderer<ChatResponseContent>>;
+
     canHandle(response: ChatResponseContent): number {
         if (ToolCallChatResponseContent.is(response) && response.name === AGENT_DELEGATION_FUNCTION_ID) {
             return 20;
@@ -72,7 +76,14 @@ export class DelegationToolRenderer implements ChatResponsePartRenderer<ToolCall
                     prompt = args.prompt;
                 }
             } catch {
-                // ignore parse errors
+                const partialAgentId = extractJsonStringField(response.arguments, 'agentId');
+                if (partialAgentId) {
+                    agentName = this.chatAgentService.getAgent(partialAgentId)?.name ?? partialAgentId;
+                }
+                const partialPrompt = extractJsonStringField(response.arguments, 'prompt');
+                if (partialPrompt) {
+                    prompt = partialPrompt;
+                }
             }
         }
 
@@ -87,17 +98,23 @@ export class DelegationToolRenderer implements ChatResponsePartRenderer<ToolCall
             finished={response.finished}
             parentNode={parentNode}
             subChatWidgetFactory={this.subChatWidgetFactory}
+            contextMenuRenderer={this.contextMenuRenderer}
+            chatResponsePartRenderers={this.chatResponsePartRenderers}
             response={response}
             confirmationMode={confirmationMode}
             toolConfirmationManager={this.toolConfirmationManager}
             toolRequest={toolRequest}
             chatId={chatId}
             requestCanceled={parentNode.response.isCanceled}
-            contextMenuRenderer={this.contextMenuRenderer}
         />;
     }
 }
 
+interface PendingInteraction {
+    contentPart: InteractiveContent & ChatResponseContent;
+    id: string;
+}
+
 interface DelegatedChatProps {
     invocation?: ChatRequestInvocation;
     agentName: string;
@@ -105,19 +122,28 @@ interface DelegatedChatProps {
     finished?: boolean;
     parentNode: ResponseNode;
     subChatWidgetFactory: SubChatWidgetFactory;
+    contextMenuRenderer: ContextMenuRenderer;
+    chatResponsePartRenderers: ContributionProvider<ChatResponsePartRenderer<ChatResponseContent>>;
 }
 
 interface DelegatedChatState {
     node?: ResponseNode;
+    isOpen: boolean;
+    pendingInteractions: PendingInteraction[];
 }
 
 class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatState> {
     private widget: ReturnType<SubChatWidgetFactory>;
     private toDispose = new DisposableCollection();
+    private trackedInteractionIds = new Set<string>();
 
     constructor(props: DelegatedChatProps) {
         super(props);
-        this.state = { node: undefined };
+        this.state = {
+            node: undefined,
+            isOpen: false,
+            pendingInteractions: []
+        };
         this.widget = props.subChatWidgetFactory();
     }
 
@@ -134,6 +160,7 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
     private subscribeToInvocation(invocation?: ChatRequestInvocation): void {
         this.toDispose.dispose();
         this.toDispose = new DisposableCollection();
+        this.trackedInteractionIds.clear();
         if (!invocation) {
             return;
         }
@@ -143,9 +170,25 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
             this.setState({ node });
 
             const changeListener = () => {
+                this.removeResolvedInteractions();
                 this.forceUpdate();
             };
             this.toDispose.push(chatModel.onDidChange(changeListener));
+
+            // Subscribe to interactionNeeded for push-based interaction tracking
+            this.toDispose.push(chatModel.onInteractionNeeded(contentPart => {
+                const id = contentPart.interactionId;
+                if (id && !this.trackedInteractionIds.has(id)
+                    && this.findConfirmationRenderer(contentPart)) {
+                    this.trackedInteractionIds.add(id);
+                    this.setState(prevState => ({
+                        pendingInteractions: [
+                            ...prevState.pendingInteractions,
+                            { contentPart, id }
+                        ]
+                    }));
+                }
+            }));
         }).catch(error => {
             console.error('Failed to create delegated chat response:', error);
         });
@@ -160,6 +203,42 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
 
     override componentWillUnmount(): void {
         this.toDispose.dispose();
+        this.trackedInteractionIds.clear();
+    }
+
+    private removeResolvedInteractions(): void {
+        this.setState(prevState => ({
+            pendingInteractions: prevState.pendingInteractions.filter(p => !p.contentPart.isResolved)
+        }));
+    }
+
+    private findConfirmationRenderer(contentPart: ChatResponseContent): ChatResponsePartRenderer<ChatResponseContent> | undefined {
+        const renderer = this.props.chatResponsePartRenderers.getContributions().reduce<[number, ChatResponsePartRenderer<ChatResponseContent> | undefined]>(
+            (prev, current) => {
+                const prio = current.canHandle(contentPart);
+                if (prio > prev[0]) {
+                    return [prio, current];
+                }
+                return prev;
+            },
+            [-1, undefined])[1];
+        if (renderer && renderer.renderConfirmation) {
+            return renderer;
+        }
+        return undefined;
+    }
+
+    private handleToggle = (event: React.SyntheticEvent<HTMLDetailsElement>): void => {
+        const details = event.currentTarget;
+        this.setState({ isOpen: details.open });
+    };
+
+    private renderInteractionConfirmation(contentPart: ChatResponseContent, id: string): React.ReactNode {
+        const renderer = this.findConfirmationRenderer(contentPart);
+        if (renderer && this.state.node) {
+            return <React.Fragment key={id}>{renderer.renderConfirmation!(contentPart, this.state.node)}</React.Fragment>;
+        }
+        return undefined;
     }
 
     override render(): React.ReactNode {
@@ -193,19 +272,38 @@ class DelegatedChat extends React.Component<DelegatedChatProps, DelegatedChatSta
             statusText = nls.localize('theia/ai/chat-ui/delegation-response-renderer/status/starting', 'starting...');
         }
 
+        const { isOpen, pendingInteractions } = this.state;
+        const showInteractionsInSummary = !isOpen && pendingInteractions.length > 0;
+
         return (
             <div className='theia-delegation-container'>
-                <details className='delegation-response-details'>
+                <details className='delegation-response-details' onToggle={this.handleToggle}>
                     <summary className='delegation-summary'>
                         <div className='delegation-header'>
                             <span className='delegation-agent'>
                                 <span className='codicon codicon-copilot-large' /> {agentName}
                             </span>
                             <span className='delegation-status'>
+                                {showInteractionsInSummary && (
+                                    <span className='delegation-interaction-badge' title={nls.localize(
+                                        'theia/ai/chat-ui/delegation-response-renderer/interactionNeeded',
+                                        'User interaction needed'
+                                    )}>
+                                        <span className='codicon codicon-warning'></span>
+                                    </span>
+                                )}
                                 <span className={`codicon ${statusIcon} delegation-status-icon`}></span>
                                 <span className='delegation-status-text'>{statusText}</span>
                             </span>
+                            <span className={`delegation-toggle-arrow${isOpen ? ' open' : ''}`} />
                         </div>
+                        {showInteractionsInSummary && (
+                            <div className='delegation-pending-confirmations'>
+                                {pendingInteractions.map(({ contentPart, id }) =>
+                                    this.renderInteractionConfirmation(contentPart, id)
+                                )}
+                            </div>
+                        )}
                     </summary>
                     <div className='delegation-content'>
                         <div className='delegation-prompt-section'>

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

@@ -26,3 +26,4 @@ export * from './thinking-part-renderer';
 export * from './progress-part-renderer';
 export * from './tool-confirmation';
 export * from './delegation-tool-renderer';
+export * from './tool-call-rendering';

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

@@ -15,17 +15,20 @@
 // *****************************************************************************
 import { ChatResponseContent, MultiSelectQuestionResponseHandler, QuestionResponseContent, QuestionResponseHandler } from '@theia/ai-chat';
 import { nls } from '@theia/core';
-import { codicon } from '@theia/core/lib/browser';
-import { injectable } from '@theia/core/shared/inversify';
+import { codicon, OpenerService } from '@theia/core/lib/browser';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { ReactNode } from '@theia/core/shared/react';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { ResponseNode } from '../chat-tree-view';
+import { useMarkdownRendering } from './markdown-part-renderer';
 
 @injectable()
 export class QuestionPartRenderer
     implements ChatResponsePartRenderer<QuestionResponseContent> {
 
+    @inject(OpenerService) protected readonly openerService: OpenerService;
+
     canHandle(response: ChatResponseContent): number {
         if (QuestionResponseContent.is(response)) {
             return 10;
@@ -35,9 +38,16 @@ export class QuestionPartRenderer
 
     render(question: QuestionResponseContent, node: ResponseNode): ReactNode {
         if (question.multiSelect) {
-            return <MultiSelectQuestion question={question} node={node} />;
+            return <MultiSelectQuestion question={question} node={node} openerService={this.openerService} />;
+        }
+        return <SingleSelectQuestion question={question} node={node} openerService={this.openerService} />;
+    }
+
+    renderConfirmation(question: QuestionResponseContent, node: ResponseNode): ReactNode {
+        if (question.multiSelect) {
+            return <MultiSelectQuestion question={question} node={node} openerService={this.openerService} />;
         }
-        return <SingleSelectQuestion question={question} node={node} />;
+        return <SingleSelectQuestion question={question} node={node} openerService={this.openerService} />;
     }
 
 }
@@ -77,15 +87,18 @@ function DismissButton({ question, disabled }: { question: QuestionResponseConte
     );
 }
 
-function SingleSelectQuestion({ question, node }: { question: QuestionResponseContent, node: ResponseNode }): React.JSX.Element {
+function SingleSelectQuestion({ question, node, openerService }: {
+    question: QuestionResponseContent, node: ResponseNode, openerService: OpenerService
+}): React.JSX.Element {
     const isDisabled = question.isReadOnly || isResolved(question) || !node.response.isWaitingForInput;
     const hasDescriptions = question.options.some(option => option.description);
+    const questionRef = useMarkdownRendering(question.question, openerService);
 
     return (
         <div className="theia-QuestionPartRenderer-root">
             {question.onSkip && <DismissButton question={question} disabled={isDisabled} />}
             {question.header && <div className="theia-QuestionPartRenderer-header">{question.header}</div>}
-            <div className="theia-QuestionPartRenderer-question">{question.question}</div>
+            <div className="theia-QuestionPartRenderer-question" ref={questionRef} />
             <div className={`theia-QuestionPartRenderer-options ${hasDescriptions ? 'has-descriptions' : ''}`}>
                 {
                     question.options.map((option, index) => (
@@ -112,7 +125,10 @@ function SingleSelectQuestion({ question, node }: { question: QuestionResponseCo
     );
 }
 
-function MultiSelectQuestion({ question, node }: { question: QuestionResponseContent, node: ResponseNode }): React.JSX.Element {
+function MultiSelectQuestion({ question, node, openerService }: {
+    question: QuestionResponseContent, node: ResponseNode, openerService: OpenerService
+}): React.JSX.Element {
+    const questionRef = useMarkdownRendering(question.question, openerService);
     const restoredIndices = React.useMemo(() => {
         if (question.selectedOptions && question.selectedOptions.length > 0) {
             const indices = new Set<number>();
@@ -165,7 +181,7 @@ function MultiSelectQuestion({ question, node }: { question: QuestionResponseCon
         <div className="theia-QuestionPartRenderer-root">
             <DismissButton question={question} disabled={isDisabled} />
             {question.header && <div className="theia-QuestionPartRenderer-header">{question.header}</div>}
-            <div className="theia-QuestionPartRenderer-question">{question.question}</div>
+            <div className="theia-QuestionPartRenderer-question" ref={questionRef} />
             <div className={`theia-QuestionPartRenderer-options ${hasDescriptions ? 'has-descriptions' : ''}`}>
                 {question.options.map((option, index) => (
                     <button

package/src/browser/chat-response-renderer/tool-call-rendering.tsx

@@ -0,0 +1,89 @@
+// *****************************************************************************
+// Copyright (C) 2026 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';
+import { codicon } from '@theia/core/lib/browser';
+import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
+
+export interface CopyButtonProps {
+    text: string;
+    clipboardService: ClipboardService;
+}
+
+export const CopyButton: React.FC<CopyButtonProps> = ({ text, clipboardService }) => {
+    const handleCopy = React.useCallback(() => {
+        clipboardService.writeText(text);
+    }, [text, clipboardService]);
+
+    return (
+        <button
+            className="tool-call copy-button"
+            onClick={handleCopy}
+            title={nls.localizeByDefault('Copy')}
+        >
+            <span className={codicon('copy')} />
+        </button>
+    );
+};
+
+export interface MetaRowProps {
+    icon: string;
+    label: string;
+    children: React.ReactNode;
+}
+
+export const MetaRow: React.FC<MetaRowProps> = ({ icon, label, children }) => (
+    <div className="tool-call meta-row" title={label}>
+        <span className={codicon(icon)} />
+        <span>{children}</span>
+    </div>
+);
+
+export interface OutputBoxProps {
+    title: string;
+    output?: string;
+    clipboardService: ClipboardService;
+}
+
+export const OutputBox: React.FC<OutputBoxProps> = ({ title, output, clipboardService }) => (
+    <div className="tool-call output-box">
+        <div className="tool-call output-header">
+            <span className={codicon('output')} />
+            {title}
+            {output && <CopyButton text={output} clipboardService={clipboardService} />}
+        </div>
+        {output ? (
+            <pre className="tool-call output">{output}</pre>
+        ) : (
+            <div className="tool-call no-output">
+                {nls.localize('theia/ai-chat-ui/noOutput', 'No output')}
+            </div>
+        )}
+    </div>
+);
+
+export function formatDuration(ms: number): string {
+    if (ms < 1000) {
+        return `${ms}ms`;
+    }
+    if (ms < 60000) {
+        return `${(ms / 1000).toFixed(1)}s`;
+    }
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+}

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

@@ -126,6 +126,32 @@ export function useToolConfirmationState(
     return { confirmationState, rejectionReason };
 }
 
+export function createConfirmationHandlers(
+    toolId: string | undefined,
+    response: ToolCallChatResponseContent,
+    toolConfirmationManager: ToolConfirmationManager,
+    chatId: string,
+    toolRequest?: ToolRequest
+): { handleAllow: (scope: ConfirmationScope) => void; handleDeny: (scope: ConfirmationScope, reason?: string) => void } {
+    const handleAllow = (scope: ConfirmationScope): void => {
+        if (scope === 'forever' && toolId) {
+            toolConfirmationManager.setConfirmationMode(toolId, ToolConfirmationPreferenceMode.ALWAYS_ALLOW, toolRequest);
+        } else if (scope === 'session' && toolId) {
+            toolConfirmationManager.setSessionConfirmationMode(toolId, ToolConfirmationPreferenceMode.ALWAYS_ALLOW, chatId);
+        }
+        response.confirm();
+    };
+    const handleDeny = (scope: ConfirmationScope, reason?: string): void => {
+        if (scope === 'forever' && toolId) {
+            toolConfirmationManager.setConfirmationMode(toolId, ToolConfirmationPreferenceMode.DISABLED);
+        } else if (scope === 'session' && toolId) {
+            toolConfirmationManager.setSessionConfirmationMode(toolId, ToolConfirmationPreferenceMode.DISABLED, chatId);
+        }
+        response.deny(reason);
+    };
+    return { handleAllow, handleDeny };
+}
+
 export interface ToolConfirmationCallbacks {
     toolRequest?: ToolRequest;
     onAllow: (scope: ConfirmationScope) => void;

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

@@ -21,7 +21,7 @@ import { ReactNode } from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
 import { codicon, ContextMenuRenderer, HoverService, OpenerService } from '@theia/core/lib/browser';
 import * as React from '@theia/core/shared/react';
-import { ToolConfirmation, useToolConfirmationState } from './tool-confirmation';
+import { createConfirmationHandlers, ToolConfirmation, useToolConfirmationState } from './tool-confirmation';
 import { ToolConfirmationMode } from '@theia/ai-chat/lib/common/chat-tool-preferences';
 import { ResponseNode } from '../chat-tree-view';
 import { useMarkdownRendering } from './markdown-part-renderer';
@@ -54,6 +54,22 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
         return -1;
     }
 
+    renderConfirmation(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
+        const chatId = parentNode.sessionId;
+        const toolRequest = response.name ? this.toolInvocationRegistry.getFunction(response.name) : undefined;
+        const { handleAllow, handleDeny } = createConfirmationHandlers(
+            response.name, response, this.toolConfirmationManager, chatId, toolRequest
+        );
+
+        return <ToolConfirmation
+            response={response}
+            toolRequest={toolRequest}
+            onAllow={handleAllow}
+            onDeny={handleDeny}
+            contextMenuRenderer={this.contextMenuRenderer}
+        />;
+    }
+
     render(response: ToolCallChatResponseContent, parentNode: ResponseNode): ReactNode {
         const chatId = parentNode.sessionId;
         const toolRequest = response.name ? this.toolInvocationRegistry.getFunction(response.name) : undefined;
@@ -210,23 +226,10 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({
         }
     };
 
-    const handleAllow = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once') => {
-        if (mode === 'forever' && response.name) {
-            toolConfirmationManager.setConfirmationMode(response.name, ToolConfirmationMode.ALWAYS_ALLOW, toolRequest);
-        } else if (mode === 'session' && response.name) {
-            toolConfirmationManager.setSessionConfirmationMode(response.name, ToolConfirmationMode.ALWAYS_ALLOW, chatId);
-        }
-        response.confirm();
-    }, [response, toolConfirmationManager, chatId, toolRequest]);
-
-    const handleDeny = React.useCallback((mode: 'once' | 'session' | 'forever' = 'once', reason?: string) => {
-        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(reason);
-    }, [response, toolConfirmationManager, chatId]);
+    const { handleAllow, handleDeny } = React.useMemo(
+        () => createConfirmationHandlers(response.name, response, toolConfirmationManager, chatId, toolRequest),
+        [response, toolConfirmationManager, chatId, toolRequest]
+    );
 
     const reasonText = formatReason(rejectionReason);
 

package/src/browser/chat-response-renderer/toolcall-utils.ts

@@ -16,6 +16,8 @@
 
 import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering/markdown-string';
 
+export { extractJsonStringField } from '../../common/toolcall-utils';
+
 const SHORT_STRING_THRESHOLD = 50;
 const MAX_CONDENSED_LENGTH = 80;
 const MAX_CONDENSED_VALUE_LENGTH = 30;