@codingame/monaco-vscode-katex-common 28.4.1 → 29.0.0

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

@@ -9,6 +9,7 @@ import { isMarkdownString, MarkdownString } from '@codingame/monaco-vscode-api/v
 import { KeyCode } from '@codingame/monaco-vscode-api/vscode/vs/base/common/keyCodes';
 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 { generateUuid } from '@codingame/monaco-vscode-api/vscode/vs/base/common/uuid';
 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';
@@ -55,6 +56,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         this.onDidChangeHeight = this._onDidChangeHeight.event;
         this._currentIndex = 0;
         this._answers = ( new Map());
+        this._isCollapsed = false;
         this._isSkipped = false;
         this._textInputBoxes = ( new Map());
         this._singleSelectItems = ( new Map());
@@ -64,6 +66,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         this._questionRenderStore = this._register(( new MutableDisposable()));
         this._interactiveUIStore = this._register(( new MutableDisposable()));
         this.domNode = $(".chat-question-carousel-container");
+        this.domNode.id = generateUuid();
         this._inChatQuestionCarouselContextKey = ChatContextKeys.inChatQuestionCarousel.bindTo(this._contextKeyService);
         const focusTracker = this._register(trackFocus(this.domNode));
         this._register(
@@ -77,12 +80,15 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         });
         this.domNode.tabIndex = 0;
         this.domNode.setAttribute("role", "region");
