@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/chat-panel/chat-panel.component.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import type { ChatMessage, ChatUser } from './chat-panel.types.js';
+/**
+ * Shared chat panel — renders messages, input bar, reactions, context menu.
+ * Used inside both the floating presence chat and the full messages page.
+ *
+ * @fires message-send - User sends a message. Detail: `{ text, replyTo? }`
+ * @fires message-edit - User edits a message. Detail: `{ messageId, content }`
+ * @fires message-delete - User deletes a message. Detail: `{ messageId }`
+ * @fires message-react - User reacts to a message. Detail: `{ messageId, emoji }`
+ * @fires typing-start
+ * @fires typing-stop
+ * @fires file-select - User selected a file. Detail: `{ file: File, imageOnly: boolean }`
+ */
+export declare class NrChatPanelElement extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Messages to display */
+    messages: ChatMessage[];
+    /** Current user info */
+    currentUser: ChatUser | null;
+    /** Conversation ID */
+    conversationId: string;
+    /** Whether this is a group conversation */
+    isGroup: boolean;
+    /** Loading state */
+    loading: boolean;
+    /** Compact mode for floating panels */
+    compact: boolean;
+    /** Empty state text */
+    emptyText: string;
+    /** Hide the built-in input bar (for pages that provide their own) */
+    hideInput: boolean;
+    private _showEmoji;
+    private _contextMenu;
+    private _replyTo;
+    private _editingIdx;
+    private _typing;
+    private _typingTimer;
+    private _longPressTimer;
+    private _touchMoved;
+    updated(changed: Map<string, unknown>): void;
+    /** Add a typing indicator */
+    addTyping(userName: string): void;
+    /** Remove a typing indicator */
+    removeTyping(userName: string): void;
+    private _sendMessage;
+    private _onInputKeydown;
+    private _toggleEmoji;
+    private _insertEmoji;
+    private _menuPos;
+    private _showContextMenuHandler;
+    private _onTouchStart;
+    private _onTouchEnd;
+    private _onTouchMove;
+    private _onMsgTap;
+    private _hideContextMenu;
+    private _deleteMsg;
+    private _replyMsg;
+    private _editMsg;
+    private _confirmEdit;
+    private _onEditKeydown;
+    private _reactMsg;
+    private _toggleAudioPlay;
+    private _onAudioTimeUpdate;
+    private _onAudioEnded;
+    private _pickFile;
+    private _playSound;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderMessage;
+    private _renderAttachment;
+    private _renderContextMenu;
+    private _renderEmojiPicker;
+    private _renderInputBar;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-chat-panel': NrChatPanelElement;
+    }
+}
+//# sourceMappingURL=chat-panel.component.d.ts.map

package/dist/src/components/chat-panel/chat-panel.component.js

