@nuraly/lumenui 0.3.5 → 0.3.7

package/dist/src/components/canvas/workflow-canvas.component.js

@@ -472,25 +472,31 @@ let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElemen
             const previewNode = this.getPreviewNode();
             if (!previewNode || !((_a = this.workflow) === null || _a === void 0 ? void 0 : _a.id))
                 return;
+            const config = previewNode.configuration || {};
+            const httpPath = config.httpPath || '/webhook';
+            const httpMethod = (config.httpMethod || 'POST').toUpperCase();
+            const methodHasBody = httpMethod !== 'GET' && httpMethod !== 'HEAD' && httpMethod !== 'OPTIONS';
             this.httpPreviewLoading = true;
             this.httpPreviewError = '';
             this.httpPreviewResponse = '';
             this.nodeStatuses = {};
             try {
-                let body;
-                try {
-                    body = JSON.parse(this.httpPreviewBody);
-                }
-                catch (_b) {
-                    throw new Error('Invalid JSON in request body');
+                let body = undefined;
+                if (methodHasBody) {
+                    try {
+                        body = JSON.parse(this.httpPreviewBody);
+                    }
+                    catch (_b) {
+                        throw new Error('Invalid JSON in request body');
+                    }
                 }
                 const baseUrl = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:8000';
-                const triggerUrl = `${baseUrl}/api/v1/workflows/${this.workflow.id}/trigger/http`;
-                console.log('[Canvas] Sending HTTP preview request:', triggerUrl, body);
+                const triggerUrl = `${baseUrl}/api/v1/workflows/${this.workflow.id}/trigger${httpPath}`;
+                console.log('[Canvas] Sending HTTP preview request:', httpMethod, triggerUrl, body);
                 const response = yield fetch(triggerUrl, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(body),
+                    method: httpMethod,
+                    headers: methodHasBody ? { 'Content-Type': 'application/json' } : {},
+                    body: methodHasBody ? JSON.stringify(body) : undefined,
                 });
                 const executionIdHeader = response.headers.get('X-Execution-Id');
                 let responseData;
@@ -1083,8 +1089,21 @@ let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElemen
     `;
     }
     renderHttpPreviewPanel(previewNode, panelStyle) {
+        var _a;
         const config = previewNode.configuration || {};
         const httpPath = config.httpPath || '/webhook';
+        const httpMethod = (config.httpMethod || 'POST').toUpperCase();
+        const httpAuth = config.httpAuth || 'none';
+        const wfId = ((_a = this.workflow) === null || _a === void 0 ? void 0 : _a.id) || '{workflowId}';
+        const origin = typeof window !== 'undefined' ? window.location.origin : '';
+        const webhookUrl = `${origin}/api/v1/workflows/${wfId}/trigger${httpPath}`;
+        const methodHasBody = httpMethod !== 'GET' && httpMethod !== 'HEAD' && httpMethod !== 'OPTIONS';
+        const authLabel = {
+            none: '',
+            api_key: `API Key required (header: ${config.httpAuthHeaderName || 'X-API-Key'})`,
+            bearer: 'Bearer token required (Authorization header)',
+            basic: 'Basic auth required (Authorization header)',
+        };
         return html `
       <div class="chatbot-preview-panel http-preview-panel" style=${styleMap(panelStyle)} data-theme=${this.currentTheme}>
         <div class="chatbot-preview-header">
@@ -1098,19 +1117,27 @@ let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElemen
         </div>
         <div class="http-preview-content">
           <div class="http-preview-url">
-            <span class="http-method">POST</span>
-            <span class="http-path">${httpPath}</span>
-          </div>
-          <div class="http-preview-section">
-            <label>Request Body (JSON)</label>
-            <textarea
-              class="http-request-body"
-              .value=${this.httpPreviewBody}
-              @input=${(e) => this.httpPreviewBody = e.target.value}
-              placeholder='{ "key": "value" }'
-              ?disabled=${this.httpPreviewLoading}
-            ></textarea>
+            <span class="http-method">${httpMethod}</span>
+            <span class="http-path" title=${webhookUrl}>${webhookUrl}</span>
           </div>
+          ${httpAuth !== 'none' ? html `
+            <div class="http-preview-auth-hint">
+              <nr-icon name="shield" size="small"></nr-icon>
+              <span>${authLabel[httpAuth]}</span>
+            </div>
+          ` : ''}
+          ${methodHasBody ? html `
+            <div class="http-preview-section">
+              <label>Request Body (JSON)</label>
+              <textarea
+                class="http-request-body"
+                .value=${this.httpPreviewBody}
+                @input=${(e) => this.httpPreviewBody = e.target.value}
+                placeholder='{ "key": "value" }'
+                ?disabled=${this.httpPreviewLoading}
+              ></textarea>
+            </div>
+          ` : ''}
           <div class="http-preview-actions">
             <button
               class="http-send-btn"
@@ -1122,7 +1149,7 @@ let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElemen
                 <span>Sending...</span>
               ` : html `
                 <nr-icon name="send" size="small"></nr-icon>
-                <span>Send Request</span>
+                <span>Send ${httpMethod}</span>
               `}
             </button>
           </div>
@@ -1441,6 +1468,7 @@ let WorkflowCanvasElement = class WorkflowCanvasElement extends BaseCanvasElemen
               ></workflow-node>
             `;
         })}
+            ${this.renderNodeLockOverlays()}
           </div>
         </div>
 

package/dist/src/components/canvas/workflow-canvas.style.js

@@ -567,6 +567,24 @@ export const workflowCanvasStyles = css `
     background: rgba(0, 0, 0, 0.05);
   }
 
+  .config-panel-help {
+    background: none;
+    border: none;
+    color: #8d8d8d;
+    cursor: pointer;
+    padding: 0.125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+  }
+
+  .config-panel-help:hover {
+    color: #0f62fe;
+    background: rgba(15, 98, 254, 0.08);
+  }
+
   .config-panel-content {
     flex: 1;
     overflow-y: auto;
@@ -1788,7 +1806,7 @@ export const workflowCanvasStyles = css `
   .canvas-wrapper[data-theme="default"] .node-palette,
   .canvas-wrapper[data-theme="default"] .context-menu,
   .canvas-wrapper[data-theme="default"] .config-panel {
-    background: #f4f4f4;
+    background: rgb(255 255 255);
     border-color: #e0e0e0;
   }
 
@@ -2119,6 +2137,23 @@ export const workflowCanvasStyles = css `
 
   .http-path {
     color: #525252;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .http-preview-auth-hint {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.625rem;
+    background: #fff8e1;
+    border: 1px solid #ffe082;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    color: #8a6d3b;
   }
 
   .http-preview-section {
@@ -2934,6 +2969,32 @@ export const workflowCanvasStyles = css `
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   }
 
+  /* ========================================
+   * COLLABORATION: NODE LOCK PILL
+   * ======================================== */
+
+  .node-lock-pill {
+    position: absolute;
+    pointer-events: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    border-radius: 10px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 11px;
+    font-weight: 600;
+    color: #ffffff;
+    white-space: nowrap;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    z-index: 20;
+  }
+
+  .node-lock-pill svg {
+    display: block;
+    flex: none;
+  }
+
   /* ========================================
    * COLLABORATION: PRESENCE BAR
    * ======================================== */

package/dist/src/components/canvas/workflow-canvas.types.js

@@ -1751,7 +1751,17 @@ export const NODE_TEMPLATES = [
         icon: NODE_ICONS[WorkflowNodeType.SLACK_SOCKET],
         color: NODE_COLORS[WorkflowNodeType.SLACK_SOCKET],
         category: 'trigger',
-        defaultConfig: { appToken: '', botToken: '' },
+        defaultConfig: {
+            appTokenPath: '',
+            botTokenPath: '',
+            eventTypes: [],
+            interactionTypes: [],
+            slashCommands: '',
+            allowedTeamIds: '',
+            allowedChannelIds: '',
+            allowedUserIds: '',
+            ignoreBots: true,
+        },
         defaultPorts: {
             inputs: [],
             outputs: [
@@ -1767,7 +1777,15 @@ export const NODE_TEMPLATES = [
         icon: NODE_ICONS[WorkflowNodeType.DISCORD_BOT],
         color: NODE_COLORS[WorkflowNodeType.DISCORD_BOT],
         category: 'trigger',
-        defaultConfig: { botToken: '' },
+        defaultConfig: {
+            botTokenPath: '',
+            intents: ['GUILDS', 'GUILD_MESSAGES', 'MESSAGE_CONTENT'],
+            eventTypes: [],
+            allowedGuildIds: '',
+            allowedChannelIds: '',
+            allowedUserIds: '',
+            ignoreBots: true,
+        },
         defaultPorts: {
             inputs: [],
             outputs: [
@@ -1783,7 +1801,17 @@ export const NODE_TEMPLATES = [
         icon: NODE_ICONS[WorkflowNodeType.WHATSAPP_WEBHOOK],
         color: NODE_COLORS[WorkflowNodeType.WHATSAPP_WEBHOOK],
         category: 'trigger',
-        defaultConfig: {},
+        defaultConfig: {
+            phoneNumberId: '',
+            businessAccountId: '',
+            accessTokenPath: '',
+            appSecretPath: '',
+            verifyToken: '',
+            webhookFields: ['messages'],
+            messageTypes: [],
+            allowedSenders: '',
+            ignoreStatusUpdates: false,
+        },
         defaultPorts: {
             inputs: [],
             outputs: [
@@ -1799,7 +1827,25 @@ export const NODE_TEMPLATES = [
         icon: NODE_ICONS[WorkflowNodeType.CUSTOM_WEBSOCKET],
         color: NODE_COLORS[WorkflowNodeType.CUSTOM_WEBSOCKET],
         category: 'trigger',
-        defaultConfig: { url: '' },
+        defaultConfig: {
+            url: '',
+            subprotocol: '',
+            authMode: 'none',
+            tokenPath: '',
+            username: '',
+            passwordPath: '',
+            headerName: '',
+            headerValuePath: '',
+            queryParamName: 'token',
+            queryParamValuePath: '',
+            initialMessage: '',
+            autoReconnect: true,
+            reconnectDelayMs: 5000,
+            maxReconnectAttempts: 0,
+            pingIntervalSec: 30,
+            messageFormat: 'json',
+            filterExpression: '',
+        },
         defaultPorts: {
             inputs: [],
             outputs: [

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

@@ -127,9 +127,9 @@ import{css as t,html as e,LitElement as i,nothing as o}from"lit";import{property
  * @license
  * Copyright 2024 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var d=function(t,e,i,o){for(var s,n=arguments.length,a=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,r=t.length-1;r>=0;r--)(s=t[r])&&(a=(n<3?s(a):n>3?s(e,i,a):s(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a};const l=[{key:"👍",label:"Like"},{key:"❤️",label:"Love"},{key:"😂",label:"Haha"},{key:"😮",label:"Wow"},{key:"😢",label:"Sad"},{key:"🔥",label:"Fire"}],c=["😀","😂","🥰","😎","🤔","🎉","✨","🙏","💯","🚀","👏","😍","🤣","💪","😊","🥳","😤","💀","🫡","👀","💜","🤝","⭐","🙌"],p=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>`,g=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 6 7 17 2 12"/><polyline points="23 6 12 17" opacity="0.5"/></svg>`,u=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2"><polyline points="18 6 7 17 2 12"/><polyline points="23 6 12 17"/></svg>`,h=e`<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>`,x=e`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`,m=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,v=e`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,b=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`,f=e`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>`,y=e`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>`,w=e`<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`,k=e`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>`,$=e`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;let j=class extends i{constructor(){super(...arguments),this.messages=[],this.currentUser=null,this.conversationId="",this.isGroup=!1,this.loading=!1,this.compact=!1,this.emptyText="No messages yet",this.hideInput=!1,this._showEmoji=!1,this._contextMenu=null,this._replyTo=null,this._editingIdx=null,this._typing=[],this._typingTimer=null,this._longPressTimer=null,this._touchMoved=!1}updated(t){t.has("messages")&&requestAnimationFrame(()=>{var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".chat-messages");e&&(e.scrollTop=e.scrollHeight)})}addTyping(t){this._typing.includes(t)||(this._typing=[...this._typing,t])}removeTyping(t){this._typing=this._typing.filter(e=>e!==t)}_sendMessage(){var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".chat-input textarea");if(!(null==e?void 0:e.value.trim()))return;const i=e.value.trim();e.value="",e.focus(),this.dispatchEvent(new CustomEvent("message-send",{detail:{text:i,replyTo:this._replyTo||void 0},bubbles:!0,composed:!0})),this._replyTo=null,this._showEmoji=!1,this._playSound()}_onInputKeydown(t){if("Enter"===t.key&&!t.shiftKey)return t.preventDefault(),void this._sendMessage();this.dispatchEvent(new CustomEvent("typing-start",{bubbles:!0,composed:!0})),clearTimeout(this._typingTimer),this._typingTimer=setTimeout(()=>{this.dispatchEvent(new CustomEvent("typing-stop",{bubbles:!0,composed:!0}))},2e3)}_toggleEmoji(){this._showEmoji=!this._showEmoji}_insertEmoji(t){var e;const i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".chat-input textarea");i&&(i.value+=t,i.focus()),this._showEmoji=!1}_menuPos(t){const e=t.closest(".msg-bubble")||t.closest(".msg-row");if(!e)return{y:0,left:0};const i=e.getBoundingClientRect(),o=!!t.closest(".msg-row.me"),s=o?140:80,n=i.top>s+12?i.top-s-4:i.bottom+4;return o?{y:n,right:Math.max(8,window.innerWidth-i.right)}:{y:n,left:Math.max(8,i.left)}}_showContextMenuHandler(t,e){t.preventDefault(),this._contextMenu=Object.assign({msgIdx:e},this._menuPos(t.target))}_onTouchStart(t,e){this._touchMoved=!1,this._longPressTimer=setTimeout(()=>{var i;t.preventDefault(),null===(i=window.getSelection())||void 0===i||i.removeAllRanges(),this._contextMenu=Object.assign({msgIdx:e},this._menuPos(t.target)),this._touchMoved=!0},500)}_onTouchEnd(){clearTimeout(this._longPressTimer)}_onTouchMove(){this._touchMoved=!0,clearTimeout(this._longPressTimer)}_onMsgTap(t,e){if(!window.matchMedia("(max-width: 640px)").matches)return;if(this._touchMoved)return;const i=t.target;i.closest(".reaction")||i.closest(".audio-play-btn")||i.closest(".file-card")||i.closest(".edit-inline")||(t.stopPropagation(),this._contextMenu=Object.assign({msgIdx:e},this._menuPos(i)))}_hideContextMenu(){this._contextMenu=null}_deleteMsg(t){const e=this.messages[t];(null==e?void 0:e.id)&&this.dispatchEvent(new CustomEvent("message-delete",{detail:{messageId:e.id},bubbles:!0,composed:!0})),this._contextMenu=null}_replyMsg(t){var e,i;const o=this.messages[t];o&&(this._replyTo={text:o.text,from:o.from},null===(i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".chat-input textarea"))||void 0===i||i.focus()),this._contextMenu=null}_editMsg(t){this._editingIdx=t,this._contextMenu=null,requestAnimationFrame(()=>{var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".edit-input");e&&(e.focus(),e.select())})}_confirmEdit(t){var e;const i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".edit-input"),o=null==i?void 0:i.value.trim();if(!o)return void(this._editingIdx=null);const s=this.messages[t];(null==s?void 0:s.id)&&this.dispatchEvent(new CustomEvent("message-edit",{detail:{messageId:s.id,content:o},bubbles:!0,composed:!0})),this._editingIdx=null}_onEditKeydown(t,e){"Enter"!==t.key||t.shiftKey?"Escape"===t.key&&(this._editingIdx=null):(t.preventDefault(),this._confirmEdit(e))}_reactMsg(t,e){const i=this.messages[t];(null==i?void 0:i.id)&&this.dispatchEvent(new CustomEvent("message-react",{detail:{messageId:i.id,emoji:e},bubbles:!0,composed:!0})),this._contextMenu=null}_toggleAudioPlay(t){var e;const i=t.currentTarget.closest(".audio-msg"),o=null==i?void 0:i.querySelector("audio");o&&(o.paused?(null===(e=this.shadowRoot)||void 0===e||e.querySelectorAll(".audio-msg audio").forEach(t=>{t===o||t.paused||(t.pause(),t.currentTime=0)}),o.play().catch(()=>{})):o.pause())}_onAudioTimeUpdate(t){const e=t.target,i=e.closest(".audio-msg");if(!i||!e.duration)return;const o=i.querySelectorAll(".a-bar"),s=e.currentTime/e.duration,n=Math.floor(s*o.length);o.forEach((t,e)=>t.classList.toggle("played",e<=n))}_onAudioEnded(t){const e=t.target.closest(".audio-msg");null==e||e.querySelectorAll(".a-bar").forEach(t=>t.classList.remove("played"))}_pickFile(t=!1){const e=document.createElement("input");e.type="file",t&&(e.accept="image/jpeg,image/png,image/gif,image/webp,image/heic,image/heif"),e.style.cssText="position:fixed;top:-9999px;left:-9999px;opacity:0",document.body.appendChild(e),e.onchange=()=>{var i;const o=null===(i=e.files)||void 0===i?void 0:i[0];o&&this.dispatchEvent(new CustomEvent("file-select",{detail:{file:o,imageOnly:t},bubbles:!0,composed:!0}));try{document.body.removeChild(e)}catch(t){}},e.click()}_playSound(){try{const t=new AudioContext,e=t.createGain();e.connect(t.destination),e.gain.value=.12;const i=t.createOscillator();i.connect(e),i.type="sine",i.frequency.setValueAtTime(600,t.currentTime),i.frequency.setValueAtTime(900,t.currentTime+.08),e.gain.exponentialRampToValueAtTime(.001,t.currentTime+.15),i.start(t.currentTime),i.stop(t.currentTime+.15),setTimeout(()=>t.close(),500)}catch(t){}}render(){return this.loading?e`<div class="loading">Loading...</div>`:e`
+ */;var d=function(t,e,i,o){for(var s,n=arguments.length,a=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,r=t.length-1;r>=0;r--)(s=t[r])&&(a=(n<3?s(a):n>3?s(e,i,a):s(e,i))||a);return n>3&&a&&Object.defineProperty(e,i,a),a};const l=[{key:"👍",label:"Like"},{key:"❤️",label:"Love"},{key:"😂",label:"Haha"},{key:"😮",label:"Wow"},{key:"😢",label:"Sad"},{key:"🔥",label:"Fire"}],c=["😀","😂","🥰","😎","🤔","🎉","✨","🙏","💯","🚀","👏","😍","🤣","💪","😊","🥳","😤","💀","🫡","👀","💜","🤝","⭐","🙌"],p=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>`,u=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 6 7 17 2 12"/><polyline points="23 6 12 17" opacity="0.5"/></svg>`,g=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2"><polyline points="18 6 7 17 2 12"/><polyline points="23 6 12 17"/></svg>`,h=e`<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>`,x=e`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`,m=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,v=e`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`,b=e`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`,f=e`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>`,y=e`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>`,w=e`<svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>`,k=e`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>`,$=e`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;let j=class extends i{constructor(){super(...arguments),this.messages=[],this.currentUser=null,this.conversationId="",this.isGroup=!1,this.loading=!1,this.compact=!1,this.emptyText="No messages yet",this.hideInput=!1,this._showEmoji=!1,this._contextMenu=null,this._replyTo=null,this._editingIdx=null,this._typing=[],this._typingTimer=null,this._longPressTimer=null,this._touchMoved=!1}updated(t){t.has("messages")&&requestAnimationFrame(()=>{var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".chat-messages");e&&(e.scrollTop=e.scrollHeight)})}addTyping(t){this._typing.includes(t)||(this._typing=[...this._typing,t])}removeTyping(t){this._typing=this._typing.filter(e=>e!==t)}_sendMessage(){var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".chat-input textarea");if(!(null==e?void 0:e.value.trim()))return;const i=e.value.trim();e.value="",e.focus(),this.dispatchEvent(new CustomEvent("message-send",{detail:{text:i,replyTo:this._replyTo||void 0},bubbles:!0,composed:!0})),this._replyTo=null,this._showEmoji=!1,this._playSound()}_onInputKeydown(t){if("Enter"===t.key&&!t.shiftKey)return t.preventDefault(),void this._sendMessage();this.dispatchEvent(new CustomEvent("typing-start",{bubbles:!0,composed:!0})),clearTimeout(this._typingTimer),this._typingTimer=setTimeout(()=>{this.dispatchEvent(new CustomEvent("typing-stop",{bubbles:!0,composed:!0}))},2e3)}_toggleEmoji(){this._showEmoji=!this._showEmoji}_insertEmoji(t){var e;const i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".chat-input textarea");i&&(i.value+=t,i.focus()),this._showEmoji=!1}_menuPos(t){const e=t.closest(".msg-bubble")||t.closest(".msg-row");if(!e)return{y:0,left:0};const i=e.getBoundingClientRect(),o=!!t.closest(".msg-row.me"),s=o?140:80,n=i.top>s+12?i.top-s-4:i.bottom+4;return o?{y:n,right:Math.max(8,window.innerWidth-i.right)}:{y:n,left:Math.max(8,i.left)}}_showContextMenuHandler(t,e){t.preventDefault(),this._contextMenu=Object.assign({msgIdx:e},this._menuPos(t.target))}_onTouchStart(t,e){this._touchMoved=!1,this._longPressTimer=setTimeout(()=>{var i;t.preventDefault(),null===(i=window.getSelection())||void 0===i||i.removeAllRanges(),this._contextMenu=Object.assign({msgIdx:e},this._menuPos(t.target)),this._touchMoved=!0},500)}_onTouchEnd(){clearTimeout(this._longPressTimer)}_onTouchMove(){this._touchMoved=!0,clearTimeout(this._longPressTimer)}_onMsgTap(t,e){if(!window.matchMedia("(max-width: 640px)").matches)return;if(this._touchMoved)return;const i=t.target;i.closest(".reaction")||i.closest(".audio-play-btn")||i.closest(".file-card")||i.closest(".edit-inline")||(t.stopPropagation(),this._contextMenu=Object.assign({msgIdx:e},this._menuPos(i)))}_hideContextMenu(){this._contextMenu=null}_deleteMsg(t){const e=this.messages[t];(null==e?void 0:e.id)&&this.dispatchEvent(new CustomEvent("message-delete",{detail:{messageId:e.id},bubbles:!0,composed:!0})),this._contextMenu=null}_replyMsg(t){var e,i;const o=this.messages[t];o&&(this._replyTo={text:o.text,from:o.from},null===(i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".chat-input textarea"))||void 0===i||i.focus()),this._contextMenu=null}_editMsg(t){this._editingIdx=t,this._contextMenu=null,requestAnimationFrame(()=>{var t;const e=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".edit-input");e&&(e.focus(),e.select())})}_confirmEdit(t){var e;const i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".edit-input"),o=null==i?void 0:i.value.trim();if(!o)return void(this._editingIdx=null);const s=this.messages[t];(null==s?void 0:s.id)&&this.dispatchEvent(new CustomEvent("message-edit",{detail:{messageId:s.id,content:o},bubbles:!0,composed:!0})),this._editingIdx=null}_onEditKeydown(t,e){"Enter"!==t.key||t.shiftKey?"Escape"===t.key&&(this._editingIdx=null):(t.preventDefault(),this._confirmEdit(e))}_reactMsg(t,e){const i=this.messages[t];(null==i?void 0:i.id)&&this.dispatchEvent(new CustomEvent("message-react",{detail:{messageId:i.id,emoji:e},bubbles:!0,composed:!0})),this._contextMenu=null}_toggleAudioPlay(t){var e;const i=t.currentTarget.closest(".audio-msg"),o=null==i?void 0:i.querySelector("audio");o&&(o.paused?(null===(e=this.shadowRoot)||void 0===e||e.querySelectorAll(".audio-msg audio").forEach(t=>{t===o||t.paused||(t.pause(),t.currentTime=0)}),o.play().catch(()=>{})):o.pause())}_onAudioTimeUpdate(t){const e=t.target,i=e.closest(".audio-msg");if(!i||!e.duration)return;const o=i.querySelectorAll(".a-bar"),s=e.currentTime/e.duration,n=Math.floor(s*o.length);o.forEach((t,e)=>t.classList.toggle("played",e<=n))}_onAudioEnded(t){const e=t.target.closest(".audio-msg");null==e||e.querySelectorAll(".a-bar").forEach(t=>t.classList.remove("played"))}_pickFile(t=!1){const e=document.createElement("input");e.type="file",t&&(e.accept="image/jpeg,image/png,image/gif,image/webp,image/heic,image/heif"),e.style.cssText="position:fixed;top:-9999px;left:-9999px;opacity:0",document.body.appendChild(e),e.onchange=()=>{var i;const o=null===(i=e.files)||void 0===i?void 0:i[0];o&&this.dispatchEvent(new CustomEvent("file-select",{detail:{file:o,imageOnly:t},bubbles:!0,composed:!0}));try{document.body.removeChild(e)}catch(t){}},e.click()}_playSound(){try{const t=new AudioContext,e=t.createGain();e.connect(t.destination),e.gain.value=.12;const i=t.createOscillator();i.connect(e),i.type="sine",i.frequency.setValueAtTime(600,t.currentTime),i.frequency.setValueAtTime(900,t.currentTime+.08),e.gain.exponentialRampToValueAtTime(.001,t.currentTime+.15),i.start(t.currentTime),i.stop(t.currentTime+.15),setTimeout(()=>t.close(),500)}catch(t){}}render(){return this.loading?e`<div class="loading">Loading...</div>`:e`
       ${0===this.messages.length?e`<div class="empty-state">${w}<span>${this.emptyText}</span></div>`:e`
-          <div class="chat-messages" @click=${()=>this._hideContextMenu()} @touchstart=${()=>{this._contextMenu&&this._hideContextMenu()}}>
+          <div class="chat-messages" part="messages" @click=${()=>this._hideContextMenu()} @touchstart=${()=>{this._contextMenu&&this._hideContextMenu()}}>
             ${this.messages.map((t,e,i)=>this._renderMessage(t,e,i))}
           </div>
         `}
@@ -137,7 +137,7 @@ import{css as t,html as e,LitElement as i,nothing as o}from"lit";import{property
       ${this._contextMenu?this._renderContextMenu():o}
       ${this._typing.length>0?e`<div class="typing-indicator">${this._typing.join(", ")} typing...</div>`:o}
       ${this._replyTo?e`
-        <div class="reply-bar">
+        <div class="reply-bar" part="reply-bar">
           <span class="reply-text">Replying to: ${this._replyTo.text}</span>
           <button @click=${()=>{this._replyTo=null}}>✕</button>
         </div>
@@ -159,7 +159,7 @@ import{css as t,html as e,LitElement as i,nothing as o}from"lit";import{property
           ${this._editingIdx===i?e`<div class="edit-inline"><input class="edit-input" type="text" .value=${t.text||""} @keydown=${t=>this._onEditKeydown(t,i)}><button class="edit-confirm" @click=${()=>this._confirmEdit(i)}>✓</button><button class="edit-cancel" @click=${()=>{this._editingIdx=null}}>✕</button></div>`:t.text?e`<div class="msg ${t.from}">${t.text}${t.edited?e` <span class="msg-edited">(edited)</span>`:o}${t.encrypted?e`<span class="msg-e2e" title="End-to-end encrypted">🔒</span>`:o}</div>`:o}
           <div class="msg-footer ${t.from}">
             <span class="msg-time">${t.time||""}</span>
-            ${"me"===t.from?e`<span class="msg-read">${"read"===t.status?u:"delivered"===t.status?g:p}</span>`:o}
+            ${"me"===t.from?e`<span class="msg-read">${"read"===t.status?g:"delivered"===t.status?u:p}</span>`:o}
           </div>
           ${(null===(n=t.reactions)||void 0===n?void 0:n.length)?e`
             <div class="msg-reactions">
@@ -186,7 +186,7 @@ import{css as t,html as e,LitElement as i,nothing as o}from"lit";import{property
       <div style="flex:1;min-width:0"><div style="font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${s.name||"File"}</div>${s.fileSize?e`<div style="font-size:10px;color:var(--text-secondary);margin-top:1px">${(s.fileSize/1024).toFixed(0)} KB</div>`:o}</div>
       ${b}
     </a></div>`}_renderContextMenu(){const t=this._contextMenu,i=this.messages[t.msgIdx],s="me"===(null==i?void 0:i.from);return e`
-      <div class="ctx-menu" @mousedown=${t=>t.preventDefault()} @touchstart=${t=>t.stopPropagation()} style="top:${t.y}px;${null!=t.right?`right:${t.right}px`:`left:${t.left}px`}">
+      <div class="ctx-menu" part="context-menu" @mousedown=${t=>t.preventDefault()} @touchstart=${t=>t.stopPropagation()} style="top:${t.y}px;${null!=t.right?`right:${t.right}px`:`left:${t.left}px`}">
         <div class="ctx-reactions">
           ${l.map(i=>e`<button @click=${()=>this._reactMsg(t.msgIdx,i.key)} title=${i.label}>${i.key}</button>`)}
         </div>
@@ -195,7 +195,7 @@ import{css as t,html as e,LitElement as i,nothing as o}from"lit";import{property
         ${s&&!(null==i?void 0:i.deleted)?e`<button class="danger" @click=${()=>this._deleteMsg(t.msgIdx)}>🗑 Delete</button>`:o}
       </div>
     `}_renderEmojiPicker(){return e`
-      <div class="emoji-picker" @mousedown=${t=>t.preventDefault()}>
+      <div class="emoji-picker" part="emoji-picker" @mousedown=${t=>t.preventDefault()}>
         <div class="emoji-quick">
           ${l.map(t=>e`<button @click=${()=>this._insertEmoji(t.key)} title=${t.label}>${t.key}</button>`)}
         </div>
@@ -204,13 +204,13 @@ import{css as t,html as e,LitElement as i,nothing as o}from"lit";import{property
         </div>
       </div>
     `}_renderInputBar(){return e`
-      <div class="chat-input">
-        <div class="input-tools">
+      <div class="chat-input" part="input">
+        <div class="input-tools" part="input-tools">
           <button @click=${()=>this._pickFile()} title="Attach file">${k}</button>
           <button @click=${()=>this._pickFile(!0)} title="Send image">${$}</button>
           <button @click=${()=>this._toggleEmoji()} title="Emoji">${x}</button>
         </div>
-        <textarea rows="1" placeholder="Type a message..." @keydown=${t=>this._onInputKeydown(t)}></textarea>
-        <button class="send-btn" @mousedown=${t=>t.preventDefault()} @click=${()=>this._sendMessage()} title="Send">${h}</button>
+        <textarea rows="1" placeholder="Type a message..." part="textarea" @keydown=${t=>this._onInputKeydown(t)}></textarea>
+        <button class="send-btn" part="send-button" @mousedown=${t=>t.preventDefault()} @click=${()=>this._sendMessage()} title="Send">${h}</button>
       </div>
     `}};j.styles=r,d([s({type:Array})],j.prototype,"messages",void 0),d([s({type:Object})],j.prototype,"currentUser",void 0),d([s({type:String,attribute:"conversation-id"})],j.prototype,"conversationId",void 0),d([s({type:Boolean})],j.prototype,"isGroup",void 0),d([s({type:Boolean})],j.prototype,"loading",void 0),d([s({type:Boolean,reflect:!0})],j.prototype,"compact",void 0),d([s({type:String,attribute:"empty-text"})],j.prototype,"emptyText",void 0),d([s({type:Boolean,attribute:"hide-input"})],j.prototype,"hideInput",void 0),d([n()],j.prototype,"_showEmoji",void 0),d([n()],j.prototype,"_contextMenu",void 0),d([n()],j.prototype,"_replyTo",void 0),d([n()],j.prototype,"_editingIdx",void 0),d([n()],j.prototype,"_typing",void 0),j=d([a("nr-chat-panel")],j);export{j as NrChatPanelElement};

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

@@ -328,7 +328,7 @@ let NrChatPanelElement = class NrChatPanelElement extends LitElement {
       ${this.messages.length === 0
             ? html `<div class="empty-state">${svgChat}<span>${this.emptyText}</span></div>`
             : html `
-          <div class="chat-messages" @click=${() => this._hideContextMenu()} @touchstart=${() => { if (this._contextMenu)
+          <div class="chat-messages" part="messages" @click=${() => this._hideContextMenu()} @touchstart=${() => { if (this._contextMenu)
                 this._hideContextMenu(); }}>
             ${this.messages.map((m, i, arr) => this._renderMessage(m, i, arr))}
           </div>
@@ -337,7 +337,7 @@ let NrChatPanelElement = class NrChatPanelElement extends LitElement {
       ${this._contextMenu ? this._renderContextMenu() : nothing}
       ${this._typing.length > 0 ? html `<div class="typing-indicator">${this._typing.join(', ')} typing...</div>` : nothing}
       ${this._replyTo ? html `
-        <div class="reply-bar">
+        <div class="reply-bar" part="reply-bar">
           <span class="reply-text">Replying to: ${this._replyTo.text}</span>
           <button @click=${() => { this._replyTo = null; }}>✕</button>
         </div>
@@ -427,7 +427,7 @@ let NrChatPanelElement = class NrChatPanelElement extends LitElement {
         const msg = this.messages[cm.msgIdx];
         const isMe = (msg === null || msg === void 0 ? void 0 : msg.from) === 'me';
         return html `
-      <div class="ctx-menu" @mousedown=${(e) => e.preventDefault()} @touchstart=${(e) => e.stopPropagation()} style="top:${cm.y}px;${cm.right != null ? `right:${cm.right}px` : `left:${cm.left}px`}">
+      <div class="ctx-menu" part="context-menu" @mousedown=${(e) => e.preventDefault()} @touchstart=${(e) => e.stopPropagation()} style="top:${cm.y}px;${cm.right != null ? `right:${cm.right}px` : `left:${cm.left}px`}">
         <div class="ctx-reactions">
           ${REACTIONS.map(r => html `<button @click=${() => this._reactMsg(cm.msgIdx, r.key)} title=${r.label}>${r.key}</button>`)}
         </div>
@@ -439,7 +439,7 @@ let NrChatPanelElement = class NrChatPanelElement extends LitElement {
     }
     _renderEmojiPicker() {
         return html `
-      <div class="emoji-picker" @mousedown=${(e) => e.preventDefault()}>
+      <div class="emoji-picker" part="emoji-picker" @mousedown=${(e) => e.preventDefault()}>
         <div class="emoji-quick">
           ${REACTIONS.map(r => html `<button @click=${() => this._insertEmoji(r.key)} title=${r.label}>${r.key}</button>`)}
         </div>
@@ -451,14 +451,14 @@ let NrChatPanelElement = class NrChatPanelElement extends LitElement {
     }
     _renderInputBar() {
         return html `
-      <div class="chat-input">
-        <div class="input-tools">
+      <div class="chat-input" part="input">
+        <div class="input-tools" part="input-tools">
           <button @click=${() => this._pickFile()} title="Attach file">${svgAttach}</button>
           <button @click=${() => this._pickFile(true)} title="Send image">${svgImage}</button>
           <button @click=${() => this._toggleEmoji()} title="Emoji">${svgSmile}</button>
         </div>
-        <textarea rows="1" placeholder="Type a message..." @keydown=${(e) => this._onInputKeydown(e)}></textarea>
-        <button class="send-btn" @mousedown=${(e) => e.preventDefault()} @click=${() => this._sendMessage()} title="Send">${svgSend}</button>
+        <textarea rows="1" placeholder="Type a message..." part="textarea" @keydown=${(e) => this._onInputKeydown(e)}></textarea>
+        <button class="send-btn" part="send-button" @mousedown=${(e) => e.preventDefault()} @click=${() => this._sendMessage()} title="Send">${svgSend}</button>
       </div>
     `;
     }