import { p as proxyCustomElement, H, c as createEvent, h } from './p-BsG0yTW8.js';

const messageInputCss = ":host{display:block;width:100%;--primary-color:#007AFF;--success-color:#34C759;--warning-color:#FF9500;--error-color:#FF3B30;--text-color:#000000;--text-color-secondary:#8E8E93;--background-color:#F2F2F7;--border-color:#C6C6C8;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--font-size-xs:11px;--font-size-sm:12px;--font-size-md:14px;--font-size-lg:16px;--font-size-xl:18px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-xl:16px;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.1);--shadow-md:0 2px 4px rgba(0, 0, 0, 0.1);--shadow-lg:0 4px 8px rgba(0, 0, 0, 0.1);--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}.message-input{background:white;border-top:1px solid var(--border-color);padding:var(--spacing-md)}.message-input.disabled{opacity:0.6;pointer-events:none}.input-container{display:flex;align-items:flex-end;gap:var(--spacing-sm);background:var(--background-color);border-radius:var(--border-radius-lg);padding:var(--spacing-sm);min-height:44px}.input-field{flex:1;border:none;background:transparent;outline:none;font-size:var(--font-size-md);line-height:1.4;color:var(--text-color);resize:none;font-family:inherit}.input-field::placeholder{color:var(--text-color-secondary)}.input-field:focus{outline:none}.input-field[type=\"textarea\"]{min-height:20px;max-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch}.send-button{background:var(--primary-color);color:white;border:none;border-radius:var(--border-radius-md);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-height:32px;min-width:60px;flex-shrink:0}.send-button:hover:not(.disabled){background:#0056CC;transform:translateY(-1px)}.send-button:active:not(.disabled){transform:translateY(0);background:#004499}.send-button.disabled{background:var(--border-color);color:var(--text-color-secondary);cursor:not-allowed;transform:none}.char-count{font-size:var(--font-size-xs);color:var(--text-color-secondary);text-align:right;margin-top:var(--spacing-xs);padding:0 var(--spacing-sm)}@media (max-width: 768px){.input-field{font-size:16px}.message-input{padding:var(--spacing-sm)}.input-container{padding:var(--spacing-xs);min-height:48px}.send-button{min-height:36px;min-width:70px;font-size:var(--font-size-md)}}@media (prefers-color-scheme: dark){.message-input{background:#1C1C1E;border-top-color:#38383A}.input-container{background:#2C2C2E}.input-field{color:#FFFFFF}.input-field::placeholder{color:#8E8E93}.char-count{color:#8E8E93}}";

const MessageInput = /*@__PURE__*/ proxyCustomElement(class MessageInput extends H {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.messageSend = createEvent(this, "messageSend");
        this.inputChange = createEvent(this, "inputChange");
    }
    get el() { return this; }
    /**
     * 占位符文本
     */
    placeholder = '输入消息...';
    /**
     * 是否禁用输入
     */
    disabled = false;
    /**
     * 最大输入长度
     */
    maxLength = 1000;
    /**
     * 是否显示发送按钮
     */
    showSendButton = true;
    /**
     * 是否支持多行输入
     */
    multiline = true;
    /**
     * 是否自动聚焦
     */
    autoFocus = false;
    /**
     * 发送按钮文本
     */
    sendButtonText = '发送';
    inputValue = '';
    isComposing = false;
    textareaRef;
    inputRef;
    componentDidLoad() {
        if (this.autoFocus) {
            this.focus();
        }
    }
    focus() {
        if (this.multiline && this.textareaRef) {
            this.textareaRef.focus();
        }
        else if (!this.multiline && this.inputRef) {
            this.inputRef.focus();
        }
    }
    handleInput = (event) => {
        const target = event.target;
        this.inputValue = target.value;
        this.inputChange.emit(this.inputValue);
        this.adjustTextareaHeight();
    };
    handleKeyDown = (event) => {
        if (event.key === 'Enter') {
            if (this.multiline) {
                // 多行模式下，Ctrl+Enter 或 Cmd+Enter 发送
                if (event.ctrlKey || event.metaKey) {
                    event.preventDefault();
                    this.sendMessage();
                }
            }
            else {
                // 单行模式下，Enter 直接发送
                event.preventDefault();
                this.sendMessage();
            }
        }
    };
    handleCompositionStart = () => {
        this.isComposing = true;
    };
    handleCompositionEnd = () => {
        this.isComposing = false;
    };
    sendMessage = () => {
        if (this.disabled || !this.inputValue.trim() || this.isComposing) {
            return;
        }
        const message = this.inputValue.trim();
        this.inputValue = '';
        // 重置输入框高度
        if (this.textareaRef) {
            this.textareaRef.style.height = 'auto';
        }
        // 触发发送事件
        this.messageSend.emit({
            content: message,
            timestamp: Date.now()
        });
    };
    adjustTextareaHeight = () => {
        if (this.textareaRef) {
            this.textareaRef.style.height = 'auto';
            this.textareaRef.style.height = Math.min(this.textareaRef.scrollHeight, 120) + 'px';
        }
    };
    /**
     * 消息发送事件
     */
    messageSend;
    /**
     * 输入变化事件
     */
    inputChange;
    render() {
        const inputClass = `message-input ${this.disabled ? 'disabled' : ''}`;
        const sendButtonClass = `send-button ${!this.inputValue.trim() || this.disabled ? 'disabled' : ''}`;
        return (h("div", { key: '3b56075a35e8d42f573cc7b73e52787aa294044d', class: inputClass }, h("div", { key: 'a503a84e704fdec65c5ad9238a1f13802c8e6e04', class: "input-container" }, this.multiline ? (h("textarea", { ref: (el) => this.textareaRef = el, class: "input-field", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxLength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, rows: 1 })) : (h("input", { ref: (el) => this.inputRef = el, type: "text", class: "input-field", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxLength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd })), this.showSendButton && (h("button", { key: '6e7b9561a4ef45fea52cbe82a2fb8ddfcd299da1', class: sendButtonClass, disabled: !this.inputValue.trim() || this.disabled, onClick: this.sendMessage, type: "button" }, this.sendButtonText))), this.maxLength > 0 && (h("div", { key: '61fa9f2929ed47d82a6ad3ed8a32b28f9a659b74', class: "char-count" }, this.inputValue.length, "/", this.maxLength))));
    }
    static get style() { return messageInputCss; }
}, [257, "message-input", {
        "placeholder": [1],
        "disabled": [4],
        "maxLength": [2, "max-length"],
        "showSendButton": [4, "show-send-button"],
        "multiline": [4],
        "autoFocus": [4, "auto-focus"],
        "sendButtonText": [1, "send-button-text"],
        "inputValue": [32],
        "isComposing": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["message-input"];
    components.forEach(tagName => { switch (tagName) {
        case "message-input":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, MessageInput);
            }
            break;
    } });
}
defineCustomElement();

export { MessageInput as M, defineCustomElement as d };
//# sourceMappingURL=p-C-TbGO_r.js.map

//# sourceMappingURL=p-C-TbGO_r.js.map