@theia/ai-chat-ui 1.68.0-next.8 → 1.68.0

package/src/browser/ai-chat-ui-frontend-module.ts

@@ -20,6 +20,7 @@ import { bindViewContribution, FrontendApplicationContribution, WidgetFactory, K
 import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { ContainerModule, interfaces } from '@theia/core/shared/inversify';
 import { EditorSelectionResolver } from '@theia/editor/lib/browser/editor-manager';
+import { PreferenceNodeRendererContribution } from '@theia/preferences/lib/browser/views/components/preference-node-renderer-creator';
 import { AIChatContribution } from './ai-chat-ui-contribution';
 import { AIChatInputConfiguration, AIChatInputWidget } from './chat-input-widget';
 import { ChatNodeToolbarActionContribution, DefaultChatNodeToolbarActionContribution } from './chat-node-toolbar-action-contribution';
@@ -34,6 +35,7 @@ import {
     InsertCodeAtCursorButtonAction,
     MarkdownPartRenderer,
     ToolCallPartRenderer,
+    NotAvailableToolCallRenderer,
     ThinkingPartRenderer,
     ProgressPartRenderer,
     DelegationResponseRenderer,
@@ -60,6 +62,8 @@ import { SubChatWidget, SubChatWidgetFactory } from './chat-tree-view/sub-chat-w
 import { ChatInputHistoryService } from './chat-input-history';
 import { ChatInputHistoryContribution } from './chat-input-history-contribution';
 import { ChatInputModeContribution } from './chat-input-mode-contribution';
+import { ChatFocusContribution } from './chat-focus-contribution';
+import { SessionStoragePreferenceRenderer, SessionStoragePreferenceRendererContribution } from './session-storage-preference-renderer';
 
 export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bindViewContribution(bind, AIChatContribution);
@@ -74,6 +78,10 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bind(CommandContribution).toService(ChatInputModeContribution);
     bind(KeybindingContribution).toService(ChatInputModeContribution);
 
+    bind(ChatFocusContribution).toSelf().inSingletonScope();
+    bind(CommandContribution).toService(ChatFocusContribution);
+    bind(KeybindingContribution).toService(ChatFocusContribution);
+
     bindContributionProvider(bind, ChatResponsePartRenderer);
 
     bindChatViewWidget(bind);
@@ -132,6 +140,7 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bind(ChatResponsePartRenderer).to(CodePartRenderer).inSingletonScope();
     bind(ChatResponsePartRenderer).to(CommandPartRenderer).inSingletonScope();
     bind(ChatResponsePartRenderer).to(ToolCallPartRenderer).inSingletonScope();
+    bind(ChatResponsePartRenderer).to(NotAvailableToolCallRenderer).inSingletonScope();
     bind(ChatResponsePartRenderer).to(ErrorPartRenderer).inSingletonScope();
     bind(ChatResponsePartRenderer).to(ThinkingPartRenderer).inSingletonScope();
     bind(ChatResponsePartRenderer).to(QuestionPartRenderer).inSingletonScope();
@@ -173,6 +182,10 @@ export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
         return widget;
     });
 
