@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/presence/presence.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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, html, nothing, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { styles } from './presence.style.js';
+import './presence-avatars.component.js';
+import './presence-chat.component.js';
+const GROUP_CHAT_KEY = '__group__';
+/**
+ * Top-level presence orchestrator.
+ *
+ * Owns the resource socket for viewer tracking, and uses the global messages
+ * socket (`.globalSocket`) for real-time chat.
+ *
+ * Two chat modes:
+ * - **Group chat**: One conversation per resource. Opened via the chat button.
+ * - **DM**: Private 1-on-1 conversation. Opened by clicking a viewer's avatar.
+ *
+ * @example
+ * ```html
+ * <nr-presence
+ *   namespace="/nk/apps/workflows/socket"
+ *   socket-path="/__nk_socketio/"
+ *   resource-id="workflow-abc123"
+ *   resource-type="workflow"
+ *   resource-name="My Workflow"
+ *   user-id="user-xyz"
+ *   .currentUser=${{ displayName, initials, color, avatarUrl }}
+ *   .globalSocket=${globalSocket}
+ * ></nr-presence>
+ * ```
+ *
+ * @fires presence-changed - Fires when viewer list updates. Detail: `{ viewers: PresenceUser[] }`
+ */
+let NrPresenceElement = class NrPresenceElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Socket.io namespace for presence tracking */
+        this.namespace = '';
+        /** Socket.io path */
+        this.socketPath = '/__nk_socketio/';
+        /** The resource being viewed (workflow id, doc id, etc.) */
+        this.resourceId = '';
+        /** Resource type for group conversation (e.g. 'workflow', 'whiteboard') */
+        this.resourceType = '';
+        /** Resource name (used as group conversation name) */
+        this.resourceName = '';
+        /** Current user's id */
+        this.userId = '';
+        /** Current user object (shown first in avatar strip) */
+        this.currentUser = null;
+        /** Additional users to show (e.g. mocks for demo) */
+        this.extraUsers = [];
+        /** Global messages socket (from layout's /nk/messages connection) for real-time chat */
+        this.globalSocket = null;
+        this._viewers = [];
+        this._hasUnreadGroup = false;
+        this._socket = null;
+        this._connecting = false;
+        this._chats = new Map();
+        this._chatZ = 100;
+        this._drag = null;
+        this._boundDragMove = (e) => this._onDragMove(e);
+        this._boundDragEnd = () => this._onDragEnd();
+        this._boundEscape = (e) => this._onEscape(e);
+        this._boundOnMessage = (data) => this._onSocketMessage(data);
+        // ── Group chat ──
+        this._groupConversationId = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this._boundEscape);
+        this._connect();
+        this._attachGlobalSocket();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this._boundEscape);
+        document.removeEventListener('mousemove', this._boundDragMove);
+        document.removeEventListener('mouseup', this._boundDragEnd);
+        (_a = this._socket) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._socket = null;
+        this._detachGlobalSocket();
+    }
+    updated(changed) {
+        if (changed.has('globalSocket')) {
+            this._detachGlobalSocket(changed.get('globalSocket'));
+            this._attachGlobalSocket();
+        }
+        // Resource socket may not have connected during connectedCallback if userId/
+        // resourceId/namespace were still empty (common during hydration). Retry when
+        // any of them becomes available.
+        if (!this._socket && (changed.has('userId') || changed.has('resourceId') || changed.has('namespace'))) {
+            if (this.userId && this.resourceId && this.namespace) {
+                this._connect();
+            }
+        }
+    }
+    _attachGlobalSocket() {
+        if (this.globalSocket) {
+            this.globalSocket.on('nk:data', this._boundOnMessage);
+        }
+    }
+    _detachGlobalSocket(old) {
+        const sock = old || this.globalSocket;
+        if (sock) {
+            sock.off('nk:data', this._boundOnMessage);
+        }
+    }
+    /** Handle incoming messages from the global /nk/messages socket */
+    _onSocketMessage(data) {
+        if (data.event !== 'message:new')
+            return;
+        const msg = data.data;
+        if (!(msg === null || msg === void 0 ? void 0 : msg.conversationId) || msg.senderId === this.userId)
+            return;
+        for (const [, chat] of this._chats) {
+            if (chat.conversationId === msg.conversationId) {
+                chat.messages = [...chat.messages, {
+                        id: String(msg.id),
+                        senderId: msg.senderId,
+                        text: msg.content,
+                        timestamp: new Date(msg.createdAt).getTime(),
+                        me: false,
+                    }];
+                this.requestUpdate();
+                return;
+            }
+        }
+        // If message is for our group conversation but panel is closed, show unread dot
+        if (this._groupConversationId && msg.conversationId === this._groupConversationId) {
+            this._hasUnreadGroup = true;
+        }
+    }
+    // ── Resource presence socket ──
+    _connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this._socket || this._connecting)
+                return;
+            if (!this.userId || !this.resourceId || !this.namespace)
+                return;
+            this._connecting = true;
+            try {
+                const { io } = yield import('socket.io-client');
+                this._socket = io(this.namespace, {
+                    path: this.socketPath,
+                    query: { __params: JSON.stringify({ userId: this.userId, resourceId: this.resourceId }) },
+                });
+                this._socket.on('nk:data', (data) => {
+                    var _a;
+                    const ev = data.event;
+                    if (ev === 'presence:viewers' || ev === 'presence:joined' || ev === 'presence:left') {
+                        this._viewers = ((_a = data.data) === null || _a === void 0 ? void 0 : _a.viewers) || [];
+                        this.dispatchEvent(new CustomEvent('presence-changed', {
+                            detail: { viewers: this._viewers },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    }
+                });
+            }
+            catch (e) {
+                console.error('[nr-presence] Connection failed:', e);
+            }
+            finally {
+                this._connecting = false;
+            }
+        });
+    }
+    _openGroupChat() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (this._chats.has(GROUP_CHAT_KEY)) {
+                const c = this._chats.get(GROUP_CHAT_KEY);
+                c.minimized = false;
+                c.z = ++this._chatZ;
+                this._hasUnreadGroup = false;
+                this.requestUpdate();
+                return;
+            }
+            const ix = window.innerWidth - 324;
+            const iy = 56;
+            this._chats.set(GROUP_CHAT_KEY, {
+                user: { displayName: this.resourceName || `${this.resourceType} chat`, color: '#7c3aed', initials: '#' },
+                conversationId: null, loading: true,
+                x: ix, y: iy, savedX: ix, savedY: iy,
+                z: ++this._chatZ, minimized: false, messages: [], draftText: '',
+            });
+            this._hasUnreadGroup = false;
+            this.requestUpdate();
+            try {
+                const res = yield fetch('/api/conversations/resource', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        resourceType: this.resourceType,
+                        resourceId: this.resourceId,
+                        resourceName: this.resourceName,
+                    }),
+                });
+                const data = yield res.json();
+                const chat = this._chats.get(GROUP_CHAT_KEY);
+                if (!chat || !data.conversationId) {
+                    if (chat)
+                        chat.loading = false;
+                    this.requestUpdate();
+                    return;
+                }
+                chat.conversationId = data.conversationId;
+                this._groupConversationId = data.conversationId;
+                // Join the conversation room on the global socket
+                if ((_a = this.globalSocket) === null || _a === void 0 ? void 0 : _a.connected) {
+                    this.globalSocket.emit('nk:conversation:join', { conversationId: data.conversationId });
+                }
+                // Load existing messages
+                yield this._loadMessages(chat);
+            }
+            catch (e) {
+                console.error('[nr-presence] Failed to open group chat:', e);
+                const chat = this._chats.get(GROUP_CHAT_KEY);
+                if (chat)
+                    chat.loading = false;
+            }
+            this.requestUpdate();
+        });
+    }
+    // ── DM chat ──
+    _openDm(user) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const key = user.userId || user.displayName;
+            // Clicking your own avatar opens the group chat (notes to self in context)
+            if (key === this.userId) {
+                this._openGroupChat();
+                return;
+            }
+            if (this._chats.has(key)) {
+                this._chats.get(key).z = ++this._chatZ;
+                this.requestUpdate();
+                return;
+            }
+            const offset = [...this._chats.keys()].filter(k => k !== GROUP_CHAT_KEY).length;
+            const ix = window.innerWidth - 324 - (offset + 1) * 24;
+            const iy = 56 + (offset + 1) * 24;
+            this._chats.set(key, {
+                user, conversationId: null, loading: true,
+                x: ix, y: iy, savedX: ix, savedY: iy,
+                z: ++this._chatZ, minimized: false, messages: [], draftText: '',
+            });
+            this.requestUpdate();
+            if (!user.userId)
+                return;
+            try {
+                const dmRes = yield fetch('/api/conversations/dm', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ targetUserId: user.userId }),
+                });
+                const dm = yield dmRes.json();
+                const chat = this._chats.get(key);
+                if (!chat || !dm.conversationId) {
+                    if (chat)
+                        chat.loading = false;
+                    this.requestUpdate();
+                    return;
+                }
+                chat.conversationId = dm.conversationId;
+                if ((_a = this.globalSocket) === null || _a === void 0 ? void 0 : _a.connected) {
+                    this.globalSocket.emit('nk:conversation:join', { conversationId: dm.conversationId });
+                }
+                yield this._loadMessages(chat);
+            }
+            catch (e) {
+                console.error('[nr-presence] Failed to open DM:', e);
+                const chat = this._chats.get(key);
+                if (chat)
+                    chat.loading = false;
+            }
+            this.requestUpdate();
+        });
+    }
+    // ── Shared helpers ──
+    _loadMessages(chat) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            if (!chat.conversationId)
+                return;
+            try {
+                const res = yield fetch(`/api/conversations/${chat.conversationId}/messages`);
+                const data = yield res.json();
+                if ((_a = data.messages) === null || _a === void 0 ? void 0 : _a.length) {
+                    chat.messages = data.messages.map((m) => ({
+                        id: String(m.id),
+                        senderId: m.sender_id,
+                        text: m.content,
+                        timestamp: new Date(m.created_at).getTime(),
+                        me: m.sender_id === this.userId,
+                    }));
+                }
+            }
+            catch (e) {
+                console.error('[nr-presence] Failed to load messages:', e);
+            }
+            chat.loading = false;
+        });
+    }
+    _sendMessage(key, text) {
+        var _a;
+        const chat = this._chats.get(key);
+        if (!(chat === null || chat === void 0 ? void 0 : chat.conversationId))
+            return;
+        // Optimistic local update
+        chat.messages = [...chat.messages, {
+                id: crypto.randomUUID(),
+                senderId: this.userId,
+                text,
+                timestamp: Date.now(),
+                me: true,
+            }];
+        this.requestUpdate();
+        // Send via global socket
+        if ((_a = this.globalSocket) === null || _a === void 0 ? void 0 : _a.connected) {
+            this.globalSocket.emit('nk:message:send', {
+                conversationId: chat.conversationId,
+                content: text,
+                type: 'text',
+            });
+        }
+    }
+    // ── Chat panel UI management ──
+    _closeChat(key) {
+        this._chats.delete(key);
+        this.requestUpdate();
+    }
+    _onEscape(e) {
+        if (e.key !== 'Escape' || this._chats.size === 0)
+            return;
+        let topKey = '';
+        let topZ = -1;
+        for (const [k, c] of this._chats) {
+            if (c.z > topZ) {
+                topZ = c.z;
+                topKey = k;
+            }
+        }
+        if (!topKey)
+            return;
+        const c = this._chats.get(topKey);
+        if (!c.minimized) {
+            c.savedX = c.x;
+            c.savedY = c.y;
+            c.minimized = true;
+            this.requestUpdate();
+        }
+        else {
+            this._closeChat(topKey);
+        }
+    }
+    _onDragStart(key, offsetX, offsetY) {
+        const c = this._chats.get(key);
+        if (!c)
+            return;
+        c.z = ++this._chatZ;
+        this._drag = { userId: key, ox: offsetX, oy: offsetY };
+        document.addEventListener('mousemove', this._boundDragMove);
+        document.addEventListener('mouseup', this._boundDragEnd);
+    }
+    _onDragMove(e) {
+        if (!this._drag)
+            return;
+        const c = this._chats.get(this._drag.userId);
+        if (!c)
+            return;
+        c.x = Math.max(0, Math.min(window.innerWidth - 300, e.clientX - this._drag.ox));
+        c.y = Math.max(0, Math.min(window.innerHeight - 60, e.clientY - this._drag.oy));
+        this.requestUpdate();
+    }
+    _onDragEnd() {
+        this._drag = null;
+        document.removeEventListener('mousemove', this._boundDragMove);
+        document.removeEventListener('mouseup', this._boundDragEnd);
+    }
+    render() {
+        const cu = this.currentUser;
+        const allUsers = [
+            ...(cu ? [cu] : []),
+            ...this._viewers.filter(v => !cu || v.userId !== cu.userId),
+            ...this.extraUsers,
+        ];
+        const minimizedList = [...this._chats.entries()].filter(([, c]) => c.minimized);
+        return html `
+      <nr-presence-avatars
+        .users=${allUsers}
+        @user-click=${(e) => this._openDm(e.detail.user)}
+      ></nr-presence-avatars>
+
+      ${this.resourceType ? html `
+        <button class="group-chat-btn" title="Team chat" @click=${() => this._openGroupChat()}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <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>
+          ${this._hasUnreadGroup ? html `<span class="unread-dot"></span>` : nothing}
+        </button>
+      ` : nothing}
+
+      ${[...this._chats.entries()].map(([key, c]) => {
+            const minIdx = minimizedList.findIndex(([k]) => k === key);
+            return html `
+          <nr-presence-chat
+            .user=${c.user}
+            .x=${c.x}
+            .y=${c.y}
+            .z=${c.z}
+            .minimized=${c.minimized}
+            .minimizedIndex=${minIdx >= 0 ? minIdx : 0}
+            .messages=${c.messages}
+            .loading=${c.loading}
+            @focus=${() => { c.z = ++this._chatZ; this.requestUpdate(); }}
+            @drag-start=${(e) => this._onDragStart(key, e.detail.offsetX, e.detail.offsetY)}
+            @minimize=${() => { c.savedX = c.x; c.savedY = c.y; c.minimized = true; this.requestUpdate(); }}
+            @restore=${() => {
+                c.x = Math.max(0, window.innerWidth - (12 + minIdx * 212) - 300);
+                c.y = Math.max(0, window.innerHeight - 420 - 56);
+                c.minimized = false;
+                c.z = ++this._chatZ;
+                this.requestUpdate();
+            }}
+            @float=${() => { c.minimized = false; c.x = c.savedX; c.y = c.savedY; c.z = ++this._chatZ; this.requestUpdate(); }}
+            @close=${() => this._closeChat(key)}
+            @send=${(e) => this._sendMessage(key, e.detail.text)}
+          ></nr-presence-chat>
+        `;
+        })}
+    `;
+    }
+};
+NrPresenceElement.styles = [styles, css `
+    .group-chat-btn {
+      display: flex; align-items: center; justify-content: center;
+      width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bg, #fff);
+      background: var(--accent, #7c3aed); color: #fff; cursor: pointer;
+      margin-left: 4px; transition: transform 120ms, background 120ms;
+      position: relative;
+    }
+    .group-chat-btn:hover { transform: scale(1.1); background: var(--accent-hover, #6d28d9); }
+    .group-chat-btn svg { width: 14px; height: 14px; }
+    .unread-dot {
+      position: absolute; top: -2px; right: -2px; width: 8px; height: 8px;
+      border-radius: 50%; background: #ef4444; border: 2px solid var(--bg, #fff);
+    }
+  `];
+NrPresenceElement.useShadowDom = true;
+__decorate([
+    property({ type: String })
+], NrPresenceElement.prototype, "namespace", void 0);
+__decorate([
+    property({ type: String, attribute: 'socket-path' })
+], NrPresenceElement.prototype, "socketPath", void 0);
+__decorate([
+    property({ type: String, attribute: 'resource-id' })
+], NrPresenceElement.prototype, "resourceId", void 0);
+__decorate([
+    property({ type: String, attribute: 'resource-type' })
+], NrPresenceElement.prototype, "resourceType", void 0);
+__decorate([
+    property({ type: String, attribute: 'resource-name' })
+], NrPresenceElement.prototype, "resourceName", void 0);
+__decorate([
+    property({ type: String, attribute: 'user-id' })
+], NrPresenceElement.prototype, "userId", void 0);
+__decorate([
+    property({ type: Object })
+], NrPresenceElement.prototype, "currentUser", void 0);
+__decorate([
+    property({ type: Array })
+], NrPresenceElement.prototype, "extraUsers", void 0);
+__decorate([
+    property({ type: Object })
+], NrPresenceElement.prototype, "globalSocket", void 0);
+__decorate([
+    state()
+], NrPresenceElement.prototype, "_viewers", void 0);
+__decorate([
+    state()
+], NrPresenceElement.prototype, "_hasUnreadGroup", void 0);
+NrPresenceElement = __decorate([
+    customElement('nr-presence')
+], NrPresenceElement);
+export { NrPresenceElement };
+//# sourceMappingURL=presence.component.js.map

package/dist/src/components/presence/presence.style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=presence.style.d.ts.map

package/dist/src/components/presence/presence.style.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+//# sourceMappingURL=presence.style.js.map

package/dist/src/components/presence/presence.types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export interface PresenceUser {
+    userId?: string;
+    displayName: string;
+    initials?: string;
+    color: string;
+    avatarUrl?: string | null;
+}
+export interface PresenceChatMessage {
+    id: string;
+    senderId: string;
+    text: string;
+    timestamp: number;
+    me: boolean;
+}
+export interface PresenceChatState {
+    user: PresenceUser;
+    conversationId: string | null;
+    loading: boolean;
+    x: number;
+    y: number;
+    savedX: number;
+    savedY: number;
+    z: number;
+    minimized: boolean;
+    messages: PresenceChatMessage[];
+    draftText: string;
+}
+//# sourceMappingURL=presence.types.d.ts.map

package/dist/src/components/presence/presence.types.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=presence.types.js.map

package/dist/src/components/presence/react.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { NrPresenceElement } from './presence.component.js';
+import { NrPresenceAvatarsElement } from './presence-avatars.component.js';
+import { NrPresenceChatElement } from './presence-chat.component.js';
+export declare const NrPresence: import("@lit-labs/react").ReactWebComponent<NrPresenceElement, {
+    'presence-changed': string;
+}>;
+export declare const NrPresenceAvatars: import("@lit-labs/react").ReactWebComponent<NrPresenceAvatarsElement, {
+    'user-click': string;
+}>;
+export declare const NrPresenceChat: import("@lit-labs/react").ReactWebComponent<NrPresenceChatElement, {
+    'drag-start': string;
+    minimize: string;
+    restore: string;
+    float: string;
+    close: string;
+    send: string;
+    focus: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/presence/react.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrPresenceElement } from './presence.component.js';
+import { NrPresenceAvatarsElement } from './presence-avatars.component.js';
+import { NrPresenceChatElement } from './presence-chat.component.js';
+export const NrPresence = createComponent({
+    tagName: 'nr-presence',
+    elementClass: NrPresenceElement,
+    react: React,
+    events: {
+        'presence-changed': 'presence-changed',
+    },
+});
+export const NrPresenceAvatars = createComponent({
+    tagName: 'nr-presence-avatars',
+    elementClass: NrPresenceAvatarsElement,
+    react: React,
+    events: {
+        'user-click': 'user-click',
+    },
+});
+export const NrPresenceChat = createComponent({
+    tagName: 'nr-presence-chat',
+    elementClass: NrPresenceChatElement,
+    react: React,
+    events: {
+        'drag-start': 'drag-start',
+        'minimize': 'minimize',
+        'restore': 'restore',
+        'float': 'float',
+        'close': 'close',
+        'send': 'send',
+        'focus': 'focus',
+    },
+});
+//# sourceMappingURL=react.js.map