@codingame/monaco-vscode-katex-common 27.0.0 → 28.0.0

package/vscode/src/vs/workbench/contrib/chat/browser/widget/chatContentParts/chatQuestionCarouselPart.js

@@ -1,13 +1,14 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
-import { $, trackFocus, addDisposableListener, EventType, clearNode, isAncestorOfActiveElement, runAtThisOrScheduleAtNextAnimationFrame, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { $, trackFocus, addDisposableListener, EventType, clearNode, isHTMLElement, getWindow, isAncestorOfActiveElement, runAtThisOrScheduleAtNextAnimationFrame, DisposableResizeObserver } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { renderAsPlaintext } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/markdownRenderer';
 import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
 import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
 import { isMarkdownString, MarkdownString } from '@codingame/monaco-vscode-api/vscode/vs/base/common/htmlContent';
 import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
-import { Disposable, MutableDisposable, DisposableStore } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { Disposable, DisposableStore, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
+import { isMacintosh } from '@codingame/monaco-vscode-api/vscode/vs/base/common/platform';
 import { hasKey } from '@codingame/monaco-vscode-api/vscode/vs/base/common/types';
 import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
 import { IAccessibilityService } from '@codingame/monaco-vscode-api/vscode/vs/platform/accessibility/common/accessibility.service';
@@ -15,7 +16,9 @@ import { IMarkdownRendererService } from '@codingame/monaco-vscode-api/vscode/vs
 import { defaultButtonStyles, defaultInputBoxStyles, defaultCheckboxStyles } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/browser/defaultStyles';
 import { Button } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/button/button';
 import { InputBox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/inputbox/inputBox';
+import { DomScrollableElement } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/scrollbar/scrollableElement';
 import { Checkbox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toggle/toggle';
+import { ChatQuestionCarouselData } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/model/chatProgressTypes/chatQuestionCarouselData';
 import { isResponseVM } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/model/chatViewModel';
 import { Codicon } from '@codingame/monaco-vscode-api/vscode/vs/base/common/codicons';
 import { HoverPosition } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverWidget';
@@ -23,6 +26,7 @@ import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/h
 import { IContextKeyService } from '@codingame/monaco-vscode-api/vscode/vs/platform/contextkey/common/contextkey.service';
 import { IKeybindingService } from '@codingame/monaco-vscode-api/vscode/vs/platform/keybinding/common/keybinding.service';
 import { ChatContextKeys } from '@codingame/monaco-vscode-api/vscode/vs/workbench/contrib/chat/common/actions/chatContextKeys';
+import { ScrollbarVisibility } from '@codingame/monaco-vscode-api/vscode/vs/base/common/scrollable';
 import * as chatQuestionCarousel from './media/chatQuestionCarousel.css';
 
 registerCss(chatQuestionCarousel);
@@ -51,7 +55,6 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         this.onDidChangeHeight = this._onDidChangeHeight.event;
         this._currentIndex = 0;
         this._answers = ( new Map());
-        this._nextButtonHover = this._register(( new MutableDisposable()));
         this._isSkipped = false;
         this._textInputBoxes = ( new Map());
         this._singleSelectItems = ( new Map());
@@ -74,8 +77,18 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         });
         this.domNode.tabIndex = 0;
         this.domNode.setAttribute("role", "region");
-        this.domNode.setAttribute("aria-roledescription", ( localize(6452, "chat question")));
+        this.domNode.setAttribute("aria-roledescription", ( localize(6542, "chat question")));
         this._updateAriaLabel();
+        if (carousel instanceof ChatQuestionCarouselData) {
+            if (typeof carousel.draftCurrentIndex === "number") {
+                this._currentIndex = Math.max(0, Math.min(carousel.draftCurrentIndex, carousel.questions.length - 1));
+            }
+            if (carousel.draftAnswers) {
+                for (const [key, value] of Object.entries(carousel.draftAnswers)) {
+                    this._answers.set(key, value);
+                }
+            }
+        }
         if (carousel.data) {
             for (const [key, value] of Object.entries(carousel.data)) {
                 this._answers.set(key, value);
@@ -94,54 +107,20 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         this.domNode.append(this._questionContainer);
         if (carousel.allowSkip) {
             this._closeButtonContainer = $(".chat-question-close-container");
-            const skipAllTitle = ( localize(6453, "Skip all questions"));
+            const skipAllTitle = ( localize(6543, "Skip all questions"));
             const skipAllButton = interactiveStore.add(( new Button(this._closeButtonContainer, {
                 ...defaultButtonStyles,
                 secondary: true,
                 supportIcons: true
             })));
             skipAllButton.label = `$(${Codicon.close.id})`;
-            skipAllButton.element.classList.add("chat-question-nav-arrow", "chat-question-close");
+            skipAllButton.element.classList.add("chat-question-close");
             skipAllButton.element.setAttribute("aria-label", skipAllTitle);
             interactiveStore.add(this._hoverService.setupDelayedHover(skipAllButton.element, {
                 content: skipAllTitle
             }));
             this._skipAllButton = skipAllButton;
         }
-        this._footerRow = $(".chat-question-footer-row");
-        this._stepIndicator = $(".chat-question-step-indicator");
-        this._footerRow.appendChild(this._stepIndicator);
-        this._navigationButtons = $(".chat-question-carousel-nav");
-        this._navigationButtons.setAttribute("role", "navigation");
-        this._navigationButtons.setAttribute("aria-label", ( localize(6454, "Question navigation")));
-        const arrowsContainer = $(".chat-question-nav-arrows");
-        const previousLabel = ( localize(6455, "Previous"));
-        const previousLabelWithKeybinding = this.getLabelWithKeybinding(previousLabel, PREVIOUS_QUESTION_ACTION_ID);
-        const prevButton = interactiveStore.add(( new Button(arrowsContainer, {
-            ...defaultButtonStyles,
-            secondary: true,
-            supportIcons: true
-        })));
-        prevButton.element.classList.add("chat-question-nav-arrow", "chat-question-nav-prev");
-        prevButton.label = `$(${Codicon.chevronLeft.id})`;
-        prevButton.element.setAttribute("aria-label", previousLabelWithKeybinding);
-        interactiveStore.add(this._hoverService.setupDelayedHover(prevButton.element, {
-            content: previousLabelWithKeybinding
-        }));
-        this._prevButton = prevButton;
-        const nextButton = interactiveStore.add(( new Button(arrowsContainer, {
-            ...defaultButtonStyles,
-            secondary: true,
-            supportIcons: true
-        })));
-        nextButton.element.classList.add("chat-question-nav-arrow", "chat-question-nav-next");
-        nextButton.label = `$(${Codicon.chevronRight.id})`;
-        this._nextButton = nextButton;
-        this._navigationButtons.appendChild(arrowsContainer);
-        this._footerRow.appendChild(this._navigationButtons);
-        this.domNode.append(this._footerRow);
-        interactiveStore.add(prevButton.onDidClick(() => this.navigate(-1)));
-        interactiveStore.add(nextButton.onDidClick(() => this.handleNext()));
         if (this._skipAllButton) {
             interactiveStore.add(this._skipAllButton.onDidClick(() => this.ignore()));
         }
@@ -151,6 +130,10 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 e.preventDefault();
                 e.stopPropagation();
                 this.ignore();
+            } else if (event.keyCode === KeyCode.Enter && (event.metaKey || event.ctrlKey)) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.submit();
             } else if (event.keyCode === KeyCode.Enter && !event.shiftKey) {
                 const target = e.target;
                 const isTextInput = target.tagName === "INPUT" && target.type === "text";
@@ -158,7 +141,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 if (isTextInput || isFreeformTextarea) {
                     e.preventDefault();
                     e.stopPropagation();
-                    this.handleNext();
+                    this.handleNextOrSubmit();
                 }
             } else if ((event.ctrlKey || event.metaKey) && (event.keyCode === KeyCode.Backspace || event.keyCode === KeyCode.Delete)) {
                 e.stopPropagation();
@@ -171,26 +154,44 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         const answer = this.getCurrentAnswer();
         if (answer !== undefined) {
             this._answers.set(currentQuestion.id, answer);
+        } else {
+            this._answers.delete(currentQuestion.id);
         }
+        this.persistDraftState();
+    }
+    persistDraftState() {
+        if (this.carousel.isUsed || !(this.carousel instanceof ChatQuestionCarouselData)) {
+            return;
+        }
+        this.carousel.draftAnswers = Object.fromEntries(this._answers.entries());
+        this.carousel.draftCurrentIndex = this._currentIndex;
     }
     navigate(delta) {
         const newIndex = this._currentIndex + delta;
         if (newIndex >= 0 && newIndex < this.carousel.questions.length) {
             this.saveCurrentAnswer();
             this._currentIndex = newIndex;
+            this.persistDraftState();
             this.renderCurrentQuestion(true);
+            this.domNode.focus();
         }
     }
-    handleNext() {
+    handleNextOrSubmit() {
         this.saveCurrentAnswer();
         if (this._currentIndex < this.carousel.questions.length - 1) {
             this._currentIndex++;
+            this.persistDraftState();
             this.renderCurrentQuestion(true);
         } else {
             this._options.onSubmit(this._answers);
             this.hideAndShowSummary();
         }
     }
+    submit() {
+        this.saveCurrentAnswer();
+        this._options.onSubmit(this._answers);
+        this.hideAndShowSummary();
+    }
     _focusContainerAndAnnounce() {
         this.domNode.focus();
         const question = this.carousel.questions[this._currentIndex];
@@ -199,7 +200,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             const messageContent = this.getQuestionText(questionText);
             const questionCount = this.carousel.questions.length;
             const alertMessage = questionCount === 1 ? messageContent : ( localize(
-                6456,
+                6544,
                 "Question {0} of {1}: {2}",
                 this._currentIndex + 1,
                 questionCount,
@@ -226,12 +227,49 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         this._freeformTextareas.clear();
         this._prevButton = undefined;
         this._nextButton = undefined;
+        this._submitButton = undefined;
         this._skipAllButton = undefined;
         this._questionContainer = undefined;
-        this._navigationButtons = undefined;
         this._closeButtonContainer = undefined;
         this._footerRow = undefined;
         this._stepIndicator = undefined;
+        this._submitHint = undefined;
+        this._inputScrollable = undefined;
+    }
+    layoutInputScrollable(inputScrollable) {
+        if (!this._questionContainer) {
+            return;
+        }
+        const scrollableNode = inputScrollable.getDomNode();
+        const scrollableContent = scrollableNode.firstElementChild;
+        if (!isHTMLElement(scrollableContent)) {
+            return;
+        }
+        if (scrollableNode.style.height !== "" || scrollableNode.style.maxHeight !== "") {
+            scrollableNode.style.height = "";
+            scrollableNode.style.maxHeight = "";
+        }
+        if (scrollableContent.style.height !== "" || scrollableContent.style.maxHeight !== "") {
+            scrollableContent.style.height = "";
+            scrollableContent.style.maxHeight = "";
+        }
+        const maxContainerHeight = this._questionContainer.clientHeight;
+        const computedStyle = getWindow(this._questionContainer).getComputedStyle(this._questionContainer);
+        const contentVerticalPadding = Number.parseFloat(computedStyle.paddingTop || "0") + Number.parseFloat(computedStyle.paddingBottom || "0");
+        const nonScrollableContentHeight = Array.from(this._questionContainer.children).filter(child => child !== scrollableNode).reduce((sum, child) => sum + child.offsetHeight, 0);
+        const availableScrollableHeight = Math.floor(maxContainerHeight - contentVerticalPadding - nonScrollableContentHeight);
+        const contentScrollableHeight = scrollableContent.scrollHeight;
+        const constrainedScrollableHeight = Math.max(0, Math.min(availableScrollableHeight, contentScrollableHeight));
+        const constrainedScrollableHeightPx = `${constrainedScrollableHeight}px`;
+        if (scrollableNode.style.height !== constrainedScrollableHeightPx || scrollableNode.style.maxHeight !== constrainedScrollableHeightPx) {
+            scrollableNode.style.height = constrainedScrollableHeightPx;
+            scrollableNode.style.maxHeight = constrainedScrollableHeightPx;
+        }
+        if (scrollableContent.style.height !== constrainedScrollableHeightPx || scrollableContent.style.maxHeight !== constrainedScrollableHeightPx) {
+            scrollableContent.style.height = constrainedScrollableHeightPx;
+            scrollableContent.style.maxHeight = constrainedScrollableHeightPx;
+        }
+        inputScrollable.scanDomNode();
     }
     skip() {
         if (this._isSkipped || !this.carousel.allowSkip) {
@@ -305,17 +343,17 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     _updateAriaLabel() {
         const question = this.carousel.questions[this._currentIndex];
         if (!question) {
-            this.domNode.setAttribute("aria-label", ( localize(6457, "Chat question")));
+            this.domNode.setAttribute("aria-label", ( localize(6545, "Chat question")));
             return;
         }
         const questionText = question.message ?? question.title;
         const messageContent = this.getQuestionText(questionText);
         const questionCount = this.carousel.questions.length;
         if (questionCount === 1) {
-            this.domNode.setAttribute("aria-label", ( localize(6458, "Chat question: {0}", messageContent)));
+            this.domNode.setAttribute("aria-label", ( localize(6546, "Chat question: {0}", messageContent)));
         } else {
             this.domNode.setAttribute("aria-label", ( localize(
-                6459,
+                6547,
                 "Chat question {0} of {1}: {2}",
                 this._currentIndex + 1,
                 questionCount,
@@ -344,11 +382,12 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         return true;
     }
     renderCurrentQuestion(focusContainerForScreenReader = false) {
-        if (!this._questionContainer || !this._prevButton || !this._nextButton) {
+        if (!this._questionContainer) {
             return;
         }
         const questionRenderStore = ( new DisposableStore());
         this._questionRenderStore.value = questionRenderStore;
+        this._inputScrollable = undefined;
         this._inputBoxes.clear();
         this._textInputBoxes.clear();
         this._singleSelectItems.clear();
@@ -360,72 +399,180 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             return;
         }
         const headerRow = $(".chat-question-header-row");
+        const titleRow = $(".chat-question-title-row");
         const questionText = question.message ?? question.title;
         if (questionText) {
             const title = $(".chat-question-title");
             const messageContent = this.getQuestionText(questionText);
             title.setAttribute("aria-label", messageContent);
-            if (question.message !== undefined) {
-                const messageMd = isMarkdownString(questionText) ? MarkdownString.lift(questionText) : ( new MarkdownString(questionText));
-                const renderedTitle = questionRenderStore.add(this._markdownRendererService.render(messageMd));
-                title.appendChild(renderedTitle.element);
-            } else {
-                const parenMatch = messageContent.match(/^(.+?)\s*(\([^)]+\))\s*$/);
-                if (parenMatch) {
-                    const mainTitle = $("span.chat-question-title-main");
-                    mainTitle.textContent = parenMatch[1];
-                    title.appendChild(mainTitle);
-                    const subtitle = $("span.chat-question-title-subtitle");
-                    subtitle.textContent = " " + parenMatch[2];
-                    title.appendChild(subtitle);
-                } else {
-                    title.textContent = messageContent;
-                }
-            }
-            headerRow.appendChild(title);
+            const messageMd = isMarkdownString(questionText) ? MarkdownString.lift(questionText) : ( new MarkdownString(questionText));
+            const renderedTitle = questionRenderStore.add(this._markdownRendererService.render(messageMd));
+            title.appendChild(renderedTitle.element);
+            titleRow.appendChild(title);
         }
+        headerRow.appendChild(titleRow);
         if (this._closeButtonContainer) {
-            headerRow.appendChild(this._closeButtonContainer);
+            titleRow.appendChild(this._closeButtonContainer);
         }
         this._questionContainer.appendChild(headerRow);
-        const isSingleQuestion = this.carousel.questions.length === 1;
-        if (this._stepIndicator) {
-            this._stepIndicator.textContent = `${this._currentIndex + 1}/${this.carousel.questions.length}`;
-            this._stepIndicator.style.display = isSingleQuestion ? "none" : "";
-        }
         const inputContainer = $(".chat-question-input-container");
         this.renderInput(inputContainer, question);
-        this._questionContainer.appendChild(inputContainer);
-        this._prevButton.enabled = this._currentIndex > 0;
-        this._prevButton.element.style.display = isSingleQuestion ? "none" : "";
-        const isLastQuestion = this._currentIndex === this.carousel.questions.length - 1;
-        const submitLabel = ( localize(6460, "Submit"));
-        const nextLabel = ( localize(6461, "Next"));
-        const nextLabelWithKeybinding = this.getLabelWithKeybinding(nextLabel, NEXT_QUESTION_ACTION_ID);
-        if (isLastQuestion) {
-            this._nextButton.label = submitLabel;
-            this._nextButton.element.setAttribute("aria-label", submitLabel);
-            this._nextButton.element.classList.add("chat-question-nav-submit");
-            this._nextButtonHover.value = this._hoverService.setupDelayedHover(this._nextButton.element, {
-                content: submitLabel
-            });
+        const inputScrollable = questionRenderStore.add(( new DomScrollableElement(inputContainer, {
+            vertical: ScrollbarVisibility.Visible,
+            horizontal: ScrollbarVisibility.Hidden,
+            consumeMouseWheelIfScrollbarIsNeeded: true
+        })));
+        this._inputScrollable = inputScrollable;
+        const inputScrollableNode = inputScrollable.getDomNode();
+        inputScrollableNode.classList.add("chat-question-input-scrollable");
+        this._questionContainer.appendChild(inputScrollableNode);
+        const isSingleQuestion = this.carousel.questions.length === 1;
+        if (!isSingleQuestion) {
+            this.renderFooter();
         } else {
-            this._nextButton.label = `$(${Codicon.chevronRight.id})`;
-            this._nextButton.element.setAttribute("aria-label", nextLabelWithKeybinding);
-            this._nextButton.element.classList.remove("chat-question-nav-submit");
-            this._nextButtonHover.value = this._hoverService.setupDelayedHover(this._nextButton.element, {
-                content: nextLabelWithKeybinding
-            });
+            this.renderSingleQuestionFooter();
         }
+        let relayoutScheduled = false;
+        const relayoutScheduler = questionRenderStore.add(( new MutableDisposable()));
+        const scheduleLayoutInputScrollable = () => {
+            if (relayoutScheduled) {
+                return;
+            }
+            relayoutScheduled = true;
+            relayoutScheduler.value = runAtThisOrScheduleAtNextAnimationFrame(getWindow(this.domNode), () => {
+                relayoutScheduled = false;
+                this.layoutInputScrollable(inputScrollable);
+            });
+        };
+        const inputResizeObserver = questionRenderStore.add(new DisposableResizeObserver(() => scheduleLayoutInputScrollable()));
+        questionRenderStore.add(inputResizeObserver.observe(inputScrollableNode));
+        questionRenderStore.add(inputResizeObserver.observe(inputContainer));
+        scheduleLayoutInputScrollable();
+        questionRenderStore.add(
+            runAtThisOrScheduleAtNextAnimationFrame(getWindow(this.domNode), () => {
+                inputContainer.scrollTop = 0;
+                inputContainer.scrollLeft = 0;
+                inputScrollable.setScrollPosition({
+                    scrollTop: 0,
+                    scrollLeft: 0
+                });
+                inputScrollable.scanDomNode();
+            })
+        );
         this._updateAriaLabel();
         if (focusContainerForScreenReader && this._accessibilityService.isScreenReaderOptimized()) {
             this._focusContainerAndAnnounce();
         }
         this._onDidChangeHeight.fire();
     }
+    renderFooter() {
+        if (!this._footerRow) {
+            const interactiveStore = this._interactiveUIStore.value;
+            if (!interactiveStore) {
+                return;
+            }
+            this._footerRow = $(".chat-question-footer-row");
+            const leftControls = $(".chat-question-footer-left.chat-question-carousel-nav");
+            leftControls.setAttribute("role", "navigation");
+            leftControls.setAttribute("aria-label", ( localize(6548, "Question navigation")));
+            const arrowsContainer = $(".chat-question-nav-arrows");
+            const previousLabel = this.getLabelWithKeybinding(( localize(6549, "Previous")), PREVIOUS_QUESTION_ACTION_ID);
+            const prevButton = interactiveStore.add(( new Button(arrowsContainer, {
+                ...defaultButtonStyles,
+                secondary: true,
+                supportIcons: true
+            })));
+            prevButton.element.classList.add("chat-question-nav-arrow", "chat-question-nav-prev");
+            prevButton.label = `$(${Codicon.chevronLeft.id})`;
+            prevButton.element.setAttribute("aria-label", previousLabel);
+            interactiveStore.add(this._hoverService.setupDelayedHover(prevButton.element, {
+                content: previousLabel
+            }));
+            interactiveStore.add(prevButton.onDidClick(() => this.navigate(-1)));
+            this._prevButton = prevButton;
+            const nextLabel = this.getLabelWithKeybinding(( localize(6550, "Next")), NEXT_QUESTION_ACTION_ID);
+            const nextButton = interactiveStore.add(( new Button(arrowsContainer, {
+                ...defaultButtonStyles,
+                secondary: true,
+                supportIcons: true
+            })));
+            nextButton.element.classList.add("chat-question-nav-arrow", "chat-question-nav-next");
+            nextButton.label = `$(${Codicon.chevronRight.id})`;
+            nextButton.element.setAttribute("aria-label", nextLabel);
+            interactiveStore.add(this._hoverService.setupDelayedHover(nextButton.element, {
+                content: nextLabel
+            }));
+            interactiveStore.add(nextButton.onDidClick(() => this.navigate(1)));
+            this._nextButton = nextButton;
+            leftControls.appendChild(arrowsContainer);
+            this._stepIndicator = $(".chat-question-step-indicator");
+            leftControls.appendChild(this._stepIndicator);
+            this._footerRow.appendChild(leftControls);
+            const rightControls = $(".chat-question-footer-right");
+            const hint = $("span.chat-question-submit-hint");
+            hint.textContent = isMacintosh ? ( localize(6551, "⌘⏎ to submit")) : ( localize(6552, "Ctrl+Enter to submit"));
+            rightControls.appendChild(hint);
+            this._submitHint = hint;
+            const submitButton = interactiveStore.add(( new Button(rightControls, {
+                ...defaultButtonStyles
+            })));
+            submitButton.element.classList.add("chat-question-submit-button");
+            submitButton.label = ( localize(6553, "Submit"));
+            interactiveStore.add(submitButton.onDidClick(() => this.submit()));
+            this._submitButton = submitButton;
+            this._footerRow.appendChild(rightControls);
+            this.domNode.append(this._footerRow);
+        }
+        this.updateFooterState();
+    }
+    updateFooterState() {
+        if (this._prevButton) {
+            this._prevButton.enabled = this._currentIndex > 0;
+        }
+        if (this._nextButton) {
+            this._nextButton.enabled = this._currentIndex < this.carousel.questions.length - 1;
+        }
+        if (this._stepIndicator) {
+            this._stepIndicator.textContent = ( localize(6554, "{0}/{1}", this._currentIndex + 1, this.carousel.questions.length));
+        }
+        if (this._submitButton) {
+            const isLastQuestion = this._currentIndex === this.carousel.questions.length - 1;
+            this._submitButton.element.style.display = isLastQuestion ? "" : "none";
+            if (this._submitHint) {
+                this._submitHint.style.display = isLastQuestion ? "" : "none";
+            }
+        }
+    }
+    renderSingleQuestionFooter() {
+        if (!this._footerRow) {
+            const interactiveStore = this._interactiveUIStore.value;
+            if (!interactiveStore) {
+                return;
+            }
+            this._footerRow = $(".chat-question-footer-row");
+            const leftControls = $(".chat-question-footer-left.chat-question-carousel-nav");
+            leftControls.setAttribute("role", "navigation");
+            leftControls.setAttribute("aria-label", ( localize(6548, "Question navigation")));
+            this._footerRow.appendChild(leftControls);
+            const rightControls = $(".chat-question-footer-right");
+            const hint = $("span.chat-question-submit-hint");
+            hint.textContent = isMacintosh ? ( localize(6551, "⌘⏎ to submit")) : ( localize(6552, "Ctrl+Enter to submit"));
+            rightControls.appendChild(hint);
+            this._submitHint = hint;
+            const submitButton = interactiveStore.add(( new Button(rightControls, {
+                ...defaultButtonStyles
+            })));
+            submitButton.element.classList.add("chat-question-submit-button");
+            submitButton.label = ( localize(6553, "Submit"));
+            interactiveStore.add(submitButton.onDidClick(() => this.submit()));
+            this._submitButton = submitButton;
+            this._footerRow.appendChild(rightControls);
+            this.domNode.append(this._footerRow);
+        }
+    }
     getLabelWithKeybinding(label, actionId) {
         const keybindingLabel = this._keybindingService.lookupKeybinding(actionId, this._contextKeyService)?.getLabel();
-        return keybindingLabel ? ( localize(6462, "{0} ({1})", label, keybindingLabel)) : label;
+        return keybindingLabel ? ( localize(6555, "{0} ({1})", label, keybindingLabel)) : label;
     }
     renderInput(container, question) {
         switch (question.type) {
@@ -444,6 +591,9 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         const autoResize = () => {
             textarea.style.height = "auto";
             textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+            if (this._inputScrollable) {
+                this.layoutInputScrollable(this._inputScrollable);
+            }
             this._onDidChangeHeight.fire();
         };
         this._inputBoxes.add(addDisposableListener(textarea, EventType.INPUT, autoResize));
@@ -451,9 +601,10 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     }
     renderTextInput(container, question) {
         const inputBox = this._inputBoxes.add(( new InputBox(container, undefined, {
-            placeholder: ( localize(6463, "Enter your answer")),
+            placeholder: ( localize(6556, "Enter your answer")),
             inputBoxStyles: defaultInputBoxStyles
         })));
+        this._inputBoxes.add(inputBox.onDidChange(() => this.saveCurrentAnswer()));
         const previousAnswer = this._answers.get(question.id);
         if (previousAnswer !== undefined) {
             inputBox.value = String(previousAnswer);
@@ -508,13 +659,14 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             if (data) {
                 data.selectedIndex = newIndex;
             }
+            this.saveCurrentAnswer();
         };
         options.forEach((option, index) => {
             const isSelected = index === selectedIndex;
             const listItem = $(".chat-question-list-item");
             listItem.setAttribute("role", "option");
             listItem.setAttribute("aria-selected", String(isSelected));
-            listItem.setAttribute("aria-label", ( localize(6464, "Option {0}: {1}", index + 1, option.label)));
+            listItem.setAttribute("aria-label", ( localize(6557, "Option {0}: {1}", index + 1, option.label)));
             listItem.id = `option-${question.id}-${index}`;
             listItem.tabIndex = -1;
             const number = $(".chat-question-list-number");
@@ -528,11 +680,12 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             const label = $(".chat-question-list-label");
             const separatorIndex = option.label.indexOf(" - ");
             if (separatorIndex !== -1) {
+                listItem.classList.add("has-description");
                 const titleSpan = $("span.chat-question-list-label-title");
                 titleSpan.textContent = option.label.substring(0, separatorIndex);
                 label.appendChild(titleSpan);
                 const descSpan = $("span.chat-question-list-label-desc");
-                descSpan.textContent = ": " + option.label.substring(separatorIndex + 3);
+                descSpan.textContent = option.label.substring(separatorIndex + 3);
                 label.appendChild(descSpan);
             } else {
                 label.textContent = option.label;
@@ -550,7 +703,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 if (freeform) {
                     freeform.value = "";
                 }
-                this.handleNext();
+                this.handleNextOrSubmit();
             }));
             this._inputBoxes.add(this._hoverService.setupDelayedHover(listItem, {
                 content: option.label,
@@ -576,7 +729,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         freeformNumber.textContent = `${options.length + 1}`;
         freeformContainer.appendChild(freeformNumber);
         const freeformTextarea = $("textarea.chat-question-freeform-textarea");
-        freeformTextarea.placeholder = ( localize(6465, "Enter custom answer"));
+        freeformTextarea.placeholder = ( localize(6558, "Enter custom answer"));
         freeformTextarea.rows = 1;
         if (previousFreeform !== undefined) {
             freeformTextarea.value = previousFreeform;
@@ -585,6 +738,8 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         this._inputBoxes.add(addDisposableListener(freeformTextarea, EventType.INPUT, () => {
             if (freeformTextarea.value.length > 0) {
                 updateSelection(-1);
+            } else {
+                this.saveCurrentAnswer();
             }
         }));
         freeformContainer.appendChild(freeformTextarea);
@@ -603,10 +758,10 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             } else if (event.keyCode === KeyCode.UpArrow) {
                 e.preventDefault();
                 newIndex = Math.max(data.selectedIndex - 1, 0);
-            } else if (event.keyCode === KeyCode.Enter || event.keyCode === KeyCode.Space) {
+            } else if ((event.keyCode === KeyCode.Enter || event.keyCode === KeyCode.Space) && !event.metaKey && !event.ctrlKey) {
                 e.preventDefault();
                 e.stopPropagation();
-                this.handleNext();
+                this.handleNextOrSubmit();
                 return;
             } else if (event.keyCode >= KeyCode.Digit1 && event.keyCode <= KeyCode.Digit9) {
                 const numberIndex = event.keyCode - KeyCode.Digit1;
@@ -679,7 +834,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             const listItem = $(".chat-question-list-item.multi-select");
             listItem.setAttribute("role", "option");
             listItem.setAttribute("aria-selected", String(isChecked));
-            listItem.setAttribute("aria-label", ( localize(6464, "Option {0}: {1}", index + 1, option.label)));
+            listItem.setAttribute("aria-label", ( localize(6557, "Option {0}: {1}", index + 1, option.label)));
             listItem.id = `option-${question.id}-${index}`;
             listItem.tabIndex = -1;
             const number = $(".chat-question-list-number");
@@ -692,11 +847,12 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             const label = $(".chat-question-list-label");
             const separatorIndex = option.label.indexOf(" - ");
             if (separatorIndex !== -1) {
+                listItem.classList.add("has-description");
                 const titleSpan = $("span.chat-question-list-label-title");
                 titleSpan.textContent = option.label.substring(0, separatorIndex);
                 label.appendChild(titleSpan);
                 const descSpan = $("span.chat-question-list-label-desc");
-                descSpan.textContent = ": " + option.label.substring(separatorIndex + 3);
+                descSpan.textContent = option.label.substring(separatorIndex + 3);
                 label.appendChild(descSpan);
             } else {
                 label.textContent = option.label;
@@ -711,6 +867,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             this._inputBoxes.add(checkbox.onChange(() => {
                 listItem.classList.toggle("checked", checkbox.checked);
                 listItem.setAttribute("aria-selected", String(checkbox.checked));
+                this.saveCurrentAnswer();
             }));
             this._inputBoxes.add(addDisposableListener(listItem, EventType.CLICK, e => {
                 focusedIndex = index;
@@ -737,12 +894,15 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         freeformNumber.textContent = `${options.length + 1}`;
         freeformContainer.appendChild(freeformNumber);
         const freeformTextarea = $("textarea.chat-question-freeform-textarea");
-        freeformTextarea.placeholder = ( localize(6465, "Enter custom answer"));
+        freeformTextarea.placeholder = ( localize(6558, "Enter custom answer"));
         freeformTextarea.rows = 1;
         if (previousFreeform !== undefined) {
             freeformTextarea.value = previousFreeform;
         }
         const autoResize = this.setupTextareaAutoResize(freeformTextarea);
+        this._inputBoxes.add(
+            addDisposableListener(freeformTextarea, EventType.INPUT, () => this.saveCurrentAnswer())
+        );
         freeformContainer.appendChild(freeformTextarea);
         container.appendChild(freeformContainer);
         this._freeformTextareas.set(question.id, freeformTextarea);
@@ -759,10 +919,10 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 e.preventDefault();
                 focusedIndex = Math.max(focusedIndex - 1, 0);
                 listItems[focusedIndex].focus();
-            } else if (event.keyCode === KeyCode.Enter) {
+            } else if (event.keyCode === KeyCode.Enter && !event.metaKey && !event.ctrlKey) {
                 e.preventDefault();
                 e.stopPropagation();
-                this.handleNext();
+                this.handleNextOrSubmit();
             } else if (event.keyCode === KeyCode.Space) {
                 e.preventDefault();
                 if (focusedIndex >= 0 && focusedIndex < checkboxes.length) {
@@ -871,7 +1031,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     renderSkippedMessage() {
         const skippedContainer = $(".chat-question-carousel-summary");
         const skippedMessage = $(".chat-question-summary-skipped");
-        skippedMessage.textContent = ( localize(6466, "Skipped"));
+        skippedMessage.textContent = ( localize(6559, "Skipped"));
         skippedContainer.appendChild(skippedMessage);
         this.domNode.appendChild(skippedContainer);
     }
@@ -885,29 +1045,22 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         const summaryContainer = $(".chat-question-carousel-summary");
         for (const question of this.carousel.questions) {
             const answer = this._answers.get(question.id);
-            if (answer === undefined) {
-                continue;
-            }
             const summaryItem = $(".chat-question-summary-item");
-            const questionLabel = $("span.chat-question-summary-label");
+            const questionRow = $("div.chat-question-summary-label");
             const questionText = question.message ?? question.title;
             let labelText = typeof questionText === "string" ? questionText : questionText.value;
             labelText = labelText.replace(/[:\s]+$/, "");
-            questionLabel.textContent = labelText;
-            summaryItem.appendChild(questionLabel);
-            const formattedAnswer = this.formatAnswerForSummary(question, answer);
-            const separatorIndex = formattedAnswer.indexOf(" - ");
-            if (separatorIndex !== -1) {
-                const answerTitle = $("span.chat-question-summary-answer-title");
-                answerTitle.textContent = formattedAnswer.substring(0, separatorIndex);
-                summaryItem.appendChild(answerTitle);
-                const answerDesc = $("span.chat-question-summary-answer-desc");
-                answerDesc.textContent = " - " + formattedAnswer.substring(separatorIndex + 3);
-                summaryItem.appendChild(answerDesc);
+            questionRow.textContent = ( localize(6560, "Q: {0}", labelText));
+            summaryItem.appendChild(questionRow);
+            if (answer !== undefined) {
+                const formattedAnswer = this.formatAnswerForSummary(question, answer);
+                const answerRow = $("div.chat-question-summary-answer-title");
+                answerRow.textContent = ( localize(6561, "A: {0}", formattedAnswer));
+                summaryItem.appendChild(answerRow);
             } else {
-                const answerValue = $("span.chat-question-summary-answer-title");
-                answerValue.textContent = formattedAnswer;
-                summaryItem.appendChild(answerValue);
+                const unanswered = $("div.chat-question-summary-unanswered");
+                unanswered.textContent = ( localize(6562, "Not answered yet"));
+                summaryItem.appendChild(unanswered);
             }
             summaryContainer.appendChild(summaryItem);
         }
@@ -932,6 +1085,11 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                     }
                     return selectedLabel ?? String(selectedValue ?? "");
                 }
+                if (typeof answer === "object" && answer !== null && hasKey(answer, {
+                    freeformValue: true
+                })) {
+                    return answer.freeformValue ?? "";
+                }
                 const label = question.options?.find(opt => opt.value === answer)?.label;
                 return label ?? String(answer);
             }
@@ -948,10 +1106,10 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                     if (freeformValue) {
                         labels.push(freeformValue);
                     }
-                    return labels.join(( localize(6467, ", ")));
+                    return labels.join(( localize(6563, ", ")));
                 }
                 if (Array.isArray(answer)) {
-                    return ( answer.map(v => question.options?.find(opt => opt.value === v)?.label ?? String(v))).join(( localize(6467, ", ")));
+                    return ( answer.map(v => question.options?.find(opt => opt.value === v)?.label ?? String(v))).join(( localize(6563, ", ")));
                 }
                 return String(answer);
             }
@@ -972,6 +1130,12 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     addDisposable(disposable) {
         this._register(disposable);
     }
+    dispose() {
+        if (!this._isSkipped && !this.carousel.isUsed) {
+            this.saveCurrentAnswer();
+        }
+        super.dispose();
+    }
 };
 ChatQuestionCarouselPart = ( __decorate([( __param(3, IMarkdownRendererService)), ( __param(4, IHoverService)), ( __param(5, IAccessibilityService)), ( __param(6, IContextKeyService)), ( __param(7, IKeybindingService))], ChatQuestionCarouselPart));