'use strict';

var index = require('./index-C_OnxXhP.js');
var index_esm = require('./index.esm-C1i_NocP.js');

const chatIconListCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limebb-chat-icon-list){display:flex;align-items:center;gap:0.5rem;margin-right:auto;max-width:calc(100% - 2rem);padding:0 0.25rem}.label{font-size:0.75rem;color:rgb(var(--contrast-900))}.icons{display:flex;align-items:center;gap:0.25rem}.icons:hover limel-icon,.icons:focus-within limel-icon{margin-left:0 !important}limel-icon{--icon-background-color:rgb(var(--contrast-500), 0.5);transition:margin-left 0.2s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.2s ease, box-shadow 0.2s ease;position:relative;width:1.75rem;padding:0.375rem;flex-shrink:0}limel-icon:focus{outline:none}limel-icon:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon:not(.is-pending):not(:first-child){margin-left:-0.75rem}limel-icon.is-pending{animation:pending 3s linear infinite;padding:0.5rem}limel-icon.is-pending:after{content:"";position:absolute;inset:0;width:1.75rem;height:1.75rem;border-radius:50%;pointer-events:none;border-radius:50%;border:0.125rem solid rgb(var(--color-white), 0.5);border-top-color:rgb(var(--color-black), 0.8);mix-blend-mode:color-dodge;animation:spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite}@keyframes pending{0%,20%,80%,100%{filter:grayscale(0%)}45%,55%{filter:grayscale(100%)}}@keyframes spin{to{transform:rotate(360deg)}}`;

const ChatIconListComponent = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        return (index.h(index.Host, { key: 'efe87c0a35ebc87ae04a61422d3b7410189c8f7e', id: this.item.id }, this.renderLabel(), index.h("div", { key: 'd0bdaf7023492f926f96449a0d5bc49aa800ecac', class: "icons" }, this.item.icons.map((icon, index) => this.renderIcon(icon, index)))));
    }
    renderLabel() {
        if (!this.item.label) {
            return;
        }
        return index.h("span", { class: "label" }, this.item.label);
    }
    renderIcon(icon, index$1) {
        const iconId = `icon-${this.item.id}-${index$1}`;
        return [
            index.h("limel-icon", { tabIndex: 0, key: index$1, id: iconId, badge: true, name: icon.name, class: { 'is-pending': !!icon.pending }, style: {
                    color: icon.color,
                    'background-color': icon.backgroundColor,
                } }),
            this.renderTooltip(icon, iconId),
        ];
    }
    renderTooltip(icon, iconId) {
        if (!icon.title) {
            return;
        }
        return index.h("limel-tooltip", { label: icon.title, elementId: iconId });
    }
};
ChatIconListComponent.style = chatIconListCss();

const chatItemCss = () => `@charset "UTF-8";*{box-sizing:border-box}:host(limebb-chat-item){display:flex;flex-direction:column;gap:0.25rem;min-width:0;min-height:0;max-width:calc(100% - 2rem)}.bubble-content{display:flex;gap:0.25rem;min-width:0;min-height:0}:host(limebb-chat-item:hover) .helper-text,:host(limebb-chat-item:hover) .timestamp,:host(limebb-chat-item:focus-within) .helper-text,:host(limebb-chat-item:focus-within) .timestamp{opacity:1}:host(limebb-chat-item.mine){margin-left:auto}:host(limebb-chat-item.mine) .item{border-bottom-right-radius:0.125rem;background-color:rgb(var(--color-sky-default), 0.2)}:host(limebb-chat-item.mine) .bubble-content{justify-content:end}:host(limebb-chat-item.mine) .icon-picture{order:2}:host(limebb-chat-item.theirs){margin-right:auto}:host(limebb-chat-item.theirs) .item{border-bottom-left-radius:0.125rem;background-color:rgb(var(--contrast-300), 0.7)}.item{display:flex;flex-direction:column;min-width:0;border-radius:1.25rem;padding:0 0.25rem 0.25rem 0.25rem;backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}.icon-picture{display:flex;flex-direction:column;gap:0.5rem;align-items:center;justify-content:flex-end}.icon-picture:has(.author-avatar) limel-icon{width:1.25rem;padding:0.125rem}.icon{--icon-background-color:rgb(var(--contrast-500), 0.5);flex-shrink:0;padding:0.375rem;width:2.25rem;backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}limel-ai-avatar.author-avatar{background-color:rgb(var(--color-glaucous-darker))}header{display:flex;justify-content:space-between;align-items:center;min-height:2rem;padding-left:0.5rem}header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.body-text{padding:0.25rem 0.5rem}footer{display:flex;justify-content:space-between;align-items:end;gap:0.5rem;font-size:x-small}footer:not(:empty){padding:0 0.25rem 0.125rem 0.5rem}footer *{transition:opacity 0.2s ease;opacity:0.4}.timestamp{margin-left:auto}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500;text-decoration:none}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-action-bar{--action-bar-item-height:1.75rem;transition:opacity 0.2s ease;justify-content:flex-start;opacity:0.8}.action-bar{display:grid;transition:grid-template-rows var(--limebb-promoted-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-promoted-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-promoted-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-promoted-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-promoted-action-bar-grid-template-rows-transition-delay);padding-top:0;padding-bottom:0.75rem}:host(limebb-chat-item:hover) .action-bar,:host(limebb-chat-item:focus-within) .action-bar,:host(limebb-chat-item:focus-visible) .action-bar{--limebb-promoted-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-chat-item:hover) limel-action-bar,:host(limebb-chat-item:focus-within) limel-action-bar,:host(limebb-chat-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-chat-item:hover),:host(limebb-chat-item:focus-within){--limebb-promoted-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-promoted-action-bar-grid-template-rows-transition-delay:0.7s}.action-bar{min-width:0;width:calc(100% - calc(2rem + 0.25rem))}:host(limebb-chat-item.theirs) .action-bar{margin-left:calc(2rem + 0.25rem)}:host(limebb-chat-item[has-error]:not([has-error=false])) .bubble-content{cursor:help}:host(limebb-chat-item[has-error]:not([has-error=false])) .item{border:1px solid rgb(var(--color-red-default))}:host(limebb-chat-item[has-error]:not([has-error=false])) .error-sign{color:rgb(var(--color-red-default));flex-shrink:0;width:1.25rem;align-self:center}:host(limebb-chat-item.mine[has-error]:not([has-error=false])) .action-bar{padding-left:1.25rem}:host(limebb-chat-item.mine[has-error]:not([has-error=false])) .helper-text{opacity:1;color:rgb(var(--color-red-default))}`;

const ChatListItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * Indicates whether there is an error,
         * for example when message was not sent or delivered.
         */
        this.hasError = false;
        this.createActionBarItem = (action) => {
            var _a, _b;
            if ('separator' in action) {
                return action;
            }
            let item = {
                value: action,
                text: (_a = action.label) !== null && _a !== void 0 ? _a : '',
                secondaryText: action.description,
                disabled: action.disabled,
            };
            if (!action.label && action.icon) {
                item = Object.assign(Object.assign({}, item), { icon: action.icon, text: (_b = action.description) !== null && _b !== void 0 ? _b : item.text, iconOnly: true });
            }
            else if (action.icon) {
                item = Object.assign(Object.assign({}, item), { icon: action.icon });
            }
            return item;
        };
        this.handleActionBarItemSelect = (event) => {
            var _a;
            event.stopPropagation();
            const command = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.command;
            if (command) {
                this.commandbus.handle(command);
            }
        };
        this.createMenuItem = (action) => {
            var _a, _b;
            if ('separator' in action) {
                return action;
            }
            return {
                value: action,
                text: (_a = action.label) !== null && _a !== void 0 ? _a : '',
                secondaryText: action.description,
                disabled: action.disabled,
                icon: (_b = action.icon) !== null && _b !== void 0 ? _b : '',
            };
        };
        this.handleMenuItemSelect = (event) => {
            var _a;
            event.stopPropagation();
            const command = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.command;
            if (command) {
                this.commandbus.handle(command);
            }
        };
    }
    render() {
        const helperTextId = `helper-text-${this.item.id}`;
        return (index.h(index.Host, { key: '971b486298a8f88790178592c174561bdc3b7b13', id: this.item.id, "aria-describedby": this.helperText ? helperTextId : undefined, "aria-live": this.hasError ? 'assertive' : 'off', class: {
                [`${this.item.ui}`]: true,
            } }, index.h("div", { key: 'b5cde4080a9c6e4d30d89b8d9a323e41d913d00b', class: "bubble-content" }, index.h("div", { key: '1d674bfb86bd0356bbbb1244848f7f9fe2f04916', class: "icon-picture" }, this.renderIcon(), this.renderAuthorPicture()), this.renderErrorSign(), index.h("div", { key: 'b4c34568322082230de44312c42b98d86b5a28fc', class: "item" }, this.renderHeader(), this.renderValue(), index.h("footer", { key: 'b9a5026726ac13dfe01e02263ace3817c3d71ad4' }, this.renderHelperText(helperTextId), this.renderTimestamp()))), this.renderPromotedAction()));
    }
    renderErrorSign() {
        if (!this.hasError) {
            return;
        }
        return index.h("limel-icon", { class: "error-sign", name: "brake_warning" });
    }
    renderHeader() {
        var _a;
        if (!((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name)) {
            return;
        }
        return (index.h("header", null, this.renderAuthorName(), index.h("div", { class: "action-buttons" }, this.renderUnpromotedActionsMenu())));
    }
    renderIcon() {
        var _a, _b, _c, _d;
        if (!this.item.icon) {
            return;
        }
        return (index.h("limel-icon", { class: "icon", badge: true, name: (_b = (_a = this.item.icon) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'dot_circle', style: {
                color: `${(_c = this.item.icon) === null || _c === void 0 ? void 0 : _c.color}`,
                'background-color': `${(_d = this.item.icon) === null || _d === void 0 ? void 0 : _d.backgroundColor}`,
            } }));
    }
    renderHelperText(helperTextId) {
        if (!this.helperText) {
            return;
        }
        return (index.h("span", { class: "helper-text", id: helperTextId }, this.helperText));
    }
    renderValue() {
        if (!this.item.value) {
            return;
        }
        return (index.h("limel-markdown", { class: "body-text reset-img-height", value: this.item.value }));
    }
    renderAuthorName() {
        var _a, _b;
        if (typeof ((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name) === 'string') {
            return index.h("span", { class: "author" }, this.item.author.name);
        }
        if (typeof ((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.name) === 'object') {
            const { href, title, text } = this.item.author.name;
            return (index.h("a", { class: "author", href: href, title: title }, text));
        }
    }
    renderAuthorPicture() {
        var _a;
        if (!((_a = this.item.author) === null || _a === void 0 ? void 0 : _a.picture)) {
            return;
        }
        // If the "picture url" is set to "limel-ai-avatar",
        // we render a limel-ai-avatar component instead of an image.
        if (this.item.author.picture === 'limel-ai-avatar') {
            return index.h("limel-ai-avatar", { class: "author-avatar" });
        }
        return (index.h("img", { class: "author-avatar", loading: "lazy", src: this.item.author.picture }));
    }
    renderUnpromotedActionsMenu() {
        var _a, _b;
        if (!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length)) {
            return;
        }
        const items = this.item.unpromotedActions.map(this.createMenuItem);
        return (index.h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, index.h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.more-actions') })));
    }
    renderPromotedAction() {
        if (!this.item.promotedActions) {
            return;
        }
        const actions = this.item.promotedActions.map(this.createActionBarItem);
        return (index.h("div", { class: "action-bar" }, index.h("div", { class: "action-bar-hider" }, index.h("limel-action-bar", { accessibleLabel: "Action bar", actions: actions, layout: "fullWidth", onItemSelected: this.handleActionBarItemSelect }))));
    }
    renderTimestamp() {
        const timestamp = this.item.timestamp;
        if (!timestamp) {
            return;
        }
        return (index.h("span", { class: "timestamp" }, this.dateTimeFormatter.format(timestamp, 'timeofday')));
    }
    get dateTimeFormatter() {
        return this.platform.get(index_esm.n.DateTimeFormatter);
    }
    get translator() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.n.Translate);
    }
    get commandbus() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.n.CommandBus);
    }
};
ChatListItem.style = chatItemCss();

const typingIndicatorCss = () => `*{box-sizing:border-box}.typing-ellipsis{position:relative;display:inline-flex;align-items:center;gap:0.25rem;height:1.5rem;padding:0 0.5rem;border-radius:10rem;border-bottom-left-radius:0.125rem;background-color:rgb(var(--contrast-600), 0.4);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem)}.circle{position:relative;height:0.5rem;width:0.5rem;background:rgb(var(--contrast-800));border-radius:50%}.circle:first-of-type{animation:ellipsis-typing-indicator 1.2s infinite}.circle:nth-of-type(2){animation:ellipsis-typing-indicator 1.2s infinite 0.2s}.circle:nth-of-type(3){animation:ellipsis-typing-indicator 1.2s infinite 0.4s}@keyframes ellipsis-typing-indicator{0%{top:0}6.25%{top:-1px}12.5%{top:0;background:rgb(var(--contrast-1000))}18.75%{top:1px}25%{top:0}}`;

const TypingIndicator = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        return (index.h("div", { key: '23c76c03d08f495a885b7bfef11ef133d1da53a9', class: "typing-ellipsis" }, index.h("div", { key: '93ec029e09591839a45f41a49d42e4eea3d5127f', class: "circle" }), index.h("div", { key: '2ed2c1c943556f0f6e315d97cbdf7818773901c8', class: "circle" }), index.h("div", { key: '3fa7646cef9c5e3eecea9d9e8ed8bc9868505878', class: "circle" })));
    }
};
TypingIndicator.style = typingIndicatorCss();

exports.limebb_chat_icon_list = ChatIconListComponent;
exports.limebb_chat_item = ChatListItem;
exports.limebb_typing_indicator = TypingIndicator;