@@ -0,0 +1,510 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__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;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { chatPanelStyles } from './chat-panel.style.js';
+const REACTIONS = [
+    { key: '👍', label: 'Like' },
+    { key: '❤️', label: 'Love' },
+    { key: '😂', label: 'Haha' },
+    { key: '😮', label: 'Wow' },
+    { key: '😢', label: 'Sad' },
+    { key: '🔥', label: 'Fire' },
+];
+const EMOJI_GRID = ['😀', '😂', '🥰', '😎', '🤔', '🎉', '✨', '🙏', '💯', '🚀', '👏', '😍', '🤣', '💪', '😊', '🥳', '😤', '💀', '🫡', '👀', '💜', '🤝', '⭐', '🙌'];
+const svgCheck = html `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>`;
+const svgCheckDouble = html `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 6 7 17 2 12"/><polyline points="23 6 12 17" opacity="0.5"/></svg>`;
+const svgCheckDoubleRead = html `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2"><polyline points="18 6 7 17 2 12"/><polyline points="23 6 12 17"/></svg>`;
+const svgSend = html `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>`;
+const svgSmile = html `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`;
+const svgPlay = html `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>`;
+const svgFile = html `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
+const svgDownload = html `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`;
+const svgPhone = html `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>`;
+const svgVideo = html `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>`;
+const svgChat = html `<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`;
+const svgAttach = html `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>`;
+const svgImage = html `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
+/**
+ * Shared chat panel — renders messages, input bar, reactions, context menu.
+ * Used inside both the floating presence chat and the full messages page.
+ *
+ * @fires message-send - User sends a message. Detail: `{ text, replyTo? }`
+ * @fires message-edit - User edits a message. Detail: `{ messageId, content }`
+ * @fires message-delete - User deletes a message. Detail: `{ messageId }`
+ * @fires message-react - User reacts to a message. Detail: `{ messageId, emoji }`
+ * @fires typing-start
+ * @fires typing-stop
+ * @fires file-select - User selected a file. Detail: `{ file: File, imageOnly: boolean }`
+ */
+let NrChatPanelElement = class NrChatPanelElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Messages to display */
+        this.messages = [];
+        /** Current user info */
+        this.currentUser = null;
+        /** Conversation ID */
+        this.conversationId = '';
+        /** Whether this is a group conversation */
+        this.isGroup = false;
+        /** Loading state */
+        this.loading = false;
+        /** Compact mode for floating panels */
+        this.compact = false;
+        /** Empty state text */
+        this.emptyText = 'No messages yet';
+        /** Hide the built-in input bar (for pages that provide their own) */
+        this.hideInput = false;
+        this._showEmoji = false;
+        this._contextMenu = null;
+        this._replyTo = null;
+        this._editingIdx = null;
+        this._typing = [];
+        this._typingTimer = null;
+        this._longPressTimer = null;
+        this._touchMoved = false;
+    }
+    updated(changed) {
+        // Auto-scroll on new messages
+        if (changed.has('messages')) {
+            requestAnimationFrame(() => {
+                var _a;
+                const el = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.chat-messages');
+                if (el)
+                    el.scrollTop = el.scrollHeight;
+            });
+        }
+    }
+    // ── Public methods (called by parent for socket events) ──
+    /** Add a typing indicator */
+    addTyping(userName) {
+        if (!this._typing.includes(userName)) {
+            this._typing = [...this._typing, userName];
+        }
+    }
+    /** Remove a typing indicator */
+    removeTyping(userName) {
+        this._typing = this._typing.filter(n => n !== userName);
+    }
+    // ── Send ──
+    _sendMessage() {
+        var _a;
+        const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.chat-input textarea');
+        if (!(input === null || input === void 0 ? void 0 : input.value.trim()))
+            return;
+        const text = input.value.trim();
+        input.value = '';
+        input.focus();
+        this.dispatchEvent(new CustomEvent('message-send', {
+            detail: { text, replyTo: this._replyTo || undefined },
+            bubbles: true, composed: true,
+        }));
+        this._replyTo = null;
+        this._showEmoji = false;
+        this._playSound();
+    }
+    _onInputKeydown(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this._sendMessage();
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('typing-start', { bubbles: true, composed: true }));
+        clearTimeout(this._typingTimer);
+        this._typingTimer = setTimeout(() => {
+            this.dispatchEvent(new CustomEvent('typing-stop', { bubbles: true, composed: true }));
+        }, 2000);
+    }
+    // ── Emoji ──
+    _toggleEmoji() { this._showEmoji = !this._showEmoji; }
+    _insertEmoji(emoji) {
+        var _a;
+        const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.chat-input textarea');
+        if (input) {
+            input.value += emoji;
+            input.focus();
+        }
+        this._showEmoji = false;
+    }
+    // ── Context menu ──
+    _menuPos(target) {
+        const bubble = (target.closest('.msg-bubble') || target.closest('.msg-row'));
+        if (!bubble)
+            return { y: 0, left: 0 };
+        const rect = bubble.getBoundingClientRect();
+        const isMe = !!target.closest('.msg-row.me');
+        const menuH = isMe ? 140 : 80;
+        const y = rect.top > menuH + 12 ? rect.top - menuH - 4 : rect.bottom + 4;
+        if (isMe)
+            return { y, right: Math.max(8, window.innerWidth - rect.right) };
+        return { y, left: Math.max(8, rect.left) };
+    }
+    _showContextMenuHandler(e, msgIdx) {
+        e.preventDefault();
+        this._contextMenu = Object.assign({ msgIdx }, this._menuPos(e.target));
+    }
+    _onTouchStart(e, msgIdx) {
+        this._touchMoved = false;
+        this._longPressTimer = setTimeout(() => {
+            var _a;
+            e.preventDefault();
+            (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+            this._contextMenu = Object.assign({ msgIdx }, this._menuPos(e.target));
+            this._touchMoved = true;
+        }, 500);
+    }
+    _onTouchEnd() { clearTimeout(this._longPressTimer); }
+    _onTouchMove() { this._touchMoved = true; clearTimeout(this._longPressTimer); }
+    _onMsgTap(e, msgIdx) {
+        if (!window.matchMedia('(max-width: 640px)').matches)
+            return;
+        if (this._touchMoved)
+            return;
+        const target = e.target;
+        if (target.closest('.reaction') || target.closest('.audio-play-btn') || target.closest('.file-card') || target.closest('.edit-inline'))
+            return;
+        e.stopPropagation();
+        this._contextMenu = Object.assign({ msgIdx }, this._menuPos(target));
+    }
+    _hideContextMenu() { this._contextMenu = null; }
+    // ── Message actions ──
+    _deleteMsg(idx) {
+        const msg = this.messages[idx];
+        if (msg === null || msg === void 0 ? void 0 : msg.id) {
+            this.dispatchEvent(new CustomEvent('message-delete', {
+                detail: { messageId: msg.id }, bubbles: true, composed: true,
+            }));
+        }
+        this._contextMenu = null;
+    }
+    _replyMsg(idx) {
+        var _a, _b;
+        const msg = this.messages[idx];
+        if (msg) {
+            this._replyTo = { text: msg.text, from: msg.from };
+            (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.chat-input textarea')) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        this._contextMenu = null;
+    }
+    _editMsg(idx) {
+        this._editingIdx = idx;
+        this._contextMenu = null;
+        requestAnimationFrame(() => {
+            var _a;
+            const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.edit-input');
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        });
+    }
+    _confirmEdit(idx) {
+        var _a;
+        const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.edit-input');
+        const content = input === null || input === void 0 ? void 0 : input.value.trim();
+        if (!content) {
+            this._editingIdx = null;
+            return;
+        }
+        const msg = this.messages[idx];
+        if (msg === null || msg === void 0 ? void 0 : msg.id) {
+            this.dispatchEvent(new CustomEvent('message-edit', {
+                detail: { messageId: msg.id, content }, bubbles: true, composed: true,
+            }));
+        }
+        this._editingIdx = null;
+    }
+    _onEditKeydown(e, idx) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            this._confirmEdit(idx);
+        }
+        else if (e.key === 'Escape') {
+            this._editingIdx = null;
+        }
+    }
+    _reactMsg(idx, emoji) {
+        const msg = this.messages[idx];
+        if (msg === null || msg === void 0 ? void 0 : msg.id) {
+            this.dispatchEvent(new CustomEvent('message-react', {
+                detail: { messageId: msg.id, emoji }, bubbles: true, composed: true,
+            }));
+        }
+        this._contextMenu = null;
+    }
+    // ── Audio player ──
+    _toggleAudioPlay(e) {
+        var _a;
+        const btn = e.currentTarget;
+        const container = btn.closest('.audio-msg');
+        const audio = container === null || container === void 0 ? void 0 : container.querySelector('audio');
+        if (!audio)
+            return;
+        if (audio.paused) {
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.audio-msg audio').forEach((a) => {
+                if (a !== audio && !a.paused) {
+                    a.pause();
+                    a.currentTime = 0;
+                }
+            });
+            audio.play().catch(() => { });
+        }
+        else {
+            audio.pause();
+        }
+    }
+    _onAudioTimeUpdate(e) {
+        const audio = e.target;
+        const container = audio.closest('.audio-msg');
+        if (!container || !audio.duration)
+            return;
+        const bars = container.querySelectorAll('.a-bar');
+        const progress = audio.currentTime / audio.duration;
+        const filledCount = Math.floor(progress * bars.length);
+        bars.forEach((bar, idx) => bar.classList.toggle('played', idx <= filledCount));
+    }
+    _onAudioEnded(e) {
+        const audio = e.target;
+        const container = audio.closest('.audio-msg');
+        container === null || container === void 0 ? void 0 : container.querySelectorAll('.a-bar').forEach(bar => bar.classList.remove('played'));
+    }
+    // ── File picker ──
+    _pickFile(imageOnly = false) {
+        const input = document.createElement('input');
+        input.type = 'file';
+        if (imageOnly)
+            input.accept = 'image/jpeg,image/png,image/gif,image/webp,image/heic,image/heif';
+        input.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0';
+        document.body.appendChild(input);
+        input.onchange = () => {
+            var _a;
+            const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file) {
+                this.dispatchEvent(new CustomEvent('file-select', {
+                    detail: { file, imageOnly }, bubbles: true, composed: true,
+                }));
+            }
+            try {
+                document.body.removeChild(input);
+            }
+            catch (_b) { }
+        };
+        input.click();
+    }
+    // ── Sound ──
+    _playSound() {
+        try {
+            const ctx = new AudioContext();
+            const gain = ctx.createGain();
+            gain.connect(ctx.destination);
+            gain.gain.value = 0.12;
+            const o = ctx.createOscillator();
+            o.connect(gain);
+            o.type = 'sine';
+            o.frequency.setValueAtTime(600, ctx.currentTime);
+            o.frequency.setValueAtTime(900, ctx.currentTime + 0.08);
+            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
+            o.start(ctx.currentTime);
+            o.stop(ctx.currentTime + 0.15);
+            setTimeout(() => ctx.close(), 500);
+        }
+        catch (_a) { }
+    }
+    // ── Render ──
+    render() {
+        if (this.loading)
+            return html `<div class="loading">Loading...</div>`;
+        return html `
+      ${this.messages.length === 0
+            ? html `<div class="empty-state">${svgChat}<span>${this.emptyText}</span></div>`
+            : html `
+          <div class="chat-messages" @click=${() => this._hideContextMenu()} @touchstart=${() => { if (this._contextMenu)
+                this._hideContextMenu(); }}>
+            ${this.messages.map((m, i, arr) => this._renderMessage(m, i, arr))}
+          </div>
+        `}
+
+      ${this._contextMenu ? this._renderContextMenu() : nothing}
+      ${this._typing.length > 0 ? html `<div class="typing-indicator">${this._typing.join(', ')} typing...</div>` : nothing}
+      ${this._replyTo ? html `
+        <div class="reply-bar">
+          <span class="reply-text">Replying to: ${this._replyTo.text}</span>
+          <button @click=${() => { this._replyTo = null; }}>✕</button>
+        </div>
+      ` : nothing}
+      ${this._showEmoji ? this._renderEmojiPicker() : nothing}
+      ${this.hideInput ? nothing : this._renderInputBar()}
+    `;
+    }
+    _renderMessage(m, i, arr) {
+        var _a;
+        if (m.from === 'date')
+            return html `<div class="date-sep">${m.text}</div>`;
+        if (m.deleted)
+            return html `<div class="msg-row system"><div class="msg-bubble"><div class="msg them msg-deleted">This message was deleted</div></div></div>`;
+        const prevMsg = i > 0 ? arr[i - 1] : null;
+        const showSenderName = this.isGroup && m.from === 'them' && (!prevMsg || prevMsg.from !== 'them' || prevMsg.senderId !== m.senderId);
+        return html `
+      <div class="msg-row ${m.from}"
+        @contextmenu=${(e) => this._showContextMenuHandler(e, i)}
+        @touchstart=${(e) => this._onTouchStart(e, i)}
+        @touchend=${() => this._onTouchEnd()}
+        @touchmove=${() => this._onTouchMove()}
+        @click=${(e) => this._onMsgTap(e, i)}>
+        ${m.from === 'them' ? html `<div class="msg-avatar" style="background:${m.senderColor || '#7c3aed'}">${(m.senderInitials || '?').charAt(0)}</div>` : nothing}
+        <div class="msg-bubble" @dblclick=${m.from === 'me' && !m.deleted ? () => this._editMsg(i) : undefined}>
+          ${showSenderName ? html `<div class="msg-sender-name" style="color:${m.senderColor || '#7c3aed'}">${m.senderName}</div>` : nothing}
+          ${m.replyTo ? html `<div class="msg-reply-quote">${m.replyTo.text}</div>` : nothing}
+          ${this._renderAttachment(m)}
+          ${this._editingIdx === i
+            ? html `<div class="edit-inline"><input class="edit-input" type="text" .value=${m.text || ''} @keydown=${(e) => this._onEditKeydown(e, i)}><button class="edit-confirm" @click=${() => this._confirmEdit(i)}>✓</button><button class="edit-cancel" @click=${() => { this._editingIdx = null; }}>✕</button></div>`
+            : m.text ? html `<div class="msg ${m.from}">${m.text}${m.edited ? html ` <span class="msg-edited">(edited)</span>` : nothing}${m.encrypted ? html `<span class="msg-e2e" title="End-to-end encrypted">🔒</span>` : nothing}</div>` : nothing}
+          <div class="msg-footer ${m.from}">
+            <span class="msg-time">${m.time || ''}</span>
+            ${m.from === 'me' ? html `<span class="msg-read">${m.status === 'read' ? svgCheckDoubleRead : m.status === 'delivered' ? svgCheckDouble : svgCheck}</span>` : nothing}
+          </div>
+          ${((_a = m.reactions) === null || _a === void 0 ? void 0 : _a.length) ? html `
+            <div class="msg-reactions">
+              ${m.reactions.map(r => {
+            var _a;
+            return html `
+                <span class="reaction ${((_a = r.users) === null || _a === void 0 ? void 0 : _a.includes('me')) ? 'mine' : ''}" @click=${() => this._reactMsg(i, r.emoji)}>${r.emoji} <span class="count">${r.count}</span></span>
+              `;
+        })}
+            </div>
+          ` : nothing}
+        </div>
+      </div>
+    `;
+    }
+    _renderAttachment(m) {
+        var _a;
+        const a = m.attachment;
+        if (!a)
+            return nothing;
+        if (a.type === 'call') {
+            const icon = a.callType === 'video' ? svgVideo : svgPhone;
+            const color = (a.callStatus === 'missed' || a.callStatus === 'declined') ? '#ef4444' : '#22c55e';
+            return html `<div class="msg-call-log">
+        <span style="color:${color}">${icon}</span>
+        <div class="msg-call-info">
+          <div class="msg-call-type">${a.callType === 'video' ? 'Video call' : 'Voice call'}</div>
+          <div class="msg-call-status ${a.callStatus}">${a.callStatus === 'completed' ? (a.duration || 'Ended') : a.callStatus === 'declined' ? 'Declined' : 'Missed'}</div>
+        </div>
+      </div>`;
+        }
+        if (a.type === 'image') {
+            return html `<div class="msg-attachment"><img src="${a.decryptedUrl || a.url}" alt="${a.name || 'Image'}"></div>`;
+        }
+        if (a.type === 'audio') {
+            const waveform = ((_a = a.waveform) === null || _a === void 0 ? void 0 : _a.length) ? a.waveform : Array(36).fill(0.15);
+            return html `<div class="msg-attachment"><div class="audio-msg">
+        <button class="audio-play-btn" @click=${(e) => this._toggleAudioPlay(e)}>${svgPlay}</button>
+        <div class="audio-bars">${waveform.map((h) => html `<div class="a-bar" style="height:${Math.round(h * 22 + 3)}px"></div>`)}</div>
+        <span class="audio-dur">${a.duration || '0:00'}</span>
+        <audio src="${a.decryptedUrl || a.url}" preload="metadata" @timeupdate=${(e) => this._onAudioTimeUpdate(e)} @ended=${(e) => this._onAudioEnded(e)}></audio>
+      </div></div>`;
+        }
+        // Generic file
+        return html `<div class="msg-attachment"><a class="file-card" href="${a.decryptedUrl || a.url}" target="_blank" download="${a.name || 'file'}">
+      ${svgFile}
+      <div style="flex:1;min-width:0"><div style="font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${a.name || 'File'}</div>${a.fileSize ? html `<div style="font-size:10px;color:var(--text-secondary);margin-top:1px">${(a.fileSize / 1024).toFixed(0)} KB</div>` : nothing}</div>
+      ${svgDownload}
+    </a></div>`;
+    }
+    _renderContextMenu() {
+        const cm = this._contextMenu;
+        const msg = this.messages[cm.msgIdx];
+        const isMe = (msg === null || msg === void 0 ? void 0 : msg.from) === 'me';
+        return html `
+      <div class="ctx-menu" @mousedown=${(e) => e.preventDefault()} @touchstart=${(e) => e.stopPropagation()} style="top:${cm.y}px;${cm.right != null ? `right:${cm.right}px` : `left:${cm.left}px`}">
+        <div class="ctx-reactions">
+          ${REACTIONS.map(r => html `<button @click=${() => this._reactMsg(cm.msgIdx, r.key)} title=${r.label}>${r.key}</button>`)}
+        </div>
+        <button @click=${() => this._replyMsg(cm.msgIdx)}>↩ Reply</button>
+        ${isMe && !(msg === null || msg === void 0 ? void 0 : msg.deleted) ? html `<button @click=${() => this._editMsg(cm.msgIdx)}>✏️ Edit</button>` : nothing}
+        ${isMe && !(msg === null || msg === void 0 ? void 0 : msg.deleted) ? html `<button class="danger" @click=${() => this._deleteMsg(cm.msgIdx)}>🗑 Delete</button>` : nothing}
+      </div>
+    `;
+    }
+    _renderEmojiPicker() {
+        return html `
+      <div class="emoji-picker" @mousedown=${(e) => e.preventDefault()}>
+        <div class="emoji-quick">
+          ${REACTIONS.map(r => html `<button @click=${() => this._insertEmoji(r.key)} title=${r.label}>${r.key}</button>`)}
+        </div>
+        <div class="emoji-grid">
+          ${EMOJI_GRID.map(e => html `<button @click=${() => this._insertEmoji(e)}>${e}</button>`)}
+        </div>
+      </div>
+    `;
+    }
+    _renderInputBar() {
+        return html `
+      <div class="chat-input">
+        <div class="input-tools">
+          <button @click=${() => this._pickFile()} title="Attach file">${svgAttach}</button>
+          <button @click=${() => this._pickFile(true)} title="Send image">${svgImage}</button>
+          <button @click=${() => this._toggleEmoji()} title="Emoji">${svgSmile}</button>
+        </div>
+        <textarea rows="1" placeholder="Type a message..." @keydown=${(e) => this._onInputKeydown(e)}></textarea>
+        <button class="send-btn" @mousedown=${(e) => e.preventDefault()} @click=${() => this._sendMessage()} title="Send">${svgSend}</button>
+      </div>
+    `;
+    }
+};
+NrChatPanelElement.styles = chatPanelStyles;
+__decorate([
+    property({ type: Array })
+], NrChatPanelElement.prototype, "messages", void 0);
+__decorate([
+    property({ type: Object })
+], NrChatPanelElement.prototype, "currentUser", void 0);
+__decorate([
+    property({ type: String, attribute: 'conversation-id' })
+], NrChatPanelElement.prototype, "conversationId", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatPanelElement.prototype, "isGroup", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrChatPanelElement.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NrChatPanelElement.prototype, "compact", void 0);
+__decorate([
+    property({ type: String, attribute: 'empty-text' })
+], NrChatPanelElement.prototype, "emptyText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-input' })
+], NrChatPanelElement.prototype, "hideInput", void 0);
+__decorate([
+    state()
+], NrChatPanelElement.prototype, "_showEmoji", void 0);
+__decorate([
+    state()
+], NrChatPanelElement.prototype, "_contextMenu", void 0);
+__decorate([
+    state()
+], NrChatPanelElement.prototype, "_replyTo", void 0);
+__decorate([
+    state()
+], NrChatPanelElement.prototype, "_editingIdx", void 0);
+__decorate([
+    state()
+], NrChatPanelElement.prototype, "_typing", void 0);
+NrChatPanelElement = __decorate([
+    customElement('nr-chat-panel')
+], NrChatPanelElement);
+export { NrChatPanelElement };
+//# sourceMappingURL=chat-panel.component.js.map

package/dist/src/components/chat-panel/chat-panel.style.d.ts

@@ -0,0 +1,2 @@
+export declare const chatPanelStyles: import("lit").CSSResult;
+//# sourceMappingURL=chat-panel.style.d.ts.map