@memberjunction/ng-conversations 2.104.0 → 2.105.0

package/dist/lib/components/conversation/conversation-list.component.js

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, HostListener } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/conversation-state.service";
 import * as i2 from "../../services/dialog.service";
@@ -7,59 +7,148 @@ import * as i4 from "../../services/toast.service";
 import * as i5 from "@angular/forms";
 import * as i6 from "../notification/notification-badge.component";
 const _forTrack0 = ($index, $item) => $item.ID;
-function ConversationListComponent_For_16_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 22);
+function ConversationListComponent_Conditional_8_For_9_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_8_For_9_Conditional_14_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "button", 28);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_8_For_9_Conditional_14_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r5); const conversation_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.togglePin(conversation_r4, $event)); });
+    i0.ɵɵelement(2, "i", 29);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Unpin");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "button", 28);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_8_For_9_Conditional_14_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const conversation_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.renameConversation(conversation_r4); return i0.ɵɵresetView(ctx_r1.closeMenu()); });
+    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8, "Rename");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(9, "div", 31);
+    i0.ɵɵelementStart(10, "button", 32);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_8_For_9_Conditional_14_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r5); const conversation_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.deleteConversation(conversation_r4); return i0.ɵɵresetView(ctx_r1.closeMenu()); });
+    i0.ɵɵelement(11, "i", 33);
+    i0.ɵɵelementStart(12, "span");
+    i0.ɵɵtext(13, "Delete");
+    i0.ɵɵelementEnd()()();
 } }
