@siemens/ix 5.1.0 → 5.2.0

package/dist/esm/ix-chat-ai-message.entry.js

@@ -0,0 +1,33 @@
+import { r as registerInstance, h, H as Host } from './index-EBgS4zhE.js';
+
+const chatAiMessageCss = () => `:host{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;gap:var(--theme-space-3);box-sizing:border-box;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host *::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host *{}:host *::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host *{}:host *::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host *::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host *{}:host *::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host *{}:host *::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host *::-webkit-scrollbar-corner{display:none}:host .message{display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;gap:var(--theme-space-3);font-size:var(--theme-font-size-l);line-height:1.5;overflow-wrap:anywhere}:host .message ::slotted(*){margin:0;color:inherit;overflow-wrap:anywhere}:host .message ::slotted(h1),:host .message ::slotted(h2),:host .message ::slotted(h3),:host .message ::slotted(h4),:host .message ::slotted(h5),:host .message ::slotted(h6){font-size:var(--theme-font-size-l);font-weight:var(--theme-font-weight-bold);line-height:1.2}:host .meta{display:none;align-items:center;gap:var(--theme-space-3);width:100%;min-height:2rem}:host .actions{display:none;align-items:center;gap:0.25rem}:host .sources{display:none;align-items:center}:host .actions ::slotted(ix-icon-button),:host .sources ::slotted(*){flex:0 0 auto}:host(.has-meta) .meta{display:flex}:host(.has-actions) .actions{display:flex}:host(.has-sources) .sources{display:flex}`;
+
+const ChatAiMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    hasActions = false;
+    hasSources = false;
+    hasAssignedContent(slot) {
+        return slot.assignedNodes({ flatten: true }).some((node) => {
+            return node.nodeType === 1 || !!node.textContent?.trim();
+        });
+    }
+    handleActionsSlotChange(event) {
+        this.hasActions = this.hasAssignedContent(event.target);
+    }
+    handleSourcesSlotChange(event) {
+        this.hasSources = this.hasAssignedContent(event.target);
+    }
+    render() {
+        const hasMeta = this.hasActions || this.hasSources;
+        return (h(Host, { key: '7551fd7bf696992eff30a21efd2c6a1ad6934f05', class: {
+                'has-actions': this.hasActions,
+                'has-sources': this.hasSources,
+                'has-meta': hasMeta,
+            } }, h("div", { key: '4ae0ca33bb6f1575d802f081436f9b64cc84a860', class: "message" }, h("slot", { key: 'f9a97d3043c533da53c0a09335a0660ff2fc11ba' })), h("div", { key: '3ea7b4f8a3002c1b70ab6fc3f0038fd3d099a0cc', class: "meta", "aria-hidden": !hasMeta ? 'true' : undefined }, h("div", { key: 'dc13ff30a44ddbde25a9b984ecf534bd99c5f959', class: "actions" }, h("slot", { key: 'e0c8db109a43c9431c9684105b0576a1513f22ce', name: "actions", onSlotchange: (event) => this.handleActionsSlotChange(event) })), h("div", { key: '748966a8345e8dbdf9e4d8c3302577660ba6ec1b', class: "sources" }, h("slot", { key: '0457bbd2d685b6c0fd59251172a8e2fcef82daef', name: "sources", onSlotchange: (event) => this.handleSourcesSlotChange(event) })))));
+    }
+};
+ChatAiMessage.style = chatAiMessageCss();
+
+export { ChatAiMessage as ix_chat_ai_message };

package/dist/esm/ix-chat-attachment.entry.js

