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

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

@@ -1,43 +1,94 @@
 
 import { registerCss } from '@codingame/monaco-vscode-api/css';
 import { __decorate, __param } from '@codingame/monaco-vscode-api/external/tslib/tslib.es6';
-import { $, addDisposableListener, EventType, clearNode, 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';
+import { IMarkdownRendererService } from '@codingame/monaco-vscode-api/vscode/vs/platform/markdown/browser/markdownRenderer.service';
 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';
 import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
+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);
+const PREVIOUS_QUESTION_ACTION_ID = "workbench.action.chat.previousQuestion";
+const NEXT_QUESTION_ACTION_ID = "workbench.action.chat.nextQuestion";
 let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable {
-    constructor(carousel, context, _options, _hoverService) {
+    constructor(
+        carousel,
+        context,
+        _options,
+        _markdownRendererService,
+        _hoverService,
+        _accessibilityService,
+        _contextKeyService,
+        _keybindingService
+    ) {
         super();
         this.carousel = carousel;
         this._options = _options;
+        this._markdownRendererService = _markdownRendererService;
         this._hoverService = _hoverService;
+        this._accessibilityService = _accessibilityService;
+        this._contextKeyService = _contextKeyService;
+        this._keybindingService = _keybindingService;
         this._onDidChangeHeight = this._register(( new Emitter()));
         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());
         this._multiSelectCheckboxes = ( new Map());
         this._freeformTextareas = ( new Map());
         this._inputBoxes = this._register(( new DisposableStore()));
+        this._questionRenderStore = this._register(( new MutableDisposable()));
         this._interactiveUIStore = this._register(( new MutableDisposable()));
         this.domNode = $(".chat-question-carousel-container");
+        this._inChatQuestionCarouselContextKey = ChatContextKeys.inChatQuestionCarousel.bindTo(this._contextKeyService);
+        const focusTracker = this._register(trackFocus(this.domNode));
+        this._register(
+            focusTracker.onDidFocus(() => this._inChatQuestionCarouselContextKey.set(true))
+        );
+        this._register(
+            focusTracker.onDidBlur(() => this._inChatQuestionCarouselContextKey.set(false))
+        );
+        this._register({
+            dispose: () => this._inChatQuestionCarouselContextKey.reset()
+        });
+        this.domNode.tabIndex = 0;
+        this.domNode.setAttribute("role", "region");
+        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);
@@ -56,53 +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(5948, "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(5949, "Question navigation")));
-        const arrowsContainer = $(".chat-question-nav-arrows");
-        const previousLabel = ( localize(5950, "Previous"));
-        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
-        }));
-        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()));
         }
@@ -112,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";
@@ -119,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();
@@ -132,26 +154,61 @@ 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.renderCurrentQuestion();
+            this.persistDraftState();
+            this.renderCurrentQuestion(true);
+            this.domNode.focus();
         }
     }
-    handleNext() {
+    handleNextOrSubmit() {
         this.saveCurrentAnswer();
         if (this._currentIndex < this.carousel.questions.length - 1) {
             this._currentIndex++;
-            this.renderCurrentQuestion();
+            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];
+        if (question) {
+            const questionText = question.message ?? question.title;
+            const messageContent = this.getQuestionText(questionText);
+            const questionCount = this.carousel.questions.length;
+            const alertMessage = questionCount === 1 ? messageContent : ( localize(
+                6544,
+                "Question {0} of {1}: {2}",
+                this._currentIndex + 1,
+                questionCount,
+                messageContent
+            ));
+            this._accessibilityService.alert(alertMessage);
+        }
+    }
     hideAndShowSummary() {
         this._isSkipped = true;
         this.domNode.classList.add("chat-question-carousel-used");
@@ -162,6 +219,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     }
     clearInteractiveResources() {
         this._interactiveUIStore.clear();
+        this._questionRenderStore.clear();
         this._inputBoxes.clear();
         this._textInputBoxes.clear();
         this._singleSelectItems.clear();
@@ -169,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) {
@@ -239,10 +334,60 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             return question.defaultValue;
         }
     }