+    // Session storage preference renderer
+    bind(SessionStoragePreferenceRenderer).toSelf();
+    bind(PreferenceNodeRendererContribution).to(SessionStoragePreferenceRendererContribution).inSingletonScope();
+
 });
 
 function bindChatViewWidget(bind: interfaces.Bind): void {

package/src/browser/chat-focus-contribution.ts

@@ -0,0 +1,102 @@
+// *****************************************************************************
+// 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 { Command, CommandContribution, CommandRegistry } from '@theia/core';
+import { ApplicationShell, KeybindingContribution, KeybindingRegistry } from '@theia/core/lib/browser';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { ChatViewWidget } from './chat-view-widget';
+import { ChatCommands } from './chat-view-commands';
+
+export const CHAT_FOCUS_INPUT_COMMAND = Command.toLocalizedCommand({
+    id: 'ai-chat.focus-input',
+    category: ChatCommands.CHAT_CATEGORY,
+    label: 'Focus Chat Input'
+}, 'theia/ai/chat-ui/focusInput', ChatCommands.CHAT_CATEGORY_KEY);
+
+export const CHAT_FOCUS_RESPONSE_COMMAND = Command.toLocalizedCommand({
+    id: 'ai-chat.focus-response',
+    category: ChatCommands.CHAT_CATEGORY,
+    label: 'Focus Chat Response'
+}, 'theia/ai/chat-ui/focusResponse', ChatCommands.CHAT_CATEGORY_KEY);
+
+@injectable()
+export class ChatFocusContribution implements CommandContribution, KeybindingContribution {
+
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
+
+    registerCommands(commands: CommandRegistry): void {
+        commands.registerCommand(CHAT_FOCUS_INPUT_COMMAND, {
+            execute: () => this.focusInput(),
+            isEnabled: () => this.findActiveChatViewWidget() !== undefined
+        });
+        commands.registerCommand(CHAT_FOCUS_RESPONSE_COMMAND, {
+            execute: () => this.focusResponse(),
+            isEnabled: () => this.findActiveChatViewWidget() !== undefined
+        });
+    }
+
+    registerKeybindings(keybindings: KeybindingRegistry): void {
+        keybindings.registerKeybinding({
+            command: CHAT_FOCUS_RESPONSE_COMMAND.id,
+            keybinding: 'ctrlcmd+up',
+            when: 'chatInputFocus && !suggestWidgetVisible'
+        });
+        keybindings.registerKeybinding({
+            command: CHAT_FOCUS_INPUT_COMMAND.id,
+            keybinding: 'ctrlcmd+down',
+            when: 'chatResponseFocus'
+        });
+    }
+
+    protected focusInput(): void {
+        const chatViewWidget = this.findActiveChatViewWidget();
+        if (chatViewWidget) {
+            chatViewWidget.inputWidget.activate();
+        }
+    }
+
+    protected focusResponse(): void {
+        const chatViewWidget = this.findActiveChatViewWidget();
+        if (chatViewWidget) {
+            chatViewWidget.treeWidget.node.focus();
+        }
+    }
+
+    protected findActiveChatViewWidget(): ChatViewWidget | undefined {
+        const activeWidget = this.shell.activeWidget;
+        if (activeWidget instanceof ChatViewWidget) {
+            return activeWidget;
+        }
+        // Also check if any part of the chat view has focus
+        const activeElement = document.activeElement;
+        if (activeElement instanceof HTMLElement) {
+            const widget = this.shell.findWidgetForElement(activeElement);
+            if (widget instanceof ChatViewWidget) {
+                return widget;
+            }
+            // Check parent widgets (e.g., when input widget has focus)
+            let parent = widget?.parent;
+            while (parent) {
+                if (parent instanceof ChatViewWidget) {
+                    return parent;
+                }
+                parent = parent.parent;
+            }
+        }
+        return undefined;
+    }
+}

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

@@ -364,9 +364,12 @@ export class AIChatInputWidget extends ReactWidget {
                 // Only update and re-render when the agent changes
                 if (agent && agentId !== previousAgentId) {
                     const modes = agent.modes ?? [];
+                    const defaultMode = modes.find(m => m.isDefault);
+                    const initialModeId = defaultMode?.id;
                     this.receivingAgent = {
                         agentId: agentId,
-                        modes
+                        modes,
+                        currentModeId: initialModeId
                     };
                     this.chatInputHasModesKey.set(modes.length > 1);
                     this.update();
@@ -494,6 +497,7 @@ export class AIChatInputWidget extends ReactWidget {
                     this.editorRef = editor;
                     this.setupEditorEventListeners();
                     this.editorReady.resolve();
+                    this.scheduleUpdateReceivingAgent();
                 }}
                 showContext={this.configuration?.showContext}
                 showPinnedAgent={this.configuration?.showPinnedAgent}
@@ -785,6 +789,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                 bracketPairColorization: { enabled: false },
                 wrappingStrategy: 'advanced',
                 stickyScroll: { enabled: false },
+                ariaLabel: nls.localize('theia/ai/chat-ui/chatInputAriaLabel', 'Type your message here'),
             });
 
             if (editorContainerRef.current) {
@@ -952,6 +957,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         setValue('');
         if (editorRef.current && !editorRef.current.document.textEditorModel.isDisposed()) {
             editorRef.current.document.textEditorModel.setValue('');
+            editorRef.current.focus();
         }
     }, [props.context, props.onQuery, props.modeSelectorProps.currentMode, setValue, shouldUseTaskPlaceholder, taskPlaceholder]);
 