@@ -0,0 +1,108 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-EBgS4zhE.js';
+import { y as iconTxtDocument, b as iconError } from './index-BeX6RWvV.js';
+
+const chatAttachmentCss = () => `:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host *::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host *{}:host *::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host *{}:host *::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host *::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host *{}:host *::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host *{}:host *::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host *::-webkit-scrollbar-corner{display:none}:host .attachment-chip{display:block;width:100%;max-width:20rem}:host .content,:host .status-content{display:inline-flex;align-items:center;min-width:0}:host .content{flex:1 1 auto;max-width:100%;width:100%}:host .status-content{gap:var(--theme-space-1)}:host .status-content ix-spinner{scale:1.7;margin-left:0.1875rem}:host .file-name{display:inline-flex;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden}:host .file-name__base{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:end}:host .file-name__extension{flex:0 0 auto;white-space:nowrap}:host .status-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ix-icon{flex:0 0 auto}:host ix-spinner{flex:0 0 auto}:host(.preview-supported){cursor:pointer}:host(.has-remove-button){gap:var(--theme-space-0)}`;
+
+const ChatAttachment = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.attachmentClick = createEvent(this, "attachmentClick", 7);
+        this.removeClick = createEvent(this, "removeClick", 7);
+    }
+    /**
+     * Name of the attached file.
+     */
+    fileName = '';
+    /**
+     * Upload status of the attachment.
+     */
+    status = 'default';
+    /**
+     * Icon displayed before the file name.
+     */
+    icon = iconTxtDocument;
+    /**
+     * Hide the remove action.
+     */
+    hideRemoveButton = false;
+    /**
+     * Enable preview interaction for default attachments.
+     */
+    previewSupported = false;
+    /**
+     * Accessible label for the remove action.
+     */
+    removeAriaLabel = 'Remove attachment';
+    /**
+     * Event emitted when the attachment is clicked.
+     */
+    attachmentClick;
+    /**
+     * Event emitted when the remove action is clicked.
+     */
+    removeClick;
+    canPreview() {
+        return this.previewSupported && this.status === 'default';
+    }
+    splitFileName() {
+        const fileName = this.fileName.trim();
+        const extensionStart = fileName.lastIndexOf('.');
+        if (extensionStart <= 0 || extensionStart === fileName.length - 1) {
+            return { name: fileName, extension: '' };
+        }
+        return {
+            name: fileName.slice(0, extensionStart),
+            extension: fileName.slice(extensionStart),
+        };
+    }
+    renderFileName() {
+        const { name, extension } = this.splitFileName();
+        return (h("span", { class: "file-name", title: this.fileName }, h("span", { class: "file-name__base" }, name || this.fileName), !!extension && h("span", { class: "file-name__extension" }, extension)));
+    }
+    getChipVariant() {
+        if (this.status === 'failed') {
+            return 'alarm';
+        }
+        return 'neutral';
+    }
+    renderChipContent() {
+        if (this.status === 'loading') {
+            return (h("span", { class: "status-content" }, h("ix-spinner", { size: "xx-small", variant: "primary" }), h("span", { class: "status-label" }, this.fileName)));
+        }
+        if (this.status === 'failed') {
+            return h("span", { class: "status-label" }, this.fileName);
+        }
+        return this.renderFileName();
+    }
+    handleAttachmentClick() {
+        if (this.canPreview()) {
+            this.attachmentClick.emit();
+        }
+    }
+    getIcon() {
+        if (this.status === 'default') {
+            return this.icon;
+        }
+        if (this.status === 'loading') {
+            return undefined;
+        }
+        if (this.status === 'failed') {
+            return iconError;
+        }
+        return this.icon;
+    }
+    render() {
+        const isFailed = this.status === 'failed';
+        const isLoading = this.status === 'loading';
+        const canPreview = this.canPreview();
+        return (h(Host, { key: '6d228e12a51a06711a97f216a854432e44340590', class: {
+                failed: isFailed,
+                loading: isLoading,
+                'preview-supported': canPreview,
+                'has-remove-button': !this.hideRemoveButton,
+            } }, h("ix-chip", { key: 'a3369a7981eb355f606162efc1a01c290f49076c', "aria-label": canPreview ? this.fileName : undefined, ariaLabelCloseButton: this.removeAriaLabel, class: "attachment-chip", closable: !this.hideRemoveButton, icon: this.getIcon(), variant: this.getChipVariant(), outline: true, onClick: () => this.handleAttachmentClick(), onCloseChip: () => this.removeClick.emit(), inactive: !canPreview }, h("span", { key: '51b3a72b579776c09587b1bd430aceb146e04e49', class: "content" }, this.renderChipContent()))));
+    }
+};
+ChatAttachment.style = chatAttachmentCss();
+
+export { ChatAttachment as ix_chat_attachment };

package/dist/esm/ix-chat-input.entry.js