-        this.domNode.setAttribute("aria-roledescription", ( localize(6542, "chat question")));
+        this.domNode.setAttribute("aria-roledescription", ( localize(6716, "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 (typeof carousel.draftCollapsed === "boolean") {
+                this._isCollapsed = carousel.draftCollapsed;
+            }
             if (carousel.draftAnswers) {
                 for (const [key, value] of Object.entries(carousel.draftAnswers)) {
                     this._answers.set(key, value);
@@ -105,9 +111,19 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         this._interactiveUIStore.value = interactiveStore;
         this._questionContainer = $(".chat-question-carousel-content");
         this.domNode.append(this._questionContainer);
+        this._headerActionsContainer = $(".chat-question-header-actions");
+        const collapseToggleTitle = ( localize(6717, "Collapse Questions"));
+        const collapseButton = interactiveStore.add(( new Button(this._headerActionsContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            supportIcons: true
+        })));
+        collapseButton.element.classList.add("chat-question-collapse-toggle");
+        collapseButton.element.setAttribute("aria-label", collapseToggleTitle);
+        this._collapseButton = collapseButton;
         if (carousel.allowSkip) {
             this._closeButtonContainer = $(".chat-question-close-container");
-            const skipAllTitle = ( localize(6543, "Skip all questions"));
+            const skipAllTitle = ( localize(6718, "Skip all questions"));
             const skipAllButton = interactiveStore.add(( new Button(this._closeButtonContainer, {
                 ...defaultButtonStyles,
                 secondary: true,
@@ -121,6 +137,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             }));
             this._skipAllButton = skipAllButton;
         }
+        interactiveStore.add(collapseButton.onDidClick(() => this.toggleCollapsed()));
         if (this._skipAllButton) {
             interactiveStore.add(this._skipAllButton.onDidClick(() => this.ignore()));
         }
@@ -157,6 +174,17 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         } else {
             this._answers.delete(currentQuestion.id);
         }
+        if (currentQuestion?.validation && typeof answer === "string" && answer !== "") {
+            const error = this.getValidationError(answer, currentQuestion.validation);
+            if (error) {
+                this.showValidationError(error);
+            } else {
+                this.clearValidationError();
+            }
+        } else {
+            this.clearValidationError();
+        }
+        this.updateFooterState();
         this.persistDraftState();
     }
     persistDraftState() {
@@ -165,6 +193,26 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         }
         this.carousel.draftAnswers = Object.fromEntries(this._answers.entries());
         this.carousel.draftCurrentIndex = this._currentIndex;
+        this.carousel.draftCollapsed = this._isCollapsed;
+    }
+    toggleCollapsed() {
+        this._isCollapsed = !this._isCollapsed;
+        this.persistDraftState();
+        this.updateCollapsedPresentation();
+        this._onDidChangeHeight.fire();
+    }
+    updateCollapsedPresentation() {
+        this.domNode.classList.toggle("chat-question-carousel-collapsed", this._isCollapsed);
+        if (this._collapseButton) {
+            const collapsed = this._isCollapsed;
+            const buttonTitle = collapsed ? ( localize(6719, "Expand Questions")) : ( localize(6717, "Collapse Questions"));
+            const contentId = this.domNode.id;
+            this._collapseButton.label = collapsed ? `$(${Codicon.chevronUp.id})` : `$(${Codicon.chevronDown.id})`;
+            this._collapseButton.element.setAttribute("aria-label", buttonTitle);
+            this._collapseButton.element.setAttribute("aria-expanded", String(!collapsed));
+            this._collapseButton.element.setAttribute("aria-controls", contentId);
+            this._collapseButton.setTitle(buttonTitle);
+        }
     }
     navigate(delta) {
         const newIndex = this._currentIndex + delta;
@@ -178,17 +226,29 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     }
     handleNextOrSubmit() {
         this.saveCurrentAnswer();
+        if (!this.validateCurrentQuestion()) {
+            return;
+        }
         if (this._currentIndex < this.carousel.questions.length - 1) {
             this._currentIndex++;
             this.persistDraftState();
             this.renderCurrentQuestion(true);
         } else {
+            if (!this.validateRequiredFields()) {
+                return;
+            }
             this._options.onSubmit(this._answers);
             this.hideAndShowSummary();
         }
     }
     submit() {
         this.saveCurrentAnswer();
+        if (!this.validateCurrentQuestion()) {
+            return;
+        }
+        if (!this.validateRequiredFields()) {
+            return;
+        }
         this._options.onSubmit(this._answers);
         this.hideAndShowSummary();
     }
@@ -200,7 +260,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             const messageContent = this.getQuestionText(questionText);
             const questionCount = this.carousel.questions.length;
             const alertMessage = questionCount === 1 ? messageContent : ( localize(
-                6544,
+                6720,
                 "Question {0} of {1}: {2}",
                 this._currentIndex + 1,
                 questionCount,
@@ -230,7 +290,9 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         this._submitButton = undefined;
         this._skipAllButton = undefined;
         this._questionContainer = undefined;
+        this._headerActionsContainer = undefined;
         this._closeButtonContainer = undefined;
+        this._collapseButton = undefined;
         this._footerRow = undefined;
         this._stepIndicator = undefined;
         this._submitHint = undefined;
@@ -310,7 +372,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     getDefaultAnswerForQuestion(question) {
         switch (question.type) {
         case "text":
-            return question.defaultValue;
+            return typeof question.defaultValue === "string" ? question.defaultValue : undefined;
         case "singleSelect":
             {
                 const defaultOptionId = typeof question.defaultValue === "string" ? question.defaultValue : undefined;
@@ -331,7 +393,9 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 } : undefined;
             }
         default:
-            return question.defaultValue;
+            return typeof question.defaultValue === "string" ? question.defaultValue : Array.isArray(question.defaultValue) ? {
+                selectedValues: question.defaultValue
+            } : undefined;
         }
     }
     _shouldAutoFocus() {
@@ -343,17 +407,17 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     _updateAriaLabel() {
         const question = this.carousel.questions[this._currentIndex];
         if (!question) {
-            this.domNode.setAttribute("aria-label", ( localize(6545, "Chat question")));
+            this.domNode.setAttribute("aria-label", ( localize(6721, "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)));
+            this.domNode.setAttribute("aria-label", ( localize(6722, "Chat question: {0}", messageContent)));
         } else {
             this.domNode.setAttribute("aria-label", ( localize(
-                6547,
+                6723,
                 "Chat question {0} of {1}: {2}",
                 this._currentIndex + 1,
                 questionCount,
@@ -400,21 +464,40 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         }
         const headerRow = $(".chat-question-header-row");
         const titleRow = $(".chat-question-title-row");
+        if (this.carousel.message && this._currentIndex === 0) {
+            const messageMd = isMarkdownString(this.carousel.message) ? MarkdownString.lift(this.carousel.message) : ( new MarkdownString(this.carousel.message));
+            const carouselMessage = $(".chat-question-carousel-message");
+            const renderedMessage = questionRenderStore.add(this._markdownRendererService.render(messageMd));
+            carouselMessage.appendChild(renderedMessage.element);
+            headerRow.appendChild(carouselMessage);
+        }
         const questionText = question.message ?? question.title;
         if (questionText) {
             const title = $(".chat-question-title");
             const messageContent = this.getQuestionText(questionText);
             title.setAttribute("aria-label", messageContent);
-            const messageMd = isMarkdownString(questionText) ? MarkdownString.lift(questionText) : ( new MarkdownString(questionText));
-            const renderedTitle = questionRenderStore.add(this._markdownRendererService.render(messageMd));
+            const titleText = question.required ? ( new MarkdownString(`${isMarkdownString(questionText) ? questionText.value : questionText} *`)) : (isMarkdownString(questionText) ? MarkdownString.lift(questionText) : ( new MarkdownString(questionText)));
+            const renderedTitle = questionRenderStore.add(this._markdownRendererService.render(titleText));
             title.appendChild(renderedTitle.element);
             titleRow.appendChild(title);
         }
         headerRow.appendChild(titleRow);
-        if (this._closeButtonContainer) {
-            titleRow.appendChild(this._closeButtonContainer);
+        if (this._headerActionsContainer) {
+            clearNode(this._headerActionsContainer);
+            if (this._closeButtonContainer) {
+                this._headerActionsContainer.appendChild(this._closeButtonContainer);
+            }
+            if (this._collapseButton) {
+                this._headerActionsContainer.appendChild(this._collapseButton.element);
+            }
+            titleRow.appendChild(this._headerActionsContainer);
         }
         this._questionContainer.appendChild(headerRow);
+        if (question.description) {
+            const descriptionEl = $(".chat-question-description");
+            descriptionEl.textContent = question.description;
+            this._questionContainer.appendChild(descriptionEl);
+        }
         const inputContainer = $(".chat-question-input-container");
         this.renderInput(inputContainer, question);
         const inputScrollable = questionRenderStore.add(( new DomScrollableElement(inputContainer, {
@@ -426,6 +509,9 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         const inputScrollableNode = inputScrollable.getDomNode();
         inputScrollableNode.classList.add("chat-question-input-scrollable");
         this._questionContainer.appendChild(inputScrollableNode);
+        this._validationMessageElement = $(".chat-question-validation-message");
+        this._validationMessageElement.style.display = "none";
+        this._questionContainer.appendChild(this._validationMessageElement);
         const isSingleQuestion = this.carousel.questions.length === 1;
         if (!isSingleQuestion) {
             this.renderFooter();
@@ -447,6 +533,11 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         const inputResizeObserver = questionRenderStore.add(new DisposableResizeObserver(() => scheduleLayoutInputScrollable()));
         questionRenderStore.add(inputResizeObserver.observe(inputScrollableNode));
         questionRenderStore.add(inputResizeObserver.observe(inputContainer));
+        questionRenderStore.add(addDisposableListener(
+            getWindow(this.domNode),
+            EventType.RESIZE,
+            () => scheduleLayoutInputScrollable()
+        ));
         scheduleLayoutInputScrollable();
         questionRenderStore.add(
             runAtThisOrScheduleAtNextAnimationFrame(getWindow(this.domNode), () => {
@@ -460,6 +551,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             })
         );
         this._updateAriaLabel();
+        this.updateCollapsedPresentation();
         if (focusContainerForScreenReader && this._accessibilityService.isScreenReaderOptimized()) {
             this._focusContainerAndAnnounce();
         }
@@ -474,9 +566,9 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             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")));
+            leftControls.setAttribute("aria-label", ( localize(6724, "Question navigation")));
             const arrowsContainer = $(".chat-question-nav-arrows");
-            const previousLabel = this.getLabelWithKeybinding(( localize(6549, "Previous")), PREVIOUS_QUESTION_ACTION_ID);
+            const previousLabel = this.getLabelWithKeybinding(( localize(6725, "Previous")), PREVIOUS_QUESTION_ACTION_ID);
             const prevButton = interactiveStore.add(( new Button(arrowsContainer, {
                 ...defaultButtonStyles,
                 secondary: true,
@@ -490,7 +582,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             }));
             interactiveStore.add(prevButton.onDidClick(() => this.navigate(-1)));
             this._prevButton = prevButton;
-            const nextLabel = this.getLabelWithKeybinding(( localize(6550, "Next")), NEXT_QUESTION_ACTION_ID);
+            const nextLabel = this.getLabelWithKeybinding(( localize(6726, "Next")), NEXT_QUESTION_ACTION_ID);
             const nextButton = interactiveStore.add(( new Button(arrowsContainer, {
                 ...defaultButtonStyles,
                 secondary: true,
@@ -510,14 +602,14 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             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"));
+            hint.textContent = isMacintosh ? ( localize(6727, "⌘⏎ to submit")) : ( localize(6728, "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"));
+            submitButton.label = ( localize(6729, "Submit"));
             interactiveStore.add(submitButton.onDidClick(() => this.submit()));
             this._submitButton = submitButton;
             this._footerRow.appendChild(rightControls);
@@ -530,10 +622,15 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             this._prevButton.enabled = this._currentIndex > 0;
         }
         if (this._nextButton) {
-            this._nextButton.enabled = this._currentIndex < this.carousel.questions.length - 1;
+            const canAdvance = this._currentIndex < this.carousel.questions.length - 1;
+            const question = this.carousel.questions[this._currentIndex];
+            const answer = this._answers.get(question?.id);
+            const hasAnswer = answer !== undefined && answer !== "";
+            const hasValidationError = !!this._currentValidationError;
+            this._nextButton.enabled = canAdvance && (!question?.required || hasAnswer) && !hasValidationError;
         }
         if (this._stepIndicator) {
-            this._stepIndicator.textContent = ( localize(6554, "{0}/{1}", this._currentIndex + 1, this.carousel.questions.length));
+            this._stepIndicator.textContent = ( localize(6730, "{0}/{1}", this._currentIndex + 1, this.carousel.questions.length));
         }
         if (this._submitButton) {
             const isLastQuestion = this._currentIndex === this.carousel.questions.length - 1;
@@ -552,18 +649,18 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             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")));
+            leftControls.setAttribute("aria-label", ( localize(6724, "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"));
+            hint.textContent = isMacintosh ? ( localize(6727, "⌘⏎ to submit")) : ( localize(6728, "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"));
+            submitButton.label = ( localize(6729, "Submit"));
             interactiveStore.add(submitButton.onDidClick(() => this.submit()));
             this._submitButton = submitButton;
             this._footerRow.appendChild(rightControls);
@@ -572,7 +669,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     }
     getLabelWithKeybinding(label, actionId) {
         const keybindingLabel = this._keybindingService.lookupKeybinding(actionId, this._contextKeyService)?.getLabel();
-        return keybindingLabel ? ( localize(6555, "{0} ({1})", label, keybindingLabel)) : label;
+        return keybindingLabel ? ( localize(6731, "{0} ({1})", label, keybindingLabel)) : label;
     }
     renderInput(container, question) {
         switch (question.type) {
@@ -601,10 +698,27 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
     }
     renderTextInput(container, question) {
         const inputBox = this._inputBoxes.add(( new InputBox(container, undefined, {
-            placeholder: ( localize(6556, "Enter your answer")),
-            inputBoxStyles: defaultInputBoxStyles
+            placeholder: ( localize(6732, "Enter your answer")),
+            inputBoxStyles: defaultInputBoxStyles,
+            validationOptions: question.validation ? {
+                validation: value => {
+                    if (!value && !question.required) {
+                        return null;
+                    }
+                    const error = this.getValidationError(value, question.validation);
+                    if (error) {
+                        return {
+                            type: 2 ,
+                            content: error
+                        };
+                    }
+                    return null;
+                }
+            } : undefined
         })));
-        this._inputBoxes.add(inputBox.onDidChange(() => this.saveCurrentAnswer()));
+        this._inputBoxes.add(inputBox.onDidChange(() => {
+            this.saveCurrentAnswer();
+        }));
         const previousAnswer = this._answers.get(question.id);
         if (previousAnswer !== undefined) {
             inputBox.value = String(previousAnswer);
@@ -626,12 +740,11 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         selectContainer.tabIndex = 0;
         container.appendChild(selectContainer);
         const previousAnswer = this._answers.get(question.id);
-        const previousFreeform = typeof previousAnswer === "object" && previousAnswer !== null && hasKey(previousAnswer, {
-            freeformValue: true
-        }) ? previousAnswer.freeformValue : undefined;
-        const previousSelectedValue = typeof previousAnswer === "object" && previousAnswer !== null && hasKey(previousAnswer, {
+        const prevSingle = typeof previousAnswer === "object" && previousAnswer !== null && hasKey(previousAnswer, {
             selectedValue: true
-        }) ? previousAnswer.selectedValue : previousAnswer;
+        }) ? previousAnswer : undefined;
+        const previousFreeform = prevSingle?.freeformValue;
+        const previousSelectedValue = prevSingle?.selectedValue;
         const defaultOptionId = typeof question.defaultValue === "string" ? question.defaultValue : undefined;
         let selectedIndex = -1;
         options.forEach((option, index) => {
@@ -666,7 +779,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             const listItem = $(".chat-question-list-item");
             listItem.setAttribute("role", "option");
             listItem.setAttribute("aria-selected", String(isSelected));
-            listItem.setAttribute("aria-label", ( localize(6557, "Option {0}: {1}", index + 1, option.label)));
+            listItem.setAttribute("aria-label", ( localize(6733, "Option {0}: {1}", index + 1, option.label)));
             listItem.id = `option-${question.id}-${index}`;
             listItem.tabIndex = -1;
             const number = $(".chat-question-list-number");
@@ -724,27 +837,36 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         if (selectedIndex >= 0 && selectedIndex < listItems.length) {
             selectContainer.setAttribute("aria-activedescendant", listItems[selectedIndex].id);
         }
-        const freeformContainer = $(".chat-question-freeform");
-        const freeformNumber = $(".chat-question-freeform-number");
-        freeformNumber.textContent = `${options.length + 1}`;
-        freeformContainer.appendChild(freeformNumber);
-        const freeformTextarea = $("textarea.chat-question-freeform-textarea");
-        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, () => {
-            if (freeformTextarea.value.length > 0) {
-                updateSelection(-1);
-            } else {
-                this.saveCurrentAnswer();
+        let freeformTextarea;
+        if (question.allowFreeformInput !== false) {
+            const freeformContainer = $(".chat-question-freeform");
+            const freeformNumber = $(".chat-question-freeform-number");
+            freeformNumber.textContent = `${options.length + 1}`;
+            freeformContainer.appendChild(freeformNumber);
+            freeformTextarea = $("textarea.chat-question-freeform-textarea");
+            freeformTextarea.placeholder = ( localize(6734, "Enter custom answer"));
+            freeformTextarea.rows = 1;
+            if (previousFreeform !== undefined) {
+                freeformTextarea.value = previousFreeform;
             }
-        }));
-        freeformContainer.appendChild(freeformTextarea);
-        container.appendChild(freeformContainer);
-        this._freeformTextareas.set(question.id, freeformTextarea);
+            const autoResize = this.setupTextareaAutoResize(freeformTextarea);
+            const capturedFreeform = freeformTextarea;
+            this._inputBoxes.add(addDisposableListener(capturedFreeform, EventType.INPUT, () => {
+                if (capturedFreeform.value.length > 0) {
+                    updateSelection(-1);
+                } else {
+                    this.saveCurrentAnswer();
+                }
+            }));
+            freeformContainer.appendChild(freeformTextarea);
+            container.appendChild(freeformContainer);
+            this._freeformTextareas.set(question.id, freeformTextarea);
+            if (previousFreeform !== undefined) {
+                this._inputBoxes.add(
+                    runAtThisOrScheduleAtNextAnimationFrame(getWindow(capturedFreeform), () => autoResize())
+                );
+            }
+        }
         this._inputBoxes.add(addDisposableListener(selectContainer, EventType.KEY_DOWN, e => {
             const event = ( new StandardKeyboardEvent(e));
             const data = this._singleSelectItems.get(question.id);
@@ -768,7 +890,7 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 if (numberIndex < listItems.length) {
                     e.preventDefault();
                     updateSelection(numberIndex);
-                } else if (numberIndex === listItems.length) {
+                } else if (freeformTextarea && numberIndex === listItems.length) {
                     e.preventDefault();
                     updateSelection(-1);
                     freeformTextarea.focus();
@@ -779,16 +901,12 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 updateSelection(newIndex);
             }
         }));
-        if (previousFreeform !== undefined) {
-            this._inputBoxes.add(
-                runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => autoResize())
-            );
-        }
         if (this._shouldAutoFocus()) {
-            if (previousFreeform) {
+            if (freeformTextarea && previousFreeform) {
+                const capturedFreeform = freeformTextarea;
                 this._inputBoxes.add(
-                    runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => {
-                        freeformTextarea.focus();
+                    runAtThisOrScheduleAtNextAnimationFrame(getWindow(capturedFreeform), () => {
+                        capturedFreeform.focus();
                     })
                 );
             } else if (listItems.length > 0) {
@@ -813,12 +931,11 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         selectContainer.tabIndex = 0;
         container.appendChild(selectContainer);
         const previousAnswer = this._answers.get(question.id);
-        const previousFreeform = typeof previousAnswer === "object" && previousAnswer !== null && hasKey(previousAnswer, {
-            freeformValue: true
-        }) ? previousAnswer.freeformValue : undefined;
-        const previousSelectedValues = typeof previousAnswer === "object" && previousAnswer !== null && hasKey(previousAnswer, {
+        const prevMulti = typeof previousAnswer === "object" && previousAnswer !== null && hasKey(previousAnswer, {
             selectedValues: true
-        }) ? previousAnswer.selectedValues : (Array.isArray(previousAnswer) ? previousAnswer : []);
+        }) ? previousAnswer : undefined;
+        const previousFreeform = prevMulti?.freeformValue;
+        const previousSelectedValues = prevMulti?.selectedValues ?? [];
         const defaultOptionIds = Array.isArray(question.defaultValue) ? question.defaultValue : (typeof question.defaultValue === "string" ? [question.defaultValue] : []);
         const checkboxes = [];
         const listItems = [];
@@ -834,7 +951,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(6557, "Option {0}: {1}", index + 1, option.label)));
+            listItem.setAttribute("aria-label", ( localize(6733, "Option {0}: {1}", index + 1, option.label)));
             listItem.id = `option-${question.id}-${index}`;
             listItem.tabIndex = -1;
             const number = $(".chat-question-list-number");
@@ -889,23 +1006,31 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             listItems.push(listItem);
         });
         this._multiSelectCheckboxes.set(question.id, checkboxes);
-        const freeformContainer = $(".chat-question-freeform");
-        const freeformNumber = $(".chat-question-freeform-number");
-        freeformNumber.textContent = `${options.length + 1}`;
-        freeformContainer.appendChild(freeformNumber);
-        const freeformTextarea = $("textarea.chat-question-freeform-textarea");
-        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);
+        let freeformTextarea;
+        if (question.allowFreeformInput !== false) {
+            const freeformContainer = $(".chat-question-freeform");
+            const freeformNumber = $(".chat-question-freeform-number");
+            freeformNumber.textContent = `${options.length + 1}`;
+            freeformContainer.appendChild(freeformNumber);
+            freeformTextarea = $("textarea.chat-question-freeform-textarea");
+            freeformTextarea.placeholder = ( localize(6734, "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);
+            if (previousFreeform !== undefined) {
+                this._inputBoxes.add(
+                    runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => autoResize())
+                );
+            }
+        }
         this._inputBoxes.add(addDisposableListener(selectContainer, EventType.KEY_DOWN, e => {
             const event = ( new StandardKeyboardEvent(e));
             if (!listItems.length) {
@@ -933,22 +1058,18 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 if (numberIndex < checkboxes.length) {
                     e.preventDefault();
                     checkboxes[numberIndex].domNode.click();
-                } else if (numberIndex === checkboxes.length) {
+                } else if (freeformTextarea && numberIndex === checkboxes.length) {
                     e.preventDefault();
                     freeformTextarea.focus();
                 }
             }
         }));
-        if (previousFreeform !== undefined) {
-            this._inputBoxes.add(
-                runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => autoResize())
-            );
-        }
         if (this._shouldAutoFocus()) {
-            if (previousFreeform) {
+            if (freeformTextarea && previousFreeform) {
+                const capturedFreeform = freeformTextarea;
                 this._inputBoxes.add(
-                    runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => {
-                        freeformTextarea.focus();
+                    runAtThisOrScheduleAtNextAnimationFrame(getWindow(capturedFreeform), () => {
+                        capturedFreeform.focus();
                     })
                 );
             } else if (listItems.length > 0) {
@@ -971,7 +1092,9 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         case "text":
             {
                 const inputBox = this._textInputBoxes.get(question.id);
-                return inputBox?.value ?? question.defaultValue;
+                return inputBox?.value ?? (typeof question.defaultValue === "string" ? question.defaultValue : Array.isArray(question.defaultValue) ? {
+                    selectedValues: question.defaultValue
+                } : undefined);
             }
         case "singleSelect":
             {
@@ -1025,13 +1148,15 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
                 return undefined;
             }
         default:
-            return question.defaultValue;
+            return typeof question.defaultValue === "string" ? question.defaultValue : Array.isArray(question.defaultValue) ? {
+                selectedValues: question.defaultValue
+            } : undefined;
         }
     }
     renderSkippedMessage() {
         const skippedContainer = $(".chat-question-carousel-summary");
         const skippedMessage = $(".chat-question-summary-skipped");
-        skippedMessage.textContent = ( localize(6559, "Skipped"));
+        skippedMessage.textContent = ( localize(6735, "Skipped"));
         skippedContainer.appendChild(skippedMessage);
         this.domNode.appendChild(skippedContainer);
     }
@@ -1050,16 +1175,16 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             const questionText = question.message ?? question.title;
             let labelText = typeof questionText === "string" ? questionText : questionText.value;
             labelText = labelText.replace(/[:\s]+$/, "");
-            questionRow.textContent = ( localize(6560, "Q: {0}", labelText));
+            questionRow.textContent = ( localize(6736, "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));
+                answerRow.textContent = ( localize(6737, "A: {0}", formattedAnswer));
                 summaryItem.appendChild(answerRow);
             } else {
                 const unanswered = $("div.chat-question-summary-unanswered");
-                unanswered.textContent = ( localize(6562, "Not answered yet"));
+                unanswered.textContent = ( localize(6738, "Not answered yet"));
                 summaryItem.appendChild(unanswered);
             }
             summaryContainer.appendChild(summaryItem);
@@ -1072,44 +1197,34 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
             return String(answer);
         case "singleSelect":
             {
-                if (typeof answer === "object" && answer !== null && hasKey(answer, {
-                    selectedValue: true
-                })) {
+                if (typeof answer === "object") {
                     const {
                         selectedValue,
                         freeformValue
                     } = answer;
-                    const selectedLabel = question.options?.find(opt => opt.value === selectedValue)?.label;
+                    const selectedLabel = selectedValue !== undefined ? question.options?.find(opt => opt.value === selectedValue)?.label : undefined;
                     if (freeformValue) {
                         return freeformValue;
                     }
                     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);
             }
         case "multiSelect":
             {
-                if (typeof answer === "object" && answer !== null && hasKey(answer, {
+                if (typeof answer === "object" && hasKey(answer, {
                     selectedValues: true
                 })) {
                     const {
                         selectedValues,
                         freeformValue
                     } = answer;
-                    const labels = ( (selectedValues ?? []).map(v => question.options?.find(opt => opt.value === v)?.label ?? String(v)));
+                    const labels = ( selectedValues.map(v => question.options?.find(opt => opt.value === v)?.label ?? String(v)));
                     if (freeformValue) {
                         labels.push(freeformValue);
                     }
-                    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(6563, ", ")));
+                    return labels.join(( localize(6739, ", ")));
                 }
                 return String(answer);
             }
@@ -1121,6 +1236,109 @@ let ChatQuestionCarouselPart = class ChatQuestionCarouselPart extends Disposable
         const md = typeof questionText === "string" ? ( new MarkdownString(questionText)) : questionText;
         return renderAsPlaintext(md);
     }
+    validateCurrentQuestion() {
+        const question = this.carousel.questions[this._currentIndex];
+        if (!question) {
+            return true;
+        }
+        const answer = this._answers.get(question.id);
+        if (question.required && (answer === undefined || answer === "")) {
+            this.showValidationError(( localize(6740, "This field is required")));
+            return false;
+        }
+        if (question.type === "text" && question.validation && typeof answer === "string" && answer !== "") {
+            const error = this.getValidationError(answer, question.validation);
+            if (error) {
+                this.showValidationError(error);
+                return false;
+            }
+        }
+        this.clearValidationError();
+        return true;
+    }
+    validateRequiredFields() {
+        for (let i = 0; i < this.carousel.questions.length; i++) {
+            const question = this.carousel.questions[i];
+            if (!question.required) {
+                continue;
+            }
+            const answer = this._answers.get(question.id);
+            if (answer === undefined || answer === "") {
+                this.saveCurrentAnswer();
+                this._currentIndex = i;
+                this.persistDraftState();
+                this.renderCurrentQuestion(true);
+                this.showValidationError(( localize(6740, "This field is required")));
+                return false;
+            }
+        }
+        return true;
+    }
+    getValidationError(value, validation) {
+        if (validation.minLength !== undefined && value.length < validation.minLength) {
+            return localize(6741, "Minimum length is {0}", validation.minLength);
+        }
+        if (validation.maxLength !== undefined && value.length > validation.maxLength) {
+            return localize(6742, "Maximum length is {0}", validation.maxLength);
+        }
+        if (validation.format) {
+            switch (validation.format) {
+            case "email":
+                if (!value.includes("@")) {
+                    return localize(6743, "Please enter a valid email address");
+                }
+                break;
+            case "uri":
+                if (!URL.canParse(value)) {
+                    return localize(6744, "Please enter a valid URI");
+                }
+                break;
+            case "date":
+                {
+                    const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+                    if (!dateRegex.test(value) || isNaN(( new Date(value)).getTime())) {
+                        return localize(6745, "Please enter a valid date (YYYY-MM-DD)");
+                    }
+                    break;
+                }
+            case "date-time":
+                if (isNaN(( new Date(value)).getTime())) {
+                    return localize(6746, "Please enter a valid date-time");
+                }
+                break;
+            }
+        }
+        if (validation.isInteger !== undefined || validation.minimum !== undefined || validation.maximum !== undefined) {
+            const num = Number(value);
+            if (isNaN(num)) {
+                return localize(6747, "Please enter a valid number");
+            }
+            if (validation.isInteger && !Number.isInteger(num)) {
+                return localize(6748, "Please enter a valid integer");
+            }
+            if (validation.minimum !== undefined && num < validation.minimum) {
+                return localize(6749, "Minimum value is {0}", validation.minimum);
+            }
+            if (validation.maximum !== undefined && num > validation.maximum) {
+                return localize(6750, "Maximum value is {0}", validation.maximum);
+            }
+        }
+        return undefined;
+    }
+    showValidationError(message) {
+        this._currentValidationError = message;
+        if (this._validationMessageElement) {
+            this._validationMessageElement.textContent = message;
+            this._validationMessageElement.style.display = "";
+        }
+    }
+    clearValidationError() {
+        this._currentValidationError = undefined;
+        if (this._validationMessageElement) {
+            this._validationMessageElement.textContent = "";
+            this._validationMessageElement.style.display = "none";
+        }
+    }
     hasSameContent(other, _followingContent, element) {
         if (!this._isSkipped && !this.carousel.isUsed && isResponseVM(element) && element.isComplete) {
             return false;