@nuraly/lumenui 0.2.2 → 0.3.3

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

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

@@ -0,0 +1,127 @@
+import { css } from 'lit';
+export const chatPanelStyles = css `
+  :host { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
+
+  /* Messages */
+  .chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
+  .chat-messages::before { content: ''; flex: 1; }
+  .date-sep { align-self: center; font-size: 11px; color: var(--text-secondary, #536471); background: var(--input-bg, #f2f2f7); padding: 3px 10px; border-radius: 9999px; margin: 8px 0; }
+  .msg-row { display: flex; gap: 6px; align-items: flex-end; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+  .msg-row .msg { -webkit-user-select: text; user-select: text; }
+  .msg-row.me { flex-direction: row-reverse; }
+  .msg-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: #fff; flex-shrink: 0; margin-bottom: 16px; }
+  .msg-sender-name { font-size: 10px; font-weight: 600; padding: 0 4px; margin-bottom: 1px; }
+  .msg-bubble { max-width: 75%; }
+  .msg { padding: 7px 12px; border-radius: 16px; font-size: 13px; line-height: 1.4; word-wrap: break-word; }
+  .msg.me { background: var(--accent, #7c3aed); color: #fff; border-bottom-right-radius: 4px; }
+  .msg.them { background: var(--input-bg, #f2f2f7); color: var(--text, #1d1d1f); border-bottom-left-radius: 4px; }
+  .msg-footer { display: flex; align-items: center; gap: 4px; margin-top: 1px; padding: 0 4px; }
+  .msg-footer.me { justify-content: flex-end; }
+  .msg-time { font-size: 10px; color: var(--text-secondary, #536471); }
+  .msg-read { display: flex; align-items: center; }
+  .msg-read svg { width: 14px; height: 14px; }
+
+  /* Attachments */
+  .msg-attachment { margin-top: 4px; }
+  .msg-attachment img { max-width: 200px; border-radius: 8px; cursor: pointer; display: block; }
+  .msg-attachment .file-card { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--input-bg, #f2f2f7); border-radius: 10px; font-size: 12px; text-decoration: none; color: var(--text); cursor: pointer; min-width: 160px; }
+  .msg-attachment .file-card:hover { background: var(--border, #e5e7eb); }
+
+  /* Audio player */
+  .audio-msg { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--input-bg, #f2f2f7); border-radius: 16px; min-width: 180px; }
+  .audio-play-btn { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--accent, #7c3aed); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .audio-bars { flex: 1; display: flex; align-items: center; gap: 1.5px; height: 24px; }
+  .a-bar { width: 2.5px; min-height: 3px; border-radius: 1.5px; background: rgba(0,0,0,0.2); transition: background 0.1s; }
+  .a-bar.played { background: var(--accent, #7c3aed); }
+  .audio-dur { font-size: 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 28px; text-align: right; }
+  .audio-msg audio { display: none; }
+  .me .audio-msg { background: rgba(255,255,255,0.15); }
+  .me .audio-play-btn { background: #fff; color: var(--accent, #7c3aed); }
+  .me .a-bar { background: rgba(255,255,255,0.3); }
+  .me .a-bar.played { background: #fff; }
+  .me .audio-dur { color: rgba(255,255,255,0.7); }
+
+  /* Call logs */
+  .msg-call-log { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--input-bg, #f2f2f7); border-radius: 10px; min-width: 160px; }
+  .msg-call-info { flex: 1; }
+  .msg-call-type { font-size: 12px; font-weight: 600; }
+  .msg-call-status { font-size: 10px; color: var(--text-secondary); }
+  .msg-call-status.missed, .msg-call-status.declined { color: #ef4444; }
+  .msg-call-status.completed { color: #22c55e; }
+
+  /* Reactions */
+  .msg-reactions { display: flex; gap: 3px; margin-top: 2px; padding: 0 4px; flex-wrap: wrap; }
+  .msg-reactions .reaction { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 10px; background: var(--input-bg, #f2f2f7); font-size: 11px; cursor: pointer; border: 1px solid transparent; transition: transform 0.12s; }
+  .msg-reactions .reaction:hover { border-color: var(--accent, #7c3aed); transform: scale(1.05); }
+  .msg-reactions .reaction.mine { background: color-mix(in srgb, var(--accent, #7c3aed) 15%, transparent); border-color: var(--accent, #7c3aed); }
+  .msg-reactions .reaction svg { width: 12px; height: 12px; }
+  .msg-reactions .reaction .count { font-size: 10px; color: var(--text-secondary); }
+
+  /* Reply quote */
+  .msg-reply-quote { font-size: 10px; color: var(--text-secondary); padding: 3px 6px; margin-bottom: 2px; border-left: 2px solid var(--accent, #7c3aed); border-radius: 2px; background: rgba(124,58,237,0.05); }
+  .reply-bar { display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--input-bg, #f2f2f7); border-left: 3px solid var(--accent, #7c3aed); font-size: 11px; color: var(--text-secondary); }
+  .reply-bar .reply-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .reply-bar button { border: none; background: none; cursor: pointer; color: var(--text-secondary); font-size: 14px; padding: 2px; }
+
+  /* Edited/deleted/encrypted */
+  .msg-edited { font-size: 9px; color: var(--text-secondary); font-style: italic; }
+  .msg-deleted { font-style: italic; color: var(--text-secondary); }
+  .msg-e2e { font-size: 9px; margin-left: 3px; opacity: 0.6; }
+
+  /* Inline edit */
+  .edit-inline { display: flex; align-items: center; gap: 3px; }
+  .edit-input { flex: 1; border: 1px solid var(--accent, #7c3aed); border-radius: 6px; padding: 3px 6px; font-size: 12px; outline: none; background: var(--bg, #fff); color: var(--text); min-width: 80px; }
+  .edit-confirm, .edit-cancel { border: none; background: none; cursor: pointer; font-size: 13px; padding: 2px 3px; border-radius: 3px; }
+  .edit-confirm { color: #16a34a; }
+  .edit-cancel { color: #dc2626; }
+
+  /* Context menu */
+  .ctx-menu { position: fixed; background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 3px 0; box-shadow: 0 6px 24px rgba(0,0,0,0.12); z-index: 20; min-width: 120px; backdrop-filter: blur(12px); }
+  .ctx-menu button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; border: none; background: none; font-size: 12px; color: var(--text); cursor: pointer; text-align: left; }
+  .ctx-menu button:hover { background: var(--input-bg); }
+  .ctx-menu button.danger { color: #dc2626; }
+  .ctx-reactions { display: flex; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
+  .ctx-reactions button { width: 30px; height: 30px; padding: 0; min-width: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.12s, background 0.12s; }
+  .ctx-reactions button:hover { background: var(--input-bg); transform: scale(1.2); }
+  .ctx-reactions button svg { width: 16px; height: 16px; }
+
+  /* Emoji picker */
+  .emoji-picker { position: absolute; bottom: 50px; left: 8px; background: var(--bg, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 5px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); z-index: 10; max-height: 200px; overflow-y: auto; }
+  .emoji-picker .emoji-quick { display: flex; gap: 3px; padding: 3px 2px 5px; border-bottom: 1px solid var(--border); margin-bottom: 3px; }
+  .emoji-picker .emoji-quick button { width: 30px; height: 30px; border: none; background: none; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; }
+  .emoji-picker .emoji-quick button:hover { background: var(--input-bg); transform: scale(1.2); }
+  .emoji-picker .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
+  .emoji-picker .emoji-grid button { width: 28px; height: 28px; border: none; background: none; font-size: 16px; cursor: pointer; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
+  .emoji-picker .emoji-grid button:hover { background: var(--input-bg); transform: scale(1.1); }
+
+  /* Typing indicator */
+  .typing-indicator { padding: 3px 12px; font-size: 11px; color: var(--text-secondary); font-style: italic; }
+
+  /* Input bar */
+  .chat-input { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border, #e5e7eb); align-items: center; flex-shrink: 0; position: relative; }
+  .chat-input textarea { flex: 1; padding: 8px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 18px; font-size: 13px; outline: none; background: var(--input-bg, #f2f2f7); resize: none; font-family: inherit; line-height: 1.4; max-height: 80px; overflow-y: auto; }
+  .chat-input textarea:focus { border-color: var(--accent, #7c3aed); background: var(--bg, #fff); }
+  .input-tools { display: flex; gap: 1px; }
+  .input-tools button { width: 30px; height: 30px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+  .input-tools button:hover { background: var(--input-bg); color: var(--accent); }
+  .send-btn { width: 32px; height: 32px; border: none; background: var(--accent, #7c3aed); color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .send-btn:hover { background: var(--accent-hover, #6d28d9); }
+
+  /* Empty state */
+  .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); gap: 6px; padding: 24px; }
+  .empty-state svg { width: 36px; height: 36px; opacity: 0.4; }
+  .empty-state span { font-size: 12px; }
+
+  /* Loading */
+  .loading { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 12px; }
+
+  /* Full-size mode overrides */
+  :host(:not([compact])) .msg { font-size: 14px; padding: 8px 14px; border-radius: 18px; }
+  :host(:not([compact])) .msg-bubble { max-width: 65%; }
+  :host(:not([compact])) .msg-avatar { width: 24px; height: 24px; font-size: 10px; }
+  :host(:not([compact])) .chat-messages { padding: 16px; }
+  :host(:not([compact])) .chat-input textarea { font-size: 14px; padding: 10px 16px; }
+  :host(:not([compact])) .chat-input { padding: 10px 16px; }
+  :host(:not([compact])) .send-btn { width: 38px; height: 38px; }
+`;
+//# sourceMappingURL=chat-panel.style.js.map