@nuraly/lumenui 0.2.1 → 0.3.2

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

@@ -0,0 +1,248 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    position: fixed;
+    display: block;
+    width: 300px;
+  }
+
+  .chat-panel {
+    width: 300px;
+    height: 420px;
+    background: #fff;
+    border: 1px solid var(--nr-presence-border, #e0e0e8);
+    border-radius: 14px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: chatIn 0.18s ease;
+  }
+
+  @keyframes chatIn {
+    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
+    to   { opacity: 1; transform: none; }
+  }
+
+  .chat-panel.minimized {
+    height: auto;
+    width: 200px;
+  }
+
+  .chat-panel.minimized .chat-messages,
+  .chat-panel.minimized .chat-input-row {
+    display: none;
+  }
+
+  .chat-panel.minimized .chat-header {
+    border-bottom: none;
+    border-radius: 14px;
+    cursor: pointer;
+  }
+
+  .chat-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--nr-presence-border, #e0e0e8);
+    flex-shrink: 0;
+    cursor: grab;
+    user-select: none;
+  }
+
+  .chat-header:active {
+    cursor: grabbing;
+  }
+
+  .chat-header-avatar {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    font-weight: 700;
+    color: #fff;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  .chat-header-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .chat-header-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .chat-header-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--nr-presence-text, #0f0f3c);
+  }
+
+  .chat-header-status {
+    font-size: 11px;
+    color: #22c55e;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .chat-header-status::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #22c55e;
+    display: inline-block;
+  }
+
+  .chat-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: none;
+    background: var(--nr-presence-input-bg, #f5f5f8);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #8c8ca8;
+    transition: background 150ms;
+    flex-shrink: 0;
+  }
+
+  .chat-btn:hover {
+    background: var(--nr-presence-border, #e0e0e8);
+    color: var(--nr-presence-text, #0f0f3c);
+  }
+
+  .chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .chat-msg {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-width: 80%;
+  }
+
+  .chat-msg.me {
+    align-self: flex-end;
+    align-items: flex-end;
+  }
+
+  .chat-msg.other {
+    align-self: flex-start;
+    align-items: flex-start;
+  }
+
+  .chat-bubble {
+    padding: 7px 11px;
+    border-radius: 12px;
+    font-size: 12px;
+    line-height: 1.4;
+    word-break: break-word;
+  }
+
+  .chat-msg.me .chat-bubble {
+    background: var(--nr-presence-accent, #7c3aed);
+    color: #fff;
+    border-bottom-right-radius: 3px;
+  }
+
+  .chat-msg.other .chat-bubble {
+    background: var(--nr-presence-input-bg, #f5f5f8);
+    color: var(--nr-presence-text, #0f0f3c);
+    border-bottom-left-radius: 3px;
+  }
+
+  .chat-time {
+    font-size: 10px;
+    color: var(--nr-presence-text-secondary, #8c8ca8);
+    padding: 0 2px;
+  }
+
+  .chat-empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 6px;
+    color: var(--nr-presence-text-secondary, #8c8ca8);
+    font-size: 12px;
+  }
+
+  .chat-empty svg {
+    opacity: 0.35;
+  }
+
+  .chat-input-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 10px;
+    border-top: 1px solid var(--nr-presence-border, #e0e0e8);
+    flex-shrink: 0;
+  }
+
+  .chat-input {
+    flex: 1;
+    border: 1px solid var(--nr-presence-border, #e0e0e8);
+    border-radius: 20px;
+    padding: 6px 12px;
+    font-size: 12px;
+    outline: none;
+    background: var(--nr-presence-input-bg, #f5f5f8);
+    color: var(--nr-presence-text, #0f0f3c);
+    transition: border-color 150ms;
+  }
+
+  .chat-input:focus {
+    border-color: var(--nr-presence-accent, #7c3aed);
+  }
+
+  .chat-send {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    border: none;
+    background: var(--nr-presence-accent, #7c3aed);
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: background 150ms;
+  }
+
+  .chat-send:hover {
+    background: #6d28d9;
+  }
+
+  .chat-send:disabled {
+    background: var(--nr-presence-border, #e0e0e8);
+    cursor: default;
+  }
+`;
+//# sourceMappingURL=presence-chat.style.js.map

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

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import type { PresenceUser } from './presence.types.js';
+import './presence-avatars.component.js';
+import './presence-chat.component.js';
+declare const NrPresenceElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * 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[] }`
+ */
+export declare class NrPresenceElement extends NrPresenceElement_base {
+    static styles: import("lit").CSSResult[];
+    static useShadowDom: boolean;
+    /** Socket.io namespace for presence tracking */
+    namespace: string;
+    /** Socket.io path */
+    socketPath: string;
+    /** The resource being viewed (workflow id, doc id, etc.) */
+    resourceId: string;
+    /** Resource type for group conversation (e.g. 'workflow', 'whiteboard') */
+    resourceType: string;
+    /** Resource name (used as group conversation name) */
+    resourceName: string;
+    /** Current user's id */
+    userId: string;
+    /** Current user object (shown first in avatar strip) */
+    currentUser: PresenceUser | null;
+    /** Additional users to show (e.g. mocks for demo) */
+    extraUsers: PresenceUser[];
+    /** Global messages socket (from layout's /nk/messages connection) for real-time chat */
+    globalSocket: any;
+    private _viewers;
+    private _hasUnreadGroup;
+    private _socket;
+    private _connecting;
+    private _chats;
+    private _chatZ;
+    private _drag;
+    private _boundDragMove;
+    private _boundDragEnd;
+    private _boundEscape;
+    private _boundOnMessage;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _attachGlobalSocket;
+    private _detachGlobalSocket;
+    /** Handle incoming messages from the global /nk/messages socket */
+    private _onSocketMessage;
+    private _connect;
+    private _groupConversationId;
+    private _openGroupChat;
+    private _openDm;
+    private _loadMessages;
+    private _sendMessage;
+    private _closeChat;
+    private _onEscape;
+    private _onDragStart;
+    private _onDragMove;
+    private _onDragEnd;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-presence': NrPresenceElement;
+    }
+}
+export {};
+//# sourceMappingURL=presence.component.d.ts.map