@siemens/ix 5.1.0 → 5.2.0

package/dist/collection/components/chat-input/chat-input.js

@@ -0,0 +1,878 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { iconCircleStop, iconInfo, iconSendRightFilled, iconWarning, } from "@siemens/ix-icons/icons";
+import { Host, Mixin, h, } from "@stencil/core";
+import { DefaultMixins } from "../utils/internal/component";
+import { ComponentIdMixin } from "../utils/internal/mixins/id.mixin";
+import { makeRef } from "../utils/make-ref";
+import { createMutationObserver } from "../utils/mutation-observer";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+/**
+ * @since 5.2.0
+ * @form-ready
+ * @slot follow-up - Optional refresh action and follow-up prompt buttons displayed above the chat input
+ * @slot attachments - Attachments displayed above the prompt text area
+ * @slot start - Element will be displayed in the left action area
+ * @slot end - Element will be displayed in the right action area before the submit button
+ */
+export class ChatInput extends Mixin(...DefaultMixins, ComponentIdMixin) {
+    constructor() {
+        super();
+    }
+    hostElement;
+    formInternals;
+    /**
+     * The state of the chat input, which can be either 'input' or 'processing'.
+     */
+    state = 'input';
+    /**
+     * The name of the chat input.
+     */
+    name;
+    /**
+     * The placeholder text for the chat input.
+     */
+    placeholder = 'Enter a command, question or topic...';
+    /**
+     * The value of the chat input.
+     */
+    value = '';
+    /**
+     * Specifies whether the chat input is disabled.
+     */
+    disabled = false;
+    /**
+     * Specifies whether the chat input is readonly.
+     */
+    readonly = false;
+    /**
+     * Accessible label for the native textarea.
+     */
+    textareaLabel = 'Chat input';
+    /**
+     * The maximum length of the chat input.
+     */
+    maxLength;
+    /**
+     * Character limit used for the optional inline character limit message.
+     * Falls back to `maxLength` when not set.
+     */
+    characterLimit;
+    /**
+     * i18n label for the hard character limit message.
+     * Use `{current}` and `{limit}` placeholders to place the values in any order.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nCharacterLimitReached = 'Character limit reached ({current} / {limit} characters)';
+    /**
+     * i18n label for the soft character limit warning.
+     * Use `{current}` and `{limit}` placeholders to place the values in any order.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nCharacterLimitWarning = "You're nearing the limit ({current} / {limit} characters)";
+    /**
+     * Percentage of the character limit that triggers the soft warning. Define a number between 0 and 1 (e.g. 0.8 for 80%).
+     */
+    characterLimitWarningThreshold = 0.9;
+    /**
+     * Minimum number of visible text rows.
+     */
+    minRows = 1;
+    /**
+     * Maximum number of visible text rows before the input becomes scrollable.
+     */
+    maxRows = 6;
+    /**
+     * If true, pressing Enter inserts a line break instead of submitting the prompt.
+     */
+    insertLineBreakOnEnter = false;
+    /**
+     * Disclaimer text displayed below the chat input.
+     */
+    disclaimer = 'This content is AI-generated. Always verify the information for accuracy.';
+    /**
+     * Event emitted when the value of the chat input changes.
+     */
+    valueChange;
+    /**
+     * Event emitted when the chat input loses focus.
+     */
+    ixBlur;
+    /**
+     * Event emitted when the chat input loses focus and the value has changed.
+     */
+    ixChange;
+    /**
+     * Event emitted when the prompt is submitted by the send button or Enter key.
+     */
+    promptSubmit;
+    /** @internal */
+    initialValue;
+    hasAttachments = false;
+    hasAttachmentScrollbar = false;
+    hasFollowUp = false;
+    attachmentsRef = makeRef((attachments) => {
+        this.initAttachmentResizeObserver(attachments);
+        this.scheduleAttachmentScrollbarUpdate();
+    });
+    textareaRef = makeRef((textarea) => {
+        this.updateTextareaHeight(textarea);
+    });
+    attachmentResizeObserver;
+    attachmentMutationObserver;
+    isAttachmentScrollbarUpdateQueued = false;
+    componentWillLoad() {
+        super.componentWillLoad();
+        this.updateFormInternalValue(this.value);
+        this.initialValue = this.value;
+        this.updateHasFollowUp();
+    }
+    componentDidLoad() {
+        super.componentDidLoad();
+        this.updateHasFollowUp();
+        this.initAttachmentMutationObserver();
+        this.scheduleAttachmentScrollbarUpdate();
+        this.updateTextareaHeight();
+    }
+    componentDidRender() {
+        super.componentDidRender();
+        this.scheduleAttachmentScrollbarUpdate();
+        this.updateTextareaHeight();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.attachmentResizeObserver?.disconnect();
+        this.attachmentMutationObserver?.disconnect();
+    }
+    onValueChange(value) {
+        this.formInternals.setFormValue(value);
+        this.updateTextareaHeight();
+    }
+    onRowsChange() {
+        this.updateTextareaHeight();
+    }
+    updateFormInternalValue(value) {
+        this.formInternals.setFormValue(value);
+        this.value = value;
+    }
+    /** @internal */
+    async getAssociatedFormElement() {
+        return this.formInternals.form;
+    }
+    /**
+     * Returns the native textarea element used by the chat input.
+     * @since 5.1.0
+     */
+    async getNativeInputElement() {
+        return this.textareaRef.waitForCurrent();
+    }
+    /**
+     * Focuses the chat input.
+     * @since 5.1.0
+     */
+    async focusInput() {
+        return (await this.getNativeInputElement()).focus();
+    }
+    canSubmit() {
+        return !this.disabled && !this.readonly && this.value.trim().length > 0;
+    }
+    emitIxChangeIfNeeded() {
+        if (this.initialValue !== this.value) {
+            this.ixChange.emit(this.value);
+            this.initialValue = this.value;
+        }
+    }
+    submitPrompt() {
+        if (!this.canSubmit()) {
+            return;
+        }
+        this.emitIxChangeIfNeeded();
+        this.promptSubmit.emit(this.value);
+    }
+    updateTextareaHeight(textarea = this.textareaRef.current) {
+        if (!textarea) {
+            return;
+        }
+        const computedStyle = getComputedStyle(textarea);
+        const lineHeight = Number.parseFloat(computedStyle.lineHeight) || 24;
+        const minRows = Math.max(this.minRows, 1);
+        const maxRows = Math.max(this.maxRows, minRows);
+        const borderHeight = textarea.offsetHeight - textarea.clientHeight ||
+            Number.parseFloat(computedStyle.borderTopWidth) +
+                Number.parseFloat(computedStyle.borderBottomWidth);
+        const minHeight = lineHeight * minRows + borderHeight;
+        const maxHeight = lineHeight * maxRows + borderHeight;
+        textarea.style.height = 'auto';
+        textarea.style.minHeight = `${minHeight}px`;
+        const nextHeight = Math.min(Math.max(textarea.scrollHeight + borderHeight, minHeight), maxHeight);
+        textarea.style.height = `${nextHeight}px`;
+        textarea.style.overflowY =
+            textarea.scrollHeight + borderHeight > maxHeight ? 'auto' : 'hidden';
+    }
+    getCharacterLimit() {
+        const limit = this.characterLimit ?? this.maxLength;
+        return typeof limit === 'number' && Number.isFinite(limit) && limit > 0
+            ? limit
+            : undefined;
+    }
+    getNormalizedCharacterLimitWarningThreshold() {
+        if (!Number.isFinite(this.characterLimitWarningThreshold)) {
+            return 0.9;
+        }
+        return Math.min(Math.max(this.characterLimitWarningThreshold, 0), 1);
+    }
+    isSoftCharacterLimitWarning() {
+        const limit = this.getCharacterLimit();
+        if (!limit || this.isCharacterLimitReached()) {
+            return false;
+        }
+        const warningLength = Math.ceil(limit * this.getNormalizedCharacterLimitWarningThreshold());
+        return this.value.length >= warningLength;
+    }
+    isCharacterLimitReached() {
+        const limit = this.getCharacterLimit();
+        if (!limit) {
+            return false;
+        }
+        return this.value.length >= limit;
+    }
+    getCharacterLimitMessage() {
+        const limit = this.getCharacterLimit();
+        const current = this.value.length;
+        if (!limit) {
+            return undefined;
+        }
+        if (this.isCharacterLimitReached()) {
+            return this.formatCharacterLimitMessage(this.i18nCharacterLimitReached, current, limit);
+        }
+        if (this.isSoftCharacterLimitWarning()) {
+            return this.formatCharacterLimitMessage(this.i18nCharacterLimitWarning, current, limit);
+        }
+        return undefined;
+    }
+    formatCharacterLimitMessage(template, current, limit) {
+        return template
+            .split('{current}')
+            .join(String(current))
+            .split('{limit}')
+            .join(String(limit));
+    }
+    getCharacterLimitState() {
+        if (this.isCharacterLimitReached()) {
+            return 'hard';
+        }
+        if (this.isSoftCharacterLimitWarning()) {
+            return 'soft';
+        }
+        return undefined;
+    }
+    handleKeyDown(event) {
+        if (event.key !== 'Enter' ||
+            event.shiftKey ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            this.insertLineBreakOnEnter ||
+            this.state === 'processing') {
+            return;
+        }
+        event.preventDefault();
+        this.submitPrompt();
+    }
+    renderCharacterLimit() {
+        const message = this.getCharacterLimitMessage();
+        const state = this.getCharacterLimitState();
+        if (!message || !state) {
+            return null;
+        }
+        return (h("ix-typography", { class: {
+                'character-limit': true,
+                'character-limit--soft': state === 'soft',
+                'character-limit--hard': state === 'hard',
+            }, textColor: 'std' }, h("ix-icon", { "aria-hidden": "true", name: state === 'hard' ? iconWarning : iconInfo, size: "16" }), message));
+    }
+    handleAttachmentsSlotChange(event) {
+        const slot = event.target;
+        this.hasAttachments =
+            slot.assignedElements({
+                flatten: true,
+            }).length > 0;
+        this.scheduleAttachmentScrollbarUpdate();
+    }
+    handleFollowUpSlotChange(event) {
+        this.hasFollowUp = this.hasAssignedContent(event.target);
+    }
+    hasAssignedContent(slot) {
+        return slot.assignedNodes({ flatten: true }).some((node) => {
+            return node.nodeType === 1 || !!node.textContent?.trim();
+        });
+    }
+    updateHasFollowUp() {
+        this.hasFollowUp =
+            this.hostElement.querySelectorAll('[slot="follow-up"]').length > 0;
+    }
+    initAttachmentResizeObserver(attachments) {
+        this.attachmentResizeObserver?.disconnect();
+        this.attachmentResizeObserver = new ResizeObserver(() => this.scheduleAttachmentScrollbarUpdate());
+        this.attachmentResizeObserver.observe(attachments);
+    }
+    initAttachmentMutationObserver() {
+        this.attachmentMutationObserver = createMutationObserver(() => {
+            this.updateHasFollowUp();
+            this.scheduleAttachmentScrollbarUpdate();
+        });
+        this.attachmentMutationObserver.observe(this.hostElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    scheduleAttachmentScrollbarUpdate() {
+        if (this.isAttachmentScrollbarUpdateQueued) {
+            return;
+        }
+        this.isAttachmentScrollbarUpdateQueued = true;
+        requestAnimationFrameNoNgZone(() => {
+            this.isAttachmentScrollbarUpdateQueued = false;
+            this.updateAttachmentScrollbar();
+        });
+    }
+    updateAttachmentScrollbar() {
+        const attachments = this.attachmentsRef.current;
+        if (!attachments) {
+            return;
+        }
+        const computedStyle = getComputedStyle(attachments);
+        const hasHorizontalScrollbar = ['auto', 'scroll'].includes(computedStyle.overflowX) &&
+            attachments.scrollWidth - attachments.clientWidth > 1;
+        const hasVerticalScrollbar = ['auto', 'scroll'].includes(computedStyle.overflowY) &&
+            attachments.scrollHeight - attachments.clientHeight > 1;
+        const hasAttachmentScrollbar = this.hasAttachments && (hasHorizontalScrollbar || hasVerticalScrollbar);
+        if (this.hasAttachmentScrollbar !== hasAttachmentScrollbar) {
+            this.hasAttachmentScrollbar = hasAttachmentScrollbar;
+        }
+    }
+    render() {
+        const isProcessing = this.state === 'processing';
+        const disabledSubmitButton = isProcessing || (!this.canSubmit() && this.state === 'input');
+        const submitButtonIcon = isProcessing
+            ? iconCircleStop
+            : iconSendRightFilled;
+        return (h(Host, { key: '72c1e2139cdf152b32d84a4f8e5292361e63489c', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+                'has-follow-up': this.hasFollowUp,
+            } }, h("div", { key: '88a8ccbdafceda33f39bc1266f50966af22fa830', class: "follow-up-prompts" }, h("slot", { key: '10cbddca520c0eaed028f05f9d6c14977e8043db', name: "follow-up", onSlotchange: (event) => this.handleFollowUpSlotChange(event) })), h("div", { key: '65235d296b9d6e452332746229300bdb9a766aec', class: "chat-input" }, h("div", { key: '856ae3152ac0c5665e8a83f250cfd7ad53a9d778', ref: this.attachmentsRef, class: {
+                attachments: true,
+                'attachments--scroll': true,
+                'has-attachment-scrollbar': this.hasAttachmentScrollbar,
+                'has-attachments': this.hasAttachments,
+            } }, h("slot", { key: 'c8c108ef47848cfaee5074c545ff9f9b7000a71d', name: "attachments", onSlotchange: (event) => this.handleAttachmentsSlotChange(event) })), h("textarea", { key: '55cb475c3ea359f198f26f04b0c89d6a972e1799', id: this.getHostElementId() + '-textarea', ref: this.textareaRef, readOnly: this.readonly, disabled: this.disabled, maxLength: this.getCharacterLimit(), rows: this.minRows, value: this.value, placeholder: this.placeholder, "aria-label": this.textareaLabel, onFocus: () => {
+                this.initialValue = this.value;
+            }, onInput: (event) => {
+                const textarea = event.target;
+                this.updateFormInternalValue(textarea.value);
+                this.valueChange.emit(textarea.value);
+                this.updateTextareaHeight(textarea);
+            }, onKeyDown: (event) => this.handleKeyDown(event), onBlur: () => {
+                this.ixBlur.emit();
+                this.emitIxChangeIfNeeded();
+            } }), this.renderCharacterLimit(), h("div", { key: '64844f6f38de39980e9ac250ea6edfad8599cb61', class: "action-row" }, h("div", { key: 'ae3d9b5bbc4828610f6d3ba27135eb0595325e2f', class: "left-actions" }, h("slot", { key: '36bd038c725a205671fdba70298c39899e7e35ac', name: "start" })), h("div", { key: '5d27e8d2dd186d73c7f2677f73221b5106159a9a', class: "right-actions" }, h("slot", { key: '54757427353728d8462137a645a1cc6c4133ebcc', name: "end" }), h("ix-icon-button", { key: 'ac42d94d4999731a1b76a1163083781258f82573', "aria-label": isProcessing ? 'Stop processing' : 'Submit prompt', class: "submit-button", disabled: disabledSubmitButton, icon: submitButtonIcon, size: "24", variant: "tertiary", onClick: () => this.submitPrompt() })))), this.disclaimer && (h("ix-typography", { key: '572264e22f9d76d980299b163a961e2a6bf9deed', class: "disclaimer", format: "body-sm", textColor: "soft" }, this.disclaimer))));
+    }
+    static get is() { return "ix-chat-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chat-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chat-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'input' | 'processing'",
+                    "resolved": "\"input\" | \"processing\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The state of the chat input, which can be either 'input' or 'processing'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'input'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the chat input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder text for the chat input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placeholder",
+                "defaultValue": "'Enter a command, question or topic...'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the chat input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether the chat input is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether the chat input is readonly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "textareaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the native textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "textarea-label",
+                "defaultValue": "'Chat input'"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The maximum length of the chat input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "characterLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Character limit used for the optional inline character limit message.\nFalls back to `maxLength` when not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "character-limit"
+            },
+            "i18nCharacterLimitReached": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "i18n label for the hard character limit message.\nUse `{current}` and `{limit}` placeholders to place the values in any order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i18n-character-limit-reached",
+                "defaultValue": "'Character limit reached ({current} / {limit} characters)'"
+            },
+            "i18nCharacterLimitWarning": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "i18n label for the soft character limit warning.\nUse `{current}` and `{limit}` placeholders to place the values in any order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i18n-character-limit-warning",
+                "defaultValue": "\"You're nearing the limit ({current} / {limit} characters)\""
+            },
+            "characterLimitWarningThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Percentage of the character limit that triggers the soft warning. Define a number between 0 and 1 (e.g. 0.8 for 80%)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "character-limit-warning-threshold",
+                "defaultValue": "0.9"
+            },
+            "minRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum number of visible text rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-rows",
+                "defaultValue": "1"
+            },
+            "maxRows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of visible text rows before the input becomes scrollable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-rows",
+                "defaultValue": "6"
+            },
+            "insertLineBreakOnEnter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, pressing Enter inserts a line break instead of submitting the prompt."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "insert-line-break-on-enter",
+                "defaultValue": "false"
+            },
+            "disclaimer": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disclaimer text displayed below the chat input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disclaimer",
+                "defaultValue": "'This content is AI-generated. Always verify the information for accuracy.'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasAttachments": {},
+            "hasAttachmentScrollbar": {},
+            "hasFollowUp": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the value of the chat input changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "ixBlur",
+                "name": "ixBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the chat input loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "ixChange",
+                "name": "ixChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the chat input loses focus and the value has changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "promptSubmit",
+                "name": "promptSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the prompt is submitted by the send button or Enter key."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getAssociatedFormElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLFormElement | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLFormElement"
+                        }
+                    },
+                    "return": "Promise<HTMLFormElement | null>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getNativeInputElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLTextAreaElement>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLTextAreaElement": {
+                            "location": "global",
+                            "id": "global::HTMLTextAreaElement"
+                        }
+                    },
+                    "return": "Promise<HTMLTextAreaElement>"
+                },
+                "docs": {
+                    "text": "Returns the native textarea element used by the chat input.",
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }]
+                }
+            },
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the chat input.",
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "minRows",
+                "methodName": "onRowsChange"
+            }, {
+                "propName": "maxRows",
+                "methodName": "onRowsChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "formInternals"; }
+}