@acorex/modules 20.1.0 → 20.2.0-next.1

package/fesm2022/acorex-modules-conversation.mjs

@@ -6,7 +6,7 @@ import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
 import * as i1$2 from '@angular/common';
 import { AsyncPipe, CommonModule, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, input, signal, viewChild, DestroyRef, ChangeDetectionStrategy, Component, ViewEncapsulation, computed, output, effect, afterNextRender, HostListener, importProvidersFrom, NgModule } from '@angular/core';
+import { Injectable, inject, input, signal, viewChild, DestroyRef, ChangeDetectionStrategy, Component, ViewEncapsulation, computed, output, effect, HostListener, afterNextRender, importProvidersFrom, NgModule } from '@angular/core';
 import * as i2$3 from '@angular/router';
 import { ActivatedRoute, Router, NavigationEnd, RouterModule, ROUTES } from '@angular/router';
 import { createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPFilterOperatorMiddlewareService, AXP_MENU_PROVIDER } from '@acorex/platform/common';
@@ -53,6 +53,7 @@ import { AXFormatModule } from '@acorex/core/format';
 import * as i4$1 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXMOsNotificationService, AXMNotificationConnectorService } from '@acorex/modules/notification-management';
 import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent } from '@acorex/platform/layout/components';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -93,6 +94,12 @@ const RootConfig = {
             source: `${config.module}.Message`,
             icon: 'fa-light fa-message',
         },
+        tab: {
+            name: 'tab',
+            title: `t("tab.plural-title", { scope: "${config.i18n}" })`,
+            source: `${config.module}.Tab`,
+            icon: 'fa-light fa-folder',
+        },
     },
 };
 
@@ -650,6 +657,234 @@ async function roomFactory(injector) {
     return entityDef;
 }
 
