import { p as proxyCustomElement, H, e as createEvent, w as writeTask, h, c as Host } from './p-ae373651.js';
import { e as defaultIconPack, i as useLanguage } from './p-5b3a7f00.js';
import { M as MAX_TEXT_LENGTH } from './p-0db812c2.js';
import { a as gracefulStorage } from './p-a83ccdbd.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { d as defineCustomElement$b } from './p-85587a5c.js';
import { d as defineCustomElement$a } from './p-1a6308ec.js';
import { d as defineCustomElement$9 } from './p-0e5b6daf.js';
import { d as defineCustomElement$8 } from './p-5ba9c3d1.js';
import { d as defineCustomElement$7 } from './p-0da52a33.js';
import { d as defineCustomElement$6 } from './p-3e0452c4.js';
import { d as defineCustomElement$5 } from './p-549ab58f.js';
import { d as defineCustomElement$4 } from './p-e6245534.js';
import { d as defineCustomElement$3 } from './p-670b184f.js';
import { d as defineCustomElement$2 } from './p-51b6f520.js';
import { d as defineCustomElement$1 } from './p-bece0226.js';

const rtkChatComposerViewCss = ":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--rtk-font-family, sans-serif);\n  font-size: 14px;\n  position: relative;\n}\n\n.quoted-message-container {\n  margin-bottom: var(--rtk-space-2, 8px);\n  display: flex;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n  border-radius: var(--rtk-border-radius-md, 8px);\n  border: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.quoted-message-container .quoted-message {\n  flex: 1 1 0%;\n  padding: var(--rtk-space-2, 8px);\n  border-radius: var(--rtk-border-radius-md, 8px);\n  max-height: var(--rtk-space-24, 96px);\n  overflow-y: auto;\n  word-break: break-all;\n}\n\n.quoted-message-container .quoted-message blockquote {\n  display: none;\n}\n\n.quoted-message-container rtk-icon.dismiss {\n  margin-left: auto;\n  height: var(--rtk-space-5, 20px);\n  width: var(--rtk-space-5, 20px);\n  padding: var(--rtk-space-2, 8px);\n  border-radius: var(--rtk-border-radius-md, 8px);\n  color: rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));\n}\n\n.quoted-message-container rtk-icon.dismiss:hover {\n  cursor: pointer;\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.quoted-message-container rtk-icon.dismiss {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.composer-container {\n  position: relative;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  border-radius: var(--rtk-border-radius-md, 8px);\n  overflow: hidden;\n  border: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n}\n\n.composer-container > .composers {\n    min-height: 60px;\n  }\n\n@container chatcontainer (height < 360px) {\n    .composer-container > .composers {\n      min-height: 30px;\n    }\n}\n\n.chat-buttons {\n  padding: var(--rtk-space-3, 12px);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  --tw-bg-opacity: 1;\n  background-color: rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));\n  color: rgb(var(--rtk-colors-text-1000, 255 255 255));\n}\n\n.chat-buttons .right {\n  z-index: 10;\n}\n\n.chat-buttons .right .edit-buttons {\n  display: flex;\n  gap: var(--rtk-space-2, 8px);\n}\n\n.chat-buttons > div {\n  display: flex;\n  align-items: center;\n}\n\nrtk-emoji-picker {\n  z-index: 20;\n  position: absolute;\n  top: calc(var(--rtk-space-72, 288px) * -1);\n  border-top: var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));\n  animation: 0.3s slide-up ease;\n}\n\n@keyframes slide-up {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0%);\n  }\n}\n";
const RtkChatComposerViewStyle0 = rtkChatComposerViewCss;

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;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const messageLimits = {
    messagesSent: 0,
    startTime: 0,
};
const RtkChatComposerView = /*@__PURE__*/ proxyCustomElement(class RtkChatComposerView extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.onNewMessage = createEvent(this, "newMessage", 7);
        this.onEditMessage = createEvent(this, "editMessage", 7);
        this.onEditCancel = createEvent(this, "editCancel", 7);
        this.onQuotedMessageDismiss = createEvent(this, "quotedMessageDismiss", 7);
        /** Whether user can send text messages */
        this.canSendTextMessage = true;
        this.isSending = false;
        /** Whether user can send file messages */
        this.canSendFiles = true;
        /** Message to be pre-populated */
        this.message = '';
        /** Quote message to be displayed */
        this.quotedMessage = '';
        /** Key for storing message in localStorage */
        this.storageKey = 'rtk-text-message';
        /** Placeholder for text input */
        this.inputTextPlaceholder = 'Enter your message';
        /** Sets composer to edit mode */
        this.isEditing = false;
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        /** Whether to show emoji picker */
        this.disableEmojiPicker = false;
        /** Rate limits */
        this.rateLimits = {
            period: 60,
            maxInvocations: 60,
        };
        this.fileToUpload = null;
        this.isEmojiPickerOpen = false;
        this.disableSendButton = false;
        this.rateLimitsBreached = false;
        this.textMessage = '';
        this.sendFile = () => {
            if (!this.canSendFiles) {
                return;
            }
            if (this.fileToUpload.type === 'image') {
                this.onNewMessage.emit({
                    type: 'image',
                    image: this.fileToUpload.file,
                });
            }
            else {
                this.onNewMessage.emit({ type: 'file', file: this.fileToUpload.file });
            }
            this.fileToUpload = null;
        };
        this.handleSendMessage = () => {
            if (!this.canSendTextMessage || this.rateLimitsBreached) {
                return;
            }
            if (this.fileToUpload !== null) {
                this.sendFile();
                return;
            }
            const message = this.textMessage;
            const currentTime = Date.now();
            if (currentTime - messageLimits.startTime > this.rateLimits.period * 1000) {
                messageLimits.startTime = currentTime;
                messageLimits.messagesSent = 0;
            }
            messageLimits.messagesSent += 1;
            this.checkRateLimitBreached(currentTime);
            if (message.length > 0) {
                this.onNewMessage.emit({ type: 'text', message });
                this.cleanup();
            }
        };
        this.handleEditMessage = () => {
            this.onEditMessage.emit(this.textMessage);
            this.cleanup();
        };
        this.handleEditCancel = () => {
            this.onEditCancel.emit();
            this.cleanup();
        };
        this.onTextChangeHandler = (event) => {
            var _a;
            this.textMessage = event.detail;
            if (this.textMessage.length >= ((_a = this.maxLength) !== null && _a !== void 0 ? _a : MAX_TEXT_LENGTH)) {
                this.disableSendButton = true;
            }
            else if (this.disableSendButton) {
                this.disableSendButton = false;
            }
            gracefulStorage.setItem(this.storageKey, event.detail);
        };
        this.onKeyDownHandler = (event) => {
            if (event.key === 'Enter' && event.shiftKey) {
                return;
            }
            if (this.disableSendButton) {
                return;
            }
            if (event.key === 'Enter') {
                event.preventDefault();
                if (this.isEditing) {
                    this.handleEditMessage();
                }
                else {
                    this.handleSendMessage();
                }
            }
        };
        this.onFileUploadHandler = (type, file) => {
            this.fileToUpload = { type, file };
        };
        this.onQuotedMessageDismissHandler = () => {
            this.onQuotedMessageDismiss.emit();
        };
        this.cleanup = () => {
            this.textMessage = '';
            this.fileToUpload = null;
            gracefulStorage.setItem(this.storageKey, '');
            this.$textComposer.setText('', true);
            this.isEmojiPickerOpen = false;
        };
        this.onKeyDownHandler = this.onKeyDownHandler.bind(this);
    }
    connectedCallback() {
        this.textMessage = this.message || gracefulStorage.getItem(this.storageKey) || '';
        this.checkRateLimitBreached(Date.now());
    }
    componentWillUpdate() {
        this.textMessage = this.message || gracefulStorage.getItem(this.storageKey) || '';
    }
    componentDidLoad() {
        if (this.message) {
            writeTask(() => this.$textComposer.setText(this.message, true));
        }
    }
    checkRateLimitBreached(currentTime) {
        // Check if the function call is within limits
        if (messageLimits.messagesSent >= this.rateLimits.maxInvocations) {
            this.disableSendButton = true;
            this.rateLimitsBreached = true;
            const timeRemainingForReset = currentTime - messageLimits.startTime + this.rateLimits.period * 1000;
            setTimeout(() => {
                messageLimits.messagesSent = 0;
                messageLimits.startTime = Date.now();
                this.disableSendButton = false;
                this.rateLimitsBreached = false;
            }, timeRemainingForReset);
        }
    }
    render() {
        var _a;
        const uiProps = { iconPack: this.iconPack, t: this.t };
        return (h(Host, { key: '2df23422579c855ced1cb6d24bb95786a1326baf' }, this.canSendTextMessage && this.isEmojiPickerOpen && (h("rtk-emoji-picker", Object.assign({ key: 'a7ed280a636d0207f58f0ad13f79c1eaed52ab9c', part: "emoji-picker", onPickerClose: () => {
                this.isEmojiPickerOpen = false;
            }, onRtkEmojiClicked: (e) => {
                this.textMessage += e.detail;
                this.$textComposer.setText(this.textMessage, true);
            } }, uiProps))), h("slot", { key: '759df2a2029fbba963cfc26cd871771881dd6c5e', name: "chat-addon" }), this.quotedMessage && this.quotedMessage.length !== 0 && (h("div", { key: '413be05a7374fc76f790ad3f6f5bef5a56a6ef97', class: "quoted-message-container", part: "quoted-message-container" }, h("div", { key: '7fb6b571103c675dca202b74bd07fd55062dab70', class: "quoted-message scrollbar" }, h("rtk-text-message-view", { key: '3997aa719a746234c5641e976dd0c27e68b69dae', text: this.quotedMessage, isMarkdown: true })), h("div", { key: 'f76ec54e3d67d6957d5d152b144b22d8cc122660' }, h("rtk-icon", { key: '897b52fc41814d2cb8beeb461c36c9843cb2869e', "aria-label": this.t('dismiss'), class: "dismiss", icon: this.iconPack.dismiss, onClick: this.onQuotedMessageDismissHandler })))), h("div", { key: '35447eb1fffffd372c231bc76ce741e483e7f26a', class: "composer-container" }, h("div", { key: '0f8f198df49fcc27f6c85b8d6909eb2a7c00e142', class: "composers" }, this.fileToUpload && (h("rtk-draft-attachment-view", Object.assign({ key: '9d325d05fecb12ecb41f02e54561d2e1b59b2c2f' }, uiProps, { attachment: this.fileToUpload, onDeleteAttachment: () => (this.fileToUpload = null) }))), !this.fileToUpload && (h("rtk-text-composer-view", { key: 'fbc870bb9d9c2418e528e64273edb67846e23e17', value: this.textMessage, placeholder: this.inputTextPlaceholder, onTextChange: this.onTextChangeHandler, keyDownHandler: this.onKeyDownHandler, maxLength: (_a = this.maxLength) !== null && _a !== void 0 ? _a : MAX_TEXT_LENGTH, rateLimitBreached: this.rateLimitsBreached, t: this.t, iconPack: this.iconPack, ref: (el) => (this.$textComposer = el) }))), h("div", { key: '20191403531eb87bca86d13387c7937153a4c99e', class: "chat-buttons", part: "chat-buttons" }, h("div", { key: '4914a61fea3f502dc14778a237e9ce35a97e3afc', class: "left", part: "chat-buttons-left" }, !this.fileToUpload && !this.isEditing && (h("div", { key: '76c843588f2f7d90f5e60a1e44955309026eda27' }, this.canSendFiles && [
            h("rtk-file-picker-button", Object.assign({ key: 'cbb6f17b22f10b48ada27a4b4da3c1d5b2c7e320' }, uiProps, { onFileChange: (event) => this.onFileUploadHandler('file', event.detail) })),
            h("rtk-file-picker-button", Object.assign({ key: '0868162a2da021dd4175e977adf47d72ca54044a', filter: "image/*", label: this.t('chat.send_img'), icon: "image", onFileChange: (event) => this.onFileUploadHandler('image', event.detail) }, uiProps)),
        ], this.canSendTextMessage && !this.disableEmojiPicker && (h("rtk-emoji-picker-button", Object.assign({ key: 'a73378b5495dc3bfcde7dba335f674292ee6a96c', isActive: this.isEmojiPickerOpen, onClick: () => {
                this.isEmojiPickerOpen = !this.isEmojiPickerOpen;
            } }, uiProps))), h("slot", { key: '31208ad279dec430da4527d22730de8e418bc722', name: "chat-buttons" })))), h("div", { key: '04fcdd3f690548cbf1e257ffb2982785e557726b', class: "right", part: "chat-buttons-right" }, !this.isEditing && (h("rtk-tooltip", { key: '367bf710673a0a2276f46d52289409abb77fe27b', variant: "primary", label: this.t('chat.send_msg'), delay: 2000 }, h("rtk-button", { key: 'c677e3026636c375ed7eee411c596f6d2a802794', kind: "icon", disabled: this.disableSendButton || this.isSending, onClick: () => this.handleSendMessage(), title: this.t('chat.send_msg') }, this.isSending ? (h("rtk-spinner", { size: "sm" })) : (h("rtk-icon", { icon: this.iconPack.send }))))), this.isEditing && (h("div", { key: '1e09e8868e4ae048b36bc8198b8aa1de92209a00', class: "edit-buttons" }, h("rtk-tooltip", { key: '29ff7a39bd168169fa7d104357b529a2c9efe0fd', variant: "secondary", label: this.t('cancel'), delay: 2000 }, h("rtk-button", { key: '27cf5353d0e8c2620fd8d4213994a9dcc83f83f3', kind: "icon", variant: "secondary", onClick: () => this.handleEditCancel(), title: this.t('cancel') }, h("rtk-icon", { key: 'aeb4c9df3993c6cebf952f64f6676eb8a3866bb0', icon: this.iconPack.dismiss }))), h("rtk-tooltip", { key: '835195d0f51a1db81e66a1b2d9076a71f2aaee4e', variant: "primary", label: this.t('chat.update_msg'), delay: 2000 }, h("rtk-button", { key: 'd524f01ba5d7ca52224d39e23e7f963972ad80c9', kind: "icon", onClick: () => this.handleEditMessage(), title: this.t('chat.send_msg') }, this.isSending ? (h("rtk-spinner", { size: "sm" })) : (h("rtk-icon", { icon: this.iconPack.checkmark })))))))))));
    }
    static get style() { return RtkChatComposerViewStyle0; }
}, [1, "rtk-chat-composer-view", {
        "canSendTextMessage": [4, "can-send-text-message"],
        "isSending": [4, "is-sending"],
        "canSendFiles": [4, "can-send-files"],
        "message": [1],
        "quotedMessage": [1, "quoted-message"],
        "storageKey": [1, "storage-key"],
        "inputTextPlaceholder": [1, "input-text-placeholder"],
        "isEditing": [4, "is-editing"],
        "iconPack": [16],
        "t": [16],
        "maxLength": [2, "max-length"],
        "disableEmojiPicker": [4, "disable-emoji-picker"],
        "rateLimits": [16],
        "fileToUpload": [32],
        "isEmojiPickerOpen": [32],
        "disableSendButton": [32],
        "rateLimitsBreached": [32]
    }]);
__decorate([
    SyncWithStore()
], RtkChatComposerView.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkChatComposerView.prototype, "t", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-chat-composer-view", "rtk-button", "rtk-draft-attachment-view", "rtk-emoji-picker", "rtk-emoji-picker-button", "rtk-file-picker-button", "rtk-icon", "rtk-markdown-view", "rtk-spinner", "rtk-text-composer-view", "rtk-text-message-view", "rtk-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-chat-composer-view":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkChatComposerView);
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$b();
            }
            break;
        case "rtk-draft-attachment-view":
            if (!customElements.get(tagName)) {
                defineCustomElement$a();
            }
            break;
        case "rtk-emoji-picker":
            if (!customElements.get(tagName)) {
                defineCustomElement$9();
            }
            break;
        case "rtk-emoji-picker-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "rtk-file-picker-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "rtk-markdown-view":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "rtk-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "rtk-text-composer-view":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "rtk-text-message-view":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "rtk-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { RtkChatComposerView as R, defineCustomElement as d };