@@ -0,0 +1,404 @@
+import { M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
+import { c as iconWarning, d as iconInfo, z as iconCircleStop, A as iconSendRightFilled } from './index-BeX6RWvV.js';
+import { D as DefaultMixins } from './component-DqJSHc3A.js';
+import { C as ComponentIdMixin } from './id.mixin-CUbYLenp.js';
+import { m as makeRef } from './make-ref-Djkc69iv.js';
+import { c as createMutationObserver } from './mutation-observer-CX81WQtk.js';
+import { r as requestAnimationFrameNoNgZone } from './requestAnimationFrame-BEuV0Xpe.js';
+import './focus-utilities-6ZxKp7Jn.js';
+import './shadow-dom-BClJdFQP.js';
+
+const chatInputCss = () => `:host{display:block;width:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host *::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host *{}:host *::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host *{}:host *::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host *::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host *{}:host *::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host *{}:host *::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host *::-webkit-scrollbar-corner{display:none}:host .chat-input{display:flex;flex-direction:column;width:100%;min-height:8rem;padding:var(--theme-space-2);box-sizing:border-box;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);color:var(--theme-input--color)}:host .follow-up-prompts{display:none;flex-wrap:wrap;align-items:flex-start;gap:var(--theme-space-1);width:100%;margin-bottom:var(--theme-space-1)}:host .follow-up-prompts ::slotted(*){flex:0 1 auto}:host .follow-up-prompts ::slotted(ix-button){max-width:25rem;min-width:5rem}:host .follow-up-prompts ::slotted(ix-icon-button){flex:0 0 auto}:host .chat-input:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}:host .chat-input:focus-within{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}:host .attachments{display:none;box-sizing:border-box;width:100%;max-width:100%;gap:var(--theme-space-2);margin-bottom:var(--theme-space-2)}:host .attachments.has-attachments{display:flex}:host .attachments--wrap{flex-wrap:wrap;max-height:calc(4rem + var(--theme-space-2));overflow:hidden}:host .attachments--scroll{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}:host .attachments--scroll *::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host .attachments--scroll *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host .attachments--scroll *{}:host .attachments--scroll *::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host .attachments--scroll *{}:host .attachments--scroll *::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host .attachments--scroll *::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host .attachments--scroll *{}:host .attachments--scroll *::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host .attachments--scroll *{}:host .attachments--scroll *::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host .attachments--scroll *::-webkit-scrollbar-corner{display:none}:host .attachments--scroll::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host .attachments--scroll{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host .attachments--scroll{}:host .attachments--scroll::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host .attachments--scroll{}:host .attachments--scroll::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host .attachments--scroll::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host .attachments--scroll{}:host .attachments--scroll::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host .attachments--scroll{}:host .attachments--scroll::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host .attachments--scroll::-webkit-scrollbar-corner{display:none}:host .attachments.has-attachment-scrollbar{padding-bottom:0.25rem}:host .attachments ::slotted(ix-chat-attachment){flex:0 1 auto}:host .attachments--scroll ::slotted(ix-chat-attachment){flex:0 0 auto}:host textarea{flex:1 1 auto;width:100%;min-height:2rem;padding:0;border:0;outline:0;box-sizing:border-box;resize:none;background:transparent;color:inherit;font:inherit}:host textarea::-moz-placeholder{color:var(--theme-input-hint--color)}:host textarea::placeholder{color:var(--theme-input-hint--color)}:host .character-limit{display:flex;align-items:center;gap:var(--theme-space-1);width:100%;margin-top:var(--theme-space-2)}:host .character-limit ix-icon{flex:0 0 auto}:host .character-limit--soft ix-icon{color:var(--theme-color-info)}:host .character-limit--hard ix-icon{color:var(--theme-color-warning)}:host .action-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:2rem;margin-top:var(--theme-space-1)}:host .left-actions,:host .right-actions{display:flex;align-items:center;gap:var(--theme-space-1)}:host .left-actions{flex:1 1 auto;min-width:0}:host .right-actions{flex:0 0 auto;justify-content:flex-end}:host .disclaimer{display:block;width:100%;margin-top:var(--theme-space-1);text-align:center}:host(.has-follow-up) .follow-up-prompts{display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .chat-input{border-color:var(--theme-input--border-color--disabled);box-shadow:none;color:var(--theme-input--color--disabled);background-color:transparent}:host(.disabled) textarea::-moz-placeholder{color:transparent}:host(.disabled) textarea::placeholder{color:transparent}:host(.readonly) .chat-input{border-color:var(--theme-input--border-color--readonly);box-shadow:none;background-color:transparent}:host(.readonly) .chat-input:hover,:host(.readonly) .chat-input:focus-within{border-color:var(--theme-input--border-color--readonly);outline:none}`;
+
+const ChatInput = class extends Mixin(...DefaultMixins, ComponentIdMixin) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 7);
+        this.ixBlur = createEvent(this, "ixBlur", 7);
+        this.ixChange = createEvent(this, "ixChange", 7);
+        this.promptSubmit = createEvent(this, "promptSubmit", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.formInternals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.formInternals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.formInternals;
+        }
+    }
+    get hostElement() { return getElement(this); }
+    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 formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "minRows": [{
+                "onRowsChange": 0
+            }],
+        "maxRows": [{
+                "onRowsChange": 0
+            }]
+    }; }
+};
+ChatInput.style = chatInputCss();
+
+export { ChatInput as ix_chat_input };

