@codingame/monaco-vscode-katex-common 25.1.2 → 26.0.1

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

@@ -0,0 +1,814 @@
+
+import { registerCss } from '@codingame/monaco-vscode-api/css';
+import { $, addDisposableListener, EventType, clearNode, runAtThisOrScheduleAtNextAnimationFrame, getWindow } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { StandardKeyboardEvent } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/keyboardEvent';
+import { getBaseLayerHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegate2';
+import { getDefaultHoverDelegate } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/hover/hoverDelegateFactory';
+import { Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
+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 { hasKey } from '@codingame/monaco-vscode-api/vscode/vs/base/common/types';
+import { localize } from '@codingame/monaco-vscode-api/vscode/vs/nls';
+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 { Checkbox } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/ui/toggle/toggle';
+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 * as chatQuestionCarousel from './media/chatQuestionCarousel.css';
+
+registerCss(chatQuestionCarousel);
+class ChatQuestionCarouselPart extends Disposable {
+    constructor(carousel, context, _options) {
+        super();
+        this.carousel = carousel;
+        this._options = _options;
+        this._onDidChangeHeight = this._register(( new Emitter()));
+        this.onDidChangeHeight = this._onDidChangeHeight.event;
+        this._currentIndex = 0;
+        this._answers = ( new Map());
+        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._interactiveUIStore = this._register(( new MutableDisposable()));
+        this.domNode = $(".chat-question-carousel-container");
+        if (carousel.data) {
+            for (const [key, value] of Object.entries(carousel.data)) {
+                this._answers.set(key, value);
+            }
+        }
+        const responseIsComplete = isResponseVM(context.element) && context.element.isComplete;
+        if (carousel.isUsed || responseIsComplete) {
+            this._isSkipped = true;
+            this.domNode.classList.add("chat-question-carousel-used");
+            this.renderSummary();
+            return;
+        }
+        const interactiveStore = ( new DisposableStore());
+        this._interactiveUIStore.value = interactiveStore;
+        this._questionContainer = $(".chat-question-carousel-content");
+        this.domNode.append(this._questionContainer);
+        if (carousel.allowSkip) {
+            this._closeButtonContainer = $(".chat-question-close-container");
+            const skipAllTitle = ( localize(5873, "Skip all questions"));
+            const skipAllButton = interactiveStore.add(( new Button(this._closeButtonContainer, {
+                ...defaultButtonStyles,
+                secondary: true,
+                supportIcons: true,
+                title: skipAllTitle
+            })));
+            skipAllButton.label = `$(${Codicon.close.id})`;
+            skipAllButton.element.classList.add("chat-question-nav-arrow", "chat-question-close");
+            skipAllButton.element.setAttribute("aria-label", 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(5874, "Question navigation")));
+        const arrowsContainer = $(".chat-question-nav-arrows");
+        const previousLabel = ( localize(5875, "Previous"));
+        const prevButton = interactiveStore.add(( new Button(arrowsContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            supportIcons: true,
+            title: previousLabel
+        })));
+        prevButton.element.classList.add("chat-question-nav-arrow", "chat-question-nav-prev");
+        prevButton.label = `$(${Codicon.chevronLeft.id})`;
+        prevButton.element.setAttribute("aria-label", previousLabel);
+        this._prevButton = prevButton;
+        const nextLabel = ( localize(5876, "Next"));
+        const nextButton = interactiveStore.add(( new Button(arrowsContainer, {
+            ...defaultButtonStyles,
+            secondary: true,
+            supportIcons: true,
+            title: nextLabel
+        })));
+        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()));
+        }
+        interactiveStore.add(addDisposableListener(this.domNode, EventType.KEY_DOWN, e => {
+            const event = ( new StandardKeyboardEvent(e));
+            if (event.keyCode === KeyCode.Escape && this.carousel.allowSkip) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.ignore();
+            } else if (event.keyCode === KeyCode.Enter && !event.shiftKey) {
+                const target = e.target;
+                const isTextInput = target.tagName === "INPUT" && target.type === "text";
+                const isFreeformTextarea = target.tagName === "TEXTAREA" && target.classList.contains("chat-question-freeform-textarea");
+                if (isTextInput || isFreeformTextarea) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.handleNext();
+                }
+            } else if ((event.ctrlKey || event.metaKey) && (event.keyCode === KeyCode.Backspace || event.keyCode === KeyCode.Delete)) {
+                e.stopPropagation();
+            }
+        }));
+        this.renderCurrentQuestion();
+    }
+    saveCurrentAnswer() {
+        const currentQuestion = this.carousel.questions[this._currentIndex];
+        const answer = this.getCurrentAnswer();
+        if (answer !== undefined) {
+            this._answers.set(currentQuestion.id, answer);
+        }
+    }
+    navigate(delta) {
+        const newIndex = this._currentIndex + delta;
+        if (newIndex >= 0 && newIndex < this.carousel.questions.length) {
+            this.saveCurrentAnswer();
+            this._currentIndex = newIndex;
+            this.renderCurrentQuestion();
+        }
+    }
+    handleNext() {
+        this.saveCurrentAnswer();
+        if (this._currentIndex < this.carousel.questions.length - 1) {
+            this._currentIndex++;
+            this.renderCurrentQuestion();
+        } else {
+            this._options.onSubmit(this._answers);
+            this.hideAndShowSummary();
+        }
+    }
+    hideAndShowSummary() {
+        this._isSkipped = true;
+        this.domNode.classList.add("chat-question-carousel-used");
+        this.clearInteractiveResources();
+        clearNode(this.domNode);
+        this.renderSummary();
+        this._onDidChangeHeight.fire();
+    }
+    clearInteractiveResources() {
+        this._interactiveUIStore.clear();
+        this._inputBoxes.clear();
+        this._textInputBoxes.clear();
+        this._singleSelectItems.clear();
+        this._multiSelectCheckboxes.clear();
+        this._freeformTextareas.clear();
+        this._prevButton = undefined;
+        this._nextButton = undefined;
+        this._skipAllButton = undefined;
+        this._questionContainer = undefined;
+        this._navigationButtons = undefined;
+        this._closeButtonContainer = undefined;
+        this._footerRow = undefined;
+        this._stepIndicator = undefined;
+    }
+    skip() {
+        if (this._isSkipped || !this.carousel.allowSkip) {
+            return false;
+        }
+        const defaults = this.getDefaultAnswers();
+        this._options.onSubmit(defaults);
+        this._answers.clear();
+        for (const [key, value] of defaults) {
+            this._answers.set(key, value);
+        }
+        this.hideAndShowSummary();
+        return true;
+    }
+    ignore() {
+        if (this._isSkipped || !this.carousel.allowSkip) {
+            return false;
+        }
+        this._isSkipped = true;
+        this._options.onSubmit(undefined);
+        this.clearInteractiveResources();
+        this.domNode.classList.add("chat-question-carousel-used");
+        clearNode(this.domNode);
+        this.renderSkippedMessage();
+        this._onDidChangeHeight.fire();
+        return true;
+    }
+    getDefaultAnswers() {
+        const answers = ( new Map());
+        for (const question of this.carousel.questions) {
+            const defaultAnswer = this.getDefaultAnswerForQuestion(question);
+            if (defaultAnswer !== undefined) {
+                answers.set(question.id, defaultAnswer);
+            }
+        }
+        return answers;
+    }
+    getDefaultAnswerForQuestion(question) {
+        switch (question.type) {
+        case "text":
+            return question.defaultValue;
+        case "singleSelect":
+            {
+                const defaultOptionId = typeof question.defaultValue === "string" ? question.defaultValue : undefined;
+                const defaultOption = defaultOptionId !== undefined ? question.options?.find(opt => opt.id === defaultOptionId) : undefined;
+                const selectedValue = defaultOption?.value;
+                return selectedValue !== undefined ? {
+                    selectedValue,
+                    freeformValue: undefined
+                } : undefined;
+            }
+        case "multiSelect":
+            {
+                const defaultIds = Array.isArray(question.defaultValue) ? question.defaultValue : (typeof question.defaultValue === "string" ? [question.defaultValue] : []);
+                const selectedValues = question.options?.filter(opt => defaultIds.includes(opt.id)).map(opt => opt.value).filter(v => v !== undefined) ?? [];
+                return selectedValues.length > 0 ? {
+                    selectedValues,
+                    freeformValue: undefined
+                } : undefined;
+            }
+        default:
+            return question.defaultValue;
+        }
+    }
+    renderCurrentQuestion() {
+        if (!this._questionContainer || !this._prevButton || !this._nextButton) {
+            return;
+        }
+        this._inputBoxes.clear();
+        this._textInputBoxes.clear();
+        this._singleSelectItems.clear();
+        this._multiSelectCheckboxes.clear();
+        this._freeformTextareas.clear();
+        clearNode(this._questionContainer);
+        const question = this.carousel.questions[this._currentIndex];
+        if (!question) {
+            return;
+        }
+        const headerRow = $(".chat-question-header-row");
+        const questionText = question.message ?? question.title;
+        if (questionText) {
+            const title = $(".chat-question-title");
+            const messageContent = typeof questionText === "string" ? questionText : questionText.value;
+            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);
+        }
+        if (this._closeButtonContainer) {
+            headerRow.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(5877, "Submit"));
+        const nextLabel = ( localize(5876, "Next"));
+        if (isLastQuestion) {
+            this._nextButton.label = submitLabel;
+            this._nextButton.element.title = submitLabel;
+            this._nextButton.element.setAttribute("aria-label", submitLabel);
+            this._nextButton.element.classList.add("chat-question-nav-submit");
+        } else {
+            this._nextButton.label = `$(${Codicon.chevronRight.id})`;
+            this._nextButton.element.title = nextLabel;
+            this._nextButton.element.setAttribute("aria-label", nextLabel);
+            this._nextButton.element.classList.remove("chat-question-nav-submit");
+        }
+        this._onDidChangeHeight.fire();
+    }
+    renderInput(container, question) {
+        switch (question.type) {
+        case "text":
+            this.renderTextInput(container, question);
+            break;
+        case "singleSelect":
+            this.renderSingleSelect(container, question);
+            break;
+        case "multiSelect":
+            this.renderMultiSelect(container, question);
+            break;
+        }
+    }
+    setupTextareaAutoResize(textarea) {
+        const autoResize = () => {
+            textarea.style.height = "auto";
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+            this._onDidChangeHeight.fire();
+        };
+        this._inputBoxes.add(addDisposableListener(textarea, EventType.INPUT, autoResize));
+        return autoResize;
+    }
+    renderTextInput(container, question) {
+        const inputBox = this._inputBoxes.add(( new InputBox(container, undefined, {
+            placeholder: ( localize(5878, "Enter your answer")),
+            inputBoxStyles: defaultInputBoxStyles
+        })));
+        const previousAnswer = this._answers.get(question.id);
+        if (previousAnswer !== undefined) {
+            inputBox.value = String(previousAnswer);
+        } else if (question.defaultValue !== undefined) {
+            inputBox.value = String(question.defaultValue);
+        }
+        this._textInputBoxes.set(question.id, inputBox);
+        if (this._options.shouldAutoFocus !== false) {
+            this._inputBoxes.add(
+                runAtThisOrScheduleAtNextAnimationFrame(getWindow(inputBox.element), () => inputBox.focus())
+            );
+        }
+    }
+    renderSingleSelect(container, question) {
+        const options = question.options || [];
+        const selectContainer = $(".chat-question-list");
+        selectContainer.setAttribute("role", "listbox");
+        selectContainer.setAttribute("aria-label", question.title);
+        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, {
+            selectedValue: true
+        }) ? previousAnswer.selectedValue : previousAnswer;
+        const defaultOptionId = typeof question.defaultValue === "string" ? question.defaultValue : undefined;
+        let selectedIndex = -1;
+        options.forEach((option, index) => {
+            if (previousSelectedValue !== undefined && option.value === previousSelectedValue) {
+                selectedIndex = index;
+            } else if (selectedIndex === -1 && defaultOptionId !== undefined && option.id === defaultOptionId) {
+                selectedIndex = index;
+            }
+        });
+        const listItems = [];
+        const indicators = [];
+        const updateSelection = newIndex => {
+            listItems.forEach((item, i) => {
+                const isSelected = i === newIndex;
+                item.classList.toggle("selected", isSelected);
+                item.setAttribute("aria-selected", String(isSelected));
+                const indicator = indicators[i];
+                indicator.classList.toggle("codicon", isSelected);
+                indicator.classList.toggle("codicon-check", isSelected);
+            });
+            if (newIndex >= 0 && newIndex < listItems.length) {
+                selectContainer.setAttribute("aria-activedescendant", listItems[newIndex].id);
+            }
+            const data = this._singleSelectItems.get(question.id);
+            if (data) {
+                data.selectedIndex = newIndex;
+            }
+        };
+        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(5879, "Option {0}: {1}", index + 1, option.label)));
+            listItem.id = `option-${question.id}-${index}`;
+            listItem.tabIndex = -1;
+            const number = $(".chat-question-list-number");
+            number.textContent = `${index + 1}`;
+            listItem.appendChild(number);
+            const indicator = $(".chat-question-list-indicator");
+            if (isSelected) {
+                indicator.classList.add("codicon", "codicon-check");
+            }
+            indicators.push(indicator);
+            const label = $(".chat-question-list-label");
+            const separatorIndex = option.label.indexOf(" - ");
+            if (separatorIndex !== -1) {
+                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);
+                label.appendChild(descSpan);
+            } else {
+                label.textContent = option.label;
+            }
+            listItem.appendChild(label);
+            listItem.appendChild(indicator);
+            if (isSelected) {
+                listItem.classList.add("selected");
+            }
+            this._inputBoxes.add(
+                getBaseLayerHoverDelegate().setupManagedHover(getDefaultHoverDelegate("mouse"), listItem, option.label)
+            );
+            this._inputBoxes.add(addDisposableListener(listItem, EventType.CLICK, e => {
+                e.preventDefault();
+                e.stopPropagation();
+                updateSelection(index);
+            }));
+            selectContainer.appendChild(listItem);
+            listItems.push(listItem);
+        });
+        this._singleSelectItems.set(question.id, {
+            items: listItems,
+            selectedIndex
+        });
+        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(5880, "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);
+            }
+        }));
+        freeformContainer.appendChild(freeformTextarea);
+        container.appendChild(freeformContainer);
+        this._freeformTextareas.set(question.id, freeformTextarea);
+        this._inputBoxes.add(addDisposableListener(selectContainer, EventType.KEY_DOWN, e => {
+            const event = ( new StandardKeyboardEvent(e));
+            const data = this._singleSelectItems.get(question.id);
+            if (!data || !listItems.length) {
+                return;
+            }
+            let newIndex = data.selectedIndex;
+            if (event.keyCode === KeyCode.DownArrow) {
+                e.preventDefault();
+                newIndex = Math.min(data.selectedIndex + 1, listItems.length - 1);
+            } 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) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.handleNext();
+                return;
+            } else if (event.keyCode >= KeyCode.Digit1 && event.keyCode <= KeyCode.Digit9) {
+                const numberIndex = event.keyCode - KeyCode.Digit1;
+                if (numberIndex < listItems.length) {
+                    e.preventDefault();
+                    updateSelection(numberIndex);
+                } else if (numberIndex === listItems.length) {
+                    e.preventDefault();
+                    updateSelection(-1);
+                    freeformTextarea.focus();
+                }
+                return;
+            }
+            if (newIndex !== data.selectedIndex && newIndex >= 0) {
+                updateSelection(newIndex);
+            }
+        }));
+        if (previousFreeform !== undefined) {
+            this._inputBoxes.add(
+                runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => autoResize())
+            );
+        }
+        if (this._options.shouldAutoFocus !== false && listItems.length > 0) {
+            const focusIndex = selectedIndex >= 0 ? selectedIndex : 0;
+            if (selectedIndex < 0) {
+                updateSelection(0);
+            }
+            this._inputBoxes.add(
+                runAtThisOrScheduleAtNextAnimationFrame(getWindow(selectContainer), () => {
+                    listItems[focusIndex]?.focus();
+                })
+            );
+        }
+    }
+    renderMultiSelect(container, question) {
+        const options = question.options || [];
+        const selectContainer = $(".chat-question-list");
+        selectContainer.setAttribute("role", "listbox");
+        selectContainer.setAttribute("aria-multiselectable", "true");
+        selectContainer.setAttribute("aria-label", question.title);
+        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, {
+            selectedValues: true
+        }) ? previousAnswer.selectedValues : (Array.isArray(previousAnswer) ? previousAnswer : []);
+        const defaultOptionIds = Array.isArray(question.defaultValue) ? question.defaultValue : (typeof question.defaultValue === "string" ? [question.defaultValue] : []);
+        const checkboxes = [];
+        const listItems = [];
+        let focusedIndex = 0;
+        let firstCheckedIndex = -1;
+        options.forEach((option, index) => {
+            let isChecked = false;
+            if (previousSelectedValues && previousSelectedValues.length > 0) {
+                isChecked = previousSelectedValues.includes(option.value);
+            } else if (defaultOptionIds.includes(option.id)) {
+                isChecked = true;
+            }
+            const listItem = $(".chat-question-list-item.multi-select");
+            listItem.setAttribute("role", "option");
+            listItem.setAttribute("aria-selected", String(isChecked));
+            listItem.setAttribute("aria-label", ( localize(5879, "Option {0}: {1}", index + 1, option.label)));
+            listItem.id = `option-${question.id}-${index}`;
+            listItem.tabIndex = -1;
+            const number = $(".chat-question-list-number");
+            number.textContent = `${index + 1}`;
+            listItem.appendChild(number);
+            const checkbox = this._inputBoxes.add(( new Checkbox(option.label, isChecked, defaultCheckboxStyles)));
+            checkbox.domNode.classList.add("chat-question-list-checkbox");
+            checkbox.domNode.tabIndex = -1;
+            listItem.appendChild(checkbox.domNode);
+            const label = $(".chat-question-list-label");
+            const separatorIndex = option.label.indexOf(" - ");
+            if (separatorIndex !== -1) {
+                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);
+                label.appendChild(descSpan);
+            } else {
+                label.textContent = option.label;
+            }
+            listItem.appendChild(label);
+            if (isChecked) {
+                listItem.classList.add("checked");
+                if (firstCheckedIndex === -1) {
+                    firstCheckedIndex = index;
+                }
+            }
+            this._inputBoxes.add(checkbox.onChange(() => {
+                listItem.classList.toggle("checked", checkbox.checked);
+                listItem.setAttribute("aria-selected", String(checkbox.checked));
+            }));
+            this._inputBoxes.add(addDisposableListener(listItem, EventType.CLICK, e => {
+                focusedIndex = index;
+                if (e.target !== checkbox.domNode && !checkbox.domNode.contains(e.target)) {
+                    checkbox.domNode.click();
+                }
+            }));
+            this._inputBoxes.add(
+                getBaseLayerHoverDelegate().setupManagedHover(getDefaultHoverDelegate("mouse"), listItem, option.label)
+            );
+            selectContainer.appendChild(listItem);
+            checkboxes.push(checkbox);
+            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(5880, "Enter custom answer"));
+        freeformTextarea.rows = 1;
+        if (previousFreeform !== undefined) {
+            freeformTextarea.value = previousFreeform;
+        }
+        const autoResize = this.setupTextareaAutoResize(freeformTextarea);
+        freeformContainer.appendChild(freeformTextarea);
+        container.appendChild(freeformContainer);
+        this._freeformTextareas.set(question.id, freeformTextarea);
+        this._inputBoxes.add(addDisposableListener(selectContainer, EventType.KEY_DOWN, e => {
+            const event = ( new StandardKeyboardEvent(e));
+            if (!listItems.length) {
+                return;
+            }
+            if (event.keyCode === KeyCode.DownArrow) {
+                e.preventDefault();
+                focusedIndex = Math.min(focusedIndex + 1, listItems.length - 1);
+                listItems[focusedIndex].focus();
+            } else if (event.keyCode === KeyCode.UpArrow) {
+                e.preventDefault();
+                focusedIndex = Math.max(focusedIndex - 1, 0);
+                listItems[focusedIndex].focus();
+            } else if (event.keyCode === KeyCode.Enter) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.handleNext();
+            } else if (event.keyCode === KeyCode.Space) {
+                e.preventDefault();
+                if (focusedIndex >= 0 && focusedIndex < checkboxes.length) {
+                    checkboxes[focusedIndex].domNode.click();
+                }
+            } else if (event.keyCode >= KeyCode.Digit1 && event.keyCode <= KeyCode.Digit9) {
+                const numberIndex = event.keyCode - KeyCode.Digit1;
+                if (numberIndex < checkboxes.length) {
+                    e.preventDefault();
+                    checkboxes[numberIndex].domNode.click();
+                } else if (numberIndex === checkboxes.length) {
+                    e.preventDefault();
+                    freeformTextarea.focus();
+                }
+            }
+        }));
+        if (previousFreeform !== undefined) {
+            this._inputBoxes.add(
+                runAtThisOrScheduleAtNextAnimationFrame(getWindow(freeformTextarea), () => autoResize())
+            );
+        }
+        if (this._options.shouldAutoFocus !== false && listItems.length > 0) {
+            const initialFocusIndex = firstCheckedIndex >= 0 ? firstCheckedIndex : 0;
+            focusedIndex = initialFocusIndex;
+            this._inputBoxes.add(
+                runAtThisOrScheduleAtNextAnimationFrame(getWindow(selectContainer), () => {
+                    listItems[initialFocusIndex]?.focus();
+                })
+            );
+        }
+    }
+    getCurrentAnswer() {
+        const question = this.carousel.questions[this._currentIndex];
+        if (!question) {
+            return undefined;
+        }
+        switch (question.type) {
+        case "text":
+            {
+                const inputBox = this._textInputBoxes.get(question.id);
+                return inputBox?.value ?? question.defaultValue;
+            }
+        case "singleSelect":
+            {
+                const data = this._singleSelectItems.get(question.id);
+                let selectedValue = undefined;
+                if (data && data.selectedIndex >= 0) {
+                    selectedValue = question.options?.[data.selectedIndex]?.value;
+                }
+                if (selectedValue === undefined && typeof question.defaultValue === "string") {
+                    const defaultOption = question.options?.find(opt => opt.id === question.defaultValue);
+                    selectedValue = defaultOption?.value;
+                }
+                const freeformTextarea = this._freeformTextareas.get(question.id);
+                const freeformValue = freeformTextarea?.value !== "" ? freeformTextarea?.value : undefined;
+                if (freeformValue) {
+                    return {
+                        selectedValue: undefined,
+                        freeformValue
+                    };
+                }
+                if (selectedValue !== undefined) {
+                    return {
+                        selectedValue,
+                        freeformValue: undefined
+                    };
+                }
+                return undefined;
+            }
+        case "multiSelect":
+            {
+                const checkboxes = this._multiSelectCheckboxes.get(question.id);
+                const selectedValues = [];
+                if (checkboxes) {
+                    checkboxes.forEach((checkbox, index) => {
+                        if (checkbox.checked) {
+                            const value = question.options?.[index]?.value;
+                            if (value !== undefined) {
+                                selectedValues.push(value);
+                            }
+                        }
+                    });
+                }
+                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) {
+                    return {
+                        selectedValues: finalSelectedValues,
+                        freeformValue
+                    };
+                }
+                return undefined;
+            }
+        default:
+            return question.defaultValue;
+        }
+    }
+    renderSkippedMessage() {
+        const skippedContainer = $(".chat-question-carousel-summary");
+        const skippedMessage = $(".chat-question-summary-skipped");
+        skippedMessage.textContent = ( localize(5881, "Skipped"));
+        skippedContainer.appendChild(skippedMessage);
+        this.domNode.appendChild(skippedContainer);
+    }
+    renderSummary() {
+        if (this._answers.size === 0) {
+            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 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);
+            } else {
+                const answerValue = $("span.chat-question-summary-answer-title");
+                answerValue.textContent = formattedAnswer;
+                summaryItem.appendChild(answerValue);
+            }
+            summaryContainer.appendChild(summaryItem);
+        }
+        this.domNode.appendChild(summaryContainer);
+    }
+    formatAnswerForSummary(question, answer) {
+        switch (question.type) {
+        case "text":
+            return String(answer);
+        case "singleSelect":
+            {
+                if (typeof answer === "object" && answer !== null && hasKey(answer, {
+                    selectedValue: true
+                })) {
+                    const {
+                        selectedValue,
+                        freeformValue
+                    } = answer;
+                    const selectedLabel = question.options?.find(opt => opt.value === selectedValue)?.label;
+                    if (freeformValue) {
+                        return freeformValue;
+                    }
+                    return selectedLabel ?? String(selectedValue ?? "");
+                }
+                const label = question.options?.find(opt => opt.value === answer)?.label;
+                return label ?? String(answer);
+            }
+        case "multiSelect":
+            {
+                if (typeof answer === "object" && answer !== null && hasKey(answer, {
+                    selectedValues: true
+                })) {
+                    const {
+                        selectedValues,
+                        freeformValue
+                    } = answer;
+                    const labels = ( (selectedValues ?? []).map(v => question.options?.find(opt => opt.value === v)?.label ?? String(v)));
+                    if (freeformValue) {
+                        labels.push(freeformValue);
+                    }
+                    return labels.join(( localize(5882, ", ")));
+                }
+                if (Array.isArray(answer)) {
+                    return ( answer.map(v => question.options?.find(opt => opt.value === v)?.label ?? String(v))).join(( localize(5882, ", ")));
+                }
+                return String(answer);
+            }
+        default:
+            return String(answer);
+        }
+    }
+    hasSameContent(other, _followingContent, element) {
+        if (!this._isSkipped && !this.carousel.isUsed && isResponseVM(element) && element.isComplete) {
+            return false;
+        }
+        return other.kind === "questionCarousel" && other === this.carousel;
+    }
+    addDisposable(disposable) {
+        this._register(disposable);
+    }
+}
+
+export { ChatQuestionCarouselPart };