@memberjunction/ng-conversations 2.111.1 → 2.113.0

package/dist/lib/components/tasks/tasks-dropdown.component.js

@@ -1,262 +1,210 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { RunView } from '@memberjunction/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import * as i0 from "@angular/core";
-import * as i1 from "../../services/conversation-state.service";
-import * as i2 from "../../services/active-tasks.service";
+import * as i1 from "../../services/active-tasks.service";
+import * as i2 from "../../services/conversation-state.service";
 import * as i3 from "@angular/common";
-import * as i4 from "./task-widget.component";
-function TasksDropdownComponent_span_5_Template(rf, ctx) { if (rf & 1) {
+function TasksDropdownComponent_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.totalTaskCount);
+    i0.ɵɵtextInterpolate(ctx_r0.allTasks.length);
 } }
-function TasksDropdownComponent_div_6_div_9_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "div", 19);
-    i0.ɵɵelementStart(2, "div", 20)(3, "div", 21);
-    i0.ɵɵelement(4, "i", 22);
+function TasksDropdownComponent_div_4_i_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 16);
+} }
+function TasksDropdownComponent_div_4_i_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 17);
+} }
+function TasksDropdownComponent_div_4_div_10_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵlistener("click", function TasksDropdownComponent_div_4_div_10_div_5_Template_div_click_0_listener() { const task_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onTaskClick(task_r4)); });
+    i0.ɵɵelement(1, "div", 23);
+    i0.ɵɵelementStart(2, "div", 24)(3, "div", 25);
+    i0.ɵɵelement(4, "i", 26);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 23);
+    i0.ɵɵelementStart(6, "div", 27);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 24);
+    i0.ɵɵelementStart(8, "div", 28);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const task_r3 = ctx.$implicit;
+    const task_r4 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1(" ", task_r3.agentName, " ");
+    i0.ɵɵtextInterpolate1(" ", task_r4.agentName, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.getTrimmedStatus(task_r3.status));
+    i0.ɵɵtextInterpolate(ctx_r0.getTrimmedStatus(task_r4.status));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r0.getElapsedTime(task_r3));
+    i0.ɵɵtextInterpolate(ctx_r0.getElapsedTime(task_r4));
 } }
-function TasksDropdownComponent_div_6_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 15);
-    i0.ɵɵelement(2, "i", 16);
+function TasksDropdownComponent_div_4_div_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
+    i0.ɵɵelement(2, "i", 20);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(5, TasksDropdownComponent_div_6_div_9_div_5_Template, 10, 3, "div", 17);
+    i0.ɵɵtemplate(5, TasksDropdownComponent_div_4_div_10_div_5_Template, 10, 3, "div", 21);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Active (", ctx_r0.activeTasks.length, ")");
+    i0.ɵɵtextInterpolate1("Current Conversation (", ctx_r0.currentConversationTasks.length, ")");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r0.activeTasks);
+    i0.ɵɵproperty("ngForOf", ctx_r0.currentConversationTasks);
 } }
-function TasksDropdownComponent_div_6_div_10_mj_task_widget_5_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-task-widget", 27);
-    i0.ɵɵlistener("taskClick", function TasksDropdownComponent_div_6_div_10_mj_task_widget_5_Template_mj_task_widget_taskClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onTaskClick($event)); });
+function TasksDropdownComponent_div_4_div_11_div_5_div_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const task_r5 = ctx.$implicit;
-    i0.ɵɵproperty("task", task_r5)("compact", true)("clickable", true)("showProgress", true)("showDuration", false);
+    const task_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", task_r6.conversationName, " ");
 } }
-function TasksDropdownComponent_div_6_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 15);
-    i0.ɵɵelement(2, "i", 25);
+function TasksDropdownComponent_div_4_div_11_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵlistener("click", function TasksDropdownComponent_div_4_div_11_div_5_Template_div_click_0_listener() { const task_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onTaskClick(task_r6)); });
+    i0.ɵɵelement(1, "div", 23);
+    i0.ɵɵelementStart(2, "div", 24)(3, "div", 25);
+    i0.ɵɵelement(4, "i", 26);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(6, "span", 32);
+    i0.ɵɵelement(7, "i", 33);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(8, TasksDropdownComponent_div_4_div_11_div_5_div_8_Template, 3, 1, "div", 34);
+    i0.ɵɵelementStart(9, "div", 27);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 28);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const task_r6 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", task_r6.agentName, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", task_r6.conversationName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.getTrimmedStatus(task_r6.status));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.getElapsedTime(task_r6));
+} }
+function TasksDropdownComponent_div_4_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 19);
+    i0.ɵɵelement(2, "i", 29);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(5, TasksDropdownComponent_div_6_div_10_mj_task_widget_5_Template, 1, 5, "mj-task-widget", 26);
+    i0.ɵɵtemplate(5, TasksDropdownComponent_div_4_div_11_div_5_Template, 13, 4, "div", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("In Progress (", ctx_r0.dbTasks.length, ")");
+    i0.ɵɵtextInterpolate1("Other Conversations (", ctx_r0.otherConversationTasks.length, ")");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r0.dbTasks);
+    i0.ɵɵproperty("ngForOf", ctx_r0.otherConversationTasks);
 } }
-function TasksDropdownComponent_div_6_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵelement(1, "i", 2);
+function TasksDropdownComponent_div_4_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵelement(1, "i", 38);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No active tasks");
     i0.ɵɵelementEnd()();
 } }
-function TasksDropdownComponent_div_6_Template(rf, ctx) { if (rf & 1) {
+function TasksDropdownComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "div", 8);
-    i0.ɵɵelement(3, "i", 2);
-    i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtext(5, "Tasks");
+    i0.ɵɵtemplate(3, TasksDropdownComponent_div_4_i_3_Template, 1, 0, "i", 9)(4, TasksDropdownComponent_div_4_i_4_Template, 1, 0, "i", 10);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "button", 9);
-    i0.ɵɵlistener("click", function TasksDropdownComponent_div_6_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeDropdown()); });
-    i0.ɵɵelement(7, "i", 10);
+    i0.ɵɵelementStart(7, "button", 11);
+    i0.ɵɵlistener("click", function TasksDropdownComponent_div_4_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.closeDropdown()); });
+    i0.ɵɵelement(8, "i", 12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 11);
-    i0.ɵɵtemplate(9, TasksDropdownComponent_div_6_div_9_Template, 6, 2, "div", 12)(10, TasksDropdownComponent_div_6_div_10_Template, 6, 2, "div", 12)(11, TasksDropdownComponent_div_6_div_11_Template, 4, 0, "div", 13);
+    i0.ɵɵelementStart(9, "div", 13);
+    i0.ɵɵtemplate(10, TasksDropdownComponent_div_4_div_10_Template, 6, 2, "div", 14)(11, TasksDropdownComponent_div_4_div_11_Template, 6, 2, "div", 14)(12, TasksDropdownComponent_div_4_div_12_Template, 4, 0, "div", 15);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(9);
-    i0.ɵɵproperty("ngIf", ctx_r0.activeTasks.length > 0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r0.allTasks.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.allTasks.length === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Active Tasks (", ctx_r0.allTasks.length, ")");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r0.currentConversationTasks.length > 0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.dbTasks.length > 0);
+    i0.ɵɵproperty("ngIf", ctx_r0.otherConversationTasks.length > 0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r0.activeTasks.length === 0 && ctx_r0.dbTasks.length === 0);
+    i0.ɵɵproperty("ngIf", ctx_r0.allTasks.length === 0);
 } }
 /**
  * Enhanced tasks dropdown component for chat header.
- * Shows both:
- * 1. Active (running) tasks from ActiveTasksService
- * 2. Database tasks for the current conversation
+ * Shows ALL active tasks across ALL conversations, grouped by current vs other
  */
 export class TasksDropdownComponent {
-    conversationState;
     activeTasksService;
+    conversationState;
     currentUser;
     taskClicked = new EventEmitter();
+    navigateToConversation = new EventEmitter();
     isOpen = false;
-    activeTasks = [];
-    dbTasks = [];
-    totalTaskCount = 0;
-    previousConversationId = null;
+    allTasks = [];
+    currentConversationTasks = [];
+    otherConversationTasks = [];
     destroy$ = new Subject();
-    _pollingIntervalObject = null;
-    _enablePolling = false;
-    _pollingInterval = 30000; // default to 30 seconds
-    constructor(conversationState, activeTasksService) {
-        this.conversationState = conversationState;
+    constructor(activeTasksService, conversationState) {
         this.activeTasksService = activeTasksService;
-    }
-    get enablePolling() {
-        return this._enablePolling;
-    }
-    set enablePolling(value) {
-        this._enablePolling = value;
-        if (value) {
-            this.startPolling();
-        }
-        else {
-            this.stopPolling();
-        }
-    }
-    get pollingInterval() {
-        return this._pollingInterval;
-    }
-    set pollingInterval(value) {
-        this._pollingInterval = value;
-        if (this.enablePolling) {
-            this.stopPolling();
-            this.startPolling();
-        }
+        this.conversationState = conversationState;
     }
     ngOnInit() {
-        // Subscribe to active tasks from the service
+        // Subscribe to ALL active tasks across ALL conversations
         this.activeTasksService.tasks$
             .pipe(takeUntil(this.destroy$))
             .subscribe(tasks => {
-            this.activeTasks = tasks;
-            this.updateTotalCount();
+            this.allTasks = tasks;
+            this.groupTasks();
         });
-        // Initial load if there's an active conversation
-        if (this.conversationState.activeConversationId) {
-            this.loadDatabaseTasks();
-        }
-        // Poll for task updates every 3 seconds when conversation is active
-        if (this.enablePolling) {
-            this.startPolling();
-        }
-    }
-    startPolling() {
-        // if we already have a polling interval, do nothing
-        if (this._pollingIntervalObject) {
-            return;
-        }
-        this._pollingIntervalObject = setInterval(() => {
-            if (this.conversationState.activeConversationId) {
-                this.loadDatabaseTasks();
-            }
-        }, 3000); // Poll every 3 seconds
-    }
-    stopPolling() {
-        if (this._pollingIntervalObject) {
-            clearInterval(this._pollingIntervalObject);
-            this._pollingIntervalObject = null;
-        }
-    }
-    ngDoCheck() {
-        // Detect conversation changes
-        const currentId = this.conversationState.activeConversationId;
-        if (currentId !== this.previousConversationId) {
-            this.previousConversationId = currentId;
-            if (currentId) {
-                this.loadDatabaseTasks();
-            }
-            else {
-                this.dbTasks = [];
-                this.updateTotalCount();
-            }
-        }
     }
     ngOnDestroy() {
-        this.stopPolling();
         this.destroy$.next();
         this.destroy$.complete();
     }
+    groupTasks() {
+        const currentConvId = this.conversationState.activeConversationId;
+        this.currentConversationTasks = this.allTasks.filter(task => task.conversationId === currentConvId);
+        this.otherConversationTasks = this.allTasks.filter(task => task.conversationId && task.conversationId !== currentConvId);
+    }
     toggleDropdown() {
         this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            // Refresh database tasks when opening
-            this.loadDatabaseTasks();
-        }
     }
     closeDropdown() {
         this.isOpen = false;
     }
-    updateTotalCount() {
-        this.totalTaskCount = this.activeTasks.length + this.dbTasks.length;
-    }
-    async loadDatabaseTasks() {
-        const activeId = this.conversationState.activeConversationId;
-        if (!activeId) {
-            return;
-        }
-        try {
-            const rv = new RunView();
-            // First get conversation details for this conversation
-            const detailsResult = await rv.RunView({
-                EntityName: 'Conversation Details',
-                ExtraFilter: `ConversationID='${activeId}'`,
-                OrderBy: '__mj_CreatedAt ASC',
-                ResultType: 'entity_object'
-            }, this.currentUser);
-            if (!detailsResult.Success || !detailsResult.Results || detailsResult.Results.length === 0) {
-                this.dbTasks = [];
-                this.updateTotalCount();
-                return;
-            }
-            // Get all conversation detail IDs
-            const detailIds = detailsResult.Results.map(d => `'${d.ID}'`).join(',');
-            // Load tasks for these conversation details (only top-level active ones)
-            const result = await rv.RunView({
-                EntityName: 'MJ: Tasks',
-                ExtraFilter: `ConversationDetailID IN (${detailIds}) AND Status IN ('Pending', 'In Progress') AND ParentID IS NULL`,
-                OrderBy: '__mj_CreatedAt DESC',
-                MaxRows: 50,
-                ResultType: 'entity_object'
-            }, this.currentUser);
-            if (result.Success) {
-                this.dbTasks = result.Results || [];
-                this.updateTotalCount();
-            }
-        }
-        catch (error) {
-            console.error('Failed to load database tasks:', error);
+    onTaskClick(task) {
+        // If task is from another conversation, emit navigation event
+        const currentConvId = this.conversationState.activeConversationId;
+        if (task.conversationId && task.conversationId !== currentConvId) {
+            this.navigateToConversation.emit({
+                conversationId: task.conversationId,
+                taskId: task.id
+            });
         }
+        this.taskClicked.emit(task);
+        this.closeDropdown();
     }
     getElapsedTime(task) {
         const elapsed = Date.now() - task.startTime;
@@ -269,36 +217,30 @@ export class TasksDropdownComponent {
         return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
     }
     getTrimmedStatus(status) {
-        const maxLength = 60;
+        const maxLength = 50;
         if (status.length <= maxLength) {
             return status;
         }
         return status.substring(0, maxLength) + '...';
     }
-    onTaskClick(task) {
-        this.taskClicked.emit(task);
-        this.closeDropdown();
-    }
-    static ɵfac = function TasksDropdownComponent_Factory(t) { return new (t || TasksDropdownComponent)(i0.ɵɵdirectiveInject(i1.ConversationStateService), i0.ɵɵdirectiveInject(i2.ActiveTasksService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TasksDropdownComponent, selectors: [["mj-tasks-dropdown"]], inputs: { currentUser: "currentUser" }, outputs: { taskClicked: "taskClicked" }, decls: 7, vars: 4, consts: [[1, "tasks-dropdown-container"], ["title", "View tasks", 1, "active-tasks-btn", 3, "click"], [1, "fas", "fa-tasks"], ["class", "task-count-badge", 4, "ngIf"], ["class", "active-tasks-dropdown", 4, "ngIf"], [1, "task-count-badge"], [1, "active-tasks-dropdown"], [1, "dropdown-header"], [1, "header-left"], [1, "close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "dropdown-content"], ["class", "section", 4, "ngIf"], ["class", "no-tasks", 4, "ngIf"], [1, "section"], [1, "section-header"], [1, "fas", "fa-circle-notch", "fa-spin"], ["class", "active-task-item", 4, "ngFor", "ngForOf"], [1, "active-task-item"], [1, "task-status-indicator", "active"], [1, "task-content"], [1, "task-title"], [1, "fas", "fa-robot"], [1, "task-status-text"], [1, "task-elapsed"], [1, "fas", "fa-list-check"], [3, "task", "compact", "clickable", "showProgress", "showDuration", "taskClick", 4, "ngFor", "ngForOf"], [3, "taskClick", "task", "compact", "clickable", "showProgress", "showDuration"], [1, "no-tasks"]], template: function TasksDropdownComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function TasksDropdownComponent_Factory(t) { return new (t || TasksDropdownComponent)(i0.ɵɵdirectiveInject(i1.ActiveTasksService), i0.ɵɵdirectiveInject(i2.ConversationStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TasksDropdownComponent, selectors: [["mj-tasks-dropdown"]], inputs: { currentUser: "currentUser" }, outputs: { taskClicked: "taskClicked", navigateToConversation: "navigateToConversation" }, decls: 5, vars: 7, consts: [[1, "tasks-dropdown-container"], [1, "active-tasks-btn", 3, "click", "title"], [1, "fas", "fa-bolt"], ["class", "task-count-badge", 4, "ngIf"], ["class", "active-tasks-dropdown", 4, "ngIf"], [1, "task-count-badge"], [1, "active-tasks-dropdown"], [1, "dropdown-header"], [1, "header-left"], ["class", "fas fa-circle-notch fa-spin", 4, "ngIf"], ["class", "fas fa-tasks", 4, "ngIf"], [1, "close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "dropdown-content"], ["class", "section", 4, "ngIf"], ["class", "no-tasks", 4, "ngIf"], [1, "fas", "fa-circle-notch", "fa-spin"], [1, "fas", "fa-tasks"], [1, "section"], [1, "section-header"], [1, "fas", "fa-comment"], ["class", "active-task-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "active-task-item", 3, "click"], [1, "task-status-indicator", "active"], [1, "task-content"], [1, "task-title"], [1, "fas", "fa-robot"], [1, "task-status-text"], [1, "task-elapsed"], [1, "fas", "fa-comments"], ["class", "active-task-item clickable", 3, "click", 4, "ngFor", "ngForOf"], [1, "active-task-item", "clickable", 3, "click"], [1, "go-btn"], [1, "fas", "fa-arrow-right"], ["class", "task-conversation", 4, "ngIf"], [1, "task-conversation"], [1, "fas", "fa-message"], [1, "no-tasks"], [1, "fas", "fa-check-circle"]], template: function TasksDropdownComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
             i0.ɵɵlistener("click", function TasksDropdownComponent_Template_button_click_1_listener() { return ctx.toggleDropdown(); });
             i0.ɵɵelement(2, "i", 2);
-            i0.ɵɵelementStart(3, "span");
-            i0.ɵɵtext(4, "Tasks");
+            i0.ɵɵtemplate(3, TasksDropdownComponent_span_3_Template, 2, 1, "span", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(5, TasksDropdownComponent_span_5_Template, 2, 1, "span", 3);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, TasksDropdownComponent_div_6_Template, 12, 3, "div", 4);
+            i0.ɵɵtemplate(4, TasksDropdownComponent_div_4_Template, 13, 6, "div", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("active", ctx.isOpen);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngIf", ctx.totalTaskCount > 0);
+            i0.ɵɵclassProp("active", ctx.isOpen)("has-tasks", ctx.allTasks.length > 0);
+            i0.ɵɵproperty("title", ctx.allTasks.length > 0 ? ctx.allTasks.length + " active task" + (ctx.allTasks.length > 1 ? "s" : "") : "View tasks");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.allTasks.length > 0);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isOpen);
-        } }, dependencies: [i3.NgForOf, i3.NgIf, i4.TaskWidgetComponent], styles: [".tasks-dropdown-container[_ngcontent-%COMP%] {\n      position: relative;\n    }\n\n    .active-tasks-btn[_ngcontent-%COMP%] {\n      background: var(--gray-700, #374151);\n      color: white;\n      padding: 6px 12px;\n      border-radius: 6px;\n      font-size: 13px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      border: 1px solid #E5E7EB;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .active-tasks-btn[_ngcontent-%COMP%]:hover {\n      background: var(--gray-600, #4B5563);\n    }\n\n    .active-tasks-btn.active[_ngcontent-%COMP%] {\n      background: var(--navy, #1e40af);\n    }\n\n    .task-count-badge[_ngcontent-%COMP%] {\n      background: var(--navy, #1e40af);\n      color: white;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: bold;\n      min-width: 18px;\n      text-align: center;\n    }\n\n    .active-tasks-dropdown[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 8px);\n      right: 0;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      z-index: 1000;\n      min-width: 400px;\n      max-width: 500px;\n    }\n\n    .dropdown-header[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      border-bottom: 1px solid #E5E7EB;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #111827;\n    }\n\n    .header-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--accent, #1e40af);\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: #6B7280;\n      cursor: pointer;\n      font-size: 18px;\n      padding: 0;\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      background: #F3F4F6;\n      color: #111827;\n    }\n\n    .dropdown-content[_ngcontent-%COMP%] {\n      max-height: 500px;\n      overflow-y: auto;\n    }\n\n    .section[_ngcontent-%COMP%] {\n      padding: 12px;\n      border-bottom: 1px solid #F3F4F6;\n    }\n\n    .section[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .section-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #6B7280;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 12px;\n      padding: 0 4px;\n    }\n\n    .section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .active-task-item[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      padding: 10px 12px;\n      border-radius: 6px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      margin-bottom: 8px;\n    }\n\n    .active-task-item[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .task-status-indicator[_ngcontent-%COMP%] {\n      width: 4px;\n      border-radius: 2px;\n      flex-shrink: 0;\n    }\n\n    .task-status-indicator.active[_ngcontent-%COMP%] {\n      background: #3B82F6;\n      animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .task-content[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .task-title[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: #111827;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .task-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #3B82F6;\n      font-size: 12px;\n    }\n\n    .task-status-text[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #6B7280;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .task-elapsed[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #3B82F6;\n      font-weight: 600;\n    }\n\n    .no-tasks[_ngcontent-%COMP%] {\n      padding: 40px 16px;\n      text-align: center;\n      color: #9CA3AF;\n    }\n\n    .no-tasks[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 8px;\n      opacity: 0.5;\n    }\n\n    .no-tasks[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    mj-task-widget[_ngcontent-%COMP%] {\n      display: block;\n      margin-bottom: 8px;\n    }\n\n    mj-task-widget[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }"] });
+        } }, dependencies: [i3.NgForOf, i3.NgIf], styles: [".tasks-dropdown-container[_ngcontent-%COMP%] {\n      position: relative;\n    }\n\n    .active-tasks-btn[_ngcontent-%COMP%] {\n      position: relative;\n      width: 36px;\n      height: 36px;\n      border-radius: 6px;\n      background: transparent;\n      border: none;\n      color: rgba(255,255,255,0.7);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n      transition: all 0.2s;\n    }\n\n    .active-tasks-btn[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .active-tasks-btn.active[_ngcontent-%COMP%] {\n      background: rgba(255,255,255,0.15);\n      color: white;\n    }\n\n    .active-tasks-btn.has-tasks[_ngcontent-%COMP%] {\n      color: #fb923c;\n    }\n\n    .active-tasks-btn.has-tasks[_ngcontent-%COMP%]:hover {\n      color: #f97316;\n    }\n\n    .task-count-badge[_ngcontent-%COMP%] {\n      position: absolute;\n      top: -2px;\n      right: -2px;\n      background: #fb923c;\n      color: white;\n      padding: 2px 5px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: bold;\n      min-width: 16px;\n      text-align: center;\n      line-height: 1;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n    }\n\n    .active-tasks-dropdown[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 8px);\n      right: 0;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      z-index: 1000;\n      min-width: 420px;\n      max-width: 500px;\n    }\n\n    .dropdown-header[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      border-bottom: 1px solid #E5E7EB;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #111827;\n    }\n\n    .header-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--accent, #1e40af);\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: #6B7280;\n      cursor: pointer;\n      font-size: 18px;\n      padding: 0;\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 4px;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      background: #F3F4F6;\n      color: #111827;\n    }\n\n    .dropdown-content[_ngcontent-%COMP%] {\n      max-height: 500px;\n      overflow-y: auto;\n    }\n\n    .section[_ngcontent-%COMP%] {\n      padding: 12px;\n      border-bottom: 1px solid #F3F4F6;\n    }\n\n    .section[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .section-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #6B7280;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 12px;\n      padding: 0 4px;\n    }\n\n    .section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .active-task-item[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      padding: 10px 12px;\n      border-radius: 6px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      margin-bottom: 8px;\n      transition: all 0.2s ease;\n    }\n\n    .active-task-item.clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n    }\n\n    .active-task-item.clickable[_ngcontent-%COMP%]:hover {\n      background: #EEF2FF;\n      border-color: #C7D2FE;\n      transform: translateX(2px);\n    }\n\n    .active-task-item[_ngcontent-%COMP%]:last-child {\n      margin-bottom: 0;\n    }\n\n    .task-status-indicator[_ngcontent-%COMP%] {\n      width: 4px;\n      border-radius: 2px;\n      flex-shrink: 0;\n    }\n\n    .task-status-indicator.active[_ngcontent-%COMP%] {\n      background: #3B82F6;\n      animation: _ngcontent-%COMP%_pulse 2s ease-in-out infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .task-content[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .task-title[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: #111827;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .task-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #3B82F6;\n      font-size: 12px;\n    }\n\n    .go-btn[_ngcontent-%COMP%] {\n      margin-left: auto;\n      color: #3B82F6;\n      font-size: 10px;\n      opacity: 0.7;\n    }\n\n    .active-task-item.clickable[_ngcontent-%COMP%]:hover   .go-btn[_ngcontent-%COMP%] {\n      opacity: 1;\n    }\n\n    .task-conversation[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #9CA3AF;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .task-conversation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n    }\n\n    .task-status-text[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #6B7280;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .task-elapsed[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #3B82F6;\n      font-weight: 600;\n    }\n\n    .no-tasks[_ngcontent-%COMP%] {\n      padding: 40px 16px;\n      text-align: center;\n      color: #9CA3AF;\n    }\n\n    .no-tasks[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 8px;\n      opacity: 0.5;\n      color: #10B981;\n    }\n\n    .no-tasks[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    \n\n    .dropdown-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    .dropdown-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n      background: #F9FAFB;\n    }\n\n    .dropdown-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: #D1D5DB;\n      border-radius: 3px;\n    }\n\n    .dropdown-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n      background: #9CA3AF;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TasksDropdownComponent, [{
         type: Component,
@@ -308,17 +250,18 @@ export class TasksDropdownComponent {
         class="active-tasks-btn"
         (click)="toggleDropdown()"
         [class.active]="isOpen"
-        title="View tasks">
-        <i class="fas fa-tasks"></i>
-        <span>Tasks</span>
-        <span class="task-count-badge" *ngIf="totalTaskCount > 0">{{ totalTaskCount }}</span>
+        [class.has-tasks]="allTasks.length > 0"
+        [title]="allTasks.length > 0 ? allTasks.length + ' active task' + (allTasks.length > 1 ? 's' : '') : 'View tasks'">
+        <i class="fas fa-bolt"></i>
+        <span class="task-count-badge" *ngIf="allTasks.length > 0">{{ allTasks.length }}</span>
       </button>
 
       <div class="active-tasks-dropdown" *ngIf="isOpen">
         <div class="dropdown-header">
           <div class="header-left">
-            <i class="fas fa-tasks"></i>
-            <span>Tasks</span>
+            <i class="fas fa-circle-notch fa-spin" *ngIf="allTasks.length > 0"></i>
+            <i class="fas fa-tasks" *ngIf="allTasks.length === 0"></i>
+            <span>Active Tasks ({{ allTasks.length }})</span>
           </div>
           <button class="close-btn" (click)="closeDropdown()">
             <i class="fas fa-times"></i>
@@ -326,13 +269,15 @@ export class TasksDropdownComponent {
         </div>
 
         <div class="dropdown-content">
-          <!-- Active Running Tasks Section -->
-          <div class="section" *ngIf="activeTasks.length > 0">
+          <!-- Current Conversation Tasks -->
+          <div class="section" *ngIf="currentConversationTasks.length > 0">
             <div class="section-header">
-              <i class="fas fa-circle-notch fa-spin"></i>
-              <span>Active ({{ activeTasks.length }})</span>
+              <i class="fas fa-comment"></i>
+              <span>Current Conversation ({{ currentConversationTasks.length }})</span>
             </div>
-            <div class="active-task-item" *ngFor="let task of activeTasks">
+            <div class="active-task-item"
+                 *ngFor="let task of currentConversationTasks"
+                 (click)="onTaskClick(task)">
               <div class="task-status-indicator active"></div>
               <div class="task-content">
                 <div class="task-title">
@@ -345,36 +290,49 @@ export class TasksDropdownComponent {
             </div>
           </div>
 
-          <!-- Database Tasks Section -->
-          <div class="section" *ngIf="dbTasks.length > 0">
+          <!-- Other Conversations Tasks -->
+          <div class="section" *ngIf="otherConversationTasks.length > 0">
             <div class="section-header">
-              <i class="fas fa-list-check"></i>
-              <span>In Progress ({{ dbTasks.length }})</span>
+              <i class="fas fa-comments"></i>
+              <span>Other Conversations ({{ otherConversationTasks.length }})</span>
+            </div>
+            <div class="active-task-item clickable"
+                 *ngFor="let task of otherConversationTasks"
+                 (click)="onTaskClick(task)">
+              <div class="task-status-indicator active"></div>
+              <div class="task-content">
+                <div class="task-title">
+                  <i class="fas fa-robot"></i>
+                  {{ task.agentName }}
+                  <span class="go-btn">
+                    <i class="fas fa-arrow-right"></i>
+                  </span>
+                </div>
+                <div class="task-conversation" *ngIf="task.conversationName">
+                  <i class="fas fa-message"></i>
+                  {{ task.conversationName }}
+                </div>
+                <div class="task-status-text">{{ getTrimmedStatus(task.status) }}</div>
+                <div class="task-elapsed">{{ getElapsedTime(task) }}</div>
+              </div>
             </div>
-            <mj-task-widget
-              *ngFor="let task of dbTasks"
-              [task]="task"
-              [compact]="true"
-              [clickable]="true"
-              [showProgress]="true"
-              [showDuration]="false"
-              (taskClick)="onTaskClick($event)">
-            </mj-task-widget>
           </div>
 
           <!-- No Tasks State -->
-          <div *ngIf="activeTasks.length === 0 && dbTasks.length === 0" class="no-tasks">
-            <i class="fas fa-tasks"></i>
+          <div *ngIf="allTasks.length === 0" class="no-tasks">
+            <i class="fas fa-check-circle"></i>
             <p>No active tasks</p>
           </div>
         </div>
       </div>
     </div>
-  `, styles: ["\n    .tasks-dropdown-container {\n      position: relative;\n    }\n\n    .active-tasks-btn {\n      background: var(--gray-700, #374151);\n      color: white;\n      padding: 6px 12px;\n      border-radius: 6px;\n      font-size: 13px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      border: 1px solid #E5E7EB;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .active-tasks-btn:hover {\n      background: var(--gray-600, #4B5563);\n    }\n\n    .active-tasks-btn.active {\n      background: var(--navy, #1e40af);\n    }\n\n    .task-count-badge {\n      background: var(--navy, #1e40af);\n      color: white;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 11px;\n      font-weight: bold;\n      min-width: 18px;\n      text-align: center;\n    }\n\n    .active-tasks-dropdown {\n      position: absolute;\n      top: calc(100% + 8px);\n      right: 0;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      z-index: 1000;\n      min-width: 400px;\n      max-width: 500px;\n    }\n\n    .dropdown-header {\n      padding: 12px 16px;\n      border-bottom: 1px solid #E5E7EB;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #111827;\n    }\n\n    .header-left i {\n      color: var(--accent, #1e40af);\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      color: #6B7280;\n      cursor: pointer;\n      font-size: 18px;\n      padding: 0;\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 4px;\n    }\n\n    .close-btn:hover {\n      background: #F3F4F6;\n      color: #111827;\n    }\n\n    .dropdown-content {\n      max-height: 500px;\n      overflow-y: auto;\n    }\n\n    .section {\n      padding: 12px;\n      border-bottom: 1px solid #F3F4F6;\n    }\n\n    .section:last-child {\n      border-bottom: none;\n    }\n\n    .section-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #6B7280;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 12px;\n      padding: 0 4px;\n    }\n\n    .section-header i {\n      font-size: 11px;\n    }\n\n    .active-task-item {\n      display: flex;\n      gap: 12px;\n      padding: 10px 12px;\n      border-radius: 6px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      margin-bottom: 8px;\n    }\n\n    .active-task-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .task-status-indicator {\n      width: 4px;\n      border-radius: 2px;\n      flex-shrink: 0;\n    }\n\n    .task-status-indicator.active {\n      background: #3B82F6;\n      animation: pulse 2s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .task-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .task-title {\n      font-size: 14px;\n      font-weight: 600;\n      color: #111827;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .task-title i {\n      color: #3B82F6;\n      font-size: 12px;\n    }\n\n    .task-status-text {\n      font-size: 12px;\n      color: #6B7280;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .task-elapsed {\n      font-size: 11px;\n      color: #3B82F6;\n      font-weight: 600;\n    }\n\n    .no-tasks {\n      padding: 40px 16px;\n      text-align: center;\n      color: #9CA3AF;\n    }\n\n    .no-tasks i {\n      font-size: 32px;\n      margin-bottom: 8px;\n      opacity: 0.5;\n    }\n\n    .no-tasks p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    mj-task-widget {\n      display: block;\n      margin-bottom: 8px;\n    }\n\n    mj-task-widget:last-child {\n      margin-bottom: 0;\n    }\n  "] }]
-    }], () => [{ type: i1.ConversationStateService }, { type: i2.ActiveTasksService }], { currentUser: [{
+  `, styles: ["\n    .tasks-dropdown-container {\n      position: relative;\n    }\n\n    .active-tasks-btn {\n      position: relative;\n      width: 36px;\n      height: 36px;\n      border-radius: 6px;\n      background: transparent;\n      border: none;\n      color: rgba(255,255,255,0.7);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 16px;\n      transition: all 0.2s;\n    }\n\n    .active-tasks-btn:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .active-tasks-btn.active {\n      background: rgba(255,255,255,0.15);\n      color: white;\n    }\n\n    .active-tasks-btn.has-tasks {\n      color: #fb923c;\n    }\n\n    .active-tasks-btn.has-tasks:hover {\n      color: #f97316;\n    }\n\n    .task-count-badge {\n      position: absolute;\n      top: -2px;\n      right: -2px;\n      background: #fb923c;\n      color: white;\n      padding: 2px 5px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: bold;\n      min-width: 16px;\n      text-align: center;\n      line-height: 1;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n    }\n\n    .active-tasks-dropdown {\n      position: absolute;\n      top: calc(100% + 8px);\n      right: 0;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      z-index: 1000;\n      min-width: 420px;\n      max-width: 500px;\n    }\n\n    .dropdown-header {\n      padding: 12px 16px;\n      border-bottom: 1px solid #E5E7EB;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-weight: 600;\n      color: #111827;\n    }\n\n    .header-left i {\n      color: var(--accent, #1e40af);\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      color: #6B7280;\n      cursor: pointer;\n      font-size: 18px;\n      padding: 0;\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 4px;\n    }\n\n    .close-btn:hover {\n      background: #F3F4F6;\n      color: #111827;\n    }\n\n    .dropdown-content {\n      max-height: 500px;\n      overflow-y: auto;\n    }\n\n    .section {\n      padding: 12px;\n      border-bottom: 1px solid #F3F4F6;\n    }\n\n    .section:last-child {\n      border-bottom: none;\n    }\n\n    .section-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #6B7280;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 12px;\n      padding: 0 4px;\n    }\n\n    .section-header i {\n      font-size: 11px;\n    }\n\n    .active-task-item {\n      display: flex;\n      gap: 12px;\n      padding: 10px 12px;\n      border-radius: 6px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      margin-bottom: 8px;\n      transition: all 0.2s ease;\n    }\n\n    .active-task-item.clickable {\n      cursor: pointer;\n    }\n\n    .active-task-item.clickable:hover {\n      background: #EEF2FF;\n      border-color: #C7D2FE;\n      transform: translateX(2px);\n    }\n\n    .active-task-item:last-child {\n      margin-bottom: 0;\n    }\n\n    .task-status-indicator {\n      width: 4px;\n      border-radius: 2px;\n      flex-shrink: 0;\n    }\n\n    .task-status-indicator.active {\n      background: #3B82F6;\n      animation: pulse 2s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .task-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .task-title {\n      font-size: 14px;\n      font-weight: 600;\n      color: #111827;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .task-title i {\n      color: #3B82F6;\n      font-size: 12px;\n    }\n\n    .go-btn {\n      margin-left: auto;\n      color: #3B82F6;\n      font-size: 10px;\n      opacity: 0.7;\n    }\n\n    .active-task-item.clickable:hover .go-btn {\n      opacity: 1;\n    }\n\n    .task-conversation {\n      font-size: 11px;\n      color: #9CA3AF;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .task-conversation i {\n      font-size: 10px;\n    }\n\n    .task-status-text {\n      font-size: 12px;\n      color: #6B7280;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .task-elapsed {\n      font-size: 11px;\n      color: #3B82F6;\n      font-weight: 600;\n    }\n\n    .no-tasks {\n      padding: 40px 16px;\n      text-align: center;\n      color: #9CA3AF;\n    }\n\n    .no-tasks i {\n      font-size: 32px;\n      margin-bottom: 8px;\n      opacity: 0.5;\n      color: #10B981;\n    }\n\n    .no-tasks p {\n      margin: 0;\n      font-size: 14px;\n    }\n\n    /* Scrollbar Styling */\n    .dropdown-content::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    .dropdown-content::-webkit-scrollbar-track {\n      background: #F9FAFB;\n    }\n\n    .dropdown-content::-webkit-scrollbar-thumb {\n      background: #D1D5DB;\n      border-radius: 3px;\n    }\n\n    .dropdown-content::-webkit-scrollbar-thumb:hover {\n      background: #9CA3AF;\n    }\n  "] }]
+    }], () => [{ type: i1.ActiveTasksService }, { type: i2.ConversationStateService }], { currentUser: [{
             type: Input
         }], taskClicked: [{
             type: Output
+        }], navigateToConversation: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TasksDropdownComponent, { className: "TasksDropdownComponent", filePath: "src/lib/components/tasks/tasks-dropdown.component.ts", lineNumber: 301 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TasksDropdownComponent, { className: "TasksDropdownComponent", filePath: "src/lib/components/tasks/tasks-dropdown.component.ts", lineNumber: 373 }); })();
 //# sourceMappingURL=tasks-dropdown.component.js.map