@siemens/ix 5.1.1 → 5.2.1

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

@@ -0,0 +1,406 @@
+'use strict';
+
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-BQht1mLe.js');
+var component = require('./component-DgA9FH-W.js');
+var id_mixin = require('./id.mixin-DINDQztK.js');
+var makeRef = require('./make-ref-CHsa3FY7.js');
+var mutationObserver = require('./mutation-observer-DE0YMfYu.js');
+var requestAnimationFrame = require('./requestAnimationFrame-B0rWQ3G-.js');
+require('./focus-utilities-5SZMxJg4.js');
+require('./shadow-dom-BL5F7RFW.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 index.Mixin(...component.DefaultMixins, id_mixin.ComponentIdMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange", 7);
+        this.ixBlur = index.createEvent(this, "ixBlur", 7);
+        this.ixChange = index.createEvent(this, "ixChange", 7);
+        this.promptSubmit = index.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 index.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.makeRef((attachments) => {
+        this.initAttachmentResizeObserver(attachments);
+        this.scheduleAttachmentScrollbarUpdate();
+    });
+    textareaRef = makeRef.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 (index.h("ix-typography", { class: {
+                'character-limit': true,
+                'character-limit--soft': state === 'soft',
+                'character-limit--hard': state === 'hard',
+            }, textColor: 'std' }, index.h("ix-icon", { "aria-hidden": "true", name: state === 'hard' ? index$1.iconWarning : index$1.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 = mutationObserver.createMutationObserver(() => {
+            this.updateHasFollowUp();
+            this.scheduleAttachmentScrollbarUpdate();
+        });
+        this.attachmentMutationObserver.observe(this.hostElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    scheduleAttachmentScrollbarUpdate() {
+        if (this.isAttachmentScrollbarUpdateQueued) {
+            return;
+        }
+        this.isAttachmentScrollbarUpdateQueued = true;
+        requestAnimationFrame.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
+            ? index$1.iconCircleStop
+            : index$1.iconSendRightFilled;
+        return (index.h(index.Host, { key: '57119b34ddaf318358f64fe9272ab935d5cce4d6', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+                'has-follow-up': this.hasFollowUp,
+            } }, index.h("div", { key: '3c599716bfe45293597bcebd909f85538cbd7ace', class: "follow-up-prompts" }, index.h("slot", { key: '5ced96c5e38f66a6cba6e484fb7463866123554c', name: "follow-up", onSlotchange: (event) => this.handleFollowUpSlotChange(event) })), index.h("div", { key: '62632e005d9092fa70f20ffc6db6f46f703a6b62', class: "chat-input" }, index.h("div", { key: 'b0b0260bc9299c099173d935d785f907538f0bb3', ref: this.attachmentsRef, class: {
+                attachments: true,
+                'attachments--scroll': true,
+                'has-attachment-scrollbar': this.hasAttachmentScrollbar,
+                'has-attachments': this.hasAttachments,
+            } }, index.h("slot", { key: 'fd918353d878939ec84226f289b001309e351d5b', name: "attachments", onSlotchange: (event) => this.handleAttachmentsSlotChange(event) })), index.h("textarea", { key: 'bd5f1e802b0c3345c2c89a94000b4eca14d70aae', 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(), index.h("div", { key: '411a6b251d2da6adf2f9eb54169989473a657969', class: "action-row" }, index.h("div", { key: '02ddf0d61f37b2c4676efd0e3a36cec2474656e7', class: "left-actions" }, index.h("slot", { key: 'f11e87a608ffd5bc637b01fd5728af4bbfb8fe51', name: "start" })), index.h("div", { key: 'd3541a9bc599a26619a45bbc33c989f3f735645e', class: "right-actions" }, index.h("slot", { key: '7958f8473300159cbd52635226f0ae08ff0375ec', name: "end" }), index.h("ix-icon-button", { key: '07927dbf863b949f92239cfb07bb118cdd2b8963', "aria-label": isProcessing ? 'Stop processing' : 'Submit prompt', class: "submit-button", disabled: disabledSubmitButton, icon: submitButtonIcon, size: "24", variant: "tertiary", onClick: () => this.submitPrompt() })))), this.disclaimer && (index.h("ix-typography", { key: 'da911e4010e69b0fb026301b5df1c2369b68bc5d', 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();
+
+exports.ix_chat_input = ChatInput;

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

@@ -0,0 +1,66 @@
+'use strict';
+
+var index = require('./index-DnclGKUw.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get hostElement() { return index.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 (index.h(index.Host, { key: 'e9376e0015376ada61acab85f71f2e4ecd6352ef', class: {
+                'has-actions': this.hasActions,
+                'has-attachments': this.hasAttachments,
+            }, tabIndex: this.hasActions ? 0 : undefined }, index.h("div", { key: '89f8e746ec79a7ec1e8489a7ea658055c807e37b', class: "attachments" }, index.h("slot", { key: '7d8162d206e2fa2f55d14982b78ae97e975f5bf4', name: "attachments", onSlotchange: (event) => this.handleAttachmentsSlotChange(event) })), index.h("div", { key: '2169c12123fa3e36933274dcdc79a55a87533f29', class: "message" }, index.h("ix-typography", { key: '8b502f9e39d9eba42cbe39919eb88388d0d4fbac', class: "message-text", format: "body", textColor: "std" }, this.message, index.h("span", { key: '3d8a626592b4ccdcbb4ad60025b10fba74882e70', style: {
+                display: this.hasMessageContent ? undefined : 'none',
+            } }, index.h("slot", { key: '4030806fcddb274fa0dd35dc89367ecf75cf2868', onSlotchange: (event) => this.handleMessageSlotChange(event) })))), index.h("div", { key: '3f740a55deaaa178d8939730d2553c7b32b1f21d', class: "actions", "aria-hidden": !this.hasActions ? 'true' : undefined }, index.h("slot", { key: '465edf12f452fe3c88f910e0d657b4c76894878c', name: "actions", onSlotchange: (event) => this.handleActionsSlotChange(event) }))));
+    }
+};
+ChatUserMessage.style = chatUserMessageCss();
+
+exports.ix_chat_user_message = ChatUserMessage;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-DnclGKUw.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) {
+        index.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 (index.h(index.Host, { key: 'b4d659f28fb34320f986c5b046ff794c9b2a0742', class: {
+                'has-prompt': this.hasPrompt,
+            } }, index.h("div", { key: '0790bede975ba3cba978ec9425d80195fa380b83', class: "messages", part: "messages" }, index.h("slot", { key: 'f3a2c8f7e337fb3b93a19098a3f3556377692f7c' })), index.h("div", { key: '4975b7ed690b957d87307fcde8c8c785883bb2b0', class: "prompt", part: "prompt" }, index.h("slot", { key: 'd99a7efca4cff53916781d3bb1c089ba63f356c0', name: "prompt", onSlotchange: (event) => this.handlePromptSlotChange(event) }))));
+    }
+};
+Chat.style = chatCss();
+
+exports.ix_chat = Chat;

package/dist/cjs/ix-checkbox-group.cjs.entry.js

@@ -2,10 +2,10 @@
 
 var index = require('./index-DnclGKUw.js');
 var makeRef = require('./make-ref-CHsa3FY7.js');
-var validation = require('./validation-DJaUH-UR.js');
+var validation = require('./validation-B1izlD8M.js');
 require('./index-B4J4JK0P.js');
 
-const checkboxGroupCss = () => `:host{display:inline-block;position:relative}:host .checkbox-container{display:flex;flex-direction:column;gap:1rem;margin:0.375rem 0;flex-wrap:wrap}:host .checkbox-container.row-layout{flex-direction:row}`;
+const checkboxGroupCss = () => `:host{display:inline-block;position:relative}:host .checkbox-container{display:flex;flex-direction:column;gap:0.5rem;margin:0.375rem 0;flex-wrap:wrap}:host .checkbox-container.row-layout{flex-direction:row}`;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -108,10 +108,10 @@ const CheckboxGroup = class {
         return Promise.resolve(this.checkboxElements.some((checkbox) => checkbox.checked));
     }
     render() {
-        return (index.h(index.Host, { key: 'd6718d48f2596083126ff7d697c1defea55d5a03', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, index.h("ix-field-wrapper", { key: 'dc0cdf907e3aed04ba33dd10802af6cad2621d58', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, index.h("div", { key: '95782aa76994a8867fa31a7f4ba3a5c5fa8811bb', class: {
+        return (index.h(index.Host, { key: '7f2ab8f11b50445a818721c3c9466189f38c2f61', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, index.h("ix-field-wrapper", { key: '79fe9178363a3f9ed7c44cb59ef3ec6031fcd653', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, index.h("div", { key: 'b099ba2443912a77775cad96fd007a92e1b312e1', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, index.h("slot", { key: 'f0c035b2293f104bdd57bcebb392c2d9fdca9c56' })))));
+            } }, index.h("slot", { key: '828cdaf4ae4295b0c1597987d4ca7f1e9fbe80c7' })))));
     }
 };
 __decorate([