import { r as registerInstance, c as createEvent, g as getElement, h } from './index-Bub_jfjv.js';

const aiChatCss = ":host{display:block;width:100%;height:100%;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--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}.ai-chat{display:flex;flex-direction:column;height:100%;background-color:var(--primary-color)}.chat-container{flex:1;overflow-y:auto;padding:var(--spacing-md);-webkit-overflow-scrolling:touch}.chat-container::-webkit-scrollbar{width:4px}.chat-container::-webkit-scrollbar-track{background:transparent}.chat-container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.message{display:flex;margin-bottom:var(--spacing-lg);align-items:flex-start}.message.user-message{flex-direction:row-reverse}.message.user-message .message-content{align-items:flex-end}.message.user-message .message-bubble{background-color:var(--primary-color);color:white;border-radius:18px 18px 4px 18px}.message.ai-message .message-bubble{background-color:white;color:var(--text-color);border-radius:18px 18px 18px 4px;box-shadow:var(--shadow-sm)}.avatar{width:32px;height:32px;border-radius:50%;margin:0 var(--spacing-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center}.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar .default-avatar{width:100%;height:100%;border-radius:50%;background-color:var(--border-color);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--text-color-secondary)}.avatar.ai-avatar .default-avatar{background-color:var(--primary-color);color:white}.avatar.user-avatar .default-avatar{background-color:var(--success-color);color:white}.message-content{display:flex;flex-direction:column;max-width:70%;min-width:60px}.message-bubble{padding:var(--spacing-sm) var(--spacing-md);word-wrap:break-word;word-break:break-word;line-height:1.4;font-size:14px}@media (max-width: 768px){.message-bubble{max-width:100%;font-size:16px;}}.message-time{font-size:11px;color:var(--text-color-secondary);margin-top:var(--spacing-xs);text-align:right}.message.user-message .message-time{text-align:right}.message.ai-message .message-time{text-align:left}.message{transition:transform 0.1s ease}.message:active{transform:scale(0.98)}@media (max-width: 480px){.chat-container{padding:var(--spacing-sm)}.message{margin-bottom:var(--spacing-md)}.message-content{max-width:80%}.avatar{width:28px;height:28px;margin:0 var(--spacing-xs)}}";

const AiChat = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.messageClick = createEvent(this, "messageClick");
        this.messageLongPress = createEvent(this, "messageLongPress");
        this.messageSend = createEvent(this, "messageSend");
    }
    get el() { return getElement(this); }
    /**
     * 聊天消息列表
     */
    messages = [];
    /**
     * 是否显示时间戳
     */
    showTimestamp = true;
    /**
     * 是否显示用户头像
     */
    showUserAvatar = true;
    /**
     * 是否显示AI头像
     */
    showAiAvatar = true;
    /**
     * 用户头像URL
     */
    userAvatar = '';
    /**
     * AI头像URL
     */
    aiAvatar = '';
    /**
     * 自定义渲染器映射
     */
    customRenderers = {};
    /**
     * 是否显示输入框
     */
    showInput = true;
    /**
     * 输入框占位符
     */
    inputPlaceholder = '输入消息...';
    /**
     * 是否禁用输入
     */
    inputDisabled = false;
    /**
     * 最大输入长度
     */
    maxInputLength = 1000;
    /**
     * 是否支持多行输入
     */
    multilineInput = true;
    /**
     * 消息点击事件
     */
    messageClick;
    /**
     * 消息长按事件
     */
    messageLongPress;
    /**
     * 消息发送事件
     */
    messageSend;
    scrollToBottom = true;
    messagesChanged() {
        this.scrollToBottom = true;
    }
    componentDidUpdate() {
        if (this.scrollToBottom) {
            this.scrollToBottom = false;
            this.scrollToBottomOfChat();
        }
    }
    scrollToBottomOfChat() {
        const chatContainer = this.el.shadowRoot?.querySelector('.chat-container');
        if (chatContainer) {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
    }
    handleMessageClick = (message) => {
        this.messageClick.emit(message);
    };
    handleMessageLongPress = (message) => {
        this.messageLongPress.emit(message);
    };
    handleMessageSend = (event) => {
        // 阻止事件冒泡，避免重复触发
        event.stopPropagation();
        this.messageSend.emit(event.detail);
    };
    renderMessage(message) {
        const isUser = message.isUser;
        const messageClass = `message ${isUser ? 'user-message' : 'ai-message'}`;
        return (h("div", { class: messageClass, onClick: () => this.handleMessageClick(message), onTouchStart: () => {
                let timer;
                timer = setTimeout(() => {
                    this.handleMessageLongPress(message);
                }, 500);
                const handleTouchEnd = () => {
                    clearTimeout(timer);
                    document.removeEventListener('touchend', handleTouchEnd);
                };
                document.addEventListener('touchend', handleTouchEnd);
            } }, !isUser && this.showAiAvatar && (h("div", { class: "avatar ai-avatar" }, this.aiAvatar ? (h("img", { src: this.aiAvatar, alt: "AI" })) : (h("div", { class: "default-avatar" }, "AI")))), h("div", { class: "message-content" }, h("div", { class: "message-bubble" }, this.renderMessageContent(message)), this.showTimestamp && message.timestamp && (h("div", { class: "message-time" }, new Date(message.timestamp).toLocaleTimeString()))), isUser && this.showUserAvatar && (h("div", { class: "avatar user-avatar" }, this.userAvatar ? (h("img", { src: this.userAvatar, alt: "User" })) : (h("div", { class: "default-avatar" }, "U"))))));
    }
    renderMessageContent(message) {
        const { type, content, customRenderer } = message;
        // 检查是否有自定义渲染器
        if (customRenderer && this.customRenderers[customRenderer]) {
            const CustomComponent = this.customRenderers[customRenderer];
            return h(CustomComponent, { content: content });
        }
        // 根据类型渲染不同内容
        switch (type) {
            case 'text':
                return h("text-renderer", { content: content });
            case 'markdown':
                return h("markdown-renderer", { content: content });
            case 'echarts':
                return h("echarts-renderer", { content: content });
            default:
                return h("text-renderer", { content: content });
        }
    }
    render() {
        return (h("div", { key: 'bae58a6e2656977b66b940b935cebd0f39837203', class: "ai-chat" }, h("div", { key: '88fb1e09d5ae43096a05f3ec4fff9ee00f7b23b7', class: "chat-container" }, this.messages.map(message => (h("div", { key: message.id }, this.renderMessage(message))))), this.showInput && (h("message-input", { key: 'ae8fc39efcd7529c49ea20805b67e8a687c6ec93', placeholder: this.inputPlaceholder, disabled: this.inputDisabled, maxLength: this.maxInputLength, multiline: this.multilineInput, onMessageSend: this.handleMessageSend }))));
    }
    static get watchers() { return {
        "messages": ["messagesChanged"]
    }; }
};
AiChat.style = aiChatCss;

export { AiChat as A };
//# sourceMappingURL=ai-chat-CrECwrcw.js.map

//# sourceMappingURL=ai-chat-CrECwrcw.js.map