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

package/lib/browser/chat-input-widget.js

@@ -38,7 +38,7 @@ const task_context_variable_1 = require("@theia/ai-chat/lib/browser/task-context
 const chat_input_history_1 = require("./chat-input-history");
 const context_file_validation_service_1 = require("@theia/ai-chat/lib/browser/context-file-validation-service");
 exports.AIChatInputConfiguration = Symbol('AIChatInputConfiguration');
-let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends browser_2.ReactWidget {
+let AIChatInputWidget = class AIChatInputWidget extends browser_2.ReactWidget {
     constructor() {
         super(...arguments);
         this.fileValidationState = new Map();
@@ -56,6 +56,9 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
         this.onDidResizeEmitter = new core_1.Emitter();
         this.onDidResize = this.onDidResizeEmitter.event;
     }
+    static { AIChatInputWidget_1 = this; }
+    static { this.ID = 'chat-input-widget'; }
+    static { this.CONTEXT_MENU = ['chat-input-context-menu']; }
     get editor() {
         return this.editorRef;
     }
@@ -94,8 +97,7 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
     }
     set onQuery(query) {
         this._onQuery = (prompt, mode) => {
-            var _a;
-            if (((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.enablePromptHistory) !== false && prompt.trim()) {
+            if (this.configuration?.enablePromptHistory !== false && prompt.trim()) {
                 this.historyService.addToHistory(prompt);
                 this.navigationState.stopNavigation();
             }
@@ -219,7 +221,6 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
         }, 200);
     }
     async updateReceivingAgent() {
-        var _a, _b, _c;
         if (!this.editorRef || !this._chatModel) {
             if (this.receivingAgent !== undefined) {
                 this.chatInputReceivingAgentKey.set('');
@@ -237,15 +238,18 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
             const session = this.chatService.getSessions().find(s => s.model.id === this._chatModel.id);
             if (session) {
                 const agent = this.chatService.getAgent(parsedRequest, session);
-                const agentId = (_a = agent === null || agent === void 0 ? void 0 : agent.id) !== null && _a !== void 0 ? _a : '';
-                const previousAgentId = (_b = this.receivingAgent) === null || _b === void 0 ? void 0 : _b.agentId;
+                const agentId = agent?.id ?? '';
+                const previousAgentId = this.receivingAgent?.agentId;
                 this.chatInputReceivingAgentKey.set(agentId);
                 // Only update and re-render when the agent changes
                 if (agent && agentId !== previousAgentId) {
-                    const modes = (_c = agent.modes) !== null && _c !== void 0 ? _c : [];
+                    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();
@@ -326,13 +330,12 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
         return new core_1.URI(`ai-chat:/input.${chat_view_language_contribution_1.CHAT_VIEW_LANGUAGE_EXTENSION}`);
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         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 = (_c = (_b = (_a = branch === null || branch === void 0 ? void 0 : branch.items) === null || _a === void 0 ? void 0 : _a.at(-1)) === null || _b === void 0 ? void 0 : _b.element) !== null && _c !== void 0 ? _c : chatModel.getRequests().at(-1);
+        const currentRequest = branch?.items?.at(-1)?.element ?? chatModel.getRequests().at(-1);
         const isEditing = !!(currentRequest && (ai_chat_1.EditableChatRequestModel.isEditing(currentRequest)));
         const isPending = () => !!(currentRequest && !isEditing && ai_chat_1.ChatRequestModel.isInProgress(currentRequest));
         const pending = isPending();
@@ -340,22 +343,22 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
                 this.editorRef = editor;
                 this.setupEditorEventListeners();
                 this.editorReady.resolve();
-            }, showContext: (_d = this.configuration) === null || _d === void 0 ? void 0 : _d.showContext, showPinnedAgent: (_e = this.configuration) === null || _e === void 0 ? void 0 : _e.showPinnedAgent, showChangeSet: (_f = this.configuration) === null || _f === void 0 ? void 0 : _f.showChangeSet, showSuggestions: (_g = this.configuration) === null || _g === void 0 ? void 0 : _g.showSuggestions, hasPromptHistory: (_h = this.configuration) === null || _h === void 0 ? void 0 : _h.enablePromptHistory, labelProvider: this.labelProvider, actionService: this.changeSetActionService, decoratorService: this.changeSetDecoratorService, initialValue: this._initialValue, openerService: this.openerService, suggestions: this._chatModel.suggestions, currentRequest: currentRequest, isEditing: isEditing, pending: pending, heightInLines: this.heightInLines, onResponseChanged: () => {
+                this.scheduleUpdateReceivingAgent();
+            }, showContext: this.configuration?.showContext, showPinnedAgent: this.configuration?.showPinnedAgent, showChangeSet: this.configuration?.showChangeSet, showSuggestions: this.configuration?.showSuggestions, hasPromptHistory: this.configuration?.enablePromptHistory, labelProvider: this.labelProvider, actionService: this.changeSetActionService, decoratorService: this.changeSetDecoratorService, initialValue: this._initialValue, openerService: this.openerService, suggestions: this._chatModel.suggestions, currentRequest: currentRequest, isEditing: isEditing, pending: pending, heightInLines: this.heightInLines, onResponseChanged: () => {
                 if (isPending() !== pending) {
                     this.update();
                 }
             }, onResize: () => this.onDidResizeEmitter.fire(), modeSelectorProps: {
-                receivingAgentModes: (_j = this.receivingAgent) === null || _j === void 0 ? void 0 : _j.modes,
-                currentMode: (_k = this.receivingAgent) === null || _k === void 0 ? void 0 : _k.currentModeId,
+                receivingAgentModes: this.receivingAgent?.modes,
+                currentMode: this.receivingAgent?.currentModeId,
                 onModeChange: this.handleModeChange,
             } }));
     }
     onDragOver(event) {
-        var _a;
         event.preventDefault();
         event.stopPropagation();
         this.node.classList.add('drag-over');
-        if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types.includes('text/plain')) {
+        if (event.dataTransfer?.types.includes('text/plain')) {
             event.dataTransfer.dropEffect = 'copy';
         }
         else {
@@ -363,18 +366,16 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
         }
     }
     onDrop(event) {
-        var _a, _b, _c;
         event.preventDefault();
         event.stopPropagation();
         this.node.classList.remove('drag-over');
-        const dataTransferText = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
-        const position = (_c = (_b = this.editorRef) === null || _b === void 0 ? void 0 : _b.getControl().getTargetAtClientPoint(event.clientX, event.clientY)) === null || _c === void 0 ? void 0 : _c.position;
+        const dataTransferText = event.dataTransfer?.getData('text/plain');
+        const position = this.editorRef?.getControl().getTargetAtClientPoint(event.clientX, event.clientY)?.position;
         this.variableService.getDropResult(event.nativeEvent, { type: 'ai-chat-input-widget' }).then(result => {
-            var _a, _b;
             result.variables.forEach(variable => this.addContext(variable));
-            const text = (_a = result.text) !== null && _a !== void 0 ? _a : dataTransferText;
+            const text = result.text ?? dataTransferText;
             if (position && text) {
-                (_b = this.editorRef) === null || _b === void 0 ? void 0 : _b.getControl().executeEdits('drag-and-drop', [{
+                this.editorRef?.getControl().executeEdits('drag-and-drop', [{
                         range: {
                             startLineNumber: position.lineNumber,
                             startColumn: position.column,
@@ -388,12 +389,11 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
     }
     onPaste(event) {
         this.variableService.getPasteResult(event, { type: 'ai-chat-input-widget' }).then(result => {
-            var _a, _b;
             result.variables.forEach(variable => this.addContext(variable));
             if (result.text) {
-                const position = (_a = this.editorRef) === null || _a === void 0 ? void 0 : _a.getControl().getPosition();
+                const position = this.editorRef?.getControl().getPosition();
                 if (position && result.text) {
-                    (_b = this.editorRef) === null || _b === void 0 ? void 0 : _b.getControl().executeEdits('paste', [{
+                    this.editorRef?.getControl().executeEdits('paste', [{
                             range: {
                                 startLineNumber: position.lineNumber,
                                 startColumn: position.column,
@@ -407,8 +407,7 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
         });
     }
     onEscape() {
-        var _a, _b, _c, _d;
-        const currentRequest = (_d = (_c = (_b = (_a = this._branch) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.at(-1)) === null || _c === void 0 ? void 0 : _c.element) !== null && _d !== void 0 ? _d : this._chatModel.getRequests().at(-1);
+        const currentRequest = this._branch?.items?.at(-1)?.element ?? this._chatModel.getRequests().at(-1);
         if (currentRequest && !ai_chat_1.EditableChatRequestModel.isEditing(currentRequest) && ai_chat_1.ChatRequestModel.isInProgress(currentRequest)) {
             this._onCancel(currentRequest);
         }
@@ -458,8 +457,6 @@ let AIChatInputWidget = AIChatInputWidget_1 = class AIChatInputWidget extends br
     }
 };
 exports.AIChatInputWidget = AIChatInputWidget;
-AIChatInputWidget.ID = 'chat-input-widget';
-AIChatInputWidget.CONTEXT_MENU = ['chat-input-context-menu'];
 tslib_1.__decorate([
     (0, inversify_1.inject)(monaco_editor_provider_1.MonacoEditorProvider),
     tslib_1.__metadata("design:type", monaco_editor_provider_1.MonacoEditorProvider)
@@ -540,9 +537,8 @@ exports.AIChatInputWidget = AIChatInputWidget = AIChatInputWidget_1 = tslib_1.__
     (0, inversify_1.injectable)()
 ], AIChatInputWidget);
 // Utility to check if we have task context in the chat model
-const hasTaskContext = (chatModel) => chatModel.context.getVariables().some(variable => { var _a; return ((_a = variable.variable) === null || _a === void 0 ? void 0 : _a.id) === task_context_variable_1.TASK_CONTEXT_VARIABLE.id; });
+const hasTaskContext = (chatModel) => chatModel.context.getVariables().some(variable => variable.variable?.id === task_context_variable_1.TASK_CONTEXT_VARIABLE.id);
 const ChatInput = (props) => {
-    var _a, _b;
     const onDeleteChangeSet = () => props.onDeleteChangeSet(props.chatModel.id);
     const onDeleteChangeSetElement = (uri) => props.onDeleteChangeSetElement(props.chatModel.id, uri);
     const [isInputEmpty, setIsInputEmpty] = React.useState(true);
@@ -589,10 +585,9 @@ const ChatInput = (props) => {
     React.useEffect(() => {
         const uri = props.uri;
         const createInputElement = async () => {
-            var _a, _b;
             const paddingTop = 6;
             const lineHeight = 20;
-            const maxHeightPx = ((_a = props.heightInLines) !== null && _a !== void 0 ? _a : 12) * lineHeight;
+            const maxHeightPx = (props.heightInLines ?? 12) * lineHeight;
             const editor = await props.editorProvider.createSimpleInline(uri, editorContainerRef.current, {
                 language: chat_view_language_contribution_1.CHAT_VIEW_LANGUAGE_EXTENSION,
                 // Disable code lens, inlay hints and hover support to avoid console errors from other contributions
@@ -622,6 +617,7 @@ const ChatInput = (props) => {
                 bracketPairColorization: { enabled: false },
                 wrappingStrategy: 'advanced',
                 stickyScroll: { enabled: false },
+                ariaLabel: core_1.nls.localize('theia/ai/chat-ui/chatInputAriaLabel', 'Type your message here'),
             });
             if (editorContainerRef.current) {
                 editorContainerRef.current.style.overflowY = 'auto'; // ensure vertical scrollbar
@@ -669,18 +665,17 @@ const ChatInput = (props) => {
                         }
                     });
                 }
-                const lineNumbers = model.getAllDecorations().filter(predicate => { var _a; return (_a = predicate.options.description) === null || _a === void 0 ? void 0 : _a.startsWith('line-number-'); });
+                const lineNumbers = model.getAllDecorations().filter(predicate => predicate.options.description?.startsWith('line-number-'));
                 editor.getControl().removeDecorations(lineNumbers.map(d => d.id));
                 editor.getControl().createDecorationsCollection(decorations);
             };
-            (_b = editor.getControl().getModel()) === null || _b === void 0 ? void 0 : _b.onDidChangeContent(() => {
+            editor.getControl().getModel()?.onDidChangeContent(() => {
                 updateLineCounts();
             });
             editor.getControl().onDidChangeCursorPosition(e => {
-                var _a;
                 const lineNumber = e.position.lineNumber;
-                const line = (_a = editor.getControl().getDomNode()) === null || _a === void 0 ? void 0 : _a.querySelector(`.line-number-${lineNumber}`);
-                line === null || line === void 0 ? void 0 : line.scrollIntoView({ behavior: 'instant', block: 'nearest' });
+                const line = editor.getControl().getDomNode()?.querySelector(`.line-number-${lineNumber}`);
+                line?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
             });
             editorRef.current = editor;
             props.setEditorRef(editor);
@@ -748,17 +743,17 @@ const ChatInput = (props) => {
         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]);
     const onKeyDown = React.useCallback((event) => {
-        var _a;
         if (!props.isEnabled) {
             return;
         }
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
             // On Enter, read input and submit (handles task context)
-            const currentValue = ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.document.textEditorModel.getValue()) || '';
+            const currentValue = editorRef.current?.document.textEditorModel.getValue() || '';
             submit(currentValue);
         }
         else if (event.key === 'Escape') {
@@ -779,22 +774,19 @@ const ChatInput = (props) => {
         showPlaceholderIfEditorEmpty();
     };
     const showPlaceholderIfEditorEmpty = () => {
-        var _a, _b;
-        if (!((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getControl().getValue())) {
-            (_b = placeholderRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove('hidden');
+        if (!editorRef.current?.getControl().getValue()) {
+            placeholderRef.current?.classList.remove('hidden');
         }
     };
     const hidePlaceholderIfEditorFilled = () => {
-        var _a, _b;
-        const value = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getControl().getValue();
+        const value = editorRef.current?.getControl().getValue();
         if (value && value.length > 0) {
-            (_b = placeholderRef.current) === null || _b === void 0 ? void 0 : _b.classList.add('hidden');
+            placeholderRef.current?.classList.add('hidden');
         }
     };
     const handlePin = () => {
-        var _a, _b;
         if (editorRef.current) {
-            (_a = editorRef.current.getControl().getModel()) === null || _a === void 0 ? void 0 : _a.applyEdits([{
+            editorRef.current.getControl().getModel()?.applyEdits([{
                     range: {
                         startLineNumber: 1,
                         startColumn: 1,
@@ -804,7 +796,7 @@ const ChatInput = (props) => {
                     text: '@',
                 }]);
             editorRef.current.getControl().setPosition({ lineNumber: 1, column: 2 });
-            (_b = editorRef.current.getControl().getAction('editor.action.triggerSuggest')) === null || _b === void 0 ? void 0 : _b.run();
+            editorRef.current.getControl().getAction('editor.action.triggerSuggest')?.run();
         }
     };
     const leftOptions = [
@@ -842,9 +834,8 @@ const ChatInput = (props) => {
         rightOptions = [{
                 title: core_1.nls.localize('theia/ai/chat-ui/send', 'Send (Enter)'),
                 handler: () => {
-                    var _a;
                     if (props.isEnabled) {
-                        submit(((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.document.textEditorModel.getValue()) || '');
+                        submit(editorRef.current?.document.textEditorModel.getValue() || '');
                     }
                 },
                 className: 'codicon-send',
@@ -866,9 +857,8 @@ const ChatInput = (props) => {
         rightOptions = [{
                 title: core_1.nls.localize('theia/ai/chat-ui/send', 'Send (Enter)'),
                 handler: () => {
-                    var _a;
                     if (props.isEnabled) {
-                        submit(((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.document.textEditorModel.getValue()) || '');
+                        submit(editorRef.current?.document.textEditorModel.getValue() || '');
                     }
                 },
                 className: 'codicon-send',
@@ -877,10 +867,10 @@ const ChatInput = (props) => {
     }
     const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement, props.onOpenContextElement, props.fileValidationState);
     // Show mode selector if agent has multiple modes
-    const showModeSelector = ((_b = (_a = props.modeSelectorProps.receivingAgentModes) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 1;
+    const showModeSelector = (props.modeSelectorProps.receivingAgentModes?.length ?? 0) > 1;
     return (React.createElement("div", { className: 'theia-ChatInput', "data-ai-disabled": !props.isEnabled, onDragOver: props.onDragOver, onDrop: props.onDrop, ref: containerRef },
         props.showSuggestions !== false && React.createElement(chat_input_agent_suggestions_1.ChatInputAgentSuggestions, { suggestions: props.suggestions, opener: props.openerService }),
-        props.showChangeSet && (changeSetUI === null || changeSetUI === void 0 ? void 0 : changeSetUI.elements) &&
+        props.showChangeSet && changeSetUI?.elements &&
             React.createElement(ChangeSetBox, { changeSet: changeSetUI }),
         React.createElement("div", { className: 'theia-ChatInput-Editor-Box' },
             React.createElement("div", { className: 'theia-ChatInput-Editor', ref: editorContainerRef, onKeyDown: onKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur },
@@ -894,25 +884,29 @@ const ChatInput = (props) => {
                     onModeChange: props.modeSelectorProps.onModeChange,
                 } }))));
 };
-const ChatInputOptions = ({ leftOptions, rightOptions, isEnabled, modeSelectorProps }) => (React.createElement("div", { className: "theia-ChatInputOptions" },
+const ChatInputOptions = ({ leftOptions, rightOptions, 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)
+React.createElement("div", { className: "theia-ChatInputOptions" },
+    React.createElement("div", { className: "theia-ChatInputOptions-right" }, rightOptions.map((option, index) => (React.createElement("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();
+            }
+        } },
+        React.createElement("span", null, option.text?.content),
+        React.createElement("span", { className: `codicon ${option.className}` }))))),
     React.createElement("div", { className: "theia-ChatInputOptions-left" },
-        leftOptions.map((option, index) => {
-            var _a, _b;
-            return (React.createElement("span", { key: index, className: `option${option.disabled ? ' disabled' : ''}${((_a = option.text) === null || _a === void 0 ? void 0 : _a.align) === 'right' ? ' reverse' : ''}`, title: option.title, onClick: option.handler },
-                React.createElement("span", null, (_b = option.text) === null || _b === void 0 ? void 0 : _b.content),
-                React.createElement("span", { className: `codicon ${option.className}` })));
-        }),
-        modeSelectorProps.show && modeSelectorProps.modes && (React.createElement(ChatModeSelector, { modes: modeSelectorProps.modes, currentMode: modeSelectorProps.currentMode, onModeChange: modeSelectorProps.onModeChange, disabled: !isEnabled }))),
-    React.createElement("div", { className: "theia-ChatInputOptions-right" }, rightOptions.map((option, index) => {
-        var _a, _b;
-        return (React.createElement("span", { key: index, className: `option${option.disabled ? ' disabled' : ''}${((_a = option.text) === null || _a === void 0 ? void 0 : _a.align) === 'right' ? ' reverse' : ''}`, title: option.title, onClick: option.handler },
-            React.createElement("span", null, (_b = option.text) === null || _b === void 0 ? void 0 : _b.content),
-            React.createElement("span", { className: `codicon ${option.className}` })));
-    }))));
-const ChatModeSelector = React.memo(({ modes, currentMode, onModeChange, disabled }) => {
-    var _a, _b, _c;
-    return (React.createElement("select", { className: "theia-ChatInput-ModeSelector", value: (_b = currentMode !== null && currentMode !== void 0 ? currentMode : (_a = modes[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', onChange: e => onModeChange(e.target.value), disabled: disabled, title: (_c = modes.find(m => { var _a; return m.id === (currentMode !== null && currentMode !== void 0 ? currentMode : (_a = modes[0]) === null || _a === void 0 ? void 0 : _a.id); })) === null || _c === void 0 ? void 0 : _c.name }, modes.map(mode => (React.createElement("option", { key: mode.id, value: mode.id, title: mode.name }, mode.name)))));
-});
+        leftOptions.map((option, index) => (React.createElement("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();
+                }
+            } },
+            React.createElement("span", null, option.text?.content),
+            React.createElement("span", { className: `codicon ${option.className}` })))),
+        modeSelectorProps.show && modeSelectorProps.modes && (React.createElement(ChatModeSelector, { modes: modeSelectorProps.modes, currentMode: modeSelectorProps.currentMode, onModeChange: modeSelectorProps.onModeChange, disabled: !isEnabled })))));
+const ChatModeSelector = React.memo(({ modes, currentMode, onModeChange, disabled }) => (React.createElement("select", { className: "theia-ChatInput-ModeSelector", value: currentMode ?? modes[0]?.id ?? '', onChange: e => onModeChange(e.target.value), disabled: disabled, title: modes.find(m => m.id === (currentMode ?? modes[0]?.id))?.name }, modes.map(mode => (React.createElement("option", { key: mode.id, value: mode.id, title: mode.name }, mode.name))))));
 const noPropagation = (handler) => (e) => {
     handler();
     e.stopPropagation();
@@ -928,31 +922,48 @@ const buildChangeSetUI = (changeSet, labelProvider, decoratorService, actions, o
     }) : undefined;
 };
 /** Memo because the parent element rerenders on every key press in the chat widget. */
-const ChangeSetBox = React.memo(({ changeSet: { changeSet, title, deleteChangeSet, elements, actions } }) => (React.createElement("div", { className: 'theia-ChatInput-ChangeSet-Box' },
-    React.createElement("div", { className: 'theia-ChatInput-ChangeSet-Header' },
-        React.createElement("h3", null, title),
-        React.createElement("div", { className: 'theia-ChatInput-ChangeSet-Header-Actions' },
-            actions.map(action => React.createElement("div", { key: action.id, className: 'theia-changeSet-Action' }, action.render(changeSet))),
-            React.createElement("span", { className: 'codicon codicon-close action', title: core_1.nls.localize('theia/ai/chat-ui/deleteChangeSet', 'Delete Change Set'), onClick: () => deleteChangeSet() }))),
-    React.createElement("div", { className: 'theia-ChatInput-ChangeSet-List' },
-        React.createElement("ul", null, elements.map(element => ChangeSetElement(element)))))));
+const ChangeSetBox = 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) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleCollapse();
+        }
+    }, [toggleCollapse]);
+    return (React.createElement("div", { className: 'theia-ChatInput-ChangeSet-Box' },
+        React.createElement("div", { className: 'theia-ChatInput-ChangeSet-Header' },
+            React.createElement("div", { className: 'theia-ChatInput-ChangeSet-Header-Title' },
+                React.createElement("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
+                        ? core_1.nls.localize('theia/ai/chat-ui/expandChangeSet', 'Expand Change Set')
+                        : core_1.nls.localize('theia/ai/chat-ui/collapseChangeSet', 'Collapse Change Set'), title: isCollapsed
+                        ? core_1.nls.localize('theia/ai/chat-ui/expandChangeSet', 'Expand Change Set')
+                        : core_1.nls.localize('theia/ai/chat-ui/collapseChangeSet', 'Collapse Change Set') }),
+                React.createElement("h3", null, title)),
+            React.createElement("div", { className: 'theia-ChatInput-ChangeSet-Header-Actions' },
+                actions.map(action => (React.createElement("div", { key: action.id, className: 'theia-changeSet-Action' }, action.render(changeSet)))),
+                React.createElement("span", { className: 'codicon codicon-close action', title: core_1.nls.localize('theia/ai/chat-ui/deleteChangeSet', 'Delete Change Set'), onClick: () => deleteChangeSet() }))),
+        React.createElement("div", { className: `theia-ChatInput-ChangeSet-List ${isCollapsed ? 'collapsed' : 'expanded'}` },
+            React.createElement("ul", null, elements.map(element => ChangeSetElement(element))))));
+});
 function toUiElement(element, onDeleteChangeSetElement, labelProvider, decoratorService) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    return ({
-        open: (_a = element.open) === null || _a === void 0 ? void 0 : _a.bind(element),
+    return {
+        open: element.open?.bind(element),
         uri: element.uri.toString(),
-        iconClass: (_c = (_b = element.icon) !== null && _b !== void 0 ? _b : labelProvider.getIcon(element.uri)) !== null && _c !== void 0 ? _c : labelProvider.fileIcon,
+        iconClass: element.icon ?? labelProvider.getIcon(element.uri) ?? labelProvider.fileIcon,
         nameClass: `${element.type} ${element.state}`,
-        name: (_d = element.name) !== null && _d !== void 0 ? _d : labelProvider.getName(element.uri),
-        additionalInfo: (_e = element.additionalInfo) !== null && _e !== void 0 ? _e : labelProvider.getDetails(element.uri),
+        name: element.name ?? labelProvider.getName(element.uri),
+        additionalInfo: element.additionalInfo ?? labelProvider.getDetails(element.uri),
         additionalInfoSuffixIcon: decoratorService.getAdditionalInfoSuffixIcon(element),
-        openChange: (_f = element === null || element === void 0 ? void 0 : element.openChange) === null || _f === void 0 ? void 0 : _f.bind(element),
-        apply: element.state !== 'applied' ? (_g = element === null || element === void 0 ? void 0 : element.apply) === null || _g === void 0 ? void 0 : _g.bind(element) : undefined,
-        revert: element.state === 'applied' || element.state === 'stale' ? (_h = element === null || element === void 0 ? void 0 : element.revert) === null || _h === void 0 ? void 0 : _h.bind(element) : undefined,
+        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)
-    });
+    };
 }
-const ChangeSetElement = element => (React.createElement("li", { key: element.uri, title: core_1.nls.localize('theia/ai/chat-ui/openDiff', 'Open Diff'), onClick: () => { var _a; return (_a = element.openChange) === null || _a === void 0 ? void 0 : _a.call(element); } },
+const ChangeSetElement = element => (React.createElement("li", { key: element.uri, title: core_1.nls.localize('theia/ai/chat-ui/openDiff', 'Open Diff'), onClick: () => element.openChange?.() },
     React.createElement("div", { className: `theia-ChatInput-ChangeSet-Icon ${element.iconClass}` }),
     React.createElement("div", { className: 'theia-ChatInput-ChangeSet-labelParts' },
         React.createElement("span", { className: `theia-ChatInput-ChangeSet-title ${element.nameClass}` }, element.name),
@@ -1005,14 +1016,13 @@ function buildContextUI(context, labelProvider, onDeleteContextElement, onOpen,
 }
 const ChatContext = ({ context }) => (React.createElement("div", { className: "theia-ChatInput-ChatContext" },
     React.createElement("ul", null, context.map((element, index) => {
-        var _a, _b, _c, _d;
         if (image_context_variable_1.ImageContextVariable.isImageContextRequest(element.variable)) {
             const variable = image_context_variable_1.ImageContextVariable.parseRequest(element.variable);
-            return React.createElement("li", { key: index, className: "theia-ChatInput-ChatContext-Element theia-ChatInput-ImageContext-Element", title: (_a = variable.name) !== null && _a !== void 0 ? _a : variable.wsRelativePath, onClick: () => { var _a; return (_a = element.open) === null || _a === void 0 ? void 0 : _a.call(element); } },
+            return React.createElement("li", { key: index, className: "theia-ChatInput-ChatContext-Element theia-ChatInput-ImageContext-Element", title: variable.name ?? variable.wsRelativePath, onClick: () => element.open?.() },
                 React.createElement("div", { className: "theia-ChatInput-ChatContext-Row" },
                     React.createElement("div", { className: `theia-ChatInput-ChatContext-Icon ${element.iconClass}` }),
                     React.createElement("div", { className: "theia-ChatInput-ChatContext-labelParts" },
-                        React.createElement("span", { className: `theia-ChatInput-ChatContext-title ${element.nameClass}` }, (_b = variable.name) !== null && _b !== void 0 ? _b : (_c = variable.wsRelativePath) === null || _c === void 0 ? void 0 : _c.split('/').pop()),
+                        React.createElement("span", { className: `theia-ChatInput-ChatContext-title ${element.nameClass}` }, variable.name ?? variable.wsRelativePath?.split('/').pop()),
                         React.createElement("span", { className: 'theia-ChatInput-ChatContext-additionalInfo' }, element.additionalInfo)),
                     React.createElement("span", { className: "codicon codicon-close action", title: core_1.nls.localizeByDefault('Delete'), onClick: e => { e.stopPropagation(); element.delete(); } })),
                 React.createElement("div", { className: "theia-ChatInput-ChatContext-ImageRow" },
@@ -1021,8 +1031,8 @@ const ChatContext = ({ context }) => (React.createElement("div", { className: "t
         }
         const isWarning = element.className === 'warning-file';
         const isInvalid = element.className === 'invalid-file';
-        const tooltipTitle = (_d = element.validationMessage) !== null && _d !== void 0 ? _d : element.details;
-        return React.createElement("li", { key: index, className: `theia-ChatInput-ChatContext-Element ${element.className || ''}`, title: tooltipTitle, onClick: () => { var _a; return (_a = element.open) === null || _a === void 0 ? void 0 : _a.call(element); } },
+        const tooltipTitle = element.validationMessage ?? element.details;
+        return React.createElement("li", { key: index, className: `theia-ChatInput-ChatContext-Element ${element.className || ''}`, title: tooltipTitle, onClick: () => element.open?.() },
             React.createElement("div", { className: "theia-ChatInput-ChatContext-Row" },
                 isWarning && React.createElement("span", { className: "codicon codicon-warning warning-file-icon" }),
                 isInvalid && React.createElement("span", { className: "codicon codicon-error invalid-file-icon" }),