@@ -1132,40 +1138,60 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({
     isEnabled,
     modeSelectorProps
 }) => (
+    // Right options are rendered first in DOM for tab order (send button first when enabled)
+    // CSS order property positions them visually (left on left, right on right)
     <div className="theia-ChatInputOptions">
-        <div className="theia-ChatInputOptions-left">
-            {leftOptions.map((option, index) => (
+        <div className="theia-ChatInputOptions-right">
+            {rightOptions.map((option, index) => (
                 <span
                     key={index}
                     className={`option${option.disabled ? ' disabled' : ''}${option.text?.align === 'right' ? ' reverse' : ''}`}
                     title={option.title}
+                    aria-label={option.title}
+                    role='button'
+                    tabIndex={option.disabled ? -1 : 0}
                     onClick={option.handler}
+                    onKeyDown={e => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            option.handler();
+                        }
+                    }}
                 >
                     <span>{option.text?.content}</span>
                     <span className={`codicon ${option.className}`} />
                 </span>
             ))}
-            {modeSelectorProps.show && modeSelectorProps.modes && (
-                <ChatModeSelector
-                    modes={modeSelectorProps.modes}
-                    currentMode={modeSelectorProps.currentMode}
-                    onModeChange={modeSelectorProps.onModeChange}
-                    disabled={!isEnabled}
-                />
-            )}
         </div>
-        <div className="theia-ChatInputOptions-right">
-            {rightOptions.map((option, index) => (
+        <div className="theia-ChatInputOptions-left">
+            {leftOptions.map((option, index) => (
                 <span
                     key={index}
                     className={`option${option.disabled ? ' disabled' : ''}${option.text?.align === 'right' ? ' reverse' : ''}`}
                     title={option.title}
+                    aria-label={option.title}
+                    role='button'
+                    tabIndex={option.disabled ? -1 : 0}
                     onClick={option.handler}
+                    onKeyDown={e => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            option.handler();
+                        }
+                    }}
                 >
                     <span>{option.text?.content}</span>
                     <span className={`codicon ${option.className}`} />
                 </span>
             ))}
+            {modeSelectorProps.show && modeSelectorProps.modes && (
+                <ChatModeSelector
+                    modes={modeSelectorProps.modes}
+                    currentMode={modeSelectorProps.currentMode}
+                    onModeChange={modeSelectorProps.onModeChange}
+                    disabled={!isEnabled}
+                />
+            )}
         </div>
     </div>
 );
@@ -1239,22 +1265,68 @@ interface ChangeSetUI {
 }
 
 /** Memo because the parent element rerenders on every key press in the chat widget. */
-const ChangeSetBox: React.FunctionComponent<{ changeSet: ChangeSetUI }> = React.memo(({ changeSet: { changeSet, title, deleteChangeSet, elements, actions } }) => (
-    <div className='theia-ChatInput-ChangeSet-Box'>
-        <div className='theia-ChatInput-ChangeSet-Header'>
-            <h3>{title}</h3>
-            <div className='theia-ChatInput-ChangeSet-Header-Actions'>
-                {actions.map(action => <div key={action.id} className='theia-changeSet-Action'>{action.render(changeSet)}</div>)}
-                <span className='codicon codicon-close action' title={nls.localize('theia/ai/chat-ui/deleteChangeSet', 'Delete Change Set')} onClick={() => deleteChangeSet()} />
+const ChangeSetBox: React.FunctionComponent<{ changeSet: ChangeSetUI }> = React.memo(({ changeSet: { changeSet, title, deleteChangeSet, elements, actions } }) => {
+    const [isCollapsed, setIsCollapsed] = React.useState(false);
+
+    const toggleCollapse = React.useCallback(() => {
+        setIsCollapsed(prev => !prev);
+    }, []);
+
+    const handleToggleKeyDown = React.useCallback(
+        (e: React.KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                toggleCollapse();
+            }
+        },
+        [toggleCollapse]
+    );
+
+    return (
+        <div className='theia-ChatInput-ChangeSet-Box'>
+            <div className='theia-ChatInput-ChangeSet-Header'>
+                <div className='theia-ChatInput-ChangeSet-Header-Title'>
+                    <span
+                        className={`codicon ${isCollapsed ? 'codicon-chevron-right' : 'codicon-chevron-down'} theia-ChatInput-ChangeSet-Toggle`}
+                        onClick={toggleCollapse}
+                        onKeyDown={handleToggleKeyDown}
+                        role='button'
+                        tabIndex={0}
+                        aria-expanded={!isCollapsed}
+                        aria-label={
+                            isCollapsed
+                                ? nls.localize('theia/ai/chat-ui/expandChangeSet', 'Expand Change Set')
+                                : nls.localize('theia/ai/chat-ui/collapseChangeSet', 'Collapse Change Set')
+                        }
+                        title={
+                            isCollapsed
+                                ? nls.localize('theia/ai/chat-ui/expandChangeSet', 'Expand Change Set')
+                                : nls.localize('theia/ai/chat-ui/collapseChangeSet', 'Collapse Change Set')
+                        }
+                    />
+                    <h3>{title}</h3>
+                </div>
+                <div className='theia-ChatInput-ChangeSet-Header-Actions'>
+                    {actions.map(action => (
+                        <div key={action.id} className='theia-changeSet-Action'>
+                            {action.render(changeSet)}
+                        </div>
+                    ))}
+                    <span
+                        className='codicon codicon-close action'
+                        title={nls.localize('theia/ai/chat-ui/deleteChangeSet', 'Delete Change Set')}
+                        onClick={() => deleteChangeSet()}
+                    />
+                </div>
+            </div>
+            <div className={`theia-ChatInput-ChangeSet-List ${isCollapsed ? 'collapsed' : 'expanded'}`}>
+                <ul>
+                    {elements.map(element => ChangeSetElement(element))}
+                </ul>
             </div>
         </div>
-        <div className='theia-ChatInput-ChangeSet-List'>
-            <ul>
-                {elements.map(element => ChangeSetElement(element))}
-            </ul>
-        </div>
-    </div>
-));
+    );
+});
 
 function toUiElement(element: ChangeSetElement,
     onDeleteChangeSetElement: (uri: URI) => void,

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

@@ -21,6 +21,7 @@ export * from './horizontal-layout-part-renderer';
 export * from './markdown-part-renderer';
 export * from './text-part-renderer';
 export * from './toolcall-part-renderer';
+export * from './not-available-toolcall-renderer';
 export * from './thinking-part-renderer';
 export * from './progress-part-renderer';
 export * from './tool-confirmation';

package/src/browser/chat-response-renderer/not-available-toolcall-renderer.tsx

@@ -0,0 +1,57 @@
+// *****************************************************************************
+// 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 { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { injectable } from '@theia/core/shared/inversify';
+import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
+import { ReactNode } from '@theia/core/shared/react';
+import { codicon } from '@theia/core/lib/browser';
+import * as React from '@theia/core/shared/react';
+import { ResponseNode } from '../chat-tree-view';
+
+/**
+ * High-priority renderer for tool calls that were not available.
+ *
+ * This handles cases where the LLM attempted to call a tool that was not
+ * made available to it in the request. This takes priority over all other
+ * tool renderers (including specialized ones like ShellExecutionToolRenderer)
+ * since unavailable tools should never be processed by tool-specific renderers.
+ */
+@injectable()
+export class NotAvailableToolCallRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        if (ToolCallChatResponseContent.is(response) && response.finished) {
+            if (ToolCallChatResponseContent.isNotAvailableResult(response.result)) {
+                return 100;
+            }
+        }
+        return -1;
+    }
+
+    render(response: ToolCallChatResponseContent, _parentNode: ResponseNode): ReactNode {
+        const errorMessage = ToolCallChatResponseContent.getErrorMessage(response.result);
+        return (
+            <div className='theia-toolCall'>
+                <span className='theia-toolCall-unavailable'>
+                    <span className={codicon('warning')}></span>
+                    {' '}
+                    {response.name}: {errorMessage}
+                </span>
+            </div>
+        );
+    }
+}

package/src/browser/chat-response-renderer/tool-confirmation.spec.ts

@@ -0,0 +1,108 @@
+// *****************************************************************************
+// 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 { expect } from 'chai';
+import { ContextMenuRenderer } from '@theia/core/lib/browser';
+import { ConfirmationScope, ToolConfirmationCallbacks, ToolConfirmationActionsProps, ToolConfirmationProps } from './tool-confirmation';
+
+const mockContextMenuRenderer = {} as ContextMenuRenderer;
+
+describe('Tool Confirmation Types', () => {
+    describe('ConfirmationScope', () => {
+        it('should accept valid scopes', () => {
+            const scopes: ConfirmationScope[] = ['once', 'session', 'forever'];
+            expect(scopes).to.have.length(3);
+        });
+    });
+
+    describe('ToolConfirmationCallbacks', () => {
+        it('should define required callback properties', () => {
+            const callbacks: ToolConfirmationCallbacks = {
+                onAllow: (_scope: ConfirmationScope) => { },
+                onDeny: (_scope: ConfirmationScope, _reason?: string) => { }
+            };
+            expect(callbacks.onAllow).to.be.a('function');
+            expect(callbacks.onDeny).to.be.a('function');
+        });
+
+        it('should allow optional toolRequest', () => {
+            const callbacks: ToolConfirmationCallbacks = {
+                toolRequest: { id: 'test', name: 'test', handler: async () => '', parameters: { type: 'object', properties: {} } },
+                onAllow: () => { },
+                onDeny: () => { }
+            };
+            expect(callbacks.toolRequest).to.exist;
+        });
+    });
+
+    describe('ToolConfirmationActionsProps', () => {
+        it('should extend ToolConfirmationCallbacks with toolName', () => {
+            const props: ToolConfirmationActionsProps = {
+                toolName: 'testTool',
+                onAllow: () => { },
+                onDeny: () => { },
+                contextMenuRenderer: mockContextMenuRenderer
+            };
+            expect(props.toolName).to.equal('testTool');
+        });
+
+        it('should support confirmAlwaysAllow string in toolRequest', () => {
+            const props: ToolConfirmationActionsProps = {
+                toolName: 'dangerousTool',
+                toolRequest: {
+                    id: 'test',
+                    name: 'test',
+                    handler: async () => '',
+                    parameters: { type: 'object', properties: {} },
+                    confirmAlwaysAllow: 'This tool can modify system files.'
+                },
+                onAllow: () => { },
+                onDeny: () => { },
+                contextMenuRenderer: mockContextMenuRenderer
+            };
+            expect(props.toolRequest?.confirmAlwaysAllow).to.equal('This tool can modify system files.');
+        });
+
+        it('should support confirmAlwaysAllow boolean in toolRequest', () => {
+            const props: ToolConfirmationActionsProps = {
+                toolName: 'dangerousTool',
+                toolRequest: {
+                    id: 'test',
+                    name: 'test',
+                    handler: async () => '',
+                    parameters: { type: 'object', properties: {} },
+                    confirmAlwaysAllow: true
+                },
+                onAllow: () => { },
+                onDeny: () => { },
+                contextMenuRenderer: mockContextMenuRenderer
+            };
+            expect(props.toolRequest?.confirmAlwaysAllow).to.be.true;
+        });
+    });
+
+    describe('ToolConfirmationProps', () => {
+        it('should pick toolRequest from ToolConfirmationCallbacks', () => {
+            const props: ToolConfirmationProps = {
+                response: { kind: 'toolCall', id: 'test', name: 'test' } as ToolConfirmationProps['response'],
+                onAllow: () => { },
+                onDeny: () => { },
+                contextMenuRenderer: mockContextMenuRenderer
+            };
+            expect(props.toolRequest).to.be.undefined;
+        });
+    });
+});