package/dist/esm/ix-chat-user-message.entry.js

@@ -0,0 +1,64 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
+
+const chatUserMessageCss = () => `:host{display:flex;flex-direction:column;align-items:flex-end;width:100%;min-width:0;box-sizing:border-box}:host *,:host *::after,:host *::before{box-sizing:border-box}:host *::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host *{}:host *::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host *{}:host *::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host *::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host *{}:host *::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host *{}:host *::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host *::-webkit-scrollbar-corner{display:none}:host .message{width:-moz-fit-content;width:fit-content;min-width:max(15.375rem, 45%);max-width:80%;box-sizing:border-box;padding:var(--theme-space-2) var(--theme-space-3);border-radius:var(--theme-default-border-radius);background-color:var(--theme-color-component-8);color:var(--theme-color-std-text)}:host .attachments{display:none;justify-content:flex-end;flex-wrap:wrap;gap:var(--theme-space-1) 0;width:100%;max-width:75%;margin-bottom:var(--theme-space-1);overflow:hidden}:host .attachments ::slotted(ix-chat-attachment){flex:0 1 6.375rem;padding-left:var(--theme-space-1)}:host .attachment-overflow{margin-bottom:var(--theme-space-1);--ix-dropdown-button-border-radius-left:var(--theme-small-border-radius);--ix-dropdown-button-border-radius-right:var(--theme-small-border-radius)}:host .message-text{display:block;overflow-wrap:anywhere;white-space:pre-wrap}:host .actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--theme-space-1);min-height:2rem;margin-top:var(--theme-space-1);opacity:0;transition:opacity 0.2s ease-in-out}:host .actions ::slotted(ix-icon-button){flex:0 0 auto}:host(.has-attachments) .attachments{display:flex}:host(:focus-visible){outline:none}:host(:focus-visible) .message{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-focus-outline-offset)}:host(.has-actions:focus) .actions,:host(.has-actions:hover) .actions,:host(.has-actions:focus-within) .actions{opacity:1}`;
+
+const ChatUserMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostElement() { return getElement(this); }
+    /**
+     * Text displayed in the user message bubble.
+     */
+    message;
+    hasActions = false;
+    hasAttachments = false;
+    hasMessageContent = false;
+    componentWillLoad() {
+        this.updateHasMessageContent();
+    }
+    handleActionsSlotChange(event) {
+        const slot = event.target;
+        this.hasActions =
+            slot.assignedElements({
+                flatten: true,
+            }).length > 0;
+    }
+    handleAttachmentsSlotChange(event) {
+        const slot = event.target;
+        this.hasAttachments =
+            slot.assignedElements({
+                flatten: true,
+            }).length > 0;
+    }
+    handleMessageSlotChange(event) {
+        this.updateHasMessageContent(event.target);
+    }
+    hasAssignedMessageContent(slot) {
+        if (slot) {
+            return slot.assignedNodes({ flatten: true }).some((node) => {
+                return node.nodeType === 1 || !!node.textContent?.trim();
+            });
+        }
+        return Array.from(this.hostElement.childNodes).some((node) => {
+            if (node.nodeType === 1) {
+                return node.slot === '';
+            }
+            return !!node.textContent?.trim();
+        });
+    }
+    updateHasMessageContent(slot) {
+        this.hasMessageContent = this.hasAssignedMessageContent(slot);
+    }
+    render() {
+        return (h(Host, { key: 'e9376e0015376ada61acab85f71f2e4ecd6352ef', class: {
+                'has-actions': this.hasActions,
+                'has-attachments': this.hasAttachments,
+            }, tabIndex: this.hasActions ? 0 : undefined }, h("div", { key: '89f8e746ec79a7ec1e8489a7ea658055c807e37b', class: "attachments" }, h("slot", { key: '7d8162d206e2fa2f55d14982b78ae97e975f5bf4', name: "attachments", onSlotchange: (event) => this.handleAttachmentsSlotChange(event) })), h("div", { key: '2169c12123fa3e36933274dcdc79a55a87533f29', class: "message" }, h("ix-typography", { key: '8b502f9e39d9eba42cbe39919eb88388d0d4fbac', class: "message-text", format: "body", textColor: "std" }, this.message, h("span", { key: '3d8a626592b4ccdcbb4ad60025b10fba74882e70', style: {
+                display: this.hasMessageContent ? undefined : 'none',
+            } }, h("slot", { key: '4030806fcddb274fa0dd35dc89367ecf75cf2868', onSlotchange: (event) => this.handleMessageSlotChange(event) })))), h("div", { key: '3f740a55deaaa178d8939730d2553c7b32b1f21d', class: "actions", "aria-hidden": !this.hasActions ? 'true' : undefined }, h("slot", { key: '465edf12f452fe3c88f910e0d657b4c76894878c', name: "actions", onSlotchange: (event) => this.handleActionsSlotChange(event) }))));
+    }
+};
+ChatUserMessage.style = chatUserMessageCss();
+
+export { ChatUserMessage as ix_chat_user_message };