+class AXMConversationTabService extends AXMEntityCrudServiceImpl {
+}
+class AXMConversationTabServiceImpl extends AXMConversationTabService {
+    constructor() {
+        super(`${RootConfig.module.name}.${RootConfig.entities.tab.name}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationTabServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationTabServiceImpl }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMConversationTabServiceImpl, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+async function tabFactory(injector) {
+    const dataService = injector.get(AXMConversationTabService);
+    const i18n = RootConfig.config.i18n;
+    const entityDef = {
+        module: RootConfig.module.name,
+        name: RootConfig.entities.tab.name,
+        source: '',
+        title: RootConfig.entities.tab.title,
+        formats: {
+            individual: `t("tab.individual-title", { scope: "${i18n}" })`,
+            plural: RootConfig.entities.tab.title,
+            searchResult: {
+                title: '{{ title }}',
+                description: RootConfig.module.title,
+            },
+        },
+        relatedEntities: [],
+        groups: [
+            {
+                id: 'section',
+                title: `t("tab.basic-info", { scope: "${i18n}" })`,
+            },
+        ],
+        properties: [
+            {
+                name: 'name',
+                title: `t("tab.props.name", { scope: "${i18n}" })`,
+                groupId: 'section',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.text,
+                    },
+                },
+                validations: [{ rule: 'required' }],
+            },
+            {
+                name: 'title',
+                title: `t("tab.props.title", { scope: "${i18n}" })`,
+                groupId: 'section',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.text,
+                    },
+                },
+                validations: [{ rule: 'required' }],
+            },
+            {
+                name: 'color',
+                title: `t("tab.props.color", { scope: "${i18n}" })`,
+                groupId: 'section',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.color,
+                    },
+                },
+            },
+            {
+                name: 'rooms',
+                title: `t("tab.props.rooms", { scope: "${i18n}" })`,
+                groupId: 'section',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.lookup,
+                        options: {
+                            entity: `${RootConfig.module.name}.${RootConfig.entities.room.name}`,
+                            multiple: true,
+                        },
+                    },
+                },
+            },
+            {
+                name: 'excludeRooms',
+                title: `t("tab.props.excludeRooms", { scope: "${i18n}" })`,
+                groupId: 'section',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.lookup,
+                        options: {
+                            entity: `${RootConfig.module.name}.${RootConfig.entities.room.name}`,
+                            multiple: true,
+                        },
+                    },
+                },
+            },
+            {
+                name: 'includeRooms',
+                title: `t("tab.props.includeRooms", { scope: "${i18n}" })`,
+                groupId: 'section',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.lookup,
+                        options: {
+                            entity: `${RootConfig.module.name}.${RootConfig.entities.room.name}`,
+                            multiple: true,
+                        },
+                    },
+                },
+            },
+        ],
+        columns: [{ name: 'name' }, { name: 'title' }],
+        commands: {
+            create: {
+                execute: async (data) => {
+                    const res = await dataService.insertOne(data);
+                    return { id: res };
+                },
+            },
+            delete: {
+                execute: async (id) => {
+                    return await dataService.deleteOne(id);
+                },
+            },
+            update: {
+                execute: async (data) => {
+                    return await dataService.updateOne(data.id, data);
+                },
+            },
+        },
+        queries: {
+            byKey: {
+                execute: async (id) => {
+                    return await dataService.getOne(id);
+                },
+                type: AXPEntityQueryType.Single,
+            },
+            list: {
+                execute: async (e) => {
+                    return await dataService.query({ skip: e.skip, take: e.take, filter: e.filter });
+                },
+                type: AXPEntityQueryType.List,
+            },
+        },
+        interfaces: {
+            master: {
+                create: {
+                    sections: [{ id: 'section' }],
+                    properties: [
+                        { name: 'name', layout: { positions: { lg: { colSpan: 6 } } } },
+                        { name: 'title', layout: { positions: { lg: { colSpan: 6 } } } },
+                        { name: 'color', layout: { positions: { lg: { colSpan: 12 } } } },
+                        { name: 'rooms', layout: { positions: { lg: { colSpan: 12 } } } },
+                        { name: 'excludeRooms', layout: { positions: { lg: { colSpan: 12 } } } },
+                        { name: 'includeRooms', layout: { positions: { lg: { colSpan: 12 } } } },
+                    ],
+                },
+                update: {
+                    sections: [{ id: 'section' }],
+                    properties: [
+                        { name: 'name', layout: { positions: { lg: { colSpan: 6 } } } },
+                        { name: 'title', layout: { positions: { lg: { colSpan: 6 } } } },
+                        { name: 'color', layout: { positions: { lg: { colSpan: 12 } } } },
+                        { name: 'rooms', layout: { positions: { lg: { colSpan: 12 } } } },
+                        { name: 'excludeRooms', layout: { positions: { lg: { colSpan: 12 } } } },
+                        { name: 'includeRooms', layout: { positions: { lg: { colSpan: 12 } } } },
+                    ],
+                },
+                single: {
+                    title: '{{title}}',
+                    sections: [{ id: 'section' }],
+                    properties: [
+                        { name: 'name', layout: { positions: { lg: { colSpan: 6 } } } },
+                        { name: 'title', layout: { positions: { lg: { colSpan: 6 } } } },
+                    ],
+                    actions: [],
+                },
+                list: {
+                    actions: [
+                        {
+                            title: `t("create", { scope: "common" })`,
+                            command: 'create-entity',
+                            priority: 'primary',
+                            type: 'create',
+                            scope: AXPEntityCommandScope.TypeLevel,
+                        },
+                        {
+                            title: 't("deleteItems", { scope: "common" })',
+                            command: 'delete-entity',
+                            priority: 'primary',
+                            type: 'delete',
+                            scope: AXPEntityCommandScope.Selected,
+                        },
+                        {
+                            title: 't("detail", { scope: "common" })',
+                            command: 'open-entity',
+                            priority: 'secondary',
+                            type: 'view',
+                            scope: AXPEntityCommandScope.Individual,
+                        },
+                        {
+                            title: 't("delete", { scope: "common" })',
+                            command: 'delete-entity',
+                            priority: 'secondary',
+                            type: 'delete',
+                            scope: AXPEntityCommandScope.Individual,
+                        },
+                    ],
+                    views: [
+                        createAllQueryView({
+                            columns: ['name', 'title'],
+                            sorts: [{ name: 'name', dir: 'asc' }],
+                        }),
+                    ],
+                },
+            },
+        },
+    };
+    return entityDef;
+}
+
 class AXMConversationModuleEntityProvider {
     constructor(injector) {
         this.injector = injector;
@@ -667,6 +902,8 @@ class AXMConversationModuleEntityProvider {
                 return roomFactory(this.injector);
             case 'message':
                 return messageFactory(this.injector);
+            case 'tab':
+                return tabFactory(this.injector);
             default:
                 return null;
         }
@@ -1465,7 +1702,7 @@ class AXMUserLookupPopup extends AXBasePageComponent {
         <ax-button
           text="Accept & Send"
           color="primary"
-          [disabled]="context()?.lookup?.length > 1 && !context()?.title"
+          [disabled]="(context()?.lookup?.length > 1 && !context()?.title) || !context()?.lookup?.length"
           (onClick)="handleClose()"
         ></ax-button>
       </ax-suffix>
@@ -1488,7 +1725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         <ax-button
           text="Accept & Send"
           color="primary"
-          [disabled]="context()?.lookup?.length > 1 && !context()?.title"
+          [disabled]="(context()?.lookup?.length > 1 && !context()?.title) || !context()?.lookup?.length"
           (onClick)="handleClose()"
         ></ax-button>
       </ax-suffix>
@@ -1574,6 +1811,38 @@ const AXMCommentPopupWorkflow = {
     },
 };
 
+function convertChatMessageToNotification(room, message, currentUser) {
+    const mapToNotificationUser = (user) => {
+        return {
+            id: user.id,
+            name: user.fullName || '',
+            image: '', // You might want to add an avatar URL here if available
+            username: user.username || '',
+            firstName: user.fullName?.split(' ')[0] || '',
+            lastName: user.fullName?.split(' ')[1] || '',
+        };
+    };
+    return {
+        channel: 'InApp',
+        template: {
+            category: 'Inbox',
+            prority: 'Notice',
+            icon: 'fa-light fa-comment',
+            isPinned: false,
+        },
+        title: room.title || 'New Message',
+        body: message.message.content,
+        user: mapToNotificationUser(message.author),
+        content: {
+            type: 'Notification',
+            data: {
+                roomId: room.id,
+            },
+        },
+        readAt: null,
+    };
+}
+
 //#region ----   Abstract Chat Service   ----
 class AXMChatService {
 }
@@ -1582,6 +1851,7 @@ class AXMChatServiceImpl {
     constructor() {
         this.roomService = inject(AXMRoomService);
         this.messageService = inject(AXMMessageService);
+        this.tabService = inject(AXMConversationTabService);
         this.sessionService = inject(AXPSessionService);
         this.usersService = inject(AXMUsersEntityService);
         this._messageSent$ = new Subject();
@@ -1598,6 +1868,10 @@ class AXMChatServiceImpl {
         this.roomSeen$ = this._roomSeen$.asObservable();
         this._messageReacted$ = new Subject();
         this.messageReacted$ = this._messageReacted$.asObservable();
+        this._tabAdded$ = new Subject();
+        this.tabAdded$ = this._tabAdded$.asObservable();
+        this._tabRemoved$ = new Subject();
+        this.tabRemoved$ = this._tabRemoved$.asObservable();
         this._typingStatus$ = new Subject();
         this.typingStatus$ = this._typingStatus$.asObservable();
     }
@@ -1755,6 +2029,88 @@ class AXMChatServiceImpl {
         });
     }
     //#endregion
+    //#region ----   ChatTabService Implementations   ----
+    async createTab(data) {
+        const tabId = await this.tabService.insertOne(data);
+        const newTab = await this.getTab(tabId);
+        this._tabAdded$.next(newTab);
+        return newTab;
+    }
+    async getTab(tabId) {
+        return this.tabService.getOne(tabId);
+    }
+    async listTabs(skip = 0, take = 100) {
+        return this.tabService.query({ skip, take });
+    }
+    async updateTab(tabId, data) {
+        return this.tabService.updateOne(tabId, data);
+    }
+    async deleteTab(tabId) {
+        try {
+            await this.tabService.deleteOne(tabId);
+            this._tabRemoved$.next(tabId);
+            return true;
+        }
+        catch (error) {
+            console.error(`Error deleting tab ${tabId}:`, error);
+            return false;
+        }
+    }
+    async addIncludeRoomToTab(tabId, roomId) {
+        const tab = await this.getTab(tabId);
+        const room = await this.getRoom(roomId);
+        if (tab && room) {
+            const updatedRooms = [...tab.includeRooms, room];
+            return this.updateTab(tabId, { includeRooms: updatedRooms });
+        }
+        else {
+            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        }
+    }
+    async removeIncludeRoomFromTab(tabId, roomId) {
+        const tab = await this.getTab(tabId);
+        const room = await this.getRoom(roomId);
+        if (tab && room) {
+            if (tab.includeRooms.some((r) => r.id === roomId)) {
+                const updatedRooms = tab.includeRooms.filter((r) => r.id !== roomId);
+                return this.updateTab(tabId, { includeRooms: updatedRooms });
+            }
+            else {
+                throw new Error(`${tabId} tab does not include room with ID ${roomId}.`);
+            }
+        }
+        else {
+            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        }
+    }
+    async addExcludeRoomToTab(tabId, roomId) {
+        const tab = await this.getTab(tabId);
+        const room = await this.getRoom(roomId);
+        if (tab && room) {
+            const updatedRooms = [...tab.excludeRooms, room];
+            return this.updateTab(tabId, { excludeRooms: updatedRooms });
+        }
+        else {
+            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        }
+    }
+    async removeExcludeRoomFromTab(tabId, roomId) {
+        const tab = await this.getTab(tabId);
+        const room = await this.getRoom(roomId);
+        if (tab && room) {
+            if (tab.excludeRooms.some((r) => r.id === roomId)) {
+                const updatedRooms = tab.excludeRooms.filter((r) => r.id !== roomId);
+                return this.updateTab(tabId, { excludeRooms: updatedRooms });
+            }
+            else {
+                throw new Error(`${tabId} tab does not exclude room with ID ${roomId}.`);
+            }
+        }
+        else {
+            throw new Error(`Tab with ID ${tabId} or room with ID ${roomId} not found.`);
+        }
+    }
+    //#endregion
     //#region ----   ChatMessageService Implementations   ----
     async sendMessage(roomId, content, contentType = 'text', replyId, userId) {
         const author = userId ? await this.getUserInfo(userId) : this.getCurrentUser();
@@ -2034,47 +2390,57 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         this.dialogService = inject(AXDialogService);
         this.router = inject(Router);
         this.unsubscribe = inject(AXUnsubscriber);
+        this.osNotificationService = inject(AXMOsNotificationService);
+        this.notificationConnectorService = inject(AXMNotificationConnectorService);
         // View Children
         this.tab = viewChild('tab', ...(ngDevMode ? [{ debugName: "tab" }] : []));
         this.container = viewChild('container', ...(ngDevMode ? [{ debugName: "container" }] : []));
         // State signals
         this.rooms = signal([], ...(ngDevMode ? [{ debugName: "rooms" }] : []));
         this.allRooms = signal([], ...(ngDevMode ? [{ debugName: "allRooms" }] : []));
+        this.tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
         this.selectedRoom = signal(null, ...(ngDevMode ? [{ debugName: "selectedRoom" }] : []));
         this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.typingStatus = signal({}, ...(ngDevMode ? [{ debugName: "typingStatus" }] : []));
         this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-        this.activeTab = signal(0, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+        this.activeTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : []));
         this.isSearching = signal(false, ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
         this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
         this.showSearch = signal(true, ...(ngDevMode ? [{ debugName: "showSearch" }] : []));
         this.placeholder = signal('Search chats...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
         // Computed signals
-        // filteredRooms = computed(() => {
-        //   let chatRooms = this.rooms();
-        //   // Apply search filter
-        //   if (this.searchQuery()) {
-        //     const searchText = this.searchQuery().toLowerCase();
-        //     chatRooms = chatRooms.filter(async (room) => {
-        //       const user = await this.userService.getOne(room.members?.[0]?.id);
-        //       const roomName = `${user.firstName} ${user.lastName}` || '';
-        //       const lastMessage = room.lastMessage?.message?.content || '';
-        //       return roomName.toLowerCase().includes(searchText) || lastMessage.toLowerCase().includes(searchText);
-        //     });
-        //   }
-        //   // Apply tab filter
-        //   if (this.activeTab() === 1) {
-        //     return chatRooms.filter((room) => room.unreadCount > 0);
-        //   }
-        //   return chatRooms;
-        // });
+        this.activeTab = computed(() => {
+            const tabs = this.tabs();
+            const index = this.activeTabIndex();
+            if (tabs.length > 0 && index >= 0 && index < tabs.length) {
+                return tabs[index];
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
         this.filteredRooms = signal([], ...(ngDevMode ? [{ debugName: "filteredRooms" }] : []));
-        this.searchEffect = effect(async () => {
-            let chatRooms = this.allRooms();
-            // Search filter
+        this.searchEffect = effect(() => {
+            const allRooms = this.allRooms();
+            let chatRooms = [...allRooms]; // Start with all rooms
+            // Tab filter
+            const activeTab = this.activeTab();
+            if (activeTab) {
+                if (activeTab.name === 'unread') {
+                    // Special local state for unread
+                    chatRooms = allRooms.filter((room) => room.unreadCount > 0);
+                }
+                else if (activeTab.name === 'all') {
+                    // Local state for all
+                    chatRooms = allRooms;
+                }
+                else {
+                    // For other tabs defined by the service
+                    const includedIds = new Set(activeTab.includeRooms.map((r) => r.id));
+                    chatRooms = allRooms.filter((room) => includedIds.has(room.id));
+                }
+            }
+            // Search filter (applies on top of tab filter)
             const query = (this.searchQuery() || '').toLowerCase();
             if (query) {
-                // Perform async enrichment for names
                 const filtered = [];
                 for (const room of chatRooms) {
                     try {
@@ -2100,40 +2466,25 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
                 }
                 chatRooms = filtered;
             }
-            // Tab filter
-            if (this.activeTab() === 1) {
-                chatRooms = chatRooms.filter((room) => room.unreadCount > 0);
-            }
             this.filteredRooms.set(chatRooms);
         }, ...(ngDevMode ? [{ debugName: "searchEffect" }] : []));
         this.unreadCount = computed(() => this.allRooms().filter((i) => i.unreadCount > 0).length, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
         this.allCount = computed(() => this.allRooms().length, ...(ngDevMode ? [{ debugName: "allCount" }] : []));
         this.hasUnread = computed(() => this.allRooms().filter((i) => i.unreadCount > 0).length > 0, ...(ngDevMode ? [{ debugName: "hasUnread" }] : []));
         this.totalCount = computed(() => this.allRooms().length || 0, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
-        //switch tab to unread if there is no unread
-        this.autoSwitchTab = effect(() => {
-            if (this.activeTab() === 1 && !this.hasUnread()) {
-                this.activeTab.set(0);
-            }
-        }, ...(ngDevMode ? [{ debugName: "autoSwitchTab" }] : []));
-        this.af = afterNextRender(() => {
-            const tabComponent = this.tab();
-            if (tabComponent) {
-                tabComponent.onActiveTabChanged.subscribe((i) => {
-                    this.activeTab.set(i.index);
-                });
-            }
-            //(window as any).a = this.container()?.startSideDrawer();
-        });
     }
-    onTabChange(event) {
-        this.activeTab.set(event.index);
+    async deleteTab(tab) {
+        const result = await this.dialogService.confirm('Delete Tab', `Are you sure you want to delete the "${tab.title}" tab?`);
+        if (result) {
+            await this.chatService.deleteTab(tab.id);
+            await this.loadTabs();
+        }
     }
     async ngOnInit() {
         super.ngOnInit();
         this.isLoading.set(true);
         this.error.set(null);
-        await this.loadChats();
+        await Promise.all([this.loadChats(), this.loadTabs(), this.osNotificationService.requestPermission()]);
         this.isLoading.set(false);
         //
         this.router.events
@@ -2191,15 +2542,38 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
             const roomIndex = rooms.findIndex((r) => r.id === message.roomId);
             if (roomIndex > -1) {
                 const roomToUpdate = rooms[roomIndex];
+                const isCurrentUser = message.author.id === this.sessionService.user?.id;
                 const updatedRoom = {
                     ...roomToUpdate,
                     lastMessage: message,
-                    unreadCount: message.author.id !== this.sessionService.user?.id
-                        ? (roomToUpdate.unreadCount || 0) + 1
-                        : roomToUpdate.unreadCount,
+                    unreadCount: !isCurrentUser ? (roomToUpdate.unreadCount || 0) + 1 : roomToUpdate.unreadCount,
                 };
                 const newRooms = [updatedRoom, ...rooms.filter((r) => r.id !== message.roomId)];
                 this.allRooms.set(newRooms);
+                //
+                if (!isCurrentUser && this.selectedRoom()?.id !== message.roomId) {
+                    const notification = convertChatMessageToNotification(roomToUpdate, message, this.sessionService.user);
+                    this.notificationConnectorService.create({
+                        ...notification,
+                        id: message.id,
+                        entityName: 'notifications',
+                        createAt: new Date(),
+                    }, {
+                        onClick: () => {
+                            this.router.navigate([roomToUpdate.id], { relativeTo: this.activatedRoute });
+                        },
+                        activeWindow: true,
+                    });
+                    // this.osNotificationService.show(notification.title || 'Notification', {
+                    //   body: notification.body || 'No body',
+                    //   icon: notification.user.image || '',
+                    //   onClick: () => {
+                    //     this.router.navigate([roomToUpdate.id], { relativeTo: this.activatedRoute });
+                    //   },
+                    //   activeWindow: true,
+                    // });
+                }
+                //
             }
             else {
                 // New room, fetch it and add it to the top.
@@ -2291,8 +2665,8 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
     async execute(command) {
         switch (command.name) {
             case 'remove-chat':
-                const result = await this.dialogService.confirm('Remove Chat', 'Are you sure you want to remove this chat?');
-                if (result) {
+                const response = await this.dialogService.confirm('Remove Chat', 'Are you sure you want to remove this chat?');
+                if (response.result) {
                     await this.chatService.deleteRoom(this.selectedRoom()?.id);
                     this.router.navigate(['./'], { relativeTo: this.activatedRoute });
                 }
@@ -2313,6 +2687,43 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
         }
     }
     // Methods
+    getRoomCountForTab(tab) {
+        const allRooms = this.allRooms();
+        if (tab.name === 'all') {
+            return allRooms.length;
+        }
+        if (tab.name === 'unread') {
+            return allRooms.filter((room) => room.unreadCount > 0).length;
+        }
+        const includedIds = new Set(tab.includeRooms.map((r) => r.id));
+        return allRooms.filter((room) => includedIds.has(room.id)).length;
+    }
+    async loadTabs() {
+        const localTabs = [
+            {
+                id: 'all-local',
+                name: 'all',
+                title: 'All',
+                excludeRooms: [],
+                includeRooms: [],
+            },
+            {
+                id: 'unread-local',
+                name: 'unread',
+                title: 'Unread',
+                excludeRooms: [],
+                includeRooms: [],
+            },
+        ];
+        try {
+            const result = await this.chatService.listTabs();
+            this.tabs.set([...localTabs, ...result.items]);
+        }
+        catch (error) {
+            console.error('Failed to load tabs:', error);
+            this.tabs.set(localTabs);
+        }
+    }
     async loadChats() {
         try {
             // Use the updated service method to get rooms with last messages
@@ -2380,6 +2791,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
     async onNewConversation() {
         const popupConfig = {
             header: true,
+            title: 'New Conversation',
             size: 'sm',
             draggable: true,
             hasBackdrop: true,
@@ -2399,7 +2811,6 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
             this.toastService.danger('Failed to create room');
         }
     }
-    ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMChatComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXMChatComponent, isStandalone: true, selector: "axm-chat", host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, providers: [
             {
@@ -2407,7 +2818,7 @@ class AXMChatComponent extends AXPPageLayoutBaseComponent {
                 useExisting: AXMChatComponent,
             },
             AXUnsubscriber,
-        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"hasUnread()\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data", "typing", "lastMessageReaction"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "tab", first: true, predicate: ["tab"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full ax-mb-2\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4': ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"getRoomCountForTab(tab).toString()\"\n              [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"tabs().length > 0\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    } @else if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    } @else {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        } @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search.\n            } @else {\n              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\n      <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n        <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-plus\"></i>\n            </ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: AXMChatItemComponent, selector: "axm-chat-item", inputs: ["data", "typing", "lastMessageReaction"], outputs: ["pressChatItem"] }, { kind: "ngmodule", type: 
                 // Common Modules
                 CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: 
                 // Acorex Core Modules
@@ -2473,7 +2884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                                 animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
                             ]),
                         ]),
-                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #template>\n  <!-- Tabs -->\n  <div class=\"ax-px-4\">\n    @if (hasUnread()) {\n      <ax-tabs\n        #tab\n        class=\"ax-text-neutral-400\"\n        [look]=\"'with-line'\"\n        [location]=\"'bottom'\"\n        [fitParent]=\"true\"\n        (onActiveTabChanged)=\"onTabChange($event)\"\n      >\n        <ax-tab-item text=\"All\" [active]=\"activeTab() === 0\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"totalCount().toString()\"\n              [color]=\"activeTab() === 0 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n        <ax-tab-item text=\"Unread\" [active]=\"activeTab() === 1\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"unreadCount().toString()\"\n              [color]=\"activeTab() === 1 ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      </ax-tabs>\n    }\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"hasUnread()\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    }\n\n    <!-- Chat List -->\n    @if (!isLoading() && !error()) {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        }\n\n        <!-- Empty State -->\n        @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search\n            } @else {\n              No chats available\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n      <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n        <ax-prefix>\n          <ax-icon>\n            <i class=\"fa-solid fa-plus\"></i>\n          </ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n</ng-template>\n" }]
+                    ], template: "<axp-page-layout #container>\n  <axp-layout-start-side class=\"ax-border-e ax-lightest-surface ax-h-full\">\n    <axp-layout-header>\n      <axp-layout-title>{{ 'module-name' | translate: { scope: 'conversation' } | async }}</axp-layout-title>\n      <axp-layout-toolbar>\n        <ax-search-box\n          #searchInput\n          look=\"solid\"\n          [placeholder]=\"placeholder()\"\n          [value]=\"searchQuery()\"\n          (onValueChanged)=\"onSearch($event.value)\"\n          class=\"ax-w-full\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </axp-layout-toolbar>\n    </axp-layout-header>\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-max-w-80\">\n      @if (!layoutService.isMobileDevice()) {\n        <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n      }\n    </axp-layout-content>\n  </axp-layout-start-side>\n\n  <axp-page-content style=\"height: calc(100vh - 22rem)\">\n    @if (selectedRoom()) {\n      <router-outlet></router-outlet>\n    } @else if (layoutService.isMobileDevice()) {\n      <ax-search-box\n        #searchInput\n        look=\"solid\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"searchQuery()\"\n        (onValueChanged)=\"onSearch($event.value)\"\n        class=\"ax-w-full ax-mb-2\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-search-box>\n      <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n<ng-template #template>\n  <!-- Tabs -->\n  <div [class]=\"!layoutService.isMobileDevice() ? 'ax-px-4': ''\">\n    <ax-tabs\n      #tab\n      class=\"ax-text-neutral-400\"\n      [look]=\"'with-line'\"\n      [location]=\"'bottom'\"\n      [fitParent]=\"true\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n    >\n      @for (tab of tabs(); track tab.id; let i = $index) {\n        <ax-tab-item [text]=\"tab.title\" [active]=\"activeTabIndex() === i\">\n          <ax-suffix>\n            <ax-badge\n              [text]=\"getRoomCountForTab(tab).toString()\"\n              [color]=\"activeTabIndex() === i ? 'primary' : 'secondary'\"\n              class=\"ax-min-w-[1.5rem] ax-justify-center\"\n            ></ax-badge>\n          </ax-suffix>\n        </ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  <!-- Chat List Content -->\n  <div\n    class=\"ax-flex-1 ax-overflow-hidden ax-flex ax-flex-col ax-justify-between ax-min-w-80\"\n    [class.ax-border-t]=\"tabs().length > 0\"\n  >\n    <!-- Loading State -->\n    @if (isLoading()) {\n      <div class=\"ax-p-4 ax-space-y-4\">\n        @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {\n          <div class=\"ax-flex ax-items-center ax-space-x-3\">\n            <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full\"></ax-skeleton>\n            <div class=\"ax-flex-1 ax-space-y-2\">\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-3/4 ax-h-4 ax-rounded-md\"></ax-skeleton>\n              <ax-skeleton [animated]=\"true\" class=\"ax-w-1/2 ax-h-3 ax-rounded-md\"></ax-skeleton>\n            </div>\n          </div>\n        }\n      </div>\n    } @else if (error()) {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-p-4 ax-text-center\">\n        <ax-icon class=\"ax-text-danger ax-text-5xl ax-mb-3\">\n          <i class=\"fa-light fa-circle-exclamation\"></i>\n        </ax-icon>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-error' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-font-semibold ax-text-lg\">\n          {{ 'chat-try-again' | translate: { scope: 'conversation' } | async }}\n        </p>\n        <p class=\"ax-text-secondary ax-mb-4\">{{ error() }}</p>\n        <ax-button\n          [text]=\"'try-again' | translate: { scope: 'conversation' } | async\"\n          color=\"primary\"\n          (onClick)=\"refreshChat()\"\n        ></ax-button>\n      </div>\n    } @else {\n      <div class=\"ax-flex-1 ax-overflow-y-auto\">\n        @for (i of filteredRooms(); track i.id) {\n          <axm-chat-item\n            [data]=\"i\"\n            [typing]=\"$any(typingStatus()[i.id])\"\n            [lastMessageReaction]=\"i.lastMessage?.reactions?.[0]?.type ?? null\"\n            [attr.data-id]=\"i.id\"\n            (click)=\"openChat(i.id)\"\n            [class.ax-bg-dark]=\"selectedRoom()?.id === i.id\"\n            class=\"ax-transition-all ax-duration-100 hover:ax-bg-surface\"\n            [@fadeIn]\n            tabindex=\"0\"\n            (keydown.enter)=\"openChat(i.id)\"\n            role=\"button\"\n          ></axm-chat-item>\n        } @empty {\n          <div class=\"ax-p-4 ax-font-medium ax-text-center ax-text-secondary\">\n            @if (isSearching()) {\n              No chats found matching your search.\n            } @else {\n              There are no conversations in this tab.\n            }\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Footer Content -->\n    @if (!layoutService.isMobileDevice()) {\n      <div class=\"ax-border-t ax-border-divider ax-bg-lightest ax-p-4\">\n        <ax-button class=\"ax-w-full\" color=\"primary\" text=\"New Conversation\" (onClick)=\"onNewConversation()\">\n          <ax-prefix>\n            <ax-icon>\n              <i class=\"fa-solid fa-plus\"></i>\n            </ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    } @else {\n      <ax-button\n        class=\"ax-fixed ax-bottom-16 ax-right-8 !ax-rounded-full !ax-w-14 !ax-h-14 ax-shadow-lg\"\n        color=\"primary\"\n        (onClick)=\"onNewConversation()\"\n      >\n        <ax-icon class=\"ax-text-2xl\">\n          <i class=\"fa-solid fa-plus\"></i>\n        </ax-icon>\n      </ax-button>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { onKeydownHandler: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -2782,6 +3193,15 @@ class AXMChatPreviewComponent {
             value: '',
         }, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.roomId = '';
+        //GO TO LAST MESSAGE EFFECT.
+        this.#af = afterNextRender(() => {
+            setTimeout(() => {
+                const div = document.querySelector('ax-conversation-view > div');
+                if (div) {
+                    div.scrollTo({ top: div.scrollHeight, behavior: 'smooth' });
+                }
+            }, 500);
+        });
     }
     setHeight(height) {
         this.height.set(height);
@@ -2813,6 +3233,8 @@ class AXMChatPreviewComponent {
         //   }
         // });
     }
+    //GO TO LAST MESSAGE EFFECT.
+    #af;
     ngOnDestroy() {
         this.typingSubscription?.unsubscribe();
     }
@@ -3070,6 +3492,10 @@ class AXMConversationModule {
                 provide: AXMRoomService,
                 useClass: AXMRoomServiceImpl,
             },
+            {
+                provide: AXMConversationTabService,
+                useClass: AXMConversationTabServiceImpl,
+            },
             // Chat and Comment Services
             {
                 provide: AXMChatService,
@@ -3149,6 +3575,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             provide: AXMRoomService,
                             useClass: AXMRoomServiceImpl,
                         },
+                        {
+                            provide: AXMConversationTabService,
+                            useClass: AXMConversationTabServiceImpl,
+                        },
                         // Chat and Comment Services
                         {
                             provide: AXMChatService,
@@ -3191,5 +3621,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMChatComponent, AXMChatItemComponent, AXMChatPreviewComponent, AXMChatService, AXMChatServiceImpl, AXMCommentComponent, AXMCommentPopupComponent, AXMCommentPopupStartAction, AXMCommentPopupWorkflow, AXMCommentService, AXMCommentServiceImpl, AXMCommentWidgetViewComponent, AXMConversationModule, AXMMessageService, AXMMessageServiceImpl, AXMRoomService, AXMRoomServiceImpl, AXMUserLookupPopup, AXPCommentWidget, RootConfig, messageFactory, roomFactory };
+export { AXMChatComponent, AXMChatItemComponent, AXMChatPreviewComponent, AXMChatService, AXMChatServiceImpl, AXMCommentComponent, AXMCommentPopupComponent, AXMCommentPopupStartAction, AXMCommentPopupWorkflow, AXMCommentService, AXMCommentServiceImpl, AXMCommentWidgetViewComponent, AXMConversationModule, AXMConversationTabService, AXMConversationTabServiceImpl, AXMMessageService, AXMMessageServiceImpl, AXMRoomService, AXMRoomServiceImpl, AXMUserLookupPopup, AXPCommentWidget, RootConfig, messageFactory, roomFactory, tabFactory };
 //# sourceMappingURL=acorex-modules-conversation.mjs.map