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

const messageInputCss = ":host{--input-bg:#f5f5f5;--input-border:#e0e0e0;--input-border-radius:20px;--input-focus-border:#007bff;--input-disabled-bg:#f0f0f0;--input-text-color:#333;--input-placeholder-color:#999;--send-button-bg:#007bff;--send-button-hover-bg:#0056b3;--send-button-disabled-bg:#ccc;--send-button-text:white;--char-count-color:#666}.message-input-container{padding:12px;background:var(--input-bg);border-top:1px solid var(--input-border)}.input-wrapper{display:flex;gap:8px;align-items:flex-end}.message-input{flex:1;padding:8px 12px;border:1px solid var(--input-border);border-radius:var(--input-border-radius);font-size:14px;line-height:1.4;color:var(--input-text-color);background:white;resize:none;outline:none;transition:border-color 0.2s;font-family:inherit}.message-input::placeholder{color:var(--input-placeholder-color)}.message-input:focus{border-color:var(--input-focus-border)}.message-input:disabled{background:var(--input-disabled-bg);cursor:not-allowed;color:var(--input-placeholder-color)}.send-button{padding:8px 16px;background:var(--send-button-bg);color:var(--send-button-text);border:none;border-radius:var(--input-border-radius);font-size:14px;cursor:pointer;transition:all 0.2s;white-space:nowrap;font-family:inherit}.send-button:hover:not(:disabled){background:var(--send-button-hover-bg)}.send-button:disabled{background:var(--send-button-disabled-bg);cursor:not-allowed}.char-count{margin-top:4px;font-size:12px;color:var(--char-count-color);text-align:right}@media (max-width: 768px){.message-input-container{padding:8px}.input-wrapper{gap:6px}.message-input{font-size:16px;}.send-button{padding:8px 12px;font-size:14px}}";

const InternalMessageInput = /*@__PURE__*/ proxyCustomElement(class InternalMessageInput extends H {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.messageSend = createEvent(this, "messageSend");
        this.inputChange = createEvent(this, "inputChange");
        this.inputFocus = createEvent(this, "inputFocus");
        this.inputBlur = createEvent(this, "inputBlur");
    }
    placeholder = '输入消息...';
    disabled = false;
    maxLength = 1000;
    multiline = false;
    showCharCount = true;
    sendButtonText = '发送';
    inputValue = '';
    isComposing = false;
    messageSend;
    inputChange;
    inputFocus;
    inputBlur;
    handleInput = (event) => {
        const target = event.target;
        this.inputValue = target.value;
        this.inputChange.emit(this.inputValue);
    };
    handleKeyDown = (event) => {
        if (event.key === 'Enter') {
            if (this.multiline) {
                if (event.shiftKey) {
                    // Shift+Enter 换行
                    return;
                }
                else {
                    // Enter 发送
                    event.preventDefault();
                    this.handleSend();
                }
            }
            else {
                // 单行模式 Enter 发送
                event.preventDefault();
                this.handleSend();
            }
        }
    };
    handleCompositionStart = () => {
        this.isComposing = true;
    };
    handleCompositionEnd = () => {
        this.isComposing = false;
        this.handleInput({ target: { value: this.inputValue } });
    };
    handleSend = () => {
        const content = this.inputValue.trim();
        if (content && !this.disabled && !this.isComposing) {
            const timestamp = Date.now();
            this.messageSend.emit({ content, timestamp });
            this.inputValue = '';
        }
    };
    handleFocus = () => {
        this.inputFocus.emit();
    };
    handleBlur = () => {
        this.inputBlur.emit();
    };
    render() {
        const isSendDisabled = this.disabled || !this.inputValue.trim();
        return (h("div", { key: '0c753069338af0ac9e02da2e6bd481218bca5eb8', class: "message-input-container" }, h("div", { key: '53a5e153f282ce0f9e62d84f70657f95dec28974', class: "input-wrapper" }, this.multiline ? (h("textarea", { class: "message-input", placeholder: this.placeholder, disabled: this.disabled, maxLength: this.maxLength, rows: 3, value: this.inputValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onFocus: this.handleFocus, onBlur: this.handleBlur })) : (h("input", { type: "text", class: "message-input", placeholder: this.placeholder, disabled: this.disabled, maxLength: this.maxLength, value: this.inputValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("button", { key: '16b1bdf1ecd3b7b6632990681cee811af465254f', class: "send-button", disabled: isSendDisabled, onClick: this.handleSend }, this.sendButtonText)), this.showCharCount && (h("div", { key: 'b35e43619d230d69152c1af52f12a66955f952b5', class: "char-count" }, this.inputValue.length, "/", this.maxLength))));
    }
    static get style() { return messageInputCss; }
}, [257, "internal-message-input", {
        "placeholder": [1],
        "disabled": [4],
        "maxLength": [2, "max-length"],
        "multiline": [4],
        "showCharCount": [4, "show-char-count"],
        "sendButtonText": [1, "send-button-text"],
        "inputValue": [32],
        "isComposing": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["internal-message-input"];
    components.forEach(tagName => { switch (tagName) {
        case "internal-message-input":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, InternalMessageInput);
            }
            break;
    } });
}
defineCustomElement();

export { InternalMessageInput as I, defineCustomElement as d };
//# sourceMappingURL=p-C7x-HtC8.js.map

//# sourceMappingURL=p-C7x-HtC8.js.map