@nuraly/lumenui 0.2.1 → 0.3.2

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

@@ -17,12 +17,18 @@ export var WorkflowNodeType;
     WorkflowNodeType["HTTP_END"] = "HTTP_END";
     WorkflowNodeType["CHAT_START"] = "CHAT_START";
     WorkflowNodeType["CHAT_OUTPUT"] = "CHAT_OUTPUT";
+    WorkflowNodeType["SOCIAL_POST"] = "SOCIAL_POST";
     WorkflowNodeType["FUNCTION"] = "FUNCTION";
     WorkflowNodeType["HTTP"] = "HTTP";
     WorkflowNodeType["CONDITION"] = "CONDITION";
+    WorkflowNodeType["SWITCH"] = "SWITCH";
     WorkflowNodeType["DELAY"] = "DELAY";
     WorkflowNodeType["PARALLEL"] = "PARALLEL";
+    WorkflowNodeType["MERGE"] = "MERGE";
     WorkflowNodeType["LOOP"] = "LOOP";
+    WorkflowNodeType["BREAK"] = "BREAK";
+    WorkflowNodeType["WAIT"] = "WAIT";
+    WorkflowNodeType["TRY_CATCH"] = "TRY_CATCH";
     WorkflowNodeType["TRANSFORM"] = "TRANSFORM";
     WorkflowNodeType["SUB_WORKFLOW"] = "SUB_WORKFLOW";
     WorkflowNodeType["EMAIL"] = "EMAIL";
@@ -104,6 +110,8 @@ export var WorkflowNodeType;
     // Annotation nodes
     WorkflowNodeType["NOTE"] = "NOTE";
     WorkflowNodeType["FRAME"] = "FRAME";
+    // Cron/scheduled trigger
+    WorkflowNodeType["CRON"] = "CRON";
 })(WorkflowNodeType || (WorkflowNodeType = {}));
 /**
  * Node types for agent-based workflows
@@ -231,12 +239,18 @@ export const NODE_COLORS = {
     [WorkflowNodeType.HTTP_END]: '#dc2626',
     [WorkflowNodeType.CHAT_START]: '#0ea5e9',
     [WorkflowNodeType.CHAT_OUTPUT]: '#06b6d4',
+    [WorkflowNodeType.SOCIAL_POST]: '#7c3aed',
     [WorkflowNodeType.FUNCTION]: '#3b82f6',
     [WorkflowNodeType.HTTP]: '#8b5cf6',
     [WorkflowNodeType.CONDITION]: '#f59e0b',
+    [WorkflowNodeType.SWITCH]: '#eab308',
     [WorkflowNodeType.DELAY]: '#6b7280',
     [WorkflowNodeType.PARALLEL]: '#06b6d4',
+    [WorkflowNodeType.MERGE]: '#0891b2',
     [WorkflowNodeType.LOOP]: '#ec4899',
+    [WorkflowNodeType.BREAK]: '#991b1b',
+    [WorkflowNodeType.WAIT]: '#a78bfa',
+    [WorkflowNodeType.TRY_CATCH]: '#f43f5e',
     [WorkflowNodeType.TRANSFORM]: '#14b8a6',
     [WorkflowNodeType.SUB_WORKFLOW]: '#6366f1',
     [WorkflowNodeType.EMAIL]: '#f97316',
@@ -318,6 +332,8 @@ export const NODE_COLORS = {
     // Annotation nodes
     [WorkflowNodeType.NOTE]: '#fef08a',
     [WorkflowNodeType.FRAME]: '#6366f1',
+    // Cron/scheduled trigger
+    [WorkflowNodeType.CRON]: '#d97706',
     // Agent nodes
     [AgentNodeType.AGENT]: '#10b981',
     [AgentNodeType.TOOL]: '#0ea5e9',
@@ -369,12 +385,18 @@ export const NODE_ICONS = {
     [WorkflowNodeType.HTTP_END]: 'upload',
     [WorkflowNodeType.CHAT_START]: 'message-circle',
     [WorkflowNodeType.CHAT_OUTPUT]: 'message-square',
+    [WorkflowNodeType.SOCIAL_POST]: 'send',
     [WorkflowNodeType.FUNCTION]: 'code',
     [WorkflowNodeType.HTTP]: 'globe',
     [WorkflowNodeType.CONDITION]: 'git-branch',
+    [WorkflowNodeType.SWITCH]: 'git-fork',
     [WorkflowNodeType.DELAY]: 'clock',
     [WorkflowNodeType.PARALLEL]: 'git-merge',
+    [WorkflowNodeType.MERGE]: 'merge',
     [WorkflowNodeType.LOOP]: 'repeat',
+    [WorkflowNodeType.BREAK]: 'circle-stop',
+    [WorkflowNodeType.WAIT]: 'hourglass',
+    [WorkflowNodeType.TRY_CATCH]: 'shield-alert',
     [WorkflowNodeType.TRANSFORM]: 'shuffle',
     [WorkflowNodeType.SUB_WORKFLOW]: 'layers',
     [WorkflowNodeType.EMAIL]: 'mail',
@@ -456,6 +478,8 @@ export const NODE_ICONS = {
     // Annotation nodes
     [WorkflowNodeType.NOTE]: 'sticky-note',
     [WorkflowNodeType.FRAME]: 'square',
+    // Cron/scheduled trigger
+    [WorkflowNodeType.CRON]: 'timer',
     // Agent nodes
     [AgentNodeType.AGENT]: 'cpu',
     [AgentNodeType.TOOL]: 'tool',
@@ -612,6 +636,24 @@ export const NODE_TEMPLATES = [
             outputs: [{ id: 'out', type: PortType.OUTPUT, label: 'Output' }],
         },
     },
+    {
+        type: WorkflowNodeType.SOCIAL_POST,
+        name: 'Social Post',
+        description: 'Post to social feed on behalf of an agent',
+        icon: NODE_ICONS[WorkflowNodeType.SOCIAL_POST],
+        color: NODE_COLORS[WorkflowNodeType.SOCIAL_POST],
+        category: 'action',
+        defaultConfig: {
+            agentId: '',
+            content: '${variables.response}',
+            mediaUrl: '',
+            mediaType: '',
+        },
+        defaultPorts: {
+            inputs: [{ id: 'in', type: PortType.INPUT, label: 'Input' }],
+            outputs: [{ id: 'out', type: PortType.OUTPUT, label: 'Output' }],
+        },
+    },
     {
         type: WorkflowNodeType.LLM,
         name: 'LLM',
@@ -772,6 +814,92 @@ export const NODE_TEMPLATES = [
             ],
         },
     },
+    {
+        type: WorkflowNodeType.SWITCH,
+        name: 'Switch',
+        description: 'Route to a branch based on a value',
+        icon: NODE_ICONS[WorkflowNodeType.SWITCH],
+        color: NODE_COLORS[WorkflowNodeType.SWITCH],
+        category: 'control',
+        defaultConfig: {
+            expression: '',
+            language: 'javascript',
+            cases: [
+                { value: 'case1', label: 'Case 1' },
+                { value: 'case2', label: 'Case 2' },
+            ],
+            includeDefault: true,
+        },
+        defaultPorts: {
+            inputs: [{ id: 'in', type: PortType.INPUT, label: 'Input' }],
+            outputs: [
+                { id: 'case1', type: PortType.OUTPUT, label: 'Case 1' },
+                { id: 'case2', type: PortType.OUTPUT, label: 'Case 2' },
+                { id: 'default', type: PortType.CONDITIONAL_DEFAULT, label: 'Default' },
+            ],
+        },
+    },
+    {
+        type: WorkflowNodeType.MERGE,
+        name: 'Merge',
+        description: 'Join multiple branches into one',
+        icon: NODE_ICONS[WorkflowNodeType.MERGE],
+        color: NODE_COLORS[WorkflowNodeType.MERGE],
+        category: 'control',
+        defaultConfig: { mode: 'waitAll' },
+        defaultPorts: {
+            inputs: [
+                { id: 'in1', type: PortType.INPUT, label: 'Input 1', multiple: true },
+                { id: 'in2', type: PortType.INPUT, label: 'Input 2', multiple: true },
+            ],
+            outputs: [{ id: 'out', type: PortType.OUTPUT, label: 'Output' }],
+        },
+    },
+    {
+        type: WorkflowNodeType.WAIT,
+        name: 'Wait',
+        description: 'Pause until a signal or event is received',
+        icon: NODE_ICONS[WorkflowNodeType.WAIT],
+        color: NODE_COLORS[WorkflowNodeType.WAIT],
+        category: 'control',
+        defaultConfig: { signalName: '', timeout: 300000 },
+        defaultPorts: {
+            inputs: [{ id: 'in', type: PortType.INPUT, label: 'Input' }],
+            outputs: [
+                { id: 'out', type: PortType.OUTPUT, label: 'Signal' },
+                { id: 'timeout', type: PortType.OUTPUT, label: 'Timeout' },
+            ],
+        },
+    },
+    {
+        type: WorkflowNodeType.TRY_CATCH,
+        name: 'Try / Catch',
+        description: 'Catch errors from the connected branch',
+        icon: NODE_ICONS[WorkflowNodeType.TRY_CATCH],
+        color: NODE_COLORS[WorkflowNodeType.TRY_CATCH],
+        category: 'control',
+        defaultConfig: { catchTypes: ['*'], errorVariable: 'error' },
+        defaultPorts: {
+            inputs: [{ id: 'in', type: PortType.INPUT, label: 'Input' }],
+            outputs: [
+                { id: 'try', type: PortType.OUTPUT, label: 'Try' },
+                { id: 'catch', type: PortType.ERROR, label: 'Catch' },
+            ],
+        },
+    },
+    {
+        type: WorkflowNodeType.BREAK,
+        name: 'Break',
+        description: 'Exit the enclosing loop',
+        icon: NODE_ICONS[WorkflowNodeType.BREAK],
+        color: NODE_COLORS[WorkflowNodeType.BREAK],
+        category: 'control',
+        defaultConfig: {},
+        defaultPorts: {
+            inputs: [{ id: 'in', type: PortType.INPUT, label: 'Input' }],
+            outputs: [],
+        },
+    },
     {
         type: WorkflowNodeType.TRANSFORM,
         name: 'Transform',
@@ -1748,6 +1876,26 @@ export const NODE_TEMPLATES = [
             ],
         },
     },
+    // Cron/scheduled trigger
+    {
+        type: WorkflowNodeType.CRON,
+        name: 'Cron Trigger',
+        description: 'Triggers workflow on a scheduled cron expression',
+        icon: NODE_ICONS[WorkflowNodeType.CRON],
+        color: NODE_COLORS[WorkflowNodeType.CRON],
+        category: 'trigger',
+        defaultConfig: {
+            cronExpression: '0 * * * *',
+            timezone: 'UTC',
+        },
+        defaultPorts: {
+            inputs: [],
+            outputs: [
+                { id: 'out', type: PortType.OUTPUT, label: 'Tick' },
+                { id: 'error', type: PortType.ERROR, label: 'Error' },
+            ],
+        },
+    },
     // MCP integration
     {
         type: WorkflowNodeType.MCP,
@@ -2509,6 +2657,7 @@ export const NODE_CATEGORIES = [
             WorkflowNodeType.START,
             WorkflowNodeType.HTTP_START,
             WorkflowNodeType.CHAT_START,
+            WorkflowNodeType.CRON,
             WorkflowNodeType.TELEGRAM_BOT,
             WorkflowNodeType.SLACK_SOCKET,
             WorkflowNodeType.DISCORD_BOT,
@@ -2527,9 +2676,14 @@ export const NODE_CATEGORIES = [
             WorkflowNodeType.END,
             WorkflowNodeType.HTTP_END,
             WorkflowNodeType.CONDITION,
+            WorkflowNodeType.SWITCH,
             WorkflowNodeType.DELAY,
+            WorkflowNodeType.WAIT,
             WorkflowNodeType.PARALLEL,
+            WorkflowNodeType.MERGE,
             WorkflowNodeType.LOOP,
+            WorkflowNodeType.BREAK,
+            WorkflowNodeType.TRY_CATCH,
         ],
         canvasType: CanvasType.WORKFLOW,
     },
@@ -2543,6 +2697,7 @@ export const NODE_CATEGORIES = [
             WorkflowNodeType.INFORMATION_EXTRACTOR,
             WorkflowNodeType.OCR,
             WorkflowNodeType.CHAT_OUTPUT,
+            WorkflowNodeType.SOCIAL_POST,
             WorkflowNodeType.SUB_WORKFLOW,
             WorkflowNodeType.EMAIL,
             WorkflowNodeType.EMAIL_READER,
@@ -2939,8 +3094,10 @@ export const PERSISTENT_TRIGGER_TYPES = new Set([
     WorkflowNodeType.DISCORD_BOT,
     WorkflowNodeType.WHATSAPP_WEBHOOK,
     WorkflowNodeType.CUSTOM_WEBSOCKET,
+    WorkflowNodeType.RABBITMQ_TRIGGER,
     WorkflowNodeType.CALENDLY_TRIGGER,
     WorkflowNodeType.KAFKA_TRIGGER,
+    WorkflowNodeType.CRON,
 ]);
 export function isPersistentTriggerNode(type) {
     return PERSISTENT_TRIGGER_TYPES.has(type);

package/dist/src/components/carousel/demo/carousel-demo.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import '../carousel.component';
+export declare class CarouselDemo extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=carousel-demo.d.ts.map

package/dist/src/components/carousel/demo/carousel-demo.js

@@ -0,0 +1,68 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import '../carousel.component';
+import { customElement } from 'lit/decorators.js';
+let CarouselDemo = class CarouselDemo extends LitElement {
+    render() {
+        return html `
+      AUTOPLAY
+      <hy-carousel ?autoplay=${true}>
+        <div>
+          <h3>Slide 1</h3>
+          <p>Content for Slide 1</p>
+        </div>
+        <div>
+          <h3>Slide 2</h3>
+          <p>Content for Slide 2</p>
+        </div>
+        <div>
+          <h3>Slide 3</h3>
+          <p>Content for Slide 3</p>
+        </div>
+      </hy-carousel>
+      <hr />
+
+      WITH CONTROLS
+      <hy-carousel>
+        <div>
+          <h3>Slide 1</h3>
+          <p>Content for Slide 1</p>
+        </div>
+        <div>
+          <h3>Slide 2</h3>
+          <p>Content for Slide 2</p>
+        </div>
+        <div>
+          <h3>Slide 3</h3>
+          <p>Content for Slide 3</p>
+        </div>
+      </hy-carousel>
+      <hr />
+      <hy-carousel>
+        <div>
+          <img src="https://via.placeholder.com/150" alt="Image 1" />
+        </div>
+        <div>
+          <img src="https://via.placeholder.com/150" alt="Image 2" />
+        </div>
+
+        <div>
+          <img src="https://via.placeholder.com/150" alt="Image 4" />
+        </div>
+        <div>
+          <img src="https://via.placeholder.com/150" alt="Image 6" />
+        </div>
+      </hy-carousel>
+    `;
+    }
+};
+CarouselDemo = __decorate([
+    customElement('hy-carousel-demo')
+], CarouselDemo);
+export { CarouselDemo };
+//# sourceMappingURL=carousel-demo.js.map

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

@@ -0,0 +1,216 @@
+import{css as t,html as e,LitElement as i,nothing as o}from"lit";import{property as s,state as n,customElement as a}from"lit/decorators.js";const r=t`
+  :host { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
+
+  /* Messages */
+  .chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
+  .chat-messages::before { content: ''; flex: 1; }
+  .date-sep { align-self: center; font-size: 11px; color: var(--text-secondary, #536471); background: var(--input-bg, #f2f2f7); padding: 3px 10px; border-radius: 9999px; margin: 8px 0; }
+  .msg-row { display: flex; gap: 6px; align-items: flex-end; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+  .msg-row .msg { -webkit-user-select: text; user-select: text; }
+  .msg-row.me { flex-direction: row-reverse; }
+  .msg-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: #fff; flex-shrink: 0; margin-bottom: 16px; }
+  .msg-sender-name { font-size: 10px; font-weight: 600; padding: 0 4px; margin-bottom: 1px; }
+  .msg-bubble { max-width: 75%; }
+  .msg { padding: 7px 12px; border-radius: 16px; font-size: 13px; line-height: 1.4; word-wrap: break-word; }
+  .msg.me { background: var(--accent, #7c3aed); color: #fff; border-bottom-right-radius: 4px; }
+  .msg.them { background: var(--input-bg, #f2f2f7); color: var(--text, #1d1d1f); border-bottom-left-radius: 4px; }
+  .msg-footer { display: flex; align-items: center; gap: 4px; margin-top: 1px; padding: 0 4px; }
+  .msg-footer.me { justify-content: flex-end; }
+  .msg-time { font-size: 10px; color: var(--text-secondary, #536471); }
+  .msg-read { display: flex; align-items: center; }
+  .msg-read svg { width: 14px; height: 14px; }
+
+  /* Attachments */
+  .msg-attachment { margin-top: 4px; }
+  .msg-attachment img { max-width: 200px; border-radius: 8px; cursor: pointer; display: block; }
+  .msg-attachment .file-card { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--input-bg, #f2f2f7); border-radius: 10px; font-size: 12px; text-decoration: none; color: var(--text); cursor: pointer; min-width: 160px; }
+  .msg-attachment .file-card:hover { background: var(--border, #e5e7eb); }
+
+  /* Audio player */
+  .audio-msg { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--input-bg, #f2f2f7); border-radius: 16px; min-width: 180px; }
+  .audio-play-btn { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--accent, #7c3aed); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .audio-bars { flex: 1; display: flex; align-items: center; gap: 1.5px; height: 24px; }
+  .a-bar { width: 2.5px; min-height: 3px; border-radius: 1.5px; background: rgba(0,0,0,0.2); transition: background 0.1s; }
+  .a-bar.played { background: var(--accent, #7c3aed); }
+  .audio-dur { font-size: 10px; color: var(--text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 28px; text-align: right; }
+  .audio-msg audio { display: none; }
+  .me .audio-msg { background: rgba(255,255,255,0.15); }
+  .me .audio-play-btn { background: #fff; color: var(--accent, #7c3aed); }
+  .me .a-bar { background: rgba(255,255,255,0.3); }
+  .me .a-bar.played { background: #fff; }
+  .me .audio-dur { color: rgba(255,255,255,0.7); }
+
+  /* Call logs */
+  .msg-call-log { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--input-bg, #f2f2f7); border-radius: 10px; min-width: 160px; }
+  .msg-call-info { flex: 1; }
+  .msg-call-type { font-size: 12px; font-weight: 600; }
+  .msg-call-status { font-size: 10px; color: var(--text-secondary); }
+  .msg-call-status.missed, .msg-call-status.declined { color: #ef4444; }
+  .msg-call-status.completed { color: #22c55e; }
+
+  /* Reactions */
+  .msg-reactions { display: flex; gap: 3px; margin-top: 2px; padding: 0 4px; flex-wrap: wrap; }
+  .msg-reactions .reaction { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 10px; background: var(--input-bg, #f2f2f7); font-size: 11px; cursor: pointer; border: 1px solid transparent; transition: transform 0.12s; }
+  .msg-reactions .reaction:hover { border-color: var(--accent, #7c3aed); transform: scale(1.05); }
+  .msg-reactions .reaction.mine { background: color-mix(in srgb, var(--accent, #7c3aed) 15%, transparent); border-color: var(--accent, #7c3aed); }
+  .msg-reactions .reaction svg { width: 12px; height: 12px; }
+  .msg-reactions .reaction .count { font-size: 10px; color: var(--text-secondary); }
+
+  /* Reply quote */
+  .msg-reply-quote { font-size: 10px; color: var(--text-secondary); padding: 3px 6px; margin-bottom: 2px; border-left: 2px solid var(--accent, #7c3aed); border-radius: 2px; background: rgba(124,58,237,0.05); }
+  .reply-bar { display: flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--input-bg, #f2f2f7); border-left: 3px solid var(--accent, #7c3aed); font-size: 11px; color: var(--text-secondary); }
+  .reply-bar .reply-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .reply-bar button { border: none; background: none; cursor: pointer; color: var(--text-secondary); font-size: 14px; padding: 2px; }
+
+  /* Edited/deleted/encrypted */
+  .msg-edited { font-size: 9px; color: var(--text-secondary); font-style: italic; }
+  .msg-deleted { font-style: italic; color: var(--text-secondary); }
+  .msg-e2e { font-size: 9px; margin-left: 3px; opacity: 0.6; }
+
+  /* Inline edit */
+  .edit-inline { display: flex; align-items: center; gap: 3px; }
+  .edit-input { flex: 1; border: 1px solid var(--accent, #7c3aed); border-radius: 6px; padding: 3px 6px; font-size: 12px; outline: none; background: var(--bg, #fff); color: var(--text); min-width: 80px; }
+  .edit-confirm, .edit-cancel { border: none; background: none; cursor: pointer; font-size: 13px; padding: 2px 3px; border-radius: 3px; }
+  .edit-confirm { color: #16a34a; }
+  .edit-cancel { color: #dc2626; }
+
+  /* Context menu */
+  .ctx-menu { position: fixed; background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 3px 0; box-shadow: 0 6px 24px rgba(0,0,0,0.12); z-index: 20; min-width: 120px; backdrop-filter: blur(12px); }
+  .ctx-menu button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; border: none; background: none; font-size: 12px; color: var(--text); cursor: pointer; text-align: left; }
+  .ctx-menu button:hover { background: var(--input-bg); }
+  .ctx-menu button.danger { color: #dc2626; }
+  .ctx-reactions { display: flex; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
+  .ctx-reactions button { width: 30px; height: 30px; padding: 0; min-width: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.12s, background 0.12s; }
+  .ctx-reactions button:hover { background: var(--input-bg); transform: scale(1.2); }
+  .ctx-reactions button svg { width: 16px; height: 16px; }
+
+  /* Emoji picker */
+  .emoji-picker { position: absolute; bottom: 50px; left: 8px; background: var(--bg, #fff); border: 1px solid var(--border); border-radius: 12px; padding: 5px; box-shadow: 0 6px 24px rgba(0,0,0,0.12); z-index: 10; max-height: 200px; overflow-y: auto; }
+  .emoji-picker .emoji-quick { display: flex; gap: 3px; padding: 3px 2px 5px; border-bottom: 1px solid var(--border); margin-bottom: 3px; }
+  .emoji-picker .emoji-quick button { width: 30px; height: 30px; border: none; background: none; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; }
+  .emoji-picker .emoji-quick button:hover { background: var(--input-bg); transform: scale(1.2); }
+  .emoji-picker .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
+  .emoji-picker .emoji-grid button { width: 28px; height: 28px; border: none; background: none; font-size: 16px; cursor: pointer; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
+  .emoji-picker .emoji-grid button:hover { background: var(--input-bg); transform: scale(1.1); }
+
+  /* Typing indicator */
+  .typing-indicator { padding: 3px 12px; font-size: 11px; color: var(--text-secondary); font-style: italic; }
+
+  /* Input bar */
+  .chat-input { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border, #e5e7eb); align-items: center; flex-shrink: 0; position: relative; }
+  .chat-input textarea { flex: 1; padding: 8px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 18px; font-size: 13px; outline: none; background: var(--input-bg, #f2f2f7); resize: none; font-family: inherit; line-height: 1.4; max-height: 80px; overflow-y: auto; }
+  .chat-input textarea:focus { border-color: var(--accent, #7c3aed); background: var(--bg, #fff); }
+  .input-tools { display: flex; gap: 1px; }
+  .input-tools button { width: 30px; height: 30px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+  .input-tools button:hover { background: var(--input-bg); color: var(--accent); }
+  .send-btn { width: 32px; height: 32px; border: none; background: var(--accent, #7c3aed); color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .send-btn:hover { background: var(--accent-hover, #6d28d9); }
+
+  /* Empty state */
+  .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); gap: 6px; padding: 24px; }
+  .empty-state svg { width: 36px; height: 36px; opacity: 0.4; }
+  .empty-state span { font-size: 12px; }
+
+  /* Loading */
+  .loading { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 12px; }
+
+  /* Full-size mode overrides */
+  :host(:not([compact])) .msg { font-size: 14px; padding: 8px 14px; border-radius: 18px; }
+  :host(:not([compact])) .msg-bubble { max-width: 65%; }
+  :host(:not([compact])) .msg-avatar { width: 24px; height: 24px; font-size: 10px; }
+  :host(:not([compact])) .chat-messages { padding: 16px; }
+  :host(:not([compact])) .chat-input textarea { font-size: 14px; padding: 10px 16px; }
+  :host(:not([compact])) .chat-input { padding: 10px 16px; }
+  :host(:not([compact])) .send-btn { width: 38px; height: 38px; }
+`
+/**
+ * @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`
+      ${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()}}>
+            ${this.messages.map((t,e,i)=>this._renderMessage(t,e,i))}
+          </div>
+        `}
+
+      ${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">
+          <span class="reply-text">Replying to: ${this._replyTo.text}</span>
+          <button @click=${()=>{this._replyTo=null}}>✕</button>
+        </div>
+      `:o}
+      ${this._showEmoji?this._renderEmojiPicker():o}
+      ${this.hideInput?o:this._renderInputBar()}
+    `}_renderMessage(t,i,s){var n;if("date"===t.from)return e`<div class="date-sep">${t.text}</div>`;if(t.deleted)return e`<div class="msg-row system"><div class="msg-bubble"><div class="msg them msg-deleted">This message was deleted</div></div></div>`;const a=i>0?s[i-1]:null,r=this.isGroup&&"them"===t.from&&(!a||"them"!==a.from||a.senderId!==t.senderId);return e`
+      <div class="msg-row ${t.from}"
+        @contextmenu=${t=>this._showContextMenuHandler(t,i)}
+        @touchstart=${t=>this._onTouchStart(t,i)}
+        @touchend=${()=>this._onTouchEnd()}
+        @touchmove=${()=>this._onTouchMove()}
+        @click=${t=>this._onMsgTap(t,i)}>
+        ${"them"===t.from?e`<div class="msg-avatar" style="background:${t.senderColor||"#7c3aed"}">${(t.senderInitials||"?").charAt(0)}</div>`:o}
+        <div class="msg-bubble" @dblclick=${"me"!==t.from||t.deleted?void 0:()=>this._editMsg(i)}>
+          ${r?e`<div class="msg-sender-name" style="color:${t.senderColor||"#7c3aed"}">${t.senderName}</div>`:o}
+          ${t.replyTo?e`<div class="msg-reply-quote">${t.replyTo.text}</div>`:o}
+          ${this._renderAttachment(t)}
+          ${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}
+          </div>
+          ${(null===(n=t.reactions)||void 0===n?void 0:n.length)?e`
+            <div class="msg-reactions">
+              ${t.reactions.map(t=>{var o;return e`
+                <span class="reaction ${(null===(o=t.users)||void 0===o?void 0:o.includes("me"))?"mine":""}" @click=${()=>this._reactMsg(i,t.emoji)}>${t.emoji} <span class="count">${t.count}</span></span>
+              `})}
+            </div>
+          `:o}
+        </div>
+      </div>
+    `}_renderAttachment(t){var i;const s=t.attachment;if(!s)return o;if("call"===s.type){const t="video"===s.callType?y:f,i="missed"===s.callStatus||"declined"===s.callStatus?"#ef4444":"#22c55e";return e`<div class="msg-call-log">
+        <span style="color:${i}">${t}</span>
+        <div class="msg-call-info">
+          <div class="msg-call-type">${"video"===s.callType?"Video call":"Voice call"}</div>
+          <div class="msg-call-status ${s.callStatus}">${"completed"===s.callStatus?s.duration||"Ended":"declined"===s.callStatus?"Declined":"Missed"}</div>
+        </div>
+      </div>`}if("image"===s.type)return e`<div class="msg-attachment"><img src="${s.decryptedUrl||s.url}" alt="${s.name||"Image"}"></div>`;if("audio"===s.type){const t=(null===(i=s.waveform)||void 0===i?void 0:i.length)?s.waveform:Array(36).fill(.15);return e`<div class="msg-attachment"><div class="audio-msg">
+        <button class="audio-play-btn" @click=${t=>this._toggleAudioPlay(t)}>${m}</button>
+        <div class="audio-bars">${t.map(t=>e`<div class="a-bar" style="height:${Math.round(22*t+3)}px"></div>`)}</div>
+        <span class="audio-dur">${s.duration||"0:00"}</span>
+        <audio src="${s.decryptedUrl||s.url}" preload="metadata" @timeupdate=${t=>this._onAudioTimeUpdate(t)} @ended=${t=>this._onAudioEnded(t)}></audio>
+      </div></div>`}return e`<div class="msg-attachment"><a class="file-card" href="${s.decryptedUrl||s.url}" target="_blank" download="${s.name||"file"}">
+      ${v}
+      <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-reactions">
+          ${l.map(i=>e`<button @click=${()=>this._reactMsg(t.msgIdx,i.key)} title=${i.label}>${i.key}</button>`)}
+        </div>
+        <button @click=${()=>this._replyMsg(t.msgIdx)}>↩ Reply</button>
+        ${s&&!(null==i?void 0:i.deleted)?e`<button @click=${()=>this._editMsg(t.msgIdx)}>✏️ Edit</button>`:o}
+        ${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-quick">
+          ${l.map(t=>e`<button @click=${()=>this._insertEmoji(t.key)} title=${t.label}>${t.key}</button>`)}
+        </div>
+        <div class="emoji-grid">
+          ${c.map(t=>e`<button @click=${()=>this._insertEmoji(t)}>${t}</button>`)}
+        </div>
+      </div>
+    `}_renderInputBar(){return e`
+      <div class="chat-input">
+        <div class="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>
+      </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};