package/dist/esm/ix-chat.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host } from './index-EBgS4zhE.js';
+
+const chatCss = () => `:host{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;min-width:27rem;max-width:calc(45rem + var(--theme-space-5));box-sizing:border-box}:host *,:host *::after,:host *::before{box-sizing:border-box}:host *::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host *{}:host *::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host *{}:host *::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host *::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host *{}:host *::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host *{}:host *::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host *::-webkit-scrollbar-corner{display:none}:host .messages{display:flex;flex:1 1 auto;flex-direction:column;align-items:center;gap:var(--theme-space-5);min-height:0;width:100%;padding:var(--theme-space-5);box-sizing:border-box;overflow-y:auto}:host .messages ::slotted(*){width:100%;max-width:45rem;flex:0 0 auto}:host .prompt{display:none;flex:0 0 auto;width:100%;padding:var(--theme-space-5);box-sizing:border-box}:host .prompt ::slotted(*){width:100%;max-width:45rem}:host(.has-prompt) .prompt{display:flex;justify-content:center}`;
+
+const Chat = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    hasPrompt = false;
+    hasAssignedContent(slot) {
+        return slot.assignedNodes({ flatten: true }).some((node) => {
+            return node.nodeType === 1 || !!node.textContent?.trim();
+        });
+    }
+    handlePromptSlotChange(event) {
+        this.hasPrompt = this.hasAssignedContent(event.target);
+    }
+    render() {
+        return (h(Host, { key: 'b4d659f28fb34320f986c5b046ff794c9b2a0742', class: {
+                'has-prompt': this.hasPrompt,
+            } }, h("div", { key: '0790bede975ba3cba978ec9425d80195fa380b83', class: "messages", part: "messages" }, h("slot", { key: 'f3a2c8f7e337fb3b93a19098a3f3556377692f7c' })), h("div", { key: '4975b7ed690b957d87307fcde8c8c785883bb2b0', class: "prompt", part: "prompt" }, h("slot", { key: 'd99a7efca4cff53916781d3bb1c089ba63f356c0', name: "prompt", onSlotchange: (event) => this.handlePromptSlotChange(event) }))));
+    }
+};
+Chat.style = chatCss();
+
+export { Chat as ix_chat };