@nuraly/lumenui 0.2.2 → 0.3.2

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

@@ -0,0 +1,54 @@
+export interface ChatMessage {
+    id: string | number;
+    from: 'me' | 'them' | 'system' | 'date';
+    senderId?: string;
+    senderName?: string;
+    senderInitials?: string;
+    senderColor?: string;
+    text: string;
+    time?: string;
+    status?: 'sent' | 'delivered' | 'read';
+    attachment?: ChatAttachment | null;
+    replyTo?: {
+        text: string;
+        from: string;
+    } | null;
+    reactions?: ChatReaction[];
+    edited?: boolean;
+    deleted?: boolean;
+    encrypted?: boolean;
+}
+export interface ChatAttachment {
+    url: string;
+    decryptedUrl?: string;
+    type: 'image' | 'audio' | 'file' | 'call';
+    name?: string;
+    fileName?: string;
+    mimeType?: string;
+    fileSize?: number;
+    duration?: string;
+    waveform?: number[];
+    callType?: 'audio' | 'video';
+    callStatus?: 'completed' | 'missed' | 'declined';
+    iv?: string;
+}
+export interface ChatReaction {
+    emoji: string;
+    count: number;
+    users: string[];
+}
+export interface ChatParticipant {
+    user_id: string;
+    username?: string;
+    display_name?: string;
+    avatar_url?: string;
+    color?: string;
+    initials?: string;
+}
+export interface ChatUser {
+    userId: string;
+    name: string;
+    initials: string;
+    color: string;
+}
+//# sourceMappingURL=chat-panel.types.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=chat-panel.types.js.map

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

@@ -0,0 +1,3 @@
+export { NrChatPanelElement } from './chat-panel.component.js';
+export type { ChatMessage, ChatAttachment, ChatReaction, ChatParticipant, ChatUser } from './chat-panel.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,2 @@
+export { NrChatPanelElement } from './chat-panel.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/chatbot/bundle.js

@@ -2706,7 +2706,7 @@ var Gt=function(t,e,n,i){return new(n||(n=Promise))(function(o,s){function r(t){
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var ve=function(t,e,n,i){return new(n||(n=Promise))(function(o,s){function r(t){try{l(i.next(t))}catch(t){s(t)}}function a(t){try{l(i.throw(t))}catch(t){s(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n(function(t){t(e)})).then(r,a)}l((i=i.apply(t,e||[])).next())})},be=function(t){return this instanceof be?(this.v=t,this):new be(t)},ye=function(t,e,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var i,o=n.apply(t,e||[]),s=[];return i=Object.create(("function"==typeof AsyncIterator?AsyncIterator:Object).prototype),r("next"),r("throw"),r("return",function(t){return function(e){return Promise.resolve(e).then(t,c)}}),i[Symbol.asyncIterator]=function(){return this},i;function r(t,e){o[t]&&(i[t]=function(e){return new Promise(function(n,i){s.push([t,e,n,i])>1||a(t,e)})},e&&(i[t]=e(i[t])))}function a(t,e){try{(n=o[t](e)).value instanceof be?Promise.resolve(n.value.v).then(l,c):d(s[0][2],n)}catch(t){d(s[0][3],t)}var n}function l(t){a("next",t)}function c(t){a("throw",t)}function d(t,e){t(e),s.shift(),s.length&&a(s[0][0],s[0][1])}};class xe{constructor(){this.id="workflow-socket",this.name="Workflow Socket Provider",this.capabilities={streaming:!0,fileUpload:!0,modules:!0,functions:!1},this.socket=null,this.config=null,this.connected=!1,this.sessionId=`session_${Date.now()}_${Math.random().toString(36).substring(2,11)}`,this.activeExecutions=new Map}connect(t){return ve(this,void 0,void 0,function*(){if(!t.workflowId)throw new Error("Workflow ID is required");this.config=Object.assign({socketUrl:t.socketUrl||("undefined"!=typeof window?window.location.origin:"http://localhost:8000"),socketPath:t.socketPath||"/__nk_socketio/",triggerEndpoint:t.triggerEndpoint||"/api/v1/workflows/{workflowId}/trigger/chat",responseTimeout:t.responseTimeout||6e4},t);const e=`${this.config.socketUrl}/nk/apps/workflows/socket`;return this.socket=h(e,{path:this.config.socketPath,query:{l:JSON.stringify({workflowId:this.config.workflowId})},transports:["websocket","polling"],autoConnect:!0,reconnection:!0,reconnectionAttempts:5}),new Promise((t,e)=>{const n=setTimeout(()=>{e(new Error("Socket connection timeout"))},1e4);this.socket.on("connect",()=>{clearTimeout(n),this.connected=!0,console.log("[WorkflowSocketProvider] Connected:",this.socket.id),this.subscribeToWorkflow(this.config.workflowId),t()}),this.socket.on("connect_error",t=>{clearTimeout(n),console.error("[WorkflowSocketProvider] Connection error:",t),e(t)}),this.socket.on("disconnect",t=>{this.connected=!1,console.log("[WorkflowSocketProvider] Disconnected:",t)}),this.setupEventListeners()})})}subscribeToWorkflow(t){this.socket&&(this.socket.emit("nk:subscribe:workflow",{workflowId:t}),console.log("[WorkflowSocketProvider] Subscribed to workflow:",t))}subscribeToExecution(t){this.socket&&(this.socket.emit("nk:subscribe:execution",{executionId:t}),console.log("[WorkflowSocketProvider] Subscribed to execution:",t))}setupEventListeners(){this.socket&&(this.socket.onAny((t,...e)=>{console.log("[WorkflowSocketProvider] RAW event:",t,e[0])}),this.socket.on("nk:data",t=>{(null==t?void 0:t.event)&&t.data&&this._handleEvent(t.event,t.data)}),this.socket.on("execution:chat-message",t=>this._handleEvent("execution:chat-message",t)),this.socket.on("execution:started",t=>this._handleEvent("execution:started",t)),this.socket.on("execution:completed",t=>this._handleEvent("execution:completed",t)),this.socket.on("execution:failed",t=>this._handleEvent("execution:failed",t)),this.socket.on("execution:node-started",t=>this._handleEvent("execution:node-started",t)),this.socket.on("execution:node-completed",t=>this._handleEvent("execution:node-completed",t)))}_handleEvent(t,e){var n,i,o,s,r;switch(t){case"execution:chat-message":{const t=e.executionId,o=e.message;if(console.log("[WorkflowSocketProvider] Chat message received:",t,o),!t||!o)return;const s=this.activeExecutions.get(t);if(!s)return void(null===(i=null===(n=this.config)||void 0===n?void 0:n.onMessage)||void 0===i||i.call(n,o));s.completed||s.messages.push(o);break}case"execution:started":console.log("[WorkflowSocketProvider] Execution started (event):",e.executionId);break;case"execution:completed":{const t=e.executionId;if(console.log("[WorkflowSocketProvider] Execution completed:",t),!t)return;const n=this.activeExecutions.get(t);if(!n||n.completed)return;n.completed=!0;let i="";if(null===(o=this.config)||void 0===o?void 0:o.extractResponse)i=this.config.extractResponse(e);else if(n.messages.length>0)i=n.messages.join("\n\n");else if(e.outputData)try{const t="string"==typeof e.outputData?JSON.parse(e.outputData):e.outputData;i=t.response||t.message||t.result||JSON.stringify(t)}catch(t){i=e.outputData}n.resolve(i||"Workflow completed"),this.activeExecutions.delete(t);break}case"execution:failed":{const t=e.executionId,n=e.errorMessage||e.error||"Workflow execution failed";if(console.error("[WorkflowSocketProvider] Execution failed:",t,n),!t)return;const i=this.activeExecutions.get(t);if(!i||i.completed)return;i.completed=!0,i.reject(new Error(n)),this.activeExecutions.delete(t);break}case"execution:node-started":console.log("[WorkflowSocketProvider] Node started:",e.nodeName),e.nodeName&&(null===(s=this.onNodeStarted)||void 0===s||s.call(this,e.nodeName));break;case"execution:node-completed":console.log("[WorkflowSocketProvider] Node completed:",e.nodeName),e.nodeName&&(null===(r=this.onNodeCompleted)||void 0===r||r.call(this,e.nodeName))}}disconnect(){return ve(this,void 0,void 0,function*(){var t;this.socket&&((null===(t=this.config)||void 0===t?void 0:t.workflowId)&&this.socket.emit("nk:unsubscribe:workflow",{workflowId:this.config.workflowId}),this.socket.disconnect(),this.socket=null),this.connected=!1,this.activeExecutions.clear(),console.log("[WorkflowSocketProvider] Disconnected")})}isConnected(){var t;return this.connected&&!0===(null===(t=this.socket)||void 0===t?void 0:t.connected)}sendMessage(t,e){return ye(this,arguments,function*(){var n,i;if(!this.connected||!this.socket||!this.config)return yield yield be(this.formatError("Not Connected","Socket is not connected. Please check your connection.")),yield be(void 0);try{const o=this.buildInput(t,e),s=this.config.triggerEndpoint.replace("{workflowId}",this.config.workflowId),r=`${this.config.socketUrl}${s}`;console.log("[WorkflowSocketProvider] Triggering workflow:",r,o);const a=yield be(fetch(r,{method:"POST",headers:Object.assign({"Content-Type":"application/json"},this.config.headers),body:JSON.stringify(o)}));if(!a.ok){const t=yield be(a.text().catch(()=>a.statusText));return yield yield be(this.formatError(`${a.status} ${a.statusText}`,t)),yield be(void 0)}const l=a.headers.get("X-Execution-Id")||(null===(n=yield be(a.json().catch(()=>({}))))||void 0===n?void 0:n.executionId);if(!l)return yield yield be(this.formatError("Execution Error","No execution ID received from server")),yield be(void 0);console.log("[WorkflowSocketProvider] Execution started:",l),(null===(i=this.config)||void 0===i?void 0:i.onExecutionStart)&&this.config.onExecutionStart(l,this.config.workflowId),this.subscribeToExecution(l);const c=new Promise((t,e)=>{this.activeExecutions.set(l,{messages:[],resolve:t,reject:e,completed:!1}),setTimeout(()=>{const n=this.activeExecutions.get(l);n&&!n.completed&&(n.completed=!0,n.messages.length>0?t(n.messages.join("\n\n")):e(new Error("Execution timeout")),this.activeExecutions.delete(l))},this.config.responseTimeout)}),d=this.activeExecutions.get(l);let h=0;const u=setInterval(()=>{d.messages.length>h&&(h=d.messages.length)},100);try{for(;!d.completed;){if(d.messages.length>0){const t=d.messages.join("\n\n");yield yield be(t)}yield be(new Promise(t=>setTimeout(t,200)))}clearInterval(u);const t=yield be(c);yield yield be(t)}catch(t){throw clearInterval(u),t}}catch(t){const e=t instanceof Error?t.message:String(t);yield yield be(this.formatError("Workflow Error",e)),this.onError(t instanceof Error?t:new Error(String(t)))}})}buildInput(t,e){var n,i,o;if(null===(n=this.config)||void 0===n?void 0:n.buildInput)return this.config.buildInput(t,e);console.log("[WorkflowSocketProvider] buildInput context.uploadedFiles:",e.uploadedFiles);const s=(null===(i=e.currentThread)||void 0===i?void 0:i.id)||this.sessionId,r={message:t,threadId:s,modules:e.selectedModules,metadata:e.metadata,files:(null===(o=e.uploadedFiles)||void 0===o?void 0:o.map(t=>{var e;return{id:t.id,name:t.name,type:t.type,mimeType:t.mimeType,url:t.url,base64:null===(e=t.metadata)||void 0===e?void 0:e.base64}}))||[]};return console.log("[WorkflowSocketProvider] buildInput threadId:",s,"files count:",r.files.length),r}setWorkflowId(t){this.config&&(this.socket&&this.config.workflowId&&this.socket.emit("nk:unsubscribe:workflow",{workflowId:this.config.workflowId}),this.config.workflowId=t,this.socket&&this.connected&&this.subscribeToWorkflow(t))}getSocket(){return this.socket}uploadFile(t){return ve(this,void 0,void 0,function*(){const e=`file-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,n=URL.createObjectURL(t),i=yield this.fileToBase64(t),o=t.type||"application/octet-stream",s=this.determineFileType(o);return console.log(`[WorkflowSocketProvider] File prepared: ${t.name} (${t.size} bytes)`),{id:e,name:t.name,size:t.size,type:s,mimeType:o,url:n,previewUrl:s===X.Image?n:void 0,uploadProgress:100,metadata:{provider:"workflow-socket",uploadedAt:(new Date).toISOString(),base64:i}}})}fileToBase64(t){return new Promise((e,n)=>{const i=new FileReader;i.onload=()=>{const t=i.result,n=t.split(",")[1]||t;e(n)},i.onerror=n,i.readAsDataURL(t)})}determineFileType(t){return t.startsWith("image/")?X.Image:t.startsWith("video/")?X.Video:t.startsWith("audio/")?X.Audio:t.startsWith("application/pdf")||t.includes("document")||t.startsWith("text/")?X.Document:t.includes("zip")||t.includes("rar")||t.includes("tar")?X.Archive:t.includes("javascript")||t.includes("json")||t.includes("xml")?X.Code:X.Unknown}formatError(t,e){return`[ERROR_START][ERROR_TITLE_START]${t}[ERROR_TITLE_END]${e}[ERROR_END]`}onError(t){console.error("[WorkflowSocketProvider] Error:",t)}}
+ */var ve=function(t,e,n,i){return new(n||(n=Promise))(function(o,s){function r(t){try{l(i.next(t))}catch(t){s(t)}}function a(t){try{l(i.throw(t))}catch(t){s(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n(function(t){t(e)})).then(r,a)}l((i=i.apply(t,e||[])).next())})},be=function(t){return this instanceof be?(this.v=t,this):new be(t)},ye=function(t,e,n){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var i,o=n.apply(t,e||[]),s=[];return i=Object.create(("function"==typeof AsyncIterator?AsyncIterator:Object).prototype),r("next"),r("throw"),r("return",function(t){return function(e){return Promise.resolve(e).then(t,c)}}),i[Symbol.asyncIterator]=function(){return this},i;function r(t,e){o[t]&&(i[t]=function(e){return new Promise(function(n,i){s.push([t,e,n,i])>1||a(t,e)})},e&&(i[t]=e(i[t])))}function a(t,e){try{(n=o[t](e)).value instanceof be?Promise.resolve(n.value.v).then(l,c):d(s[0][2],n)}catch(t){d(s[0][3],t)}var n}function l(t){a("next",t)}function c(t){a("throw",t)}function d(t,e){t(e),s.shift(),s.length&&a(s[0][0],s[0][1])}};class xe{constructor(){this.id="workflow-socket",this.name="Workflow Socket Provider",this.capabilities={streaming:!0,fileUpload:!0,modules:!0,functions:!1},this.socket=null,this.config=null,this.connected=!1,this.sessionId=`session_${Date.now()}_${Math.random().toString(36).substring(2,11)}`,this.activeExecutions=new Map}connect(t){return ve(this,void 0,void 0,function*(){if(!t.workflowId)throw new Error("Workflow ID is required");this.config=Object.assign({socketUrl:t.socketUrl||("undefined"!=typeof window?window.location.origin:"http://localhost:8000"),socketPath:t.socketPath||"/__nk_socketio/",triggerEndpoint:t.triggerEndpoint||"/api/v1/workflows/{workflowId}/trigger/chat",responseTimeout:t.responseTimeout||6e4},t);const e=`${this.config.socketUrl}/nk/apps/workflows/:workflowId`;return this.socket=h(e,{path:this.config.socketPath,query:{l:JSON.stringify({workflowId:this.config.workflowId})},transports:["websocket","polling"],autoConnect:!0,reconnection:!0,reconnectionAttempts:5}),new Promise((t,e)=>{const n=setTimeout(()=>{e(new Error("Socket connection timeout"))},1e4);this.socket.on("connect",()=>{clearTimeout(n),this.connected=!0,console.log("[WorkflowSocketProvider] Connected:",this.socket.id),this.subscribeToWorkflow(this.config.workflowId),t()}),this.socket.on("connect_error",t=>{clearTimeout(n),console.error("[WorkflowSocketProvider] Connection error:",t),e(t)}),this.socket.on("disconnect",t=>{this.connected=!1,console.log("[WorkflowSocketProvider] Disconnected:",t)}),this.setupEventListeners()})})}subscribeToWorkflow(t){this.socket&&(this.socket.emit("nk:subscribe:workflow",{workflowId:t}),console.log("[WorkflowSocketProvider] Subscribed to workflow:",t))}subscribeToExecution(t){this.socket&&(this.socket.emit("nk:subscribe:execution",{executionId:t}),console.log("[WorkflowSocketProvider] Subscribed to execution:",t))}setupEventListeners(){this.socket&&(this.socket.onAny((t,...e)=>{console.log("[WorkflowSocketProvider] RAW event:",t,e[0])}),this.socket.on("nk:data",t=>{(null==t?void 0:t.event)&&t.data&&this._handleEvent(t.event,t.data)}),this.socket.on("execution:chat-message",t=>this._handleEvent("execution:chat-message",t)),this.socket.on("execution:started",t=>this._handleEvent("execution:started",t)),this.socket.on("execution:completed",t=>this._handleEvent("execution:completed",t)),this.socket.on("execution:failed",t=>this._handleEvent("execution:failed",t)),this.socket.on("execution:node-started",t=>this._handleEvent("execution:node-started",t)),this.socket.on("execution:node-completed",t=>this._handleEvent("execution:node-completed",t)))}_handleEvent(t,e){var n,i,o,s,r;switch(t){case"execution:chat-message":{const t=e.executionId,o=e.message;if(console.log("[WorkflowSocketProvider] Chat message received:",t,o),!t||!o)return;const s=this.activeExecutions.get(t);if(!s)return void(null===(i=null===(n=this.config)||void 0===n?void 0:n.onMessage)||void 0===i||i.call(n,o));s.completed||s.messages.push(o);break}case"execution:started":console.log("[WorkflowSocketProvider] Execution started (event):",e.executionId);break;case"execution:completed":{const t=e.executionId;if(console.log("[WorkflowSocketProvider] Execution completed:",t),!t)return;const n=this.activeExecutions.get(t);if(!n||n.completed)return;n.completed=!0;let i="";if(null===(o=this.config)||void 0===o?void 0:o.extractResponse)i=this.config.extractResponse(e);else if(n.messages.length>0)i=n.messages.join("\n\n");else if(e.outputData)try{const t="string"==typeof e.outputData?JSON.parse(e.outputData):e.outputData;i=t.response||t.message||t.result||JSON.stringify(t)}catch(t){i=e.outputData}n.resolve(i||"Workflow completed"),this.activeExecutions.delete(t);break}case"execution:failed":{const t=e.executionId,n=e.errorMessage||e.error||"Workflow execution failed";if(console.error("[WorkflowSocketProvider] Execution failed:",t,n),!t)return;const i=this.activeExecutions.get(t);if(!i||i.completed)return;i.completed=!0,i.reject(new Error(n)),this.activeExecutions.delete(t);break}case"execution:node-started":console.log("[WorkflowSocketProvider] Node started:",e.nodeName),e.nodeName&&(null===(s=this.onNodeStarted)||void 0===s||s.call(this,e.nodeName));break;case"execution:node-completed":console.log("[WorkflowSocketProvider] Node completed:",e.nodeName),e.nodeName&&(null===(r=this.onNodeCompleted)||void 0===r||r.call(this,e.nodeName))}}disconnect(){return ve(this,void 0,void 0,function*(){var t;this.socket&&((null===(t=this.config)||void 0===t?void 0:t.workflowId)&&this.socket.emit("nk:unsubscribe:workflow",{workflowId:this.config.workflowId}),this.socket.disconnect(),this.socket=null),this.connected=!1,this.activeExecutions.clear(),console.log("[WorkflowSocketProvider] Disconnected")})}isConnected(){var t;return this.connected&&!0===(null===(t=this.socket)||void 0===t?void 0:t.connected)}sendMessage(t,e){return ye(this,arguments,function*(){var n,i;if(!this.connected||!this.socket||!this.config)return yield yield be(this.formatError("Not Connected","Socket is not connected. Please check your connection.")),yield be(void 0);try{const o=this.buildInput(t,e),s=this.config.triggerEndpoint.replace("{workflowId}",this.config.workflowId),r=`${this.config.socketUrl}${s}`;console.log("[WorkflowSocketProvider] Triggering workflow:",r,o);const a=yield be(fetch(r,{method:"POST",headers:Object.assign({"Content-Type":"application/json"},this.config.headers),body:JSON.stringify(o)}));if(!a.ok){const t=yield be(a.text().catch(()=>a.statusText));return yield yield be(this.formatError(`${a.status} ${a.statusText}`,t)),yield be(void 0)}const l=a.headers.get("X-Execution-Id")||(null===(n=yield be(a.json().catch(()=>({}))))||void 0===n?void 0:n.executionId);if(!l)return yield yield be(this.formatError("Execution Error","No execution ID received from server")),yield be(void 0);console.log("[WorkflowSocketProvider] Execution started:",l),(null===(i=this.config)||void 0===i?void 0:i.onExecutionStart)&&this.config.onExecutionStart(l,this.config.workflowId),this.subscribeToExecution(l);const c=new Promise((t,e)=>{this.activeExecutions.set(l,{messages:[],resolve:t,reject:e,completed:!1}),setTimeout(()=>{const n=this.activeExecutions.get(l);n&&!n.completed&&(n.completed=!0,n.messages.length>0?t(n.messages.join("\n\n")):e(new Error("Execution timeout")),this.activeExecutions.delete(l))},this.config.responseTimeout)}),d=this.activeExecutions.get(l);let h=0;const u=setInterval(()=>{d.messages.length>h&&(h=d.messages.length)},100);try{for(;!d.completed;){if(d.messages.length>0){const t=d.messages.join("\n\n");yield yield be(t)}yield be(new Promise(t=>setTimeout(t,200)))}clearInterval(u);const t=yield be(c);yield yield be(t)}catch(t){throw clearInterval(u),t}}catch(t){const e=t instanceof Error?t.message:String(t);yield yield be(this.formatError("Workflow Error",e)),this.onError(t instanceof Error?t:new Error(String(t)))}})}buildInput(t,e){var n,i,o;if(null===(n=this.config)||void 0===n?void 0:n.buildInput)return this.config.buildInput(t,e);console.log("[WorkflowSocketProvider] buildInput context.uploadedFiles:",e.uploadedFiles);const s=(null===(i=e.currentThread)||void 0===i?void 0:i.id)||this.sessionId,r={message:t,threadId:s,modules:e.selectedModules,metadata:e.metadata,files:(null===(o=e.uploadedFiles)||void 0===o?void 0:o.map(t=>{var e;return{id:t.id,name:t.name,type:t.type,mimeType:t.mimeType,url:t.url,base64:null===(e=t.metadata)||void 0===e?void 0:e.base64}}))||[]};return console.log("[WorkflowSocketProvider] buildInput threadId:",s,"files count:",r.files.length),r}setWorkflowId(t){this.config&&(this.socket&&this.config.workflowId&&this.socket.emit("nk:unsubscribe:workflow",{workflowId:this.config.workflowId}),this.config.workflowId=t,this.socket&&this.connected&&this.subscribeToWorkflow(t))}getSocket(){return this.socket}uploadFile(t){return ve(this,void 0,void 0,function*(){const e=`file-${Date.now()}-${Math.random().toString(36).substring(2,9)}`,n=URL.createObjectURL(t),i=yield this.fileToBase64(t),o=t.type||"application/octet-stream",s=this.determineFileType(o);return console.log(`[WorkflowSocketProvider] File prepared: ${t.name} (${t.size} bytes)`),{id:e,name:t.name,size:t.size,type:s,mimeType:o,url:n,previewUrl:s===X.Image?n:void 0,uploadProgress:100,metadata:{provider:"workflow-socket",uploadedAt:(new Date).toISOString(),base64:i}}})}fileToBase64(t){return new Promise((e,n)=>{const i=new FileReader;i.onload=()=>{const t=i.result,n=t.split(",")[1]||t;e(n)},i.onerror=n,i.readAsDataURL(t)})}determineFileType(t){return t.startsWith("image/")?X.Image:t.startsWith("video/")?X.Video:t.startsWith("audio/")?X.Audio:t.startsWith("application/pdf")||t.includes("document")||t.startsWith("text/")?X.Document:t.includes("zip")||t.includes("rar")||t.includes("tar")?X.Archive:t.includes("javascript")||t.includes("json")||t.includes("xml")?X.Code:X.Unknown}formatError(t,e){return`[ERROR_START][ERROR_TITLE_START]${t}[ERROR_TITLE_END]${e}[ERROR_END]`}onError(t){console.error("[WorkflowSocketProvider] Error:",t)}}
 /**
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen

package/dist/src/components/chatbot/providers/workflow-socket-provider.js

@@ -84,7 +84,7 @@ export class WorkflowSocketProvider {
             this.config = Object.assign({ socketUrl: config.socketUrl || (typeof window !== 'undefined' ? window.location.origin : 'http://localhost:8000'), socketPath: config.socketPath || '/__nk_socketio/', triggerEndpoint: config.triggerEndpoint || '/api/v1/workflows/{workflowId}/trigger/chat', responseTimeout: config.responseTimeout || 60000 }, config);
             // Connect to the workflow socket namespace so socket.ts handler runs and
             // registers this socket in the execution bridge's subscriber map.
-            const socketNs = `${this.config.socketUrl}/nk/apps/workflows/socket`;
+            const socketNs = `${this.config.socketUrl}/nk/apps/workflows/:workflowId`;
             this.socket = io(socketNs, {
                 path: this.config.socketPath,
                 query: { __params: JSON.stringify({ workflowId: this.config.workflowId }) },

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

@@ -1,9 +1,9 @@
-import{css as e,html as t,nothing as i,LitElement as s}from"lit";import{property as r,customElement as n,state as o}from"lit/decorators.js";
+import{css as t,html as e,nothing as i,LitElement as s}from"lit";import{property as n,customElement as r,state as o}from"lit/decorators.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const a=e=>class extends e{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},c=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(c())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!c())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,s):console.error(s.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},d=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const s=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,s)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const s=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,s)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},l=new Set,p=new Map;
+ */const a=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},c=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(c())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!c())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,s):console.error(s.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},d=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},l=new Set,p=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -14,12 +14,12 @@ import{css as e,html as t,nothing as i,LitElement as s}from"lit";import{property
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-const u=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=m(i);e&&function(e,t,i){var s;if(!p.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),p.set(e,i)}const r=p.get(e),n=`doc:${e}`;if(l.has(n)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,r],l.add(n)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const n=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${e}`;l.has(n)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,r],l.add(n)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t},f=e=>h(a(d(u(e))));function m(e){return Array.isArray(e)?e.map(e=>m(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}
+const u=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),i=t.styles;if(i){const t=f(i);t&&function(t,e,i){var s;if(!p.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),p.set(t,i)}const n=p.get(t),r=`doc:${t}`;if(l.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],l.add(r)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;l.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,n],l.add(r)),e=i.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e},v=t=>h(a(d(u(t))));function f(t){return Array.isArray(t)?t.map(t=>f(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
 /**
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const v=e`
+ */const m=t`
   :host {
     display: contents;
   }
@@ -28,7 +28,7 @@ const u=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */,b=e`
+ */,g=t`
   :host { display: flex; align-items: center; }
 
   .presence {
@@ -130,30 +130,30 @@ const u=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var g=function(e,t,i,s){for(var r,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o};let x=class extends(f(s)){constructor(){super(...arguments),this.users=[],this.max=5}_handleClick(e){this.dispatchEvent(new CustomEvent("user-click",{detail:{user:e},bubbles:!0,composed:!0}))}render(){const e=this.users.slice(0,this.max),s=Math.max(0,this.users.length-this.max);return t`
+ */;var b=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};let x=class extends(v(s)){constructor(){super(...arguments),this.users=[],this.max=5}_handleClick(t){this.dispatchEvent(new CustomEvent("user-click",{detail:{user:t},bubbles:!0,composed:!0}))}render(){const t=this.users.slice(0,this.max),s=Math.max(0,this.users.length-this.max);return e`
       <div class="presence">
-        ${e.map(e=>t`
-          <div class="pa" @click=${()=>this._handleClick(e)}>
-            <div class="pa-avatar" style="background:${e.color}">
-              ${e.avatarUrl?t`<img src="${e.avatarUrl}" alt="${e.displayName}">`:e.initials||(e.displayName||"?")[0].toUpperCase()}
+        ${t.map(t=>e`
+          <div class="pa" @click=${()=>this._handleClick(t)}>
+            <div class="pa-avatar" style="background:${t.color}">
+              ${t.avatarUrl?e`<img src="${t.avatarUrl}" alt="${t.displayName}">`:t.initials||(t.displayName||"?")[0].toUpperCase()}
             </div>
             <span class="pa-dot"></span>
-            <span class="pa-tip">${e.displayName}</span>
+            <span class="pa-tip">${t.displayName}</span>
           </div>
         `)}
-        ${s>0?t`
+        ${s>0?e`
           <div class="pa pa-extra">
             <div class="pa-avatar" title="${s} more">+${s}</div>
           </div>
         `:i}
       </div>
-    `}};x.styles=b,x.useShadowDom=!0,g([r({type:Array})],x.prototype,"users",void 0),g([r({type:Number})],x.prototype,"max",void 0),x=g([n("nr-presence-avatars")],x);
+    `}};x.styles=g,x.useShadowDom=!0,b([n({type:Array})],x.prototype,"users",void 0),b([n({type:Number})],x.prototype,"max",void 0),x=b([r("nr-presence-avatars")],x);
 /**
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-const w=e`
+const y=t`
   :host {
     position: fixed;
     display: block;
@@ -398,7 +398,7 @@ const w=e`
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var y=function(e,t,i,s){for(var r,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o};let k=class extends(f(s)){constructor(){super(...arguments),this.user={displayName:"",color:"#7c3aed"},this.x=300,this.y=200,this.z=100,this.minimized=!1,this.minimizedIndex=0,this.messages=[],this._draft=""}_emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}_onHeaderMousedown(e){if(this.minimized)return;const t=this.getBoundingClientRect();this._emit("drag-start",{offsetX:e.clientX-t.left,offsetY:e.clientY-t.top}),e.preventDefault()}_onHeaderClick(){this.minimized&&this._emit("restore")}_onSend(){const e=this._draft.trim();e&&(this._emit("send",{text:e}),this._draft="")}_onInputKeydown(e){"Enter"===e.key&&this._onSend(),"Escape"===e.key&&this._emit("close")}updated(){this.style.position="fixed",this.style.display="block",this.style.width="300px",this.minimized?(this.style.right=12+212*this.minimizedIndex+"px",this.style.bottom="0",this.style.top="auto",this.style.left="auto"):(this.style.left=`${this.x}px`,this.style.top=`${this.y}px`,this.style.right="auto",this.style.bottom="auto"),this.style.zIndex=String(this.z)}render(){return t`
+ */;var w=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};let k=class extends(v(s)){constructor(){super(...arguments),this.user={displayName:"",color:"#7c3aed"},this.x=300,this.y=200,this.z=100,this.minimized=!1,this.minimizedIndex=0,this.messages=[],this.loading=!1,this._draft=""}_emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}_onHeaderMousedown(t){if(this.minimized)return;const e=this.getBoundingClientRect();this._emit("drag-start",{offsetX:t.clientX-e.left,offsetY:t.clientY-e.top}),t.preventDefault()}_onHeaderClick(){this.minimized&&this._emit("restore")}_onSend(){const t=this._draft.trim();t&&(this._emit("send",{text:t}),this._draft="")}_onInputKeydown(t){"Enter"===t.key&&this._onSend(),"Escape"===t.key&&this._emit("close")}updated(){this.style.position="fixed",this.style.display="block",this.style.width="300px",this.minimized?(this.style.right=12+212*this.minimizedIndex+"px",this.style.bottom="0",this.style.top="auto",this.style.left="auto"):(this.style.left=`${this.x}px`,this.style.top=`${this.y}px`,this.style.right="auto",this.style.bottom="auto"),this.style.zIndex=String(this.z)}render(){return e`
       <div
         class="chat-panel${this.minimized?" minimized":""}"
         @mousedown=${()=>this._emit("focus")}
@@ -409,19 +409,19 @@ const w=e`
           @click=${this._onHeaderClick}
         >
           <div class="chat-header-avatar" style="background:${this.user.color}">
-            ${this.user.avatarUrl?t`<img src="${this.user.avatarUrl}" alt="${this.user.displayName}">`:this.user.initials||(this.user.displayName||"?")[0].toUpperCase()}
+            ${this.user.avatarUrl?e`<img src="${this.user.avatarUrl}" alt="${this.user.displayName}">`:this.user.initials||(this.user.displayName||"?")[0].toUpperCase()}
           </div>
           <div class="chat-header-info">
             <div class="chat-header-name">${this.user.displayName}</div>
-            ${this.minimized?i:t`<div class="chat-header-status">Online</div>`}
+            ${this.minimized?i:e`<div class="chat-header-status">Online</div>`}
           </div>
 
-          ${this.minimized?t`
+          ${this.minimized?e`
             <button
               class="chat-btn"
               title="Float"
-              @mousedown=${e=>e.stopPropagation()}
-              @click=${e=>{e.stopPropagation(),this._emit("float")}}
+              @mousedown=${t=>t.stopPropagation()}
+              @click=${t=>{t.stopPropagation(),this._emit("float")}}
             >
               <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                 <polyline points="15 3 21 3 21 9"/>
@@ -430,12 +430,12 @@ const w=e`
                 <line x1="3" y1="21" x2="10" y2="14"/>
               </svg>
             </button>
-          `:t`
+          `:e`
             <button
               class="chat-btn"
               title="Minimize"
-              @mousedown=${e=>e.stopPropagation()}
-              @click=${e=>{e.stopPropagation(),this._emit("minimize")}}
+              @mousedown=${t=>t.stopPropagation()}
+              @click=${t=>{t.stopPropagation(),this._emit("minimize")}}
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                 <line x1="5" y1="12" x2="19" y2="12"/>
@@ -446,8 +446,8 @@ const w=e`
           <button
             class="chat-btn"
             title="Close"
-            @mousedown=${e=>e.stopPropagation()}
-            @click=${e=>{e.stopPropagation(),this._emit("close")}}
+            @mousedown=${t=>t.stopPropagation()}
+            @click=${t=>{t.stopPropagation(),this._emit("close")}}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
               <path d="M18 6 6 18M6 6l12 12"/>
@@ -456,7 +456,11 @@ const w=e`
         </div>
 
         <div class="chat-messages">
-          ${0===this.messages.length?t`
+          ${this.loading?e`
+            <div class="chat-empty">
+              <span>Loading...</span>
+            </div>
+          `:0===this.messages.length?e`
             <div class="chat-empty">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.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"/>
@@ -464,10 +468,10 @@ const w=e`
               <span>No messages yet</span>
               <span style="font-size:11px">Say hi to ${this.user.displayName}!</span>
             </div>
-          `:this.messages.map(e=>t`
-            <div class="chat-msg ${e.me?"me":"other"}">
-              <div class="chat-bubble">${e.text}</div>
-              <span class="chat-time">${new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}</span>
+          `:this.messages.map(t=>e`
+            <div class="chat-msg ${t.me?"me":"other"}">
+              <div class="chat-bubble">${t.text}</div>
+              <span class="chat-time">${new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}</span>
             </div>
           `)}
         </div>
@@ -478,12 +482,13 @@ const w=e`
             class="chat-input"
             placeholder="Type a message..."
             .value=${this._draft}
-            @input=${e=>{this._draft=e.target.value}}
+            ?disabled=${this.loading}
+            @input=${t=>{this._draft=t.target.value}}
             @keydown=${this._onInputKeydown}
           >
           <button
             class="chat-send"
-            ?disabled=${!this._draft.trim()}
+            ?disabled=${!this._draft.trim()||this.loading}
             @click=${this._onSend}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
@@ -493,19 +498,28 @@ const w=e`
           </button>
         </div>
       </div>
-    `}};k.styles=w,k.useShadowDom=!0,y([r({type:Object})],k.prototype,"user",void 0),y([r({type:Number})],k.prototype,"x",void 0),y([r({type:Number})],k.prototype,"y",void 0),y([r({type:Number})],k.prototype,"z",void 0),y([r({type:Boolean})],k.prototype,"minimized",void 0),y([r({type:Number})],k.prototype,"minimizedIndex",void 0),y([r({type:Array})],k.prototype,"messages",void 0),y([o()],k.prototype,"_draft",void 0),k=y([n("nr-presence-chat")],k);
+    `}};k.styles=y,k.useShadowDom=!0,w([n({type:Object})],k.prototype,"user",void 0),w([n({type:Number})],k.prototype,"x",void 0),w([n({type:Number})],k.prototype,"y",void 0),w([n({type:Number})],k.prototype,"z",void 0),w([n({type:Boolean})],k.prototype,"minimized",void 0),w([n({type:Number})],k.prototype,"minimizedIndex",void 0),w([n({type:Array})],k.prototype,"messages",void 0),w([n({type:Boolean})],k.prototype,"loading",void 0),w([o()],k.prototype,"_draft",void 0),k=w([r("nr-presence-chat")],k);
 /**
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var $=function(e,t,i,s){for(var r,n=arguments.length,o=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s,a=e.length-1;a>=0;a--)(r=e[a])&&(o=(n<3?r(o):n>3?r(t,i,o):r(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o},z=function(e,t,i,s){return new(i||(i=Promise))(function(r,n){function o(e){try{c(s.next(e))}catch(e){n(e)}}function a(e){try{c(s.throw(e))}catch(e){n(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(o,a)}c((s=s.apply(e,t||[])).next())})};let C=class extends(f(s)){constructor(){super(...arguments),this.namespace="",this.socketPath="/__nk_socketio/",this.resourceId="",this.userId="",this.currentUser=null,this.extraUsers=[],this._viewers=[],this._socket=null,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)}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this._boundEscape),this._connect()}disconnectedCallback(){var e;super.disconnectedCallback(),document.removeEventListener("keydown",this._boundEscape),document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd),null===(e=this._socket)||void 0===e||e.disconnect(),this._socket=null}_connect(){return z(this,void 0,void 0,function*(){if(this.userId&&this.resourceId&&this.namespace)try{const{io:e}=yield import("socket.io-client");this._socket=e(this.namespace,{path:this.socketPath,query:{i:JSON.stringify({userId:this.userId,resourceId:this.resourceId})}}),this._socket.on("nk:data",e=>{var t;const i=e.event;"presence:viewers"!==i&&"presence:joined"!==i&&"presence:left"!==i||(this._viewers=(null===(t=e.data)||void 0===t?void 0:t.viewers)||[],this.dispatchEvent(new CustomEvent("presence-changed",{detail:{viewers:this._viewers},bubbles:!0,composed:!0})))})}catch(e){console.error("[nr-presence] Connection failed:",e)}})}_openChat(e){const t=e.userId||e.displayName;if(this._chats.has(t))this._chats.get(t).z=++this._chatZ;else{const i=24*this._chats.size,s=window.innerWidth-324-i,r=56+i;this._chats.set(t,{user:e,x:s,y:r,savedX:s,savedY:r,z:++this._chatZ,minimized:!1,messages:[],draftText:""})}this.requestUpdate()}_closeChat(e){this._chats.delete(e),this.requestUpdate()}_onEscape(e){if("Escape"!==e.key||0===this._chats.size)return;let t="",i=-1;for(const[e,s]of this._chats)s.z>i&&(i=s.z,t=e);if(!t)return;const s=this._chats.get(t);s.minimized?this._closeChat(t):(s.savedX=s.x,s.savedY=s.y,s.minimized=!0,this.requestUpdate())}_onDragStart(e,t,i){const s=this._chats.get(e);s&&(s.z=++this._chatZ,this._drag={userId:e,ox:t,oy:i},document.addEventListener("mousemove",this._boundDragMove),document.addEventListener("mouseup",this._boundDragEnd))}_onDragMove(e){if(!this._drag)return;const t=this._chats.get(this._drag.userId);t&&(t.x=Math.max(0,Math.min(window.innerWidth-300,e.clientX-this._drag.ox)),t.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 e=this.currentUser,s=[...e?[e]:[],...this._viewers.filter(t=>!e||t.userId!==e.userId),...this.extraUsers],r=[...this._chats.entries()].filter(([,e])=>e.minimized);return t`
+var $=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o},z=function(t,e,i,s){return new(i||(i=Promise))(function(n,r){function o(t){try{c(s.next(t))}catch(t){r(t)}}function a(t){try{c(s.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?n(t.value):(e=t.value,e instanceof i?e:new i(function(t){t(e)})).then(o,a)}c((s=s.apply(t,e||[])).next())})};const S="__group__";let C=class extends(v(s)){constructor(){super(...arguments),this.namespace="",this.socketPath="/__nk_socketio/",this.resourceId="",this.resourceType="",this.resourceName="",this.userId="",this.currentUser=null,this.extraUsers=[],this.globalSocket=null,this._viewers=[],this._hasUnreadGroup=!1,this._socket=null,this._connecting=!1,this._chats=new Map,this._chatZ=100,this._drag=null,this._boundDragMove=t=>this._onDragMove(t),this._boundDragEnd=()=>this._onDragEnd(),this._boundEscape=t=>this._onEscape(t),this._boundOnMessage=t=>this._onSocketMessage(t),this._groupConversationId=null}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this._boundEscape),this._connect(),this._attachGlobalSocket()}disconnectedCallback(){var t;super.disconnectedCallback(),document.removeEventListener("keydown",this._boundEscape),document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd),null===(t=this._socket)||void 0===t||t.disconnect(),this._socket=null,this._detachGlobalSocket()}updated(t){t.has("globalSocket")&&(this._detachGlobalSocket(t.get("globalSocket")),this._attachGlobalSocket()),!this._socket&&(t.has("userId")||t.has("resourceId")||t.has("namespace"))&&this.userId&&this.resourceId&&this.namespace&&this._connect()}_attachGlobalSocket(){this.globalSocket&&this.globalSocket.on("nk:data",this._boundOnMessage)}_detachGlobalSocket(t){const e=t||this.globalSocket;e&&e.off("nk:data",this._boundOnMessage)}_onSocketMessage(t){if("message:new"!==t.event)return;const e=t.data;if((null==e?void 0:e.conversationId)&&e.senderId!==this.userId){for(const[,t]of this._chats)if(t.conversationId===e.conversationId)return t.messages=[...t.messages,{id:String(e.id),senderId:e.senderId,text:e.content,timestamp:new Date(e.createdAt).getTime(),me:!1}],void this.requestUpdate();this._groupConversationId&&e.conversationId===this._groupConversationId&&(this._hasUnreadGroup=!0)}}_connect(){return z(this,void 0,void 0,function*(){if(!this._socket&&!this._connecting&&this.userId&&this.resourceId&&this.namespace){this._connecting=!0;try{const{io:t}=yield import("socket.io-client");this._socket=t(this.namespace,{path:this.socketPath,query:{i:JSON.stringify({userId:this.userId,resourceId:this.resourceId})}}),this._socket.on("nk:data",t=>{var e;const i=t.event;"presence:viewers"!==i&&"presence:joined"!==i&&"presence:left"!==i||(this._viewers=(null===(e=t.data)||void 0===e?void 0:e.viewers)||[],this.dispatchEvent(new CustomEvent("presence-changed",{detail:{viewers:this._viewers},bubbles:!0,composed:!0})))})}catch(t){console.error("[nr-presence] Connection failed:",t)}finally{this._connecting=!1}}})}_openGroupChat(){return z(this,void 0,void 0,function*(){var t;if(this._chats.has(S)){const t=this._chats.get(S);return t.minimized=!1,t.z=++this._chatZ,this._hasUnreadGroup=!1,void this.requestUpdate()}const e=window.innerWidth-324;this._chats.set(S,{user:{displayName:this.resourceName||`${this.resourceType} chat`,color:"#7c3aed",initials:"#"},conversationId:null,loading:!0,x:e,y:56,savedX:e,savedY:56,z:++this._chatZ,minimized:!1,messages:[],draftText:""}),this._hasUnreadGroup=!1,this.requestUpdate();try{const e=yield fetch("/api/conversations/resource",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({resourceType:this.resourceType,resourceId:this.resourceId,resourceName:this.resourceName})}),i=yield e.json(),s=this._chats.get(S);if(!s||!i.conversationId)return s&&(s.loading=!1),void this.requestUpdate();s.conversationId=i.conversationId,this._groupConversationId=i.conversationId,(null===(t=this.globalSocket)||void 0===t?void 0:t.connected)&&this.globalSocket.emit("nk:conversation:join",{conversationId:i.conversationId}),yield this._loadMessages(s)}catch(t){console.error("[nr-presence] Failed to open group chat:",t);const e=this._chats.get(S);e&&(e.loading=!1)}this.requestUpdate()})}_openDm(t){return z(this,void 0,void 0,function*(){var e;const i=t.userId||t.displayName;if(i===this.userId)return void this._openGroupChat();if(this._chats.has(i))return this._chats.get(i).z=++this._chatZ,void this.requestUpdate();const s=[...this._chats.keys()].filter(t=>t!==S).length,n=window.innerWidth-324-24*(s+1),r=56+24*(s+1);if(this._chats.set(i,{user:t,conversationId:null,loading:!0,x:n,y:r,savedX:n,savedY:r,z:++this._chatZ,minimized:!1,messages:[],draftText:""}),this.requestUpdate(),t.userId){try{const s=yield fetch("/api/conversations/dm",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({targetUserId:t.userId})}),n=yield s.json(),r=this._chats.get(i);if(!r||!n.conversationId)return r&&(r.loading=!1),void this.requestUpdate();r.conversationId=n.conversationId,(null===(e=this.globalSocket)||void 0===e?void 0:e.connected)&&this.globalSocket.emit("nk:conversation:join",{conversationId:n.conversationId}),yield this._loadMessages(r)}catch(t){console.error("[nr-presence] Failed to open DM:",t);const e=this._chats.get(i);e&&(e.loading=!1)}this.requestUpdate()}})}_loadMessages(t){return z(this,void 0,void 0,function*(){var e;if(t.conversationId){try{const i=yield fetch(`/api/conversations/${t.conversationId}/messages`),s=yield i.json();(null===(e=s.messages)||void 0===e?void 0:e.length)&&(t.messages=s.messages.map(t=>({id:String(t.id),senderId:t.sender_id,text:t.content,timestamp:new Date(t.created_at).getTime(),me:t.sender_id===this.userId})))}catch(t){console.error("[nr-presence] Failed to load messages:",t)}t.loading=!1}})}_sendMessage(t,e){var i;const s=this._chats.get(t);(null==s?void 0:s.conversationId)&&(s.messages=[...s.messages,{id:crypto.randomUUID(),senderId:this.userId,text:e,timestamp:Date.now(),me:!0}],this.requestUpdate(),(null===(i=this.globalSocket)||void 0===i?void 0:i.connected)&&this.globalSocket.emit("nk:message:send",{conversationId:s.conversationId,content:e,type:"text"}))}_closeChat(t){this._chats.delete(t),this.requestUpdate()}_onEscape(t){if("Escape"!==t.key||0===this._chats.size)return;let e="",i=-1;for(const[t,s]of this._chats)s.z>i&&(i=s.z,e=t);if(!e)return;const s=this._chats.get(e);s.minimized?this._closeChat(e):(s.savedX=s.x,s.savedY=s.y,s.minimized=!0,this.requestUpdate())}_onDragStart(t,e,i){const s=this._chats.get(t);s&&(s.z=++this._chatZ,this._drag={userId:t,ox:e,oy:i},document.addEventListener("mousemove",this._boundDragMove),document.addEventListener("mouseup",this._boundDragEnd))}_onDragMove(t){if(!this._drag)return;const e=this._chats.get(this._drag.userId);e&&(e.x=Math.max(0,Math.min(window.innerWidth-300,t.clientX-this._drag.ox)),e.y=Math.max(0,Math.min(window.innerHeight-60,t.clientY-this._drag.oy)),this.requestUpdate())}_onDragEnd(){this._drag=null,document.removeEventListener("mousemove",this._boundDragMove),document.removeEventListener("mouseup",this._boundDragEnd)}render(){const t=this.currentUser,s=[...t?[t]:[],...this._viewers.filter(e=>!t||e.userId!==t.userId),...this.extraUsers],n=[...this._chats.entries()].filter(([,t])=>t.minimized);return e`
       <nr-presence-avatars
         .users=${s}
-        @user-click=${e=>this._openChat(e.detail.user)}
+        @user-click=${t=>this._openDm(t.detail.user)}
       ></nr-presence-avatars>
 
-      ${[...this._chats.entries()].map(([e,i])=>{const s=r.findIndex(([t])=>t===e);return t`
+      ${this.resourceType?e`
+        <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?e`<span class="unread-dot"></span>`:i}
+        </button>
+      `:i}
+
+      ${[...this._chats.entries()].map(([t,i])=>{const s=n.findIndex(([e])=>e===t);return e`
           <nr-presence-chat
             .user=${i.user}
             .x=${i.x}
@@ -514,15 +528,28 @@ var $=function(e,t,i,s){for(var r,n=arguments.length,o=n<3?t:null===s?s=Object.g
             .minimized=${i.minimized}
             .minimizedIndex=${s>=0?s:0}
             .messages=${i.messages}
+            .loading=${i.loading}
             @focus=${()=>{i.z=++this._chatZ,this.requestUpdate()}}
-            @drag-start=${t=>this._onDragStart(e,t.detail.offsetX,t.detail.offsetY)}
+            @drag-start=${e=>this._onDragStart(t,e.detail.offsetX,e.detail.offsetY)}
             @minimize=${()=>{i.savedX=i.x,i.savedY=i.y,i.minimized=!0,this.requestUpdate()}}
             @restore=${()=>{i.x=Math.max(0,window.innerWidth-(12+212*s)-300),i.y=Math.max(0,window.innerHeight-420-56),i.minimized=!1,i.z=++this._chatZ,this.requestUpdate()}}
             @float=${()=>{i.minimized=!1,i.x=i.savedX,i.y=i.savedY,i.z=++this._chatZ,this.requestUpdate()}}
-            @close=${()=>this._closeChat(e)}
-            @send=${e=>{i.messages=[...i.messages,{id:crypto.randomUUID(),senderId:this.userId,text:e.detail.text,timestamp:Date.now(),me:!0}],this.requestUpdate()}}
+            @close=${()=>this._closeChat(t)}
+            @send=${e=>this._sendMessage(t,e.detail.text)}
           ></nr-presence-chat>
         `})}
-
-      ${this._chats.size,i}
-    `}};C.styles=v,C.useShadowDom=!0,$([r({type:String})],C.prototype,"namespace",void 0),$([r({type:String,attribute:"socket-path"})],C.prototype,"socketPath",void 0),$([r({type:String,attribute:"resource-id"})],C.prototype,"resourceId",void 0),$([r({type:String,attribute:"user-id"})],C.prototype,"userId",void 0),$([r({type:Object})],C.prototype,"currentUser",void 0),$([r({type:Array})],C.prototype,"extraUsers",void 0),$([o()],C.prototype,"_viewers",void 0),C=$([n("nr-presence")],C);export{x as NrPresenceAvatarsElement,k as NrPresenceChatElement,C as NrPresenceElement};
+    `}};C.styles=[m,t`
+    .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);
+    }
+  `],C.useShadowDom=!0,$([n({type:String})],C.prototype,"namespace",void 0),$([n({type:String,attribute:"socket-path"})],C.prototype,"socketPath",void 0),$([n({type:String,attribute:"resource-id"})],C.prototype,"resourceId",void 0),$([n({type:String,attribute:"resource-type"})],C.prototype,"resourceType",void 0),$([n({type:String,attribute:"resource-name"})],C.prototype,"resourceName",void 0),$([n({type:String,attribute:"user-id"})],C.prototype,"userId",void 0),$([n({type:Object})],C.prototype,"currentUser",void 0),$([n({type:Array})],C.prototype,"extraUsers",void 0),$([n({type:Object})],C.prototype,"globalSocket",void 0),$([o()],C.prototype,"_viewers",void 0),$([o()],C.prototype,"_hasUnreadGroup",void 0),C=$([r("nr-presence")],C);export{x as NrPresenceAvatarsElement,k as NrPresenceChatElement,C as NrPresenceElement};

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

@@ -35,6 +35,8 @@ export declare class NrPresenceChatElement extends NrPresenceChatElement_base {
     minimizedIndex: number;
     /** Chat messages array */
     messages: PresenceChatMessage[];
+    /** Loading state (while DM is being created/loaded) */
+    loading: boolean;
     private _draft;
     private _emit;
     private _onHeaderMousedown;

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

@@ -42,6 +42,8 @@ let NrPresenceChatElement = class NrPresenceChatElement extends NuralyUIBaseMixi
         this.minimizedIndex = 0;
         /** Chat messages array */
         this.messages = [];
+        /** Loading state (while DM is being created/loaded) */
+        this.loading = false;
         this._draft = '';
     }
     _emit(type, detail) {
@@ -155,7 +157,11 @@ let NrPresenceChatElement = class NrPresenceChatElement extends NuralyUIBaseMixi
         </div>
 
         <div class="chat-messages">
-          ${this.messages.length === 0 ? html `
+          ${this.loading ? html `
+            <div class="chat-empty">
+              <span>Loading...</span>
+            </div>
+          ` : this.messages.length === 0 ? html `
             <div class="chat-empty">
               <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.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"/>
@@ -177,12 +183,13 @@ let NrPresenceChatElement = class NrPresenceChatElement extends NuralyUIBaseMixi
             class="chat-input"
             placeholder="Type a message..."
             .value=${this._draft}
+            ?disabled=${this.loading}
             @input=${(e) => { this._draft = e.target.value; }}
             @keydown=${this._onInputKeydown}
           >
           <button
             class="chat-send"
-            ?disabled=${!this._draft.trim()}
+            ?disabled=${!this._draft.trim() || this.loading}
             @click=${this._onSend}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
@@ -218,6 +225,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], NrPresenceChatElement.prototype, "messages", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrPresenceChatElement.prototype, "loading", void 0);
 __decorate([
     state()
 ], NrPresenceChatElement.prototype, "_draft", void 0);

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

@@ -11,8 +11,12 @@ declare const NrPresenceElement_base: (new (...args: any[]) => import("@nuralyui
 /**
  * Top-level presence orchestrator.
  *
- * Owns the socket connection, viewer list, and chat panel manager.
- * Renders `nr-presence-avatars` + one `nr-presence-chat` per open chat.
+ * 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
@@ -20,41 +24,61 @@ declare const NrPresenceElement_base: (new (...args: any[]) => import("@nuralyui
  *   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 }}
- *   .extraUsers=${[...mockUsers]}
+ *   .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 styles: import("lit").CSSResult[];
     static useShadowDom: boolean;
-    /** Socket.io namespace */
+    /** 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 _openChat;
+    private _groupConversationId;
+    private _openGroupChat;
+    private _openDm;
+    private _loadMessages;
+    private _sendMessage;
     private _closeChat;
     private _onEscape;
     private _onDragStart;