-    renderCurrentQuestion() {
-        if (!this._questionContainer || !this._prevButton || !this._nextButton) {
+    _shouldAutoFocus() {
+        if (this._options.shouldAutoFocus === false) {
+            return false;
+        }
+        return !this._accessibilityService.isScreenReaderOptimized();
+    }
+    _updateAriaLabel() {
+        const question = this.carousel.questions[this._currentIndex];
+        if (!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(6546, "Chat question: {0}", messageContent)));
+        } else {
+            this.domNode.setAttribute("aria-label", ( localize(
+                6547,
+                "Chat question {0} of {1}: {2}",
+                this._currentIndex + 1,
+                questionCount,
+                messageContent
+            )));
+        }
+    }
+    focus() {
+        this.domNode.focus();
+    }
+    hasFocus() {
+        return isAncestorOfActiveElement(this.domNode);
+    }
+    navigateToPreviousQuestion() {
+        if (this._currentIndex <= 0) {
+            return false;
+        }
+        this.navigate(-1);
+        return true;
+    }
+    navigateToNextQuestion() {
+        if (this._currentIndex >= this.carousel.questions.length - 1) {
+            return false;
+        }
+        this.navigate(1);
+        return true;
+    }
+    renderCurrentQuestion(focusContainerForScreenReader = false) {
+        if (!this._questionContainer) {
+            return;
+        }
+        const questionRenderStore = ( new DisposableStore());
+        this._questionRenderStore.value = questionRenderStore;
+        this._inputScrollable = undefined;
         this._inputBoxes.clear();
         this._textInputBoxes.clear();
         this._singleSelectItems.clear();
@@ -254,58 +399,181 @@ 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 = typeof questionText === "string" ? questionText : questionText.value;
+            const messageContent = this.getQuestionText(questionText);
             title.setAttribute("aria-label", messageContent);
-            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(5951, "Submit"));
-        const nextLabel = ( localize(5952, "Next"));
-        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", nextLabel);
-            this._nextButton.element.classList.remove("chat-question-nav-submit");
-            this._nextButtonHover.value = this._hoverService.setupDelayedHover(this._nextButton.element, {
-                content: nextLabel
+            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(6555, "{0} ({1})", label, keybindingLabel)) : label;
+    }
     renderInput(container, question) {
         switch (question.type) {
         case "text":
@@ -323,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));
@@ -330,9 +601,10 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     }
     renderTextInput(container, question) {
         const inputBox = this._inputBoxes.add(( new InputBox(container, undefined, {
-            placeholder: ( localize(5953, "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);
@@ -340,7 +612,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             inputBox.value = String(question.defaultValue);
         }
         this._textInputBoxes.set(question.id, inputBox);
-        if (this._options.shouldAutoFocus !== false) {
+        if (this._shouldAutoFocus()) {
             this._inputBoxes.add(
                 runAtThisOrScheduleAtNextAnimationFrame(getWindow(inputBox.element), () => inputBox.focus())
             );
@@ -387,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(5954, "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");
@@ -407,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;
@@ -429,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,
@@ -455,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(5955, "Enter custom answer"));
+        freeformTextarea.placeholder = ( localize(6558, "Enter custom answer"));
         freeformTextarea.rows = 1;
         if (previousFreeform !== undefined) {
             freeformTextarea.value = previousFreeform;
@@ -464,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);
@@ -482,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;
@@ -508,7 +784,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => autoResize())
             );
         }
-        if (this._options.shouldAutoFocus !== false) {
+        if (this._shouldAutoFocus()) {
             if (previousFreeform) {
                 this._inputBoxes.add(
                     runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => {
@@ -558,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(5954, "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");
@@ -571,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;
@@ -590,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;
@@ -616,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(5955, "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);
@@ -638,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) {
@@ -663,7 +944,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => autoResize())
             );
         }
-        if (this._options.shouldAutoFocus !== false) {
+        if (this._shouldAutoFocus()) {
             if (previousFreeform) {
                 this._inputBoxes.add(
                     runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => {
@@ -735,15 +1016,9 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 }
                 const freeformTextarea = this._freeformTextareas.get(question.id);
                 const freeformValue = freeformTextarea?.value !== "" ? freeformTextarea?.value : undefined;
-                let finalSelectedValues = selectedValues;
-                if (selectedValues.length === 0 && !freeformValue && question.defaultValue !== undefined) {
-                    const defaultIds = Array.isArray(question.defaultValue) ? question.defaultValue : [question.defaultValue];
-                    const defaultValues = question.options?.filter(opt => defaultIds.includes(opt.id)).map(opt => opt.value);
-                    finalSelectedValues = defaultValues?.filter(v => v !== undefined) || [];
-                }
-                if (freeformValue || finalSelectedValues.length > 0) {
+                if (freeformValue || selectedValues.length > 0) {
                     return {
-                        selectedValues: finalSelectedValues,
+                        selectedValues,
                         freeformValue
                     };
                 }
@@ -756,41 +1031,36 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     renderSkippedMessage() {
         const skippedContainer = $(".chat-question-carousel-summary");
         const skippedMessage = $(".chat-question-summary-skipped");
-        skippedMessage.textContent = ( localize(5956, "Skipped"));
+        skippedMessage.textContent = ( localize(6559, "Skipped"));
         skippedContainer.appendChild(skippedMessage);
         this.domNode.appendChild(skippedContainer);
     }
     renderSummary() {
         if (this._answers.size === 0) {
-            this.renderSkippedMessage();
+            if (this.carousel.isUsed) {
+                this.renderSkippedMessage();
+            }
             return;
         }
         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);
         }
@@ -815,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);
             }
@@ -831,10 +1106,10 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                     if (freeformValue) {
                         labels.push(freeformValue);
                     }
-                    return labels.join(( localize(5957, ", ")));
+                    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(5957, ", ")));
+                    return ( answer.map(v => question.options?.find(opt => opt.value === v)?.label ?? String(v))).join(( localize(6563, ", ")));
                 }
                 return String(answer);
             }
@@ -842,6 +1117,10 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             return String(answer);
         }
     }
+    getQuestionText(questionText) {
+        const md = typeof questionText === "string" ? ( new MarkdownString(questionText)) : questionText;
+        return renderAsPlaintext(md);
+    }
     hasSameContent(other, _followingContent, element) {
         if (!this._isSkipped && !this.carousel.isUsed && isResponseVM(element) && element.isComplete) {
             return false;
@@ -851,7 +1130,13 @@ 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, IHoverService))], ChatQuestionCarouselPart));
+ChatQuestionCarouselPart = ( __decorate([( __param(3, IMarkdownRendererService)), ( __param(4, IHoverService)), ( __param(5, IAccessibilityService)), ( __param(6, IContextKeyService)), ( __param(7, IKeybindingService))], ChatQuestionCarouselPart));
 
 export { ChatQuestionCarouselPart };