@memberjunction/ng-conversations 2.111.1 → 2.113.0

package/dist/lib/components/global-tasks/global-tasks-panel.component.js

@@ -0,0 +1,206 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "../../services/active-tasks.service";
+import * as i2 from "@angular/common";
+function GlobalTasksPanelComponent_div_0_button_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 4);
+    i0.ɵɵlistener("click", function GlobalTasksPanelComponent_div_0_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.expand()); });
+    i0.ɵɵelement(1, "i", 5);
+    i0.ɵɵelementStart(2, "span", 6);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.tasks.length);
+} }
+function GlobalTasksPanelComponent_div_0_div_2_div_9_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const task_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(task_r5.conversationName);
+} }
+function GlobalTasksPanelComponent_div_0_div_2_div_9_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵlistener("click", function GlobalTasksPanelComponent_div_0_div_2_div_9_Template_div_click_0_listener() { const task_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTaskClick(task_r5)); });
+    i0.ɵɵelementStart(1, "div", 16);
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementStart(3, "span", 18);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(5, GlobalTasksPanelComponent_div_0_div_2_div_9_div_5_Template, 4, 1, "div", 19);
+    i0.ɵɵelementStart(6, "div", 20);
+    i0.ɵɵelement(7, "span", 21);
+    i0.ɵɵelementStart(8, "span", 22);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 23);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const task_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(task_r5.agentName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", task_r5.conversationName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.getTrimmedStatus(task_r5.status));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.getElapsedTime(task_r5));
+} }
+function GlobalTasksPanelComponent_div_0_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 8)(2, "div", 9);
+    i0.ɵɵelement(3, "i", 10);
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "button", 11);
+    i0.ɵɵlistener("click", function GlobalTasksPanelComponent_div_0_div_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.minimize()); });
+    i0.ɵɵelement(7, "i", 12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 13);
+    i0.ɵɵtemplate(9, GlobalTasksPanelComponent_div_0_div_2_div_9_Template, 12, 4, "div", 14);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("Active Tasks (", ctx_r1.tasks.length, ")");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r1.tasks);
+} }
+function GlobalTasksPanelComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵtemplate(1, GlobalTasksPanelComponent_div_0_button_1_Template, 4, 1, "button", 2)(2, GlobalTasksPanelComponent_div_0_div_2_Template, 10, 2, "div", 3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isMinimized);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isMinimized);
+} }
+/**
+ * Global floating tasks panel that shows all active tasks across all conversations
+ * Appears in bottom-right corner, minimizable, shows only when tasks > 0
+ */
+export class GlobalTasksPanelComponent {
+    activeTasksService;
+    tasks = [];
+    isMinimized = false;
+    destroy$ = new Subject();
+    taskClicked = new EventEmitter();
+    constructor(activeTasksService) {
+        this.activeTasksService = activeTasksService;
+    }
+    ngOnInit() {
+        // Subscribe to active tasks
+        this.activeTasksService.tasks$.pipe(takeUntil(this.destroy$)).subscribe(tasks => {
+            this.tasks = tasks;
+            // Auto-expand if tasks appear and panel was minimized
+            if (this.tasks.length > 0 && this.isMinimized) {
+                // Keep minimized, let user expand manually
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    expand() {
+        this.isMinimized = false;
+    }
+    minimize() {
+        this.isMinimized = true;
+    }
+    onTaskClick(task) {
+        this.taskClicked.emit(task);
+    }
+    getTrimmedStatus(status) {
+        // Remove emojis and trim to 50 chars
+        const cleaned = status.replace(/[\u{1F600}-\u{1F64F}]/gu, '').trim();
+        return cleaned.length > 50 ? cleaned.substring(0, 47) + '...' : cleaned;
+    }
+    getElapsedTime(task) {
+        const elapsed = Date.now() - task.startTime;
+        const seconds = Math.floor(elapsed / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        if (hours > 0) {
+            return `${hours}h ${minutes % 60}m`;
+        }
+        else if (minutes > 0) {
+            return `${minutes}m ${seconds % 60}s`;
+        }
+        else {
+            return `${seconds}s`;
+        }
+    }
+    static ɵfac = function GlobalTasksPanelComponent_Factory(t) { return new (t || GlobalTasksPanelComponent)(i0.ɵɵdirectiveInject(i1.ActiveTasksService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GlobalTasksPanelComponent, selectors: [["mj-global-tasks-panel"]], outputs: { taskClicked: "taskClicked" }, decls: 1, vars: 1, consts: [["class", "global-tasks-panel", 4, "ngIf"], [1, "global-tasks-panel"], ["class", "minimized-badge", "title", "View active tasks", 3, "click", 4, "ngIf"], ["class", "expanded-panel", 4, "ngIf"], ["title", "View active tasks", 1, "minimized-badge", 3, "click"], [1, "fas", "fa-bolt"], [1, "task-count"], [1, "expanded-panel"], [1, "panel-header"], [1, "header-left"], [1, "fas", "fa-circle-notch", "fa-spin"], ["title", "Minimize", 1, "minimize-btn", 3, "click"], [1, "fas", "fa-minus"], [1, "panel-content"], ["class", "task-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "task-item", 3, "click"], [1, "task-header"], [1, "fas", "fa-robot"], [1, "task-agent"], ["class", "task-conversation", 4, "ngIf"], [1, "task-status"], [1, "status-indicator", "active"], [1, "status-text"], [1, "task-elapsed"], [1, "task-conversation"], [1, "fas", "fa-message"]], template: function GlobalTasksPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, GlobalTasksPanelComponent_div_0_Template, 3, 2, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.tasks.length > 0);
+        } }, dependencies: [i2.NgForOf, i2.NgIf], styles: [".global-tasks-panel[_ngcontent-%COMP%] {\n      position: fixed;\n      bottom: 24px;\n      right: 24px;\n      z-index: 9999;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n\n    \n\n    .minimized-badge[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      border: none;\n      border-radius: 50%;\n      width: 56px;\n      height: 56px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      transition: all 0.3s ease;\n      position: relative;\n      animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n    }\n\n    .minimized-badge[_ngcontent-%COMP%]:hover {\n      transform: scale(1.1);\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n    }\n\n    .minimized-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 20px;\n      margin-right: 4px;\n    }\n\n    .minimized-badge[_ngcontent-%COMP%]   .task-count[_ngcontent-%COMP%] {\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      background: #ef4444;\n      color: white;\n      border-radius: 50%;\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 12px;\n      font-weight: 600;\n      border: 2px solid white;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% {\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n      50% {\n        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);\n      }\n    }\n\n    \n\n    .expanded-panel[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n      width: 360px;\n      max-height: 480px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      animation: _ngcontent-%COMP%_slideIn 0.3s ease-out;\n    }\n\n    @keyframes _ngcontent-%COMP%_slideIn {\n      from {\n        opacity: 0;\n        transform: translateY(20px) scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid #e5e7eb;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      font-size: 14px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n    }\n\n    .minimize-btn[_ngcontent-%COMP%] {\n      background: rgba(255, 255, 255, 0.2);\n      color: white;\n      border: none;\n      border-radius: 6px;\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .minimize-btn[_ngcontent-%COMP%]:hover {\n      background: rgba(255, 255, 255, 0.3);\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      overflow-y: auto;\n      max-height: 420px;\n    }\n\n    .task-item[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f3f4f6;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .task-item[_ngcontent-%COMP%]:hover {\n      background: #f9fafb;\n    }\n\n    .task-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .task-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 6px;\n    }\n\n    .task-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #667eea;\n      font-size: 14px;\n    }\n\n    .task-agent[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      color: #111827;\n    }\n\n    .task-conversation[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: #6b7280;\n      margin-bottom: 6px;\n    }\n\n    .task-conversation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .task-status[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .status-indicator[_ngcontent-%COMP%] {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      flex-shrink: 0;\n    }\n\n    .status-indicator.active[_ngcontent-%COMP%] {\n      background: #10b981;\n      animation: _ngcontent-%COMP%_blink 2s ease-in-out infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_blink {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.4; }\n    }\n\n    .status-text[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #4b5563;\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .task-elapsed[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #9ca3af;\n      font-variant-numeric: tabular-nums;\n    }\n\n    \n\n    .panel-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    .panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n      background: #f9fafb;\n    }\n\n    .panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: #d1d5db;\n      border-radius: 3px;\n    }\n\n    .panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n      background: #9ca3af;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GlobalTasksPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-global-tasks-panel', template: `
+    <div class="global-tasks-panel" *ngIf="tasks.length > 0">
+      <!-- Minimized State -->
+      <button
+        *ngIf="isMinimized"
+        class="minimized-badge"
+        (click)="expand()"
+        title="View active tasks">
+        <i class="fas fa-bolt"></i>
+        <span class="task-count">{{ tasks.length }}</span>
+      </button>
+
+      <!-- Expanded State -->
+      <div *ngIf="!isMinimized" class="expanded-panel">
+        <div class="panel-header">
+          <div class="header-left">
+            <i class="fas fa-circle-notch fa-spin"></i>
+            <span>Active Tasks ({{ tasks.length }})</span>
+          </div>
+          <button class="minimize-btn" (click)="minimize()" title="Minimize">
+            <i class="fas fa-minus"></i>
+          </button>
+        </div>
+
+        <div class="panel-content">
+          <div class="task-item" *ngFor="let task of tasks" (click)="onTaskClick(task)">
+            <div class="task-header">
+              <i class="fas fa-robot"></i>
+              <span class="task-agent">{{ task.agentName }}</span>
+            </div>
+            <div class="task-conversation" *ngIf="task.conversationName">
+              <i class="fas fa-message"></i>
+              <span>{{ task.conversationName }}</span>
+            </div>
+            <div class="task-status">
+              <span class="status-indicator active"></span>
+              <span class="status-text">{{ getTrimmedStatus(task.status) }}</span>
+            </div>
+            <div class="task-elapsed">{{ getElapsedTime(task) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, styles: ["\n    .global-tasks-panel {\n      position: fixed;\n      bottom: 24px;\n      right: 24px;\n      z-index: 9999;\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n\n    /* Minimized Badge */\n    .minimized-badge {\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      border: none;\n      border-radius: 50%;\n      width: 56px;\n      height: 56px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      transition: all 0.3s ease;\n      position: relative;\n      animation: pulse 2s ease-in-out infinite;\n    }\n\n    .minimized-badge:hover {\n      transform: scale(1.1);\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n    }\n\n    .minimized-badge i {\n      font-size: 20px;\n      margin-right: 4px;\n    }\n\n    .minimized-badge .task-count {\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      background: #ef4444;\n      color: white;\n      border-radius: 50%;\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 12px;\n      font-weight: 600;\n      border: 2px solid white;\n    }\n\n    @keyframes pulse {\n      0%, 100% {\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n      50% {\n        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);\n      }\n    }\n\n    /* Expanded Panel */\n    .expanded-panel {\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n      width: 360px;\n      max-height: 480px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      animation: slideIn 0.3s ease-out;\n    }\n\n    @keyframes slideIn {\n      from {\n        opacity: 0;\n        transform: translateY(20px) scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid #e5e7eb;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      font-size: 14px;\n    }\n\n    .header-left i {\n      font-size: 16px;\n    }\n\n    .minimize-btn {\n      background: rgba(255, 255, 255, 0.2);\n      color: white;\n      border: none;\n      border-radius: 6px;\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .minimize-btn:hover {\n      background: rgba(255, 255, 255, 0.3);\n    }\n\n    .panel-content {\n      overflow-y: auto;\n      max-height: 420px;\n    }\n\n    .task-item {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f3f4f6;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .task-item:hover {\n      background: #f9fafb;\n    }\n\n    .task-item:last-child {\n      border-bottom: none;\n    }\n\n    .task-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 6px;\n    }\n\n    .task-header i {\n      color: #667eea;\n      font-size: 14px;\n    }\n\n    .task-agent {\n      font-weight: 600;\n      font-size: 13px;\n      color: #111827;\n    }\n\n    .task-conversation {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: #6b7280;\n      margin-bottom: 6px;\n    }\n\n    .task-conversation i {\n      font-size: 11px;\n    }\n\n    .task-status {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .status-indicator {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      flex-shrink: 0;\n    }\n\n    .status-indicator.active {\n      background: #10b981;\n      animation: blink 2s ease-in-out infinite;\n    }\n\n    @keyframes blink {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.4; }\n    }\n\n    .status-text {\n      font-size: 12px;\n      color: #4b5563;\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .task-elapsed {\n      font-size: 11px;\n      color: #9ca3af;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Scrollbar Styling */\n    .panel-content::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    .panel-content::-webkit-scrollbar-track {\n      background: #f9fafb;\n    }\n\n    .panel-content::-webkit-scrollbar-thumb {\n      background: #d1d5db;\n      border-radius: 3px;\n    }\n\n    .panel-content::-webkit-scrollbar-thumb:hover {\n      background: #9ca3af;\n    }\n  "] }]
+    }], () => [{ type: i1.ActiveTasksService }], { taskClicked: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GlobalTasksPanelComponent, { className: "GlobalTasksPanelComponent", filePath: "src/lib/components/global-tasks/global-tasks-panel.component.ts", lineNumber: 292 }); })();
+//# sourceMappingURL=global-tasks-panel.component.js.map

package/dist/lib/components/global-tasks/global-tasks-panel.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-tasks-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/global-tasks/global-tasks-panel.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/components/message/conversation-message-rating.component.d.ts

@@ -0,0 +1,47 @@
+import { OnInit } from '@angular/core';
+import { UserInfo } from '@memberjunction/core';
+import { RatingJSON } from '../../models/conversation-complete-query.model';
+import * as i0 from "@angular/core";
+/**
+ * Component for displaying and managing multi-user ratings on conversation messages.
+ * Shows aggregate ratings and allows users to provide their own rating.
+ */
+export declare class ConversationMessageRatingComponent implements OnInit {
+    conversationDetailId: string;
+    currentUser: UserInfo;
+    ratingsData?: RatingJSON[];
+    thumbsUpCount: number;
+    thumbsDownCount: number;
+    totalRatings: number;
+    currentUserRating: number | null;
+    allRatings: RatingJSON[];
+    private get currentUserId();
+    ngOnInit(): Promise<void>;
+    /**
+     * Process ratings data (from query or API)
+     */
+    private ProcessRatings;
+    /**
+     * Get tooltip showing who rated this message
+     */
+    getRatingsTooltip(): string;
+    /**
+     * Load all ratings for this message (fallback if not pre-loaded)
+     */
+    LoadRatings(): Promise<void>;
+    /**
+     * Rate message as thumbs up (10/10)
+     */
+    RateThumbsUp(): Promise<void>;
+    /**
+     * Rate message as thumbs down (1/10)
+     */
+    RateThumbsDown(): Promise<void>;
+    /**
+     * Save or update user's rating for this message
+     */
+    private SaveRating;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationMessageRatingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConversationMessageRatingComponent, "mj-conversation-message-rating", never, { "conversationDetailId": { "alias": "conversationDetailId"; "required": false; }; "currentUser": { "alias": "currentUser"; "required": false; }; "ratingsData": { "alias": "ratingsData"; "required": false; }; }, {}, never, never, false, never>;
+}
+//# sourceMappingURL=conversation-message-rating.component.d.ts.map

package/dist/lib/components/message/conversation-message-rating.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-message-rating.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/message/conversation-message-rating.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,gDAAgD,CAAC;;AAE5E;;;GAGG;AACH,qBAqHa,kCAAmC,YAAW,MAAM;IACpD,oBAAoB,EAAG,MAAM,CAAC;IAC9B,WAAW,EAAG,QAAQ,CAAC;IACvB,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAEpC,aAAa,SAAK;IAClB,eAAe,SAAK;IACpB,YAAY,SAAK;IACjB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,UAAU,EAAE,UAAU,EAAE,CAAM;IAE9B,OAAO,KAAK,aAAa,GAExB;IAEK,QAAQ;IAUd;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,iBAAiB,IAAI,MAAM;IAoB3B;;OAEG;IACG,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;IAoBlC;;OAEG;IACG,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAInC;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IAIrC;;OAEG;YACW,UAAU;yCArGf,kCAAkC;2CAAlC,kCAAkC;CA8I9C"}

package/dist/lib/components/message/conversation-message-rating.component.js

@@ -0,0 +1,224 @@
+import { Component, Input } from '@angular/core';
+import { Metadata, RunView } from '@memberjunction/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+function ConversationMessageRatingComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "span", 6);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 7);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 8);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", ctx_r0.getRatingsTooltip());
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("has-votes", ctx_r0.thumbsUpCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" \uD83D\uDC4D ", ctx_r0.thumbsUpCount, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("has-votes", ctx_r0.thumbsDownCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" \uD83D\uDC4E ", ctx_r0.thumbsDownCount, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("(", ctx_r0.totalRatings, " ", ctx_r0.totalRatings === 1 ? "rating" : "ratings", ")");
+} }
+/**
+ * Component for displaying and managing multi-user ratings on conversation messages.
+ * Shows aggregate ratings and allows users to provide their own rating.
+ */
+export class ConversationMessageRatingComponent {
+    conversationDetailId;
+    currentUser;
+    ratingsData; // Pre-loaded ratings from parent (RatingsJSON from query)
+    thumbsUpCount = 0;
+    thumbsDownCount = 0;
+    totalRatings = 0;
+    currentUserRating = null;
+    allRatings = [];
+    get currentUserId() {
+        return this.currentUser?.ID || '';
+    }
+    async ngOnInit() {
+        if (this.ratingsData) {
+            // Use pre-loaded ratings (no database query needed)
+            this.ProcessRatings(this.ratingsData);
+        }
+        else {
+            // Fallback to loading ratings if not provided
+            await this.LoadRatings();
+        }
+    }
+    /**
+     * Process ratings data (from query or API)
+     */
+    ProcessRatings(ratings) {
+        this.allRatings = ratings;
+        this.thumbsUpCount = ratings.filter(r => r.Rating ? r.Rating >= 8 : false).length;
+        this.thumbsDownCount = ratings.filter(r => r.Rating ? r.Rating <= 3 : false).length;
+        this.totalRatings = ratings.length;
+        const currentUserRating = ratings.find(r => r.UserID === this.currentUserId);
+        this.currentUserRating = currentUserRating?.Rating ?? null;
+    }
+    /**
+     * Get tooltip showing who rated this message
+     */
+    getRatingsTooltip() {
+        if (this.allRatings.length === 0)
+            return '';
+        const thumbsUpUsers = this.allRatings
+            .filter(r => r.Rating ? r.Rating >= 8 : false)
+            .map(r => r.UserName || 'Unknown')
+            .join(', ');
+        const thumbsDownUsers = this.allRatings
+            .filter(r => r.Rating ? r.Rating <= 3 : false)
+            .map(r => r.UserName || 'Unknown')
+            .join(', ');
+        const parts = [];
+        if (thumbsUpUsers)
+            parts.push(`👍 ${thumbsUpUsers}`);
+        if (thumbsDownUsers)
+            parts.push(`👎 ${thumbsDownUsers}`);
+        return parts.join('\n');
+    }
+    /**
+     * Load all ratings for this message (fallback if not pre-loaded)
+     */
+    async LoadRatings() {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Conversation Detail Ratings',
+                ExtraFilter: `ConversationDetailID='${this.conversationDetailId}'`,
+                ResultType: 'entity_object'
+            });
+            if (!result.Success || !result.Results) {
+                return;
+            }
+            this.ProcessRatings(result.Results);
+        }
+        catch (error) {
+            console.error('Failed to load ratings:', error);
+        }
+    }
+    /**
+     * Rate message as thumbs up (10/10)
+     */
+    async RateThumbsUp() {
+        await this.SaveRating(10);
+    }
+    /**
+     * Rate message as thumbs down (1/10)
+     */
+    async RateThumbsDown() {
+        await this.SaveRating(1);
+    }
+    /**
+     * Save or update user's rating for this message
+     */
+    async SaveRating(rating) {
+        try {
+            const md = new Metadata();
+            let ratingEntity;
+            // Try to load existing rating
+            const rv = new RunView();
+            const existing = await rv.RunView({
+                EntityName: 'MJ: Conversation Detail Ratings',
+                ExtraFilter: `ConversationDetailID='${this.conversationDetailId}' AND UserID='${this.currentUserId}'`,
+                MaxRows: 1,
+                ResultType: 'entity_object'
+            });
+            if (existing.Success && existing.Results && existing.Results.length > 0) {
+                // Update existing
+                ratingEntity = existing.Results[0];
+                // If clicking same rating, remove it (toggle off)
+                if (ratingEntity.Rating === rating) {
+                    await ratingEntity.Delete();
+                    await this.LoadRatings();
+                    return;
+                }
+                ratingEntity.Rating = rating;
+            }
+            else {
+                // Create new
+                ratingEntity = await md.GetEntityObject('MJ: Conversation Detail Ratings');
+                ratingEntity.ConversationDetailID = this.conversationDetailId;
+                ratingEntity.UserID = this.currentUserId;
+                ratingEntity.Rating = rating;
+            }
+            await ratingEntity.Save();
+            await this.LoadRatings();
+        }
+        catch (error) {
+            console.error('Failed to save rating:', error);
+        }
+    }
+    static ɵfac = function ConversationMessageRatingComponent_Factory(t) { return new (t || ConversationMessageRatingComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationMessageRatingComponent, selectors: [["mj-conversation-message-rating"]], inputs: { conversationDetailId: "conversationDetailId", currentUser: "currentUser", ratingsData: "ratingsData" }, decls: 7, vars: 7, consts: [[1, "rating-container"], ["class", "aggregate-rating", 3, "title", 4, "ngIf"], [1, "user-rating"], ["title", "This was helpful", "type", "button", 1, "rating-button", "thumbs-up-btn", 3, "click"], ["title", "This was not helpful", "type", "button", 1, "rating-button", "thumbs-down-btn", 3, "click"], [1, "aggregate-rating", 3, "title"], [1, "thumbs-up"], [1, "thumbs-down"], [1, "total-count"]], template: function ConversationMessageRatingComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, ConversationMessageRatingComponent_div_1_Template, 7, 9, "div", 1);
+            i0.ɵɵelementStart(2, "div", 2)(3, "button", 3);
+            i0.ɵɵlistener("click", function ConversationMessageRatingComponent_Template_button_click_3_listener() { return ctx.RateThumbsUp(); });
+            i0.ɵɵtext(4, " \uD83D\uDC4D ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 4);
+            i0.ɵɵlistener("click", function ConversationMessageRatingComponent_Template_button_click_5_listener() { return ctx.RateThumbsDown(); });
+            i0.ɵɵtext(6, " \uD83D\uDC4E ");
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.totalRatings > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("has-rated", ctx.currentUserRating != null);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("active", ctx.currentUserRating != null && ctx.currentUserRating >= 8);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.currentUserRating != null && ctx.currentUserRating <= 3);
+        } }, dependencies: [i1.NgIf], styles: [".rating-container[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 4px 0;\n        }\n\n        .aggregate-rating[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 13px;\n            color: #666;\n        }\n\n        .thumbs-up[_ngcontent-%COMP%], .thumbs-down[_ngcontent-%COMP%] {\n            opacity: 0.5;\n        }\n\n        .thumbs-up.has-votes[_ngcontent-%COMP%], .thumbs-down.has-votes[_ngcontent-%COMP%] {\n            opacity: 1;\n        }\n\n        .total-count[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: #999;\n        }\n\n        .user-rating[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 4px;\n            margin-left: auto;\n        }\n\n        .rating-button[_ngcontent-%COMP%] {\n            background: white;\n            border: 1px solid #9CA3AF;\n            border-radius: 6px;\n            padding: 6px 10px;\n            cursor: pointer;\n            font-size: 16px;\n            opacity: 0.6;\n            transition: all 0.2s;\n            min-width: 36px;\n        }\n\n        .rating-button[_ngcontent-%COMP%]:hover {\n            opacity: 1;\n            border-color: #6B7280;\n        }\n\n        .rating-button.active[_ngcontent-%COMP%] {\n            opacity: 1;\n        }\n\n        .thumbs-up-btn[_ngcontent-%COMP%] {\n            color: #16A34A;\n        }\n\n        .thumbs-up-btn[_ngcontent-%COMP%]:hover {\n            background: #F0FDF4;\n        }\n\n        .thumbs-up-btn.active[_ngcontent-%COMP%] {\n            border-color: #16A34A;\n            background: #DCFCE7;\n        }\n\n        .thumbs-down-btn[_ngcontent-%COMP%] {\n            color: #DC2626;\n        }\n\n        .thumbs-down-btn[_ngcontent-%COMP%]:hover {\n            background: #FEF2F2;\n        }\n\n        .thumbs-down-btn.active[_ngcontent-%COMP%] {\n            border-color: #DC2626;\n            background: #FEE2E2;\n        }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationMessageRatingComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-conversation-message-rating', template: `
+        <div class="rating-container">
+            <div class="aggregate-rating" *ngIf="totalRatings > 0" [title]="getRatingsTooltip()">
+                <span class="thumbs-up" [class.has-votes]="thumbsUpCount > 0">
+                    👍 {{ thumbsUpCount }}
+                </span>
+                <span class="thumbs-down" [class.has-votes]="thumbsDownCount > 0">
+                    👎 {{ thumbsDownCount }}
+                </span>
+                <span class="total-count">({{ totalRatings }} {{ totalRatings === 1 ? 'rating' : 'ratings' }})</span>
+            </div>
+
+            <div class="user-rating" [class.has-rated]="currentUserRating != null">
+                <button
+                    class="rating-button thumbs-up-btn"
+                    [class.active]="currentUserRating != null && currentUserRating >= 8"
+                    (click)="RateThumbsUp()"
+                    title="This was helpful"
+                    type="button">
+                    👍
+                </button>
+                <button
+                    class="rating-button thumbs-down-btn"
+                    [class.active]="currentUserRating != null && currentUserRating <= 3"
+                    (click)="RateThumbsDown()"
+                    title="This was not helpful"
+                    type="button">
+                    👎
+                </button>
+            </div>
+        </div>
+    `, styles: ["\n        .rating-container {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 4px 0;\n        }\n\n        .aggregate-rating {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            font-size: 13px;\n            color: #666;\n        }\n\n        .thumbs-up, .thumbs-down {\n            opacity: 0.5;\n        }\n\n        .thumbs-up.has-votes, .thumbs-down.has-votes {\n            opacity: 1;\n        }\n\n        .total-count {\n            font-size: 12px;\n            color: #999;\n        }\n\n        .user-rating {\n            display: flex;\n            gap: 4px;\n            margin-left: auto;\n        }\n\n        .rating-button {\n            background: white;\n            border: 1px solid #9CA3AF;\n            border-radius: 6px;\n            padding: 6px 10px;\n            cursor: pointer;\n            font-size: 16px;\n            opacity: 0.6;\n            transition: all 0.2s;\n            min-width: 36px;\n        }\n\n        .rating-button:hover {\n            opacity: 1;\n            border-color: #6B7280;\n        }\n\n        .rating-button.active {\n            opacity: 1;\n        }\n\n        .thumbs-up-btn {\n            color: #16A34A;\n        }\n\n        .thumbs-up-btn:hover {\n            background: #F0FDF4;\n        }\n\n        .thumbs-up-btn.active {\n            border-color: #16A34A;\n            background: #DCFCE7;\n        }\n\n        .thumbs-down-btn {\n            color: #DC2626;\n        }\n\n        .thumbs-down-btn:hover {\n            background: #FEF2F2;\n        }\n\n        .thumbs-down-btn.active {\n            border-color: #DC2626;\n            background: #FEE2E2;\n        }\n    "] }]
+    }], null, { conversationDetailId: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], ratingsData: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationMessageRatingComponent, { className: "ConversationMessageRatingComponent", filePath: "src/lib/components/message/conversation-message-rating.component.ts", lineNumber: 127 }); })();
+//# sourceMappingURL=conversation-message-rating.component.js.map

package/dist/lib/components/message/conversation-message-rating.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-message-rating.component.js","sourceRoot":"","sources":["../../../../src/lib/components/message/conversation-message-rating.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAY,MAAM,sBAAsB,CAAC;;;;IAanD,AADJ,8BAAqF,cACnB;IAC1D,YACJ;IAAA,iBAAO;IACP,+BAAkE;IAC9D,YACJ;IAAA,iBAAO;IACP,+BAA0B;IAAA,YAAoE;IAClG,AADkG,iBAAO,EACnG;;;IARiD,kDAA6B;IACxD,cAAqC;IAArC,qDAAqC;IACzD,cACJ;IADI,kEACJ;IAC0B,cAAuC;IAAvC,uDAAuC;IAC7D,cACJ;IADI,oEACJ;IAC0B,eAAoE;IAApE,2GAAoE;;AAf9G;;;GAGG;AAsHH,MAAM,OAAO,kCAAkC;IAClC,oBAAoB,CAAU;IAC9B,WAAW,CAAY;IACvB,WAAW,CAAgB,CAAC,0DAA0D;IAE/F,aAAa,GAAG,CAAC,CAAC;IAClB,eAAe,GAAG,CAAC,CAAC;IACpB,YAAY,GAAG,CAAC,CAAC;IACjB,iBAAiB,GAAkB,IAAI,CAAC;IACxC,UAAU,GAAiB,EAAE,CAAC;IAE9B,IAAY,aAAa;QACrB,OAAO,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC;IACtC,CAAC;IAED,KAAK,CAAC,QAAQ;QACV,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,oDAAoD;YACpD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1C,CAAC;aAAM,CAAC;YACJ,8CAA8C;YAC9C,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC;IACL,CAAC;IAED;;OAEG;IACK,cAAc,CAAC,OAAwD;QAC3E,IAAI,CAAC,UAAU,GAAG,OAAuB,CAAC;QAC1C,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;QAClF,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;QACpF,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;QAEnC,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7E,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,EAAE,MAAM,IAAI,IAAI,CAAC;IAC/D,CAAC;IAED;;OAEG;IACH,iBAAiB;QACb,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,EAAE,CAAC;QAE5C,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;aAChC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;aAC7C,GAAG,CAAC,CAAC,CAAC,EAAE,CAAE,CAAgB,CAAC,QAAQ,IAAI,SAAS,CAAC;aACjD,IAAI,CAAC,IAAI,CAAC,CAAC;QAEhB,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU;aAClC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;aAC7C,GAAG,CAAC,CAAC,CAAC,EAAE,CAAE,CAAgB,CAAC,QAAQ,IAAI,SAAS,CAAC;aACjD,IAAI,CAAC,IAAI,CAAC,CAAC;QAEhB,MAAM,KAAK,GAAa,EAAE,CAAC;QAC3B,IAAI,aAAa;YAAE,KAAK,CAAC,IAAI,CAAC,MAAM,aAAa,EAAE,CAAC,CAAC;QACrD,IAAI,eAAe;YAAE,KAAK,CAAC,IAAI,CAAC,MAAM,eAAe,EAAE,CAAC,CAAC;QAEzD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,WAAW;QACb,IAAI,CAAC;YACD,MAAM,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;YACzB,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC,OAAO,CAAiC;gBAC5D,UAAU,EAAE,iCAAiC;gBAC7C,WAAW,EAAE,yBAAyB,IAAI,CAAC,oBAAoB,GAAG;gBAClE,UAAU,EAAE,eAAe;aAC9B,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBACrC,OAAO;YACX,CAAC;YAED,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAExC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;QACpD,CAAC;IACL,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,YAAY;QACd,MAAM,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,cAAc;QAChB,MAAM,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,UAAU,CAAC,MAAc;QACnC,IAAI,CAAC;YACD,MAAM,EAAE,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,YAA4C,CAAC;YAEjD,8BAA8B;YAC9B,MAAM,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;YACzB,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC,OAAO,CAAiC;gBAC9D,UAAU,EAAE,iCAAiC;gBAC7C,WAAW,EAAE,yBAAyB,IAAI,CAAC,oBAAoB,iBAAiB,IAAI,CAAC,aAAa,GAAG;gBACrG,OAAO,EAAE,CAAC;gBACV,UAAU,EAAE,eAAe;aAC9B,CAAC,CAAC;YAEH,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtE,kBAAkB;gBAClB,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBAEnC,kDAAkD;gBAClD,IAAI,YAAY,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;oBACjC,MAAM,YAAY,CAAC,MAAM,EAAE,CAAC;oBAC5B,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;oBACzB,OAAO;gBACX,CAAC;gBAED,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACJ,aAAa;gBACb,YAAY,GAAG,MAAM,EAAE,CAAC,eAAe,CAAiC,iCAAiC,CAAC,CAAC;gBAC3G,YAAY,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC;gBAC9D,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;gBACzC,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC;YACjC,CAAC;YAED,MAAM,YAAY,CAAC,IAAI,EAAE,CAAC;YAC1B,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;QAE7B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,KAAK,CAAC,CAAC;QACnD,CAAC;IACL,CAAC;4FA7IQ,kCAAkC;6DAAlC,kCAAkC;YAlHvC,8BAA8B;YAC1B,mFAAqF;YAWjF,AADJ,8BAAuE,gBAMjD;YAFd,+GAAS,kBAAc,IAAC;YAGxB,8BACJ;YAAA,iBAAS;YACT,iCAKkB;YAFd,+GAAS,oBAAgB,IAAC;YAG1B,8BACJ;YAER,AADI,AADI,iBAAS,EACP,EACJ;;YA5B6B,cAAsB;YAAtB,2CAAsB;YAU5B,cAA6C;YAA7C,0DAA6C;YAG9D,cAAoE;YAApE,qFAAoE;YAQpE,eAAoE;YAApE,qFAAoE;;;iFA4F3E,kCAAkC;cArH9C,SAAS;2BACI,gCAAgC,YAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BT;gBAqFQ,oBAAoB;kBAA5B,KAAK;YACG,WAAW;kBAAnB,KAAK;YACG,WAAW;kBAAnB,KAAK;;kFAHG,kCAAkC"}

package/dist/lib/components/message/message-input-box.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-box.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAa,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAChI,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;;AAE5G;;;;;;;;;;;;;GAaG;AACH,qBAKa,wBAAyB,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IAuB7E,OAAO,CAAC,mBAAmB;IAtBpB,WAAW,EAAE,MAAM,CAAsD;IACzE,QAAQ,EAAE,OAAO,CAAS;IAC1B,KAAK,EAAE,MAAM,CAAM;IACnB,kBAAkB,EAAE,OAAO,CAAS;IACpC,cAAc,EAAE,OAAO,CAAQ;IAC/B,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,EAAE,MAAM,CAAK;IAEhB,aAAa,uBAA8B;IAC3C,WAAW,uBAA8B;IAErB,eAAe,CAAC,EAAE,UAAU,CAAC;IAGpD,mBAAmB,EAAE,OAAO,CAAS;IACrC,kBAAkB,EAAE,iBAAiB,EAAE,CAAM;IAC7C,uBAAuB,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAuB;IAC7E,wBAAwB,EAAE,OAAO,CAAS;IACjD,OAAO,CAAC,iBAAiB,CAAc;IACvC,OAAO,CAAC,YAAY,CAAc;gBAGxB,mBAAmB,EAAE,0BAA0B;IAGnD,QAAQ;IASd,eAAe;IAOf,WAAW;IAIX,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAerC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAa3B,WAAW,IAAI,IAAI;IAWnB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA+C1B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IA+B/B;;OAEG;IACH,iBAAiB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAsBtD;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAO5B;;OAEG;IACI,KAAK,IAAI,IAAI;yCApNT,wBAAwB;2CAAxB,wBAAwB;CAuNpC"}
+{"version":3,"file":"message-input-box.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/message/message-input-box.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAa,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAChI,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;;AAE5G;;;;;;;;;;;;;GAaG;AACH,qBAKa,wBAAyB,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IAuB7E,OAAO,CAAC,mBAAmB;IAtBpB,WAAW,EAAE,MAAM,CAAsD;IACzE,QAAQ,EAAE,OAAO,CAAS;IAC1B,KAAK,EAAE,MAAM,CAAM;IACnB,kBAAkB,EAAE,OAAO,CAAS;IACpC,cAAc,EAAE,OAAO,CAAQ;IAC/B,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,IAAI,EAAE,MAAM,CAAK;IAEhB,aAAa,uBAA8B;IAC3C,WAAW,uBAA8B;IAErB,eAAe,CAAC,EAAE,UAAU,CAAC;IAGpD,mBAAmB,EAAE,OAAO,CAAS;IACrC,kBAAkB,EAAE,iBAAiB,EAAE,CAAM;IAC7C,uBAAuB,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAuB;IAC7E,wBAAwB,EAAE,OAAO,CAAS;IACjD,OAAO,CAAC,iBAAiB,CAAc;IACvC,OAAO,CAAC,YAAY,CAAc;gBAGxB,mBAAmB,EAAE,0BAA0B;IAGnD,QAAQ;IAOd,eAAe;IAOf,WAAW;IAIX,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAerC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAW3B,WAAW,IAAI,IAAI;IAUnB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAuC1B;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IA6B/B;;OAEG;IACH,iBAAiB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAsBtD;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAO5B;;OAEG;IACI,KAAK,IAAI,IAAI;yCArMT,wBAAwB;2CAAxB,wBAAwB;CAwMpC"}

package/dist/lib/components/message/message-input-box.component.js

@@ -52,10 +52,8 @@ export class MessageInputBoxComponent {
     }
     async ngOnInit() {
         // Initialize mention autocomplete if enabled and currentUser is available
-        console.log('[MessageInputBox] ngOnInit - enableMentions:', this.enableMentions, 'currentUser:', !!this.currentUser);
         if (this.enableMentions && this.currentUser) {
             await this.mentionAutocomplete.initialize(this.currentUser);
-            console.log('[MessageInputBox] Mention autocomplete initialized');
         }
     }
     ngAfterViewInit() {
@@ -87,7 +85,6 @@ export class MessageInputBoxComponent {
         const textarea = event.target;
         this.value = textarea.value;
         this.valueChange.emit(this.value);
-        console.log('[MessageInputBox] onInput - value:', this.value, 'enableMentions:', this.enableMentions, 'currentUser:', !!this.currentUser);
         // Handle @mention autocomplete
         if (this.enableMentions && this.currentUser) {
             this.handleMentionInput();
@@ -96,7 +93,6 @@ export class MessageInputBoxComponent {
     onSendClick() {
         if (this.canSend) {
             const textToSend = this.value.trim();
-            console.log('[MessageInputBox] onSendClick - emitting text:', textToSend);
             this.textSubmitted.emit(textToSend);
             this.value = ''; // Clear input after sending
             this.valueChange.emit(this.value);
@@ -109,12 +105,10 @@ export class MessageInputBoxComponent {
     handleMentionInput() {
         const textarea = this.messageTextarea?.nativeElement;
         if (!textarea) {
-            console.log('[MessageInputBox] No textarea element');
             return;
         }
         const cursorPos = textarea.selectionStart;
         const textBeforeCursor = this.value.substring(0, cursorPos);
-        console.log('[MessageInputBox] handleMentionInput - textBeforeCursor:', textBeforeCursor);
         // Find the last @ before cursor
         const lastAtIndex = textBeforeCursor.lastIndexOf('@');
         if (lastAtIndex === -1) {
@@ -130,14 +124,11 @@ export class MessageInputBoxComponent {
         // Extract query
         this.mentionQuery = textAfterAt;
         this.mentionStartIndex = lastAtIndex;
-        console.log('[MessageInputBox] Mention detected - query:', this.mentionQuery);
         // Get suggestions (include users if we have currentUser)
         this.mentionSuggestions = this.mentionAutocomplete.getSuggestions(this.mentionQuery, !!this.currentUser);
-        console.log('[MessageInputBox] Got suggestions:', this.mentionSuggestions.length, this.mentionSuggestions);
         if (this.mentionSuggestions.length > 0) {
             this.showMentionDropdown = true;
             this.positionMentionDropdown();
-            console.log('[MessageInputBox] Showing dropdown at position:', this.mentionDropdownPosition);
         }
         else {
             this.closeMentionDropdown();
@@ -172,7 +163,6 @@ export class MessageInputBoxComponent {
                 left: textareaRect.left + window.scrollX
             };
         }
-        console.log('[MessageInputBox] Dropdown position calculated (viewport coords):', this.mentionDropdownPosition, 'showAbove:', this.mentionDropdownShowAbove);
     }
     /**
      * Insert selected mention into text
@@ -236,11 +226,11 @@ export class MessageInputBoxComponent {
             i0.ɵɵproperty("disabled", !ctx.canSend);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.showMentionDropdown && ctx.enableMentions);
-        } }, dependencies: [i2.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MentionDropdownComponent], styles: [".message-input-box-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible; // Allow mention dropdown to escape container\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--primary-color, #007bff);\n    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n  }\n}\n\n.input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-end; // Align send button to bottom\n}\n\n.message-input-box-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem; // Space for send button\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n\n  &::placeholder {\n    color: var(--text-tertiary, #999);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background: var(--background-disabled, #f5f5f5);\n  }\n\n  &:focus,\n  &:active,\n  &:focus-visible {\n    border: 0 !important;\n    outline: 0 !important;\n    box-shadow: none !important;\n  }\n}\n\n.send-button-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n\n  i {\n    font-size: 1rem;\n  }\n\n  &:hover:not(:disabled) {\n    background: var(--primary-color-dark, #0056b3);\n    transform: scale(1.05);\n  }\n\n  &:active:not(:disabled) {\n    transform: scale(0.95);\n  }\n\n  &:disabled {\n    background: var(--background-disabled, #d0d0d0);\n    color: var(--text-disabled, #999);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}"] });
+        } }, dependencies: [i2.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MentionDropdownComponent], styles: [".message-input-box-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible; // Allow mention dropdown to escape container\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--primary-color, #007bff);\n    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n  }\n}\n\n.input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-end; // Align send button to bottom\n}\n\n.message-input-box-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem; // Space for send button\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  border: 0 !important;\n\n  &::placeholder {\n    color: var(--text-tertiary, #999);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background: var(--background-disabled, #f5f5f5);\n  }\n\n  &:focus,\n  &:active,\n  &:focus-visible {\n    outline: 0 !important;\n    box-shadow: none !important;\n  }\n}\n\n.send-button-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n\n  i {\n    font-size: 1rem;\n  }\n\n  &:hover:not(:disabled) {\n    background: var(--primary-color-dark, #0056b3);\n    transform: scale(1.05);\n  }\n\n  &:active:not(:disabled) {\n    transform: scale(0.95);\n  }\n\n  &:disabled {\n    background: var(--background-disabled, #d0d0d0);\n    color: var(--text-disabled, #999);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MessageInputBoxComponent, [{
         type: Component,
-        args: [{ selector: 'mj-message-input-box', template: "<div class=\"message-input-box-container\">\n  <div class=\"input-wrapper\">\n    <textarea\n      #messageTextarea\n      class=\"message-input-box-textarea\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [rows]=\"rows\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n    ></textarea>\n\n    <!-- Send Button (Icon Only) - Inside textarea area -->\n    <button\n      class=\"send-button-icon\"\n      [disabled]=\"!canSend\"\n      (click)=\"onSendClick()\"\n      title=\"Send message (Enter)\"\n    >\n      <i class=\"fa-solid fa-paper-plane\"></i>\n    </button>\n  </div>\n\n  <!-- Mention Dropdown -->\n  <mj-mention-dropdown\n    *ngIf=\"showMentionDropdown && enableMentions\"\n    [suggestions]=\"mentionSuggestions\"\n    [position]=\"mentionDropdownPosition\"\n    [showAbove]=\"mentionDropdownShowAbove\"\n    [useFixedPositioning]=\"true\"\n    [visible]=\"true\"\n    (suggestionSelected)=\"onMentionSelected($event)\"\n    (closed)=\"closeMentionDropdown()\">\n  </mj-mention-dropdown>\n</div>\n", styles: [".message-input-box-container {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible; // Allow mention dropdown to escape container\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--primary-color, #007bff);\n    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n  }\n}\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: flex-end; // Align send button to bottom\n}\n\n.message-input-box-textarea {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem; // Space for send button\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n\n  &::placeholder {\n    color: var(--text-tertiary, #999);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background: var(--background-disabled, #f5f5f5);\n  }\n\n  &:focus,\n  &:active,\n  &:focus-visible {\n    border: 0 !important;\n    outline: 0 !important;\n    box-shadow: none !important;\n  }\n}\n\n.send-button-icon {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n\n  i {\n    font-size: 1rem;\n  }\n\n  &:hover:not(:disabled) {\n    background: var(--primary-color-dark, #0056b3);\n    transform: scale(1.05);\n  }\n\n  &:active:not(:disabled) {\n    transform: scale(0.95);\n  }\n\n  &:disabled {\n    background: var(--background-disabled, #d0d0d0);\n    color: var(--text-disabled, #999);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n"] }]
+        args: [{ selector: 'mj-message-input-box', template: "<div class=\"message-input-box-container\">\n  <div class=\"input-wrapper\">\n    <textarea\n      #messageTextarea\n      class=\"message-input-box-textarea\"\n      [(ngModel)]=\"value\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [rows]=\"rows\"\n      (keydown)=\"onKeyDown($event)\"\n      (input)=\"onInput($event)\"\n    ></textarea>\n\n    <!-- Send Button (Icon Only) - Inside textarea area -->\n    <button\n      class=\"send-button-icon\"\n      [disabled]=\"!canSend\"\n      (click)=\"onSendClick()\"\n      title=\"Send message (Enter)\"\n    >\n      <i class=\"fa-solid fa-paper-plane\"></i>\n    </button>\n  </div>\n\n  <!-- Mention Dropdown -->\n  <mj-mention-dropdown\n    *ngIf=\"showMentionDropdown && enableMentions\"\n    [suggestions]=\"mentionSuggestions\"\n    [position]=\"mentionDropdownPosition\"\n    [showAbove]=\"mentionDropdownShowAbove\"\n    [useFixedPositioning]=\"true\"\n    [visible]=\"true\"\n    (suggestionSelected)=\"onMentionSelected($event)\"\n    (closed)=\"closeMentionDropdown()\">\n  </mj-mention-dropdown>\n</div>\n", styles: [".message-input-box-container {\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border: 2px solid var(--border-color, #e0e0e0);\n  border-radius: 12px;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);\n  transition: all 0.2s ease;\n  overflow: visible; // Allow mention dropdown to escape container\n  position: relative;\n\n  &:focus-within {\n    border-color: var(--primary-color, #007bff);\n    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);\n  }\n}\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: flex-end; // Align send button to bottom\n}\n\n.message-input-box-textarea {\n  flex: 1;\n  min-height: 100px;\n  padding: 1rem;\n  padding-right: 3.5rem; // Space for send button\n  border: 0 !important;\n  outline: 0 !important;\n  box-shadow: none !important;\n  -webkit-appearance: none !important;\n  -moz-appearance: none !important;\n  appearance: none !important;\n  font-family: inherit;\n  font-size: 1rem;\n  line-height: 1.5;\n  resize: vertical;\n  background: transparent;\n  border: 0 !important;\n\n  &::placeholder {\n    color: var(--text-tertiary, #999);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n    background: var(--background-disabled, #f5f5f5);\n  }\n\n  &:focus,\n  &:active,\n  &:focus-visible {\n    outline: 0 !important;\n    box-shadow: none !important;\n  }\n}\n\n.send-button-icon {\n  position: absolute;\n  bottom: 0.75rem;\n  right: 0.75rem;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--primary-color, #007bff);\n  color: white;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n\n  i {\n    font-size: 1rem;\n  }\n\n  &:hover:not(:disabled) {\n    background: var(--primary-color-dark, #0056b3);\n    transform: scale(1.05);\n  }\n\n  &:active:not(:disabled) {\n    transform: scale(0.95);\n  }\n\n  &:disabled {\n    background: var(--background-disabled, #d0d0d0);\n    color: var(--text-disabled, #999);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n"] }]
     }], () => [{ type: i1.MentionAutocompleteService }], { placeholder: [{
             type: Input
         }], disabled: [{