-function ConversationListComponent_For_16_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_16_Template_div_click_0_listener() { const conversation_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectConversation(conversation_r2)); });
-    i0.ɵɵelementStart(1, "div", 13)(2, "div", 14);
-    i0.ɵɵelement(3, "i", 15);
+function ConversationListComponent_Conditional_8_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_8_For_9_Template_div_click_0_listener() { const conversation_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectConversation(conversation_r4)); });
+    i0.ɵɵelementStart(1, "div", 15)(2, "div", 16);
+    i0.ɵɵelement(3, "i", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 16);
-    i0.ɵɵelement(5, "mj-notification-badge", 17);
+    i0.ɵɵelementStart(4, "div", 18);
+    i0.ɵɵelement(5, "mj-notification-badge", 19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 18)(7, "div", 19);
+    i0.ɵɵelementStart(6, "div", 20)(7, "div", 21);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 20);
+    i0.ɵɵelementStart(9, "div", 22);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 21);
-    i0.ɵɵtemplate(12, ConversationListComponent_For_16_Conditional_12_Template, 1, 0, "i", 22);
+    i0.ɵɵelementStart(11, "div", 23)(12, "button", 24);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_8_For_9_Template_button_click_12_listener($event) { const conversation_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleMenu(conversation_r4.ID, $event)); });
+    i0.ɵɵelement(13, "i", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 23);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_16_Template_div_click_13_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(14, "button", 24);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_16_Template_button_click_14_listener() { const conversation_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.togglePin(conversation_r2)); });
-    i0.ɵɵelement(15, "i", 25);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 26);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_16_Template_button_click_16_listener() { const conversation_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.renameConversation(conversation_r2)); });
-    i0.ɵɵelement(17, "i", 27);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 28);
-    i0.ɵɵlistener("click", function ConversationListComponent_For_16_Template_button_click_18_listener() { const conversation_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.deleteConversation(conversation_r2)); });
-    i0.ɵɵelement(19, "i", 29);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(14, ConversationListComponent_Conditional_8_For_9_Conditional_14_Template, 14, 0, "div", 26);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const conversation_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("active", conversation_r2.ID === ctx_r2.conversationState.activeConversationId)("renamed", conversation_r2.ID === ctx_r2.renamedConversationId);
+    const conversation_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", conversation_r4.ID === ctx_r1.conversationState.activeConversationId)("renamed", conversation_r4.ID === ctx_r1.renamedConversationId);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("conversationId", conversation_r2.ID);
+    i0.ɵɵproperty("conversationId", conversation_r4.ID);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("title", conversation_r2.Name + (conversation_r2.Description ? "\n" + conversation_r2.Description : ""));
+    i0.ɵɵproperty("title", conversation_r4.Name + (conversation_r4.Description ? "\n" + conversation_r4.Description : ""));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(conversation_r2.Name);
+    i0.ɵɵtextInterpolate(conversation_r4.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(conversation_r2.Description || "No description");
+    i0.ɵɵtextInterpolate(conversation_r4.Description || "No description");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.openMenuConversationId === conversation_r4.ID ? 14 : -1);
+} }
+function ConversationListComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 8);
+    i0.ɵɵlistener("click", function ConversationListComponent_Conditional_8_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.togglePinned()); });
+    i0.ɵɵelementStart(2, "div", 9);
+    i0.ɵɵelement(3, "i", 10)(4, "i", 13);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Pinned");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(7, "div", 11);
+    i0.ɵɵrepeaterCreate(8, ConversationListComponent_Conditional_8_For_9_Template, 15, 9, "div", 12, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("expanded", ctx_r1.pinnedExpanded);
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("expanded", ctx_r1.pinnedExpanded);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.pinnedConversations);
+} }
+function ConversationListComponent_For_17_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵlistener("click", function ConversationListComponent_For_17_Conditional_14_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "button", 28);
+    i0.ɵɵlistener("click", function ConversationListComponent_For_17_Conditional_14_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r8); const conversation_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.togglePin(conversation_r7, $event)); });
+    i0.ɵɵelement(2, "i", 29);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Pin");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "button", 28);
+    i0.ɵɵlistener("click", function ConversationListComponent_For_17_Conditional_14_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r8); const conversation_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.renameConversation(conversation_r7); return i0.ɵɵresetView(ctx_r1.closeMenu()); });
+    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8, "Rename");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(9, "div", 31);
+    i0.ɵɵelementStart(10, "button", 32);
+    i0.ɵɵlistener("click", function ConversationListComponent_For_17_Conditional_14_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r8); const conversation_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.deleteConversation(conversation_r7); return i0.ɵɵresetView(ctx_r1.closeMenu()); });
+    i0.ɵɵelement(11, "i", 33);
+    i0.ɵɵelementStart(12, "span");
+    i0.ɵɵtext(13, "Delete");
+    i0.ɵɵelementEnd()()();
+} }
+function ConversationListComponent_For_17_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵlistener("click", function ConversationListComponent_For_17_Template_div_click_0_listener() { const conversation_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectConversation(conversation_r7)); });
+    i0.ɵɵelementStart(1, "div", 15)(2, "div", 16);
+    i0.ɵɵelement(3, "i", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 18);
+    i0.ɵɵelement(5, "mj-notification-badge", 19);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 20)(7, "div", 21);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 22);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 23)(12, "button", 24);
+    i0.ɵɵlistener("click", function ConversationListComponent_For_17_Template_button_click_12_listener($event) { const conversation_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMenu(conversation_r7.ID, $event)); });
+    i0.ɵɵelement(13, "i", 25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(14, ConversationListComponent_For_17_Conditional_14_Template, 14, 0, "div", 26);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const conversation_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("active", conversation_r7.ID === ctx_r1.conversationState.activeConversationId)("renamed", conversation_r7.ID === ctx_r1.renamedConversationId);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("conversationId", conversation_r7.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", conversation_r7.Name + (conversation_r7.Description ? "\n" + conversation_r7.Description : ""));
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(conversation_r2.IsPinned ? 12 : -1);
+    i0.ɵɵtextInterpolate(conversation_r7.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("pinned", conversation_r2.IsPinned);
-    i0.ɵɵproperty("title", conversation_r2.IsPinned ? "Unpin" : "Pin");
+    i0.ɵɵtextInterpolate(conversation_r7.Description || "No description");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.openMenuConversationId === conversation_r7.ID ? 14 : -1);
 } }
 export class ConversationListComponent {
     conversationState;
@@ -70,19 +159,36 @@ export class ConversationListComponent {
     currentUser;
     renamedConversationId = null;
     directMessagesExpanded = true;
+    pinnedExpanded = true;
+    openMenuConversationId = null;
     constructor(conversationState, dialogService, notificationService, toastService) {
         this.conversationState = conversationState;
         this.dialogService = dialogService;
         this.notificationService = notificationService;
         this.toastService = toastService;
     }
+    get pinnedConversations() {
+        return this.conversationState.filteredConversations.filter(c => c.IsPinned);
+    }
+    get unpinnedConversations() {
+        return this.conversationState.filteredConversations.filter(c => !c.IsPinned);
+    }
     ngOnInit() {
         // Load conversations on init
         this.conversationState.loadConversations(this.environmentId, this.currentUser);
     }
+    onDocumentClick() {
+        // Close menu when clicking outside
+        if (this.openMenuConversationId) {
+            this.closeMenu();
+        }
+    }
     toggleDirectMessages() {
         this.directMessagesExpanded = !this.directMessagesExpanded;
     }
+    togglePinned() {
+        this.pinnedExpanded = !this.pinnedExpanded;
+    }
     selectConversation(conversation) {
         this.conversationState.setActiveConversation(conversation.ID);
         // Clear unread notifications when conversation is opened
@@ -138,9 +244,19 @@ export class ConversationListComponent {
             await this.dialogService.alert('Error', 'Failed to delete conversation. Please try again.');
         }
     }
-    async togglePin(conversation) {
+    toggleMenu(conversationId, event) {
+        event.stopPropagation();
+        this.openMenuConversationId = this.openMenuConversationId === conversationId ? null : conversationId;
+    }
+    closeMenu() {
+        this.openMenuConversationId = null;
+    }
+    async togglePin(conversation, event) {
+        if (event)
+            event.stopPropagation();
         try {
             await this.conversationState.togglePin(conversation.ID, this.currentUser);
+            this.closeMenu();
         }
         catch (error) {
             console.error('Error toggling pin:', error);
@@ -148,7 +264,9 @@ export class ConversationListComponent {
         }
     }
     static ɵfac = function ConversationListComponent_Factory(t) { return new (t || ConversationListComponent)(i0.ɵɵdirectiveInject(i1.ConversationStateService), i0.ɵɵdirectiveInject(i2.DialogService), i0.ɵɵdirectiveInject(i3.NotificationService), i0.ɵɵdirectiveInject(i4.ToastService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationListComponent, selectors: [["mj-conversation-list"]], inputs: { environmentId: "environmentId", currentUser: "currentUser", renamedConversationId: "renamedConversationId" }, decls: 17, vars: 5, consts: [[1, "conversation-list"], [1, "list-header"], ["type", "text", "placeholder", "Search conversations...", 1, "search-input", 3, "ngModelChange", "ngModel"], ["title", "New Conversation", 1, "btn-new-conversation", 3, "click"], [1, "fas", "fa-plus"], [1, "list-content"], [1, "sidebar-section"], [1, "section-header", 3, "click"], [1, "section-title"], [1, "fas", "fa-chevron-right"], [1, "chat-list"], [1, "conversation-item", 3, "active", "renamed"], [1, "conversation-item", 3, "click"], [1, "conversation-icon-wrapper"], [1, "conversation-icon"], [1, "fas", "fa-comments"], [1, "badge-overlay"], [3, "conversationId"], [1, "conversation-info", 3, "title"], [1, "conversation-name"], [1, "conversation-preview"], [1, "conversation-meta"], [1, "fas", "fa-thumbtack", "pinned-icon"], [1, "conversation-actions", 3, "click"], [1, "action-btn", 3, "click", "title"], [1, "fas", "fa-thumbtack"], ["title", "Rename", 1, "action-btn", 3, "click"], [1, "fas", "fa-edit"], ["title", "Delete", 1, "action-btn", "danger", 3, "click"], [1, "fas", "fa-trash"]], template: function ConversationListComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationListComponent, selectors: [["mj-conversation-list"]], hostBindings: function ConversationListComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function ConversationListComponent_click_HostBindingHandler() { return ctx.onDocumentClick(); }, false, i0.ɵɵresolveDocument);
+        } }, inputs: { environmentId: "environmentId", currentUser: "currentUser", renamedConversationId: "renamedConversationId" }, decls: 18, vars: 6, consts: [[1, "conversation-list"], [1, "list-header"], ["type", "text", "placeholder", "Search conversations...", 1, "search-input", 3, "ngModelChange", "ngModel"], ["title", "New Conversation", 1, "btn-new-conversation", 3, "click"], [1, "fas", "fa-plus"], [1, "list-content"], [1, "sidebar-section", "pinned-section"], [1, "sidebar-section"], [1, "section-header", 3, "click"], [1, "section-title"], [1, "fas", "fa-chevron-right"], [1, "chat-list"], [1, "conversation-item", 3, "active", "renamed"], [1, "fas", "fa-thumbtack", "section-icon"], [1, "conversation-item", 3, "click"], [1, "conversation-icon-wrapper"], [1, "conversation-icon"], [1, "fas", "fa-comments"], [1, "badge-overlay"], [3, "conversationId"], [1, "conversation-info", 3, "title"], [1, "conversation-name"], [1, "conversation-preview"], [1, "conversation-actions"], ["title", "More options", 1, "menu-btn", 3, "click"], [1, "fas", "fa-ellipsis"], [1, "context-menu"], [1, "context-menu", 3, "click"], [1, "menu-item", 3, "click"], [1, "fas", "fa-thumbtack"], [1, "fas", "fa-edit"], [1, "menu-divider"], [1, "menu-item", "danger", 3, "click"], [1, "fas", "fa-trash"]], template: function ConversationListComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "input", 2);
             i0.ɵɵtwoWayListener("ngModelChange", function ConversationListComponent_Template_input_ngModelChange_2_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.conversationState.searchQuery, $event) || (ctx.conversationState.searchQuery = $event); return $event; });
             i0.ɵɵelementEnd()();
@@ -158,26 +276,30 @@ export class ConversationListComponent {
             i0.ɵɵelementStart(5, "span");
             i0.ɵɵtext(6, "New Conversation");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "div", 5)(8, "div", 6)(9, "div", 7);
-            i0.ɵɵlistener("click", function ConversationListComponent_Template_div_click_9_listener() { return ctx.toggleDirectMessages(); });
-            i0.ɵɵelementStart(10, "div", 8);
-            i0.ɵɵelement(11, "i", 9);
-            i0.ɵɵelementStart(12, "span");
-            i0.ɵɵtext(13, "Direct Messages");
+            i0.ɵɵelementStart(7, "div", 5);
+            i0.ɵɵtemplate(8, ConversationListComponent_Conditional_8_Template, 10, 4, "div", 6);
+            i0.ɵɵelementStart(9, "div", 7)(10, "div", 8);
+            i0.ɵɵlistener("click", function ConversationListComponent_Template_div_click_10_listener() { return ctx.toggleDirectMessages(); });
+            i0.ɵɵelementStart(11, "div", 9);
+            i0.ɵɵelement(12, "i", 10);
+            i0.ɵɵelementStart(13, "span");
+            i0.ɵɵtext(14, "Messages");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(14, "div", 10);
-            i0.ɵɵrepeaterCreate(15, ConversationListComponent_For_16_Template, 20, 12, "div", 11, _forTrack0);
+            i0.ɵɵelementStart(15, "div", 11);
+            i0.ɵɵrepeaterCreate(16, ConversationListComponent_For_17_Template, 15, 9, "div", 12, _forTrack0);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵtwoWayProperty("ngModel", ctx.conversationState.searchQuery);
-            i0.ɵɵadvance(7);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(ctx.pinnedConversations.length > 0 ? 8 : -1);
+            i0.ɵɵadvance(2);
             i0.ɵɵclassProp("expanded", ctx.directMessagesExpanded);
             i0.ɵɵadvance(5);
             i0.ɵɵclassProp("expanded", ctx.directMessagesExpanded);
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.conversationState.filteredConversations);
-        } }, dependencies: [i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.NotificationBadgeComponent], styles: [".conversation-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: #092340; }\n    .list-header[_ngcontent-%COMP%] { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 8px 12px;\n      background: rgba(255,255,255,0.1);\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input[_ngcontent-%COMP%]::placeholder { color: rgba(255,255,255,0.5); }\n    .search-input[_ngcontent-%COMP%]:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #0076B6; }\n    .btn-new-conversation[_ngcontent-%COMP%] {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: #0076B6;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation[_ngcontent-%COMP%]:hover { background: #005A8C; }\n    .btn-new-conversation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n    .list-content[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; padding: 4px 0; }\n\n    \n\n    .sidebar-section[_ngcontent-%COMP%] { margin-bottom: 20px; }\n    .section-header[_ngcontent-%COMP%] {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n      font-size: 13px;\n      font-weight: 500;\n      transition: color 0.2s;\n      user-select: none;\n    }\n    .section-header[_ngcontent-%COMP%]:hover { color: white; }\n    .section-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      transition: transform 0.2s;\n    }\n    .section-header.expanded[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { transform: rotate(90deg); }\n    .chat-list[_ngcontent-%COMP%] {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded[_ngcontent-%COMP%] { display: block; }\n\n    .conversation-item[_ngcontent-%COMP%] {\n      padding: 6px 40px 6px 28px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: rgba(255,255,255,0.7);\n      font-size: 14px;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover { background: rgba(255,255,255,0.08); color: white; }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; }\n    .conversation-item.active[_ngcontent-%COMP%] { background: #0076B6; color: white; }\n    .conversation-icon-wrapper[_ngcontent-%COMP%] { position: relative; flex-shrink: 0; }\n    .conversation-icon[_ngcontent-%COMP%] { font-size: 12px; width: 16px; text-align: center; }\n    .badge-overlay[_ngcontent-%COMP%] { position: absolute; top: -4px; right: -4px; }\n    .conversation-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; padding-right: 8px; }\n    .conversation-name[_ngcontent-%COMP%] { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-preview[_ngcontent-%COMP%] { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-preview[_ngcontent-%COMP%] { color: rgba(255,255,255,0.8); }\n    .conversation-meta[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    \n\n    .project-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: rgba(255, 255, 255, 0.1);\n      color: rgba(255, 255, 255, 0.6);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .project-badge[_ngcontent-%COMP%] {\n      background-color: rgba(255, 255, 255, 0.15);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .project-badge[_ngcontent-%COMP%] {\n      background-color: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .conversation-actions[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      margin-left: auto;\n      opacity: 0;\n      transition: opacity 0.2s;\n      position: absolute;\n      right: 8px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 10;\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; }\n    .conversation-item[_ngcontent-%COMP%]:has(.pinned-icon)   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; }\n    .pinned-icon[_ngcontent-%COMP%] { color: #AAE7FD; font-size: 12px; }\n    .action-btn[_ngcontent-%COMP%] {\n      width: 20px;\n      height: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 3px;\n      color: rgba(255,255,255,0.6);\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .action-btn[_ngcontent-%COMP%]:hover { background: rgba(255,255,255,0.2); color: white; }\n    .action-btn.pinned[_ngcontent-%COMP%] { color: #AAE7FD; }\n    .action-btn.danger[_ngcontent-%COMP%]:hover { background: rgba(239,68,68,0.3); color: #ff6b6b; }\n    .action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 11px; }\n\n    \n\n    .conversation-item.renamed[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }"] });
+            i0.ɵɵrepeater(ctx.unpinnedConversations);
+        } }, dependencies: [i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, i6.NotificationBadgeComponent], styles: [".conversation-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: #092340; }\n    .list-header[_ngcontent-%COMP%] { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 8px 12px;\n      background: rgba(255,255,255,0.1);\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input[_ngcontent-%COMP%]::placeholder { color: rgba(255,255,255,0.5); }\n    .search-input[_ngcontent-%COMP%]:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #0076B6; }\n    .btn-new-conversation[_ngcontent-%COMP%] {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: #0076B6;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation[_ngcontent-%COMP%]:hover { background: #005A8C; }\n    .btn-new-conversation[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n    .list-content[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; padding: 4px 0; }\n\n    \n\n    .sidebar-section[_ngcontent-%COMP%] { margin-bottom: 20px; }\n    .pinned-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n      background: rgba(255, 193, 7, 0.08);\n      border-radius: 4px;\n      margin: 0 4px;\n    }\n    .pinned-section[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   .section-icon[_ngcontent-%COMP%] {\n      color: #FFC107;\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header[_ngcontent-%COMP%] {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n      font-size: 13px;\n      font-weight: 500;\n      transition: color 0.2s;\n      user-select: none;\n    }\n    .section-header[_ngcontent-%COMP%]:hover { color: white; }\n    .section-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      transition: transform 0.2s;\n    }\n    .section-header.expanded[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { transform: rotate(90deg); }\n    .chat-list[_ngcontent-%COMP%] {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded[_ngcontent-%COMP%] { display: block; }\n\n    .conversation-item[_ngcontent-%COMP%] {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: rgba(255,255,255,0.7);\n      font-size: 14px;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover { background: rgba(255,255,255,0.08); color: white; }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; }\n    .conversation-item.active[_ngcontent-%COMP%] { background: #0076B6; color: white; }\n    .conversation-icon-wrapper[_ngcontent-%COMP%] { position: relative; flex-shrink: 0; }\n    .conversation-icon[_ngcontent-%COMP%] { font-size: 12px; width: 16px; text-align: center; }\n    .badge-overlay[_ngcontent-%COMP%] { position: absolute; top: -4px; right: -4px; }\n    .conversation-info[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .conversation-name[_ngcontent-%COMP%] { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-preview[_ngcontent-%COMP%] { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-preview[_ngcontent-%COMP%] { color: rgba(255,255,255,0.8); }\n    .conversation-meta[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    \n\n    .project-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: rgba(255, 255, 255, 0.1);\n      color: rgba(255, 255, 255, 0.6);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .project-badge[_ngcontent-%COMP%] {\n      background-color: rgba(255, 255, 255, 0.15);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .project-badge[_ngcontent-%COMP%] {\n      background-color: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .conversation-actions[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item[_ngcontent-%COMP%]:hover   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-item.active[_ngcontent-%COMP%]   .conversation-actions[_ngcontent-%COMP%] { opacity: 1; pointer-events: auto; }\n    .conversation-actions[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] { pointer-events: auto; }\n    .pinned-icon[_ngcontent-%COMP%] { color: #AAE7FD; font-size: 12px; }\n\n    .menu-btn[_ngcontent-%COMP%] {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      background: #092340 !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.15) !important;\n      color: white;\n    }\n    .conversation-item.active[_ngcontent-%COMP%]   .menu-btn[_ngcontent-%COMP%] {\n      background: #005A8C !important;\n      color: white;\n    }\n    .menu-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 14px; }\n\n    .context-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: #0A2742;\n      border: 1px solid rgba(255,255,255,0.15);\n      border-radius: 8px;\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item[_ngcontent-%COMP%] {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: rgba(255,255,255,0.85);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      width: 16px;\n      font-size: 13px;\n      color: rgba(255,255,255,0.6);\n    }\n\n    .menu-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: white;\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%] {\n      color: rgba(239, 68, 68, 0.9);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover {\n      background: rgba(239, 68, 68, 0.15);\n      color: #ff6b6b;\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: rgba(239, 68, 68, 0.8);\n    }\n\n    .menu-item.danger[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: #ff6b6b;\n    }\n\n    .menu-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: rgba(255,255,255,0.1);\n      margin: 4px 0;\n    }\n\n    \n\n    .conversation-item.renamed[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes _ngcontent-%COMP%_renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationListComponent, [{
         type: Component,
@@ -195,16 +317,72 @@ export class ConversationListComponent {
         <span>New Conversation</span>
       </button>
       <div class="list-content">
-        <!-- Direct Messages Section -->
+        <!-- Pinned Section (only show if there are pinned conversations) -->
+        @if (pinnedConversations.length > 0) {
+          <div class="sidebar-section pinned-section">
+            <div class="section-header" [class.expanded]="pinnedExpanded" (click)="togglePinned()">
+              <div class="section-title">
+                <i class="fas fa-chevron-right"></i>
+                <i class="fas fa-thumbtack section-icon"></i>
+                <span>Pinned</span>
+              </div>
+            </div>
+            <div class="chat-list" [class.expanded]="pinnedExpanded">
+              @for (conversation of pinnedConversations; track conversation.ID) {
+                <div class="conversation-item"
+                     [class.active]="conversation.ID === conversationState.activeConversationId"
+                     [class.renamed]="conversation.ID === renamedConversationId"
+                     (click)="selectConversation(conversation)">
+                  <div class="conversation-icon-wrapper">
+                    <div class="conversation-icon">
+                      <i class="fas fa-comments"></i>
+                    </div>
+                    <div class="badge-overlay">
+                      <mj-notification-badge [conversationId]="conversation.ID"></mj-notification-badge>
+                    </div>
+                  </div>
+                  <div class="conversation-info" [title]="conversation.Name + (conversation.Description ? '\n' + conversation.Description : '')">
+                    <div class="conversation-name">{{ conversation.Name }}</div>
+                    <div class="conversation-preview">{{ conversation.Description || 'No description' }}</div>
+                  </div>
+                  <div class="conversation-actions">
+                    <button class="menu-btn" (click)="toggleMenu(conversation.ID, $event)" title="More options">
+                      <i class="fas fa-ellipsis"></i>
+                    </button>
+                    @if (openMenuConversationId === conversation.ID) {
+                      <div class="context-menu" (click)="$event.stopPropagation()">
+                        <button class="menu-item" (click)="togglePin(conversation, $event)">
+                          <i class="fas fa-thumbtack"></i>
+                          <span>Unpin</span>
+                        </button>
+                        <button class="menu-item" (click)="renameConversation(conversation); closeMenu()">
+                          <i class="fas fa-edit"></i>
+                          <span>Rename</span>
+                        </button>
+                        <div class="menu-divider"></div>
+                        <button class="menu-item danger" (click)="deleteConversation(conversation); closeMenu()">
+                          <i class="fas fa-trash"></i>
+                          <span>Delete</span>
+                        </button>
+                      </div>
+                    }
+                  </div>
+                </div>
+              }
+            </div>
+          </div>
+        }
+
+        <!-- Messages Section -->
         <div class="sidebar-section">
           <div class="section-header" [class.expanded]="directMessagesExpanded" (click)="toggleDirectMessages()">
             <div class="section-title">
               <i class="fas fa-chevron-right"></i>
-              <span>Direct Messages</span>
+              <span>Messages</span>
             </div>
           </div>
           <div class="chat-list" [class.expanded]="directMessagesExpanded">
-            @for (conversation of conversationState.filteredConversations; track conversation.ID) {
+            @for (conversation of unpinnedConversations; track conversation.ID) {
               <div class="conversation-item"
                    [class.active]="conversation.ID === conversationState.activeConversationId"
                    [class.renamed]="conversation.ID === renamedConversationId"
@@ -221,21 +399,27 @@ export class ConversationListComponent {
                   <div class="conversation-name">{{ conversation.Name }}</div>
                   <div class="conversation-preview">{{ conversation.Description || 'No description' }}</div>
                 </div>
-                <div class="conversation-meta">
-                  @if (conversation.IsPinned) {
-                    <i class="fas fa-thumbtack pinned-icon"></i>
-                  }
-                </div>
-                <div class="conversation-actions" (click)="$event.stopPropagation()">
-                  <button class="action-btn" (click)="togglePin(conversation)" [title]="conversation.IsPinned ? 'Unpin' : 'Pin'" [class.pinned]="conversation.IsPinned">
-                    <i class="fas fa-thumbtack"></i>
-                  </button>
-                  <button class="action-btn" (click)="renameConversation(conversation)" title="Rename">
-                    <i class="fas fa-edit"></i>
-                  </button>
-                  <button class="action-btn danger" (click)="deleteConversation(conversation)" title="Delete">
-                    <i class="fas fa-trash"></i>
+                <div class="conversation-actions">
+                  <button class="menu-btn" (click)="toggleMenu(conversation.ID, $event)" title="More options">
+                    <i class="fas fa-ellipsis"></i>
                   </button>
+                  @if (openMenuConversationId === conversation.ID) {
+                    <div class="context-menu" (click)="$event.stopPropagation()">
+                      <button class="menu-item" (click)="togglePin(conversation, $event)">
+                        <i class="fas fa-thumbtack"></i>
+                        <span>Pin</span>
+                      </button>
+                      <button class="menu-item" (click)="renameConversation(conversation); closeMenu()">
+                        <i class="fas fa-edit"></i>
+                        <span>Rename</span>
+                      </button>
+                      <div class="menu-divider"></div>
+                      <button class="menu-item danger" (click)="deleteConversation(conversation); closeMenu()">
+                        <i class="fas fa-trash"></i>
+                        <span>Delete</span>
+                      </button>
+                    </div>
+                  }
                 </div>
               </div>
             }
@@ -243,13 +427,16 @@ export class ConversationListComponent {
         </div>
       </div>
     </div>
-  `, styles: ["\n    .conversation-list { display: flex; flex-direction: column; height: 100%; background: #092340; }\n    .list-header { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .search-input {\n      width: 100%;\n      padding: 8px 12px;\n      background: rgba(255,255,255,0.1);\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input::placeholder { color: rgba(255,255,255,0.5); }\n    .search-input:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #0076B6; }\n    .btn-new-conversation {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: #0076B6;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation:hover { background: #005A8C; }\n    .btn-new-conversation i { font-size: 14px; }\n    .list-content { flex: 1; overflow-y: auto; padding: 4px 0; }\n\n    /* Collapsible Sections */\n    .sidebar-section { margin-bottom: 20px; }\n    .section-header {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n      font-size: 13px;\n      font-weight: 500;\n      transition: color 0.2s;\n      user-select: none;\n    }\n    .section-header:hover { color: white; }\n    .section-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title i {\n      font-size: 10px;\n      transition: transform 0.2s;\n    }\n    .section-header.expanded .section-title i { transform: rotate(90deg); }\n    .chat-list {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded { display: block; }\n\n    .conversation-item {\n      padding: 6px 40px 6px 28px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: rgba(255,255,255,0.7);\n      font-size: 14px;\n    }\n    .conversation-item:hover { background: rgba(255,255,255,0.08); color: white; }\n    .conversation-item:hover .conversation-actions { opacity: 1; }\n    .conversation-item.active { background: #0076B6; color: white; }\n    .conversation-icon-wrapper { position: relative; flex-shrink: 0; }\n    .conversation-icon { font-size: 12px; width: 16px; text-align: center; }\n    .badge-overlay { position: absolute; top: -4px; right: -4px; }\n    .conversation-info { flex: 1; min-width: 0; padding-right: 8px; }\n    .conversation-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-preview { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active .conversation-preview { color: rgba(255,255,255,0.8); }\n    .conversation-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    /* Project Badge */\n    .project-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: rgba(255, 255, 255, 0.1);\n      color: rgba(255, 255, 255, 0.6);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item:hover .project-badge {\n      background-color: rgba(255, 255, 255, 0.15);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    .conversation-item.active .project-badge {\n      background-color: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .conversation-actions {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      margin-left: auto;\n      opacity: 0;\n      transition: opacity 0.2s;\n      position: absolute;\n      right: 8px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 10;\n    }\n    .conversation-item.active .conversation-actions { opacity: 1; }\n    .conversation-item:has(.pinned-icon) .conversation-actions { opacity: 1; }\n    .pinned-icon { color: #AAE7FD; font-size: 12px; }\n    .action-btn {\n      width: 20px;\n      height: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 3px;\n      color: rgba(255,255,255,0.6);\n      background: transparent;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .action-btn:hover { background: rgba(255,255,255,0.2); color: white; }\n    .action-btn.pinned { color: #AAE7FD; }\n    .action-btn.danger:hover { background: rgba(239,68,68,0.3); color: #ff6b6b; }\n    .action-btn i { font-size: 11px; }\n\n    /* Rename Animation */\n    .conversation-item.renamed {\n      animation: renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n  "] }]
+  `, styles: ["\n    .conversation-list { display: flex; flex-direction: column; height: 100%; background: #092340; }\n    .list-header { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }\n    .search-input {\n      width: 100%;\n      padding: 8px 12px;\n      background: rgba(255,255,255,0.1);\n      border: 1px solid rgba(255,255,255,0.2);\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      transition: all 0.2s;\n    }\n    .search-input::placeholder { color: rgba(255,255,255,0.5); }\n    .search-input:focus { outline: none; background: rgba(255,255,255,0.15); border-color: #0076B6; }\n    .btn-new-conversation {\n      width: calc(100% - 16px);\n      margin: 8px;\n      padding: 10px;\n      background: #0076B6;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .btn-new-conversation:hover { background: #005A8C; }\n    .btn-new-conversation i { font-size: 14px; }\n    .list-content { flex: 1; overflow-y: auto; padding: 4px 0; }\n\n    /* Collapsible Sections */\n    .sidebar-section { margin-bottom: 20px; }\n    .pinned-section .section-header {\n      background: rgba(255, 193, 7, 0.08);\n      border-radius: 4px;\n      margin: 0 4px;\n    }\n    .pinned-section .section-title .section-icon {\n      color: #FFC107;\n      font-size: 11px;\n      margin-left: 2px;\n    }\n    .section-header {\n      padding: 4px 16px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.7);\n      font-size: 13px;\n      font-weight: 500;\n      transition: color 0.2s;\n      user-select: none;\n    }\n    .section-header:hover { color: white; }\n    .section-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .section-title i {\n      font-size: 10px;\n      transition: transform 0.2s;\n    }\n    .section-header.expanded .section-title i { transform: rotate(90deg); }\n    .chat-list {\n      padding: 4px 0;\n      display: none;\n    }\n    .chat-list.expanded { display: block; }\n\n    .conversation-item {\n      padding: 6px 5px 6px 16px;\n      cursor: pointer;\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      transition: all 0.2s;\n      position: relative;\n      color: rgba(255,255,255,0.7);\n      font-size: 14px;\n    }\n    .conversation-item:hover { background: rgba(255,255,255,0.08); color: white; }\n    .conversation-item:hover .conversation-actions { opacity: 1; }\n    .conversation-item.active { background: #0076B6; color: white; }\n    .conversation-icon-wrapper { position: relative; flex-shrink: 0; }\n    .conversation-icon { font-size: 12px; width: 16px; text-align: center; }\n    .badge-overlay { position: absolute; top: -4px; right: -4px; }\n    .conversation-info { flex: 1; min-width: 0; }\n    .conversation-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-preview { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .conversation-item.active .conversation-preview { color: rgba(255,255,255,0.8); }\n    .conversation-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }\n\n    /* Project Badge */\n    .project-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      border-radius: 10px;\n      font-size: 10px;\n      font-weight: 600;\n      margin-left: auto;\n      background-color: rgba(255, 255, 255, 0.1);\n      color: rgba(255, 255, 255, 0.6);\n      white-space: nowrap;\n      max-width: 80px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .conversation-item:hover .project-badge {\n      background-color: rgba(255, 255, 255, 0.15);\n      color: rgba(255, 255, 255, 0.8);\n    }\n    .conversation-item.active .project-badge {\n      background-color: rgba(255, 255, 255, 0.2);\n      color: white;\n    }\n\n    .conversation-actions {\n      position: absolute;\n      right: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      display: flex;\n      align-items: center;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.2s;\n      z-index: 10;\n    }\n    .conversation-item:hover .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-item.active .conversation-actions { opacity: 1; pointer-events: auto; }\n    .conversation-actions > * { pointer-events: auto; }\n    .pinned-icon { color: #AAE7FD; font-size: 12px; }\n\n    .menu-btn {\n      width: 28px;\n      height: 28px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 6px;\n      color: rgba(255,255,255,0.7);\n      background: #092340 !important;\n      border: none;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n    .menu-btn:hover {\n      background: rgba(255,255,255,0.15) !important;\n      color: white;\n    }\n    .conversation-item.active .menu-btn {\n      background: #005A8C !important;\n      color: white;\n    }\n    .menu-btn i { font-size: 14px; }\n\n    .context-menu {\n      position: absolute;\n      top: 100%;\n      right: 0;\n      margin-top: 4px;\n      min-width: 160px;\n      background: #0A2742;\n      border: 1px solid rgba(255,255,255,0.15);\n      border-radius: 8px;\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);\n      z-index: 1001;\n      overflow: hidden;\n      pointer-events: auto;\n    }\n\n    .menu-item {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 14px;\n      background: transparent;\n      border: none;\n      color: rgba(255,255,255,0.85);\n      font-size: 14px;\n      text-align: left;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .menu-item:hover {\n      background: rgba(255,255,255,0.1);\n      color: white;\n    }\n\n    .menu-item i {\n      width: 16px;\n      font-size: 13px;\n      color: rgba(255,255,255,0.6);\n    }\n\n    .menu-item:hover i {\n      color: white;\n    }\n\n    .menu-item.danger {\n      color: rgba(239, 68, 68, 0.9);\n    }\n\n    .menu-item.danger:hover {\n      background: rgba(239, 68, 68, 0.15);\n      color: #ff6b6b;\n    }\n\n    .menu-item.danger i {\n      color: rgba(239, 68, 68, 0.8);\n    }\n\n    .menu-item.danger:hover i {\n      color: #ff6b6b;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: rgba(255,255,255,0.1);\n      margin: 4px 0;\n    }\n\n    /* Rename Animation */\n    .conversation-item.renamed {\n      animation: renameHighlight 1500ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    @keyframes renameHighlight {\n      0% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), rgba(147, 51, 234, 0.4));\n        transform: scale(1.03);\n        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);\n      }\n      25% {\n        background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(147, 51, 234, 0.35));\n        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);\n      }\n      50% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));\n        transform: scale(1.02);\n        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);\n      }\n      75% {\n        background: linear-gradient(90deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.2));\n        box-shadow: 0 0 5px rgba(16, 185, 129, 0.2);\n      }\n      100% {\n        background: transparent;\n        transform: scale(1);\n        box-shadow: none;\n      }\n    }\n  "] }]
     }], () => [{ type: i1.ConversationStateService }, { type: i2.DialogService }, { type: i3.NotificationService }, { type: i4.ToastService }], { environmentId: [{
             type: Input
         }], currentUser: [{
             type: Input
         }], renamedConversationId: [{
             type: Input
+        }], onDocumentClick: [{
+            type: HostListener,
+            args: ['document:click']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationListComponent, { className: "ConversationListComponent", filePath: "src/lib/components/conversation/conversation-list.component.ts", lineNumber: 255 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationListComponent, { className: "ConversationListComponent", filePath: "src/lib/components/conversation/conversation-list.component.ts", lineNumber: 401 }); })();
 //# sourceMappingURL=conversation-list.component.js.map

package/dist/lib/components/conversation/conversation-list.component.js.map

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

package/dist/lib/components/mention/mention-dropdown.component.d.ts

@@ -38,6 +38,12 @@ export declare class MentionDropdownComponent implements OnInit, OnDestroy {
      * Track by function for ngFor
      */
     trackBySuggestion(index: number, item: MentionSuggestion): string;
+    /**
+     * Get icon classes - supports both Font Awesome and custom CSS classes
+     * Font Awesome icons start with 'fa-' (e.g., 'fa-solid fa-robot')
+     * Custom icons use their own prefix (e.g., 'mj-icon-skip', 'acme-icon-custom')
+     */
+    getIconClasses(iconClass: string): string | string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<MentionDropdownComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MentionDropdownComponent, "mj-mention-dropdown", never, { "suggestions": { "alias": "suggestions"; "required": false; }; "position": { "alias": "position"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "showAbove": { "alias": "showAbove"; "required": false; }; }, { "suggestionSelected": "suggestionSelected"; "closed": "closed"; }, never, never, false, never>;
 }

package/dist/lib/components/mention/mention-dropdown.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mention-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/mention/mention-dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EACZ,MAAM,EACN,SAAS,EAEV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;;AAEhF;;GAEG;AACH,qBAKa,wBAAyB,YAAW,MAAM,EAAE,SAAS;IACvD,WAAW,EAAE,iBAAiB,EAAE,CAAM;IACtC,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAuB;IAC9D,OAAO,EAAE,OAAO,CAAS;IACzB,SAAS,EAAE,OAAO,CAAS;IAE1B,kBAAkB,kCAAyC;IAC3D,MAAM,qBAA4B;IAErC,aAAa,EAAE,MAAM,CAAK;;IAIjC,QAAQ,IAAI,IAAI;IAEhB,WAAW,IAAI,IAAI;IAEnB;;OAEG;IAEH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA4BzC;;OAEG;IACH,gBAAgB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAIrD;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,GAAG,MAAM;yCA9EtD,wBAAwB;2CAAxB,wBAAwB;CAiFpC"}
+{"version":3,"file":"mention-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/mention/mention-dropdown.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,YAAY,EACZ,MAAM,EACN,SAAS,EAEV,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;;AAEhF;;GAEG;AACH,qBAQa,wBAAyB,YAAW,MAAM,EAAE,SAAS;IACvD,WAAW,EAAE,iBAAiB,EAAE,CAAM;IACtC,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAuB;IAC9D,OAAO,EAAE,OAAO,CAAS;IACzB,SAAS,EAAE,OAAO,CAAS;IAE1B,kBAAkB,kCAAyC;IAC3D,MAAM,qBAA4B;IAErC,aAAa,EAAE,MAAM,CAAK;;IAIjC,QAAQ,IAAI,IAAI;IAEhB,WAAW,IAAI,IAAI;IAEnB;;OAEG;IAEH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA4BzC;;OAEG;IACH,gBAAgB,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAIrD;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,GAAG,MAAM;IAIjE;;;;OAIG;IACH,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE;yCAvFzC,wBAAwB;2CAAxB,wBAAwB;CAyGpC"}