@arthakosh/chat-widget 0.2.29 → 0.2.32

package/fesm2022/arthakosh-chat-widget.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, Inject, Injectable, EventEmitter, input, inject, ViewChild, Output, Input, Component, effect, ViewEncapsulation, computed, NgModule } from '@angular/core';
+import { InjectionToken, Inject, Injectable, signal, EventEmitter, input, inject, ViewChild, Output, Input, Component, effect, ViewEncapsulation, computed, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -30,99 +30,6 @@ import { trigger, transition, style, animate } from '@angular/animations';
 // chat.tokens.ts
 const CHAT_CONFIG = new InjectionToken('CHAT_CONFIG');
 
-class ChatService {
-    constructor(http, config) {
-        this.http = http;
-        this.config = config;
-        // private baseUrl = `https://coreuatarthkosh.sarjak.com`;
-        this.currentUser = signal(null);
-        this.userList = signal([]);
-        this.archiveRoomId = signal('');
-        this.notifications = signal([]);
-        this.hasNewNotification = signal(false);
-    }
-    get baseUrl() {
-        return this.config.apiBaseUrl;
-    }
-    /* ---------------- CHAT ROOMS ---------------- */
-    createRoom(roomId, name, metadata, createdBy, username, chatUsers) {
-        return this.http.post(`${this.baseUrl}/api/chat/chatrooms/create/${roomId}/`, {
-            name,
-            metadata,
-            createdBy,
-            username,
-            chatUsers
-        });
-    }
-    getRoomUsers(roomId) {
-        return this.http.get(`${this.baseUrl}/api/chat/chatrooms/get_user/${roomId}/users/`).pipe(map(list => list.map(u => ({
-            id: u.UserId,
-            username: u.UserName
-        }))));
-    }
-    addUserToRoom(roomId, userId, userName, createdBy) {
-        return this.http.post(`${this.baseUrl}/api/chat/chatrooms/add_user/${roomId}/users/add/`, {
-            userId,
-            userName,
-            createdBy
-        });
-    }
-    /* ---------------- MESSAGES ---------------- */
-    getMessages(roomId, since) {
-        const params = {};
-        if (since)
-            params.since = since;
-        return this.http.get(`${this.baseUrl}/api/chat/messages/rooms/all_messages/${roomId}/`, { params }).pipe(map(list => list.map(m => ({
-            id: m.id,
-            chatRoomId: m.chatRoomId,
-            senderId: m.senderId,
-            senderName: m.senderName,
-            content: m.content,
-            replyToMessageId: m.replyToMessageId,
-            createdAt: m.createdAt,
-            hasAttachment: m.hasAttachment ?? false,
-        }))));
-    }
-    sendMessage(roomId, payload) {
-        return this.http.post(`${this.baseUrl}/api/chat/messages/rooms/send/${roomId}/`, payload).pipe(map(m => ({
-            id: m.id,
-            chatRoomId: m.chatRoomId,
-            senderId: m.senderId,
-            senderName: m.senderName,
-            content: m.content,
-            replyToMessageId: m.replyToMessageId,
-            createdAt: m.createdAt,
-            hasAttachment: m.hasAttachment ?? false,
-        })));
-    }
-    getRooms(loggedInUserId, chatRoomId) {
-        let url = `${this.baseUrl}/api/chat/chatrooms/${loggedInUserId}`;
-        if (chatRoomId) {
-            url += `/${chatRoomId}`;
-        }
-        return this.http.get(`${url}/`);
-    }
-    archiveRoom(roomId) {
-        return this.http.delete(`${this.baseUrl}/api/chat/chatrooms/archive/${roomId}/`);
-    }
-    notifyArrival() {
-        this.hasNewNotification.set(true);
-        // auto-reset after animation
-        setTimeout(() => {
-            this.hasNewNotification.set(false);
-        }, 1200);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, deps: [{ token: i1.HttpClient }, { token: CHAT_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CHAT_CONFIG]
-                }] }] });
-
 class SocketService {
     constructor(config) {
         this.config = config;
@@ -214,6 +121,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     args: [CHAT_CONFIG]
                 }] }] });
 
+class ChatService {
+    constructor(http, config, socket) {
+        this.http = http;
+        this.config = config;
+        this.socket = socket;
+        // private baseUrl = `https://coreuatarthkosh.sarjak.com`;
+        this.currentUser = signal(null);
+        this.userList = signal([]);
+        this.archiveRoomId = signal('');
+        this.notifications = signal([]);
+        this.hasNewNotification = signal(false);
+        this.listenForNotifications();
+    }
+    get baseUrl() {
+        return this.config.apiBaseUrl;
+    }
+    /* ---------------- CHAT ROOMS ---------------- */
+    createRoom(roomId, name, metadata, createdBy, username, chatUsers) {
+        return this.http.post(`${this.baseUrl}/api/chat/chatrooms/create/${roomId}/`, {
+            name,
+            metadata,
+            createdBy,
+            username,
+            chatUsers
+        });
+    }
+    getRoomUsers(roomId) {
+        return this.http.get(`${this.baseUrl}/api/chat/chatrooms/get_user/${roomId}/users/`).pipe(map(list => list.map(u => ({
+            id: u.UserId,
+            username: u.UserName
+        }))));
+    }
+    addUserToRoom(roomId, userId, userName, createdBy) {
+        return this.http.post(`${this.baseUrl}/api/chat/chatrooms/add_user/${roomId}/users/add/`, {
+            userId,
+            userName,
+            createdBy
+        });
+    }
+    /* ---------------- MESSAGES ---------------- */
+    getMessages(roomId, since) {
+        const params = {};
+        if (since)
+            params.since = since;
+        return this.http.get(`${this.baseUrl}/api/chat/messages/rooms/all_messages/${roomId}/`, { params }).pipe(map(list => list.map(m => ({
+            id: m.id,
+            chatRoomId: m.chatRoomId,
+            senderId: m.senderId,
+            senderName: m.senderName,
+            content: m.content,
+            replyToMessageId: m.replyToMessageId,
+            createdAt: m.createdAt,
+            hasAttachment: m.hasAttachment ?? false,
+        }))));
+    }
+    sendMessage(roomId, payload) {
+        return this.http.post(`${this.baseUrl}/api/chat/messages/rooms/send/${roomId}/`, payload).pipe(map(m => ({
+            id: m.id,
+            chatRoomId: m.chatRoomId,
+            senderId: m.senderId,
+            senderName: m.senderName,
+            content: m.content,
+            replyToMessageId: m.replyToMessageId,
+            createdAt: m.createdAt,
+            hasAttachment: m.hasAttachment ?? false,
+        })));
+    }
+    getRooms(loggedInUserId, chatRoomId) {
+        let url = `${this.baseUrl}/api/chat/chatrooms/${loggedInUserId}`;
+        if (chatRoomId) {
+            url += `/${chatRoomId}`;
+        }
+        return this.http.get(`${url}/`);
+    }
+    archiveRoom(roomId) {
+        return this.http.delete(`${this.baseUrl}/api/chat/chatrooms/archive/${roomId}/`);
+    }
+    listenForNotifications() {
+        // 🔔 ADDED TO ROOM — only added user
+        this.socket.on('addedToRoom').subscribe((msg) => {
+            if (msg.addedUserId !== this.currentUser().userId)
+                return;
+            this.upsertNotification({
+                roomId: msg.chatRoomId,
+                roomName: msg.roomName,
+                type: 'added'
+            });
+        });
+        // 🔔 NEW MESSAGE — everyone EXCEPT sender
+        this.socket.on('newMessage').subscribe((msg) => {
+            if (msg.senderId === this.currentUser().userId)
+                return;
+            this.upsertNotification({
+                roomId: msg.chatRoomId,
+                type: 'message',
+                lastMessage: msg.content
+            });
+        });
+    }
+    upsertNotification(data) {
+        this.notifications.update(list => {
+            const index = list.findIndex(n => n.roomId === data.roomId);
+            if (index !== -1) {
+                const n = list[index];
+                list[index] = {
+                    ...n,
+                    unreadCount: n.unreadCount + 1,
+                    lastMessage: data.lastMessage ?? n.lastMessage,
+                    timestamp: Date.now()
+                };
+                return [...list];
+            }
+            return [
+                ...list,
+                {
+                    roomId: data.roomId,
+                    roomName: data.roomName,
+                    type: data.type,
+                    unreadCount: 1,
+                    lastMessage: data.lastMessage,
+                    timestamp: Date.now()
+                }
+            ];
+        });
+        this.notifyArrival();
+    }
+    clearRoom(roomId) {
+        this.notifications.update(list => list.filter(n => n.roomId !== roomId));
+    }
+    clearAll() {
+        this.notifications.set([]);
+    }
+    notifyArrival() {
+        this.hasNewNotification.set(true);
+        // auto-reset after animation
+        setTimeout(() => {
+            this.hasNewNotification.set(false);
+        }, 1200);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, deps: [{ token: i1.HttpClient }, { token: CHAT_CONFIG }, { token: SocketService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CHAT_CONFIG]
+                }] }, { type: SocketService }] });
+
 class ChatWindowComponent {
     constructor() {
         this.header = 'Chat';
@@ -265,12 +322,6 @@ class ChatWindowComponent {
         this.socket.on('newMessage').subscribe(msg => {
             if (msg.chatRoomId === this.chatRoomId) {
                 this.messages.update(list => [...list, msg]);
-                this.upsertNotification({
-                    roomId: msg.chatRoomId,
-                    // roomName: msg.roomName,
-                    type: 'message',
-                    // lastMessage: msg.message
-                });
             }
             // if (msg.senderId !== this.chatService.currentUser().userId) {
             //   this.messageService.add({
@@ -296,11 +347,6 @@ class ChatWindowComponent {
             if (msg.chatRoomId === this.chatRoomId) {
                 this.loadUsers();
                 console.log('addedToRoom', msg);
-                this.upsertNotification({
-                    roomId: msg.chatRoomId,
-                    roomName: msg.roomName,
-                    type: 'added'
-                });
             }
         });
         this.socket.on('userAlreadyInRoom').subscribe((msg) => {
@@ -376,39 +422,6 @@ class ChatWindowComponent {
     closeChat() {
         this.onClose.emit();
     }
-    upsertNotification(data) {
-        this.chatService.notifications.update(list => {
-            const index = list.findIndex(n => n.roomId === data.roomId);
-            if (index !== -1) {
-                const n = list[index];
-                list[index] = {
-                    ...n,
-                    unreadCount: n.unreadCount + 1,
-                    lastMessage: data.lastMessage ?? n.lastMessage,
-                    timestamp: Date.now()
-                };
-                return [...list];
-            }
-            return [
-                ...list,
-                {
-                    roomId: data.roomId,
-                    roomName: data.roomName,
-                    type: data.type,
-                    unreadCount: 1,
-                    lastMessage: data.lastMessage,
-                    timestamp: Date.now()
-                }
-            ];
-        });
-        this.chatService.notifyArrival();
-    }
-    clearRoom(roomId) {
-        this.chatService.notifications.update(list => list.filter(n => n.roomId !== roomId));
-    }
-    clearAll() {
-        this.chatService.notifications.set([]);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ChatWindowComponent, isStandalone: true, selector: "app-chat-window", inputs: { chatRoomId: { classPropertyName: "chatRoomId", publicName: "chatRoomId", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: false, isRequired: false, transformFunction: null }, chatUsers: { classPropertyName: "chatUsers", publicName: "chatUsers", isSignal: false, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: false, isRequired: false, transformFunction: null }, refreshRoom: { classPropertyName: "refreshRoom", publicName: "refreshRoom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onArchive: "onArchive", onClose: "onClose" }, providers: [MessageService], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "reactionOverlay", first: true, predicate: ["reactionOverlay"], descendants: true }], ngImport: i0, template: "<p-toast></p-toast>\r\n\r\n<div [class.dark]=\"theme === 'dark'\" [class.floating]=\"mode === 'floating'\" [class.fullscreen]=\"mode === 'fullscreen'\"\r\n     [class.minimized]=\"minimized\" class=\"chat-window\">\r\n    <div class=\"chat-header\">\r\n        <div style=\"display: flex; flex-direction: column;\">\r\n            <div class=\"title\">\r\n                <span>{{ header }}</span>\r\n                <span *ngIf=\"users().length\">({{ users().length }} {{\r\n                        users().length == 1 ? 'participant' :\r\n                            'participants'\r\n                    }})</span>\r\n            </div>\r\n            <div>\r\n                <span>{{ metadata }}</span>\r\n            </div>\r\n        </div>\r\n        <div class=\"header-actions\">\r\n            <button (click)=\"toggleUsers()\" icon=\"pi pi-users\" pButton pTooltip=\"Toogle Users\"\r\n                    style=\"font-size: 0.5rem\"></button>\r\n            @if (showActions) {\r\n                <button (click)=\"toggleMinimize()\" [icon]=\"minimized ? 'pi pi-plus' : 'pi pi-minus'\" pButton\r\n                        pTooltip=\"Hide/Show\" style=\"font-size: 0.5rem\"></button>\r\n                <button (click)=\"archiveChat()\" icon=\"pi pi-trash\" pButton pTooltip=\"Archive\"\r\n                        style=\"font-size: 0.5rem\"></button>\r\n                <button (click)=\"closeChat()\" icon=\"pi pi-times\" pButton pTooltip=\"Close\"\r\n                        style=\"font-size: 0.5rem\"></button>\r\n            }\r\n        </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"!minimized\" class=\"chat-body\">\r\n        <div [class.users-hidden]=\"!showUsers\" class=\"chat-layout\">\r\n            <div [class.floating]=\"mode === 'floating'\" [class.fullscreen]=\"mode === 'fullscreen'\" class=\"chat-main\">\r\n                <div #messagesContainer [class.loading]=\"loading\" class=\"messages\">\r\n                    <div *ngFor=\"let msg of messages(); trackBy: trackById\" [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\"\r\n                         class=\"message-row\">\r\n                        <div class=\"message-bubble\">\r\n                            <div class=\"message-meta\">\r\n                <span class=\"sender\">\r\n                  <!-- *ngIf=\"msg.senderId !== chatService.currentUser().userId\" -->\r\n                    {{ msg.senderName }}\r\n                </span>\r\n                                <!-- <span class=\"time\">\r\n                                  {{ msg.createdAt | date: 'shortTime' }}\r\n                                </span> -->\r\n                            </div>\r\n\r\n                            <!-- MESSAGE TEXT -->\r\n                            <div class=\"message-content\">\r\n                                {{ msg.content }}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"input-area\">\r\n                    <div *ngIf=\"replyTo\" class=\"reply-banner\">\r\n                        <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n                        <button (click)=\"clearReply()\" class=\"p-button-text p-button-sm\" icon=\"pi pi-times\"\r\n                                pButton></button>\r\n                    </div>\r\n\r\n                    <textarea (keyup.enter)=\"send()\" [(ngModel)]=\"newMessage\" autoResize=\"true\" pInputTextarea\r\n                              placeholder=\"Type a message\"\r\n                              rows=\"2\">\r\n          </textarea>\r\n\r\n                    <div class=\"input-actions\">\r\n                        <button (click)=\"send()\" icon=\"pi pi-send\" label=\"Send\" pButton></button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"chat-sidebar\">\r\n                <div class=\"section-title\">Users</div>\r\n                <div class=\"user-list\">\r\n                    <div *ngFor=\"let u of users()\" class=\"user-row\">\r\n                        <p-avatar [label]=\"u.username[0]\"></p-avatar>\r\n                        <span>{{ u.username }}</span>\r\n                    </div>\r\n                </div>\r\n                @if (showActions) {\r\n                    <div class=\"user-list-add\">\r\n                        <p-dropdown [(ngModel)]=\"selectedUser\" [options]=\"chatService.userList()\"\r\n                                    optionLabel=\"full_name\"\r\n                                    placeholder=\"Select User\"/>\r\n                        <div style=\"margin-top: 2em;\">\r\n                            <button (click)=\"addUserToRoom()\" icon=\"pi pi-plus\" label=\"Add\" pButton></button>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".chat-window{width:35vw;max-width:95vw;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 8px 30px #0000001f;overflow:visible;font-size:14px;font-family:Inter,system-ui,sans-serif}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:#4f6ef7;color:#fff;padding:10px 14px}.chat-header .title{display:flex;flex-direction:row;gap:6px}.chat-header .title span{font-weight:600;font-size:14px}.chat-header .title small{font-size:11px;opacity:.85}.chat-body{display:flex;flex:1;background:#f5f7fb}.chat-layout{display:flex;flex:1;width:100%;overflow:hidden}.chat-layout.users-hidden .chat-sidebar{transform:translate(100%);opacity:0;pointer-events:none;width:0!important}.chat-layout.users-hidden .chat-main{flex:1 1 100%}.chat-main{flex:1;display:flex;flex-direction:column;background:#f5f7fb;height:70vh}.messages{flex:1;padding:16px 14px;overflow-y:auto;scroll-behavior:smooth}.message-row{display:flex;margin-bottom:14px;animation:messageIn .25s ease-out;position:relative;overflow:visible;padding-top:28px}@keyframes messageIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.message-row.incoming{justify-content:flex-start}.message-row.incoming .reaction-bar{left:12px}.message-row.outgoing{justify-content:flex-end}.message-row.outgoing .reaction-bar{right:12px;left:auto}.message-bubble{position:relative;max-width:72%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.45;word-break:break-word;overflow:visible}.message-row.incoming .message-bubble{background:#fff;color:#111;border-top-left-radius:6px;box-shadow:0 3px 10px #0000000f;overflow:visible}.message-bubble:after{content:\"\";position:absolute;bottom:-6px;right:8px}.message-row.incoming .message-bubble:after{content:\"\";position:absolute;left:-6px;top:12px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #ffffff}.message-row.outgoing .message-bubble{background:#4f6ef7;color:#fff;border-top-right-radius:6px;overflow:visible}.message-row.outgoing .message-bubble:after{content:\"\";position:absolute;right:-6px;top:12px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #4f6ef7}.message-meta{display:flex;justify-content:flex-end;font-size:10px;opacity:.6;margin-bottom:4px}.typing-indicator{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;background:#fff;border-radius:14px;box-shadow:0 2px 6px #00000014}.typing-indicator span{width:6px;height:6px;background:#999;border-radius:50%;animation:typingDots 1.4s infinite ease-in-out both}.typing-indicator span:nth-child(1){animation-delay:0s}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typingDots{0%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}to{transform:translateY(0);opacity:.4}}.input-area{background:#fff;padding:10px;border:1px solid #e5e7eb;display:flex;flex-direction:row;justify-content:space-between;gap:5px}.input-area textarea{max-height:60px;overflow:hidden;width:-webkit-fill-available}.reply-banner{background:#eef2ff;border-left:3px solid #4f6ef7;padding:6px 8px;font-size:12px;border-radius:8px;margin-bottom:6px;display:flex;justify-content:space-between}.input-actions{display:flex;justify-content:flex-end;margin-top:6px}.input-actions button{background:#4f6ef7;color:#fff;border-radius:999px;padding:0 16px}.chat-sidebar{background:#fff;border-left:1px solid #e5e7eb;box-shadow:-4px 0 10px #0000000d;display:flex;flex-direction:column}.section-title{font-weight:600;font-size:13px;padding:10px;border-bottom:1px solid #e5e7eb}.user-list{flex:1;overflow-y:auto;padding:8px;max-height:20em}.user-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px}.user-row:hover{background:#f1f5f9}.user-list-add{padding:10px;border-top:1px solid #e5e7eb}.header-actions{display:flex;align-items:center;gap:6px}.header-actions .p-button{width:32px;height:32px;padding:0;border-radius:50%;background:#ffffff26}.header-actions .p-button:hover{background:#ffffff40}.chat-header{min-height:48px}.header-actions{flex-shrink:0}.header-actions .p-button{transition:background .2s ease,transform .1s ease}.header-actions .p-button:active{transform:scale(.92)}.reaction-bar{position:absolute;top:0;left:12px;transform:translateY(-100%);background:#fff;border-radius:20px;padding:4px 8px;display:none;box-shadow:0 2px 8px #0003;z-index:9999}.message-bubble:hover .reaction-bar{display:flex}.reaction-bar span{cursor:pointer;font-size:16px}.reaction-summary{margin-top:4px;display:flex;gap:6px}.reaction-chip{background:#f1f1f1;padding:2px 6px;border-radius:12px;font-size:12px;position:relative}.reaction-users-tooltip{position:absolute;bottom:130%;left:50%;transform:translate(-50%);white-space:nowrap;background:#222;color:#fff;padding:4px 8px;border-radius:6px;z-index:10000;bottom:calc(100% + 6px)}.message-row,.message-bubble,.reaction-summary{overflow:visible!important}.p-tooltip{z-index:9999!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i7.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i8.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: OverlayPanelModule }] }); }
 }
@@ -645,11 +658,14 @@ class ChatWidgetNotificationComponent {
         this.open = !this.open;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWidgetNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ChatWidgetNotificationComponent, isStandalone: true, selector: "chat-widget-notification", ngImport: i0, template: "<div (click)=\"toggle()\" class=\"notif-icon\">\r\n    <i [class.pulse]=\"hasNew()\" class=\"pi pi-bell\">\r\n    </i>\r\n\r\n    @if (totalCount() > 0) {\r\n        <span class=\"dot\"></span>\r\n        <span class=\"badge\">\r\n        {{ totalCount() }}\r\n      </span>\r\n    }\r\n</div>\r\n\r\n@if (open) {\r\n    <div class=\"notif-panel\">\r\n        @for (n of notifications(); track n.roomId) {\r\n            <div class=\"notif-item\">\r\n                <strong>{{ n.roomName }}</strong>\r\n                <p>{{ n.lastMessage || 'You were added to this room' }}</p>\r\n                <span class=\"count\">{{ n.unreadCount }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n}", styles: [".notif-wrapper{position:relative;cursor:pointer}.pi-bell{font-size:1.4rem}.pi-bell.pulse{animation:pulse 1.2s ease-out}@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.2)}to{transform:scale(1)}}.dot{position:absolute;top:0;right:2px;width:8px;height:8px;background:red;border-radius:50%}.badge{position:absolute;top:-6px;right:-10px;background:red;color:#fff;font-size:.65rem;padding:2px 6px;border-radius:10px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ChatWidgetNotificationComponent, isStandalone: true, selector: "chat-widget-notification", ngImport: i0, template: "<div (click)=\"toggle()\" class=\"notif-icon\">\r\n    <i [class.pulse]=\"hasNew()\" class=\"pi pi-bell\">\r\n    </i>\r\n\r\n    @if (totalCount() > 0) {\r\n        <span class=\"dot\"></span>\r\n        <span class=\"badge\">\r\n        {{ totalCount() }}\r\n      </span>\r\n    }\r\n</div>\r\n\r\n@if (open) {\r\n    <div class=\"notif-panel\">\r\n        @for (n of notifications(); track n.roomId) {\r\n            <div class=\"notif-item\">\r\n                <strong>{{ n.roomName }}</strong>\r\n                <p>{{ n.lastMessage || 'You were added to this room' }}</p>\r\n                <span class=\"count\">{{ n.unreadCount }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n}", styles: [".notif-wrapper{position:relative;cursor:pointer}.pi-bell{font-size:1.4rem}.pi-bell.pulse{animation:pulse 1.2s ease-out}@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.2)}to{transform:scale(1)}}.dot{position:absolute;top:0;right:2px;width:8px;height:8px;background:red;border-radius:50%}.badge{position:absolute;top:-6px;right:-10px;background:red;color:#fff;font-size:.65rem;padding:2px 6px;border-radius:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWidgetNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'chat-widget-notification', standalone: true, imports: [], template: "<div (click)=\"toggle()\" class=\"notif-icon\">\r\n    <i [class.pulse]=\"hasNew()\" class=\"pi pi-bell\">\r\n    </i>\r\n\r\n    @if (totalCount() > 0) {\r\n        <span class=\"dot\"></span>\r\n        <span class=\"badge\">\r\n        {{ totalCount() }}\r\n      </span>\r\n    }\r\n</div>\r\n\r\n@if (open) {\r\n    <div class=\"notif-panel\">\r\n        @for (n of notifications(); track n.roomId) {\r\n            <div class=\"notif-item\">\r\n                <strong>{{ n.roomName }}</strong>\r\n                <p>{{ n.lastMessage || 'You were added to this room' }}</p>\r\n                <span class=\"count\">{{ n.unreadCount }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n}", styles: [".notif-wrapper{position:relative;cursor:pointer}.pi-bell{font-size:1.4rem}.pi-bell.pulse{animation:pulse 1.2s ease-out}@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.2)}to{transform:scale(1)}}.dot{position:absolute;top:0;right:2px;width:8px;height:8px;background:red;border-radius:50%}.badge{position:absolute;top:-6px;right:-10px;background:red;color:#fff;font-size:.65rem;padding:2px 6px;border-radius:10px}\n"] }]
+            args: [{ selector: 'chat-widget-notification', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule
+                    ], template: "<div (click)=\"toggle()\" class=\"notif-icon\">\r\n    <i [class.pulse]=\"hasNew()\" class=\"pi pi-bell\">\r\n    </i>\r\n\r\n    @if (totalCount() > 0) {\r\n        <span class=\"dot\"></span>\r\n        <span class=\"badge\">\r\n        {{ totalCount() }}\r\n      </span>\r\n    }\r\n</div>\r\n\r\n@if (open) {\r\n    <div class=\"notif-panel\">\r\n        @for (n of notifications(); track n.roomId) {\r\n            <div class=\"notif-item\">\r\n                <strong>{{ n.roomName }}</strong>\r\n                <p>{{ n.lastMessage || 'You were added to this room' }}</p>\r\n                <span class=\"count\">{{ n.unreadCount }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n}", styles: [".notif-wrapper{position:relative;cursor:pointer}.pi-bell{font-size:1.4rem}.pi-bell.pulse{animation:pulse 1.2s ease-out}@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.2)}to{transform:scale(1)}}.dot{position:absolute;top:0;right:2px;width:8px;height:8px;background:red;border-radius:50%}.badge{position:absolute;top:-6px;right:-10px;background:red;color:#fff;font-size:.65rem;padding:2px 6px;border-radius:10px}\n"] }]
         }], ctorParameters: () => [] });
 
 class ChatWidgetModule {
@@ -673,7 +689,8 @@ class ChatWidgetModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWidgetModule, imports: [CommonModule,
             ChatLauncherComponent,
             ChatWindowComponent,
-            AllChatsComponent] }); }
+            AllChatsComponent,
+            ChatWidgetNotificationComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWidgetModule, decorators: [{
             type: NgModule,
@@ -698,5 +715,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AllChatsComponent, ChatLauncherComponent, ChatWidgetModule };
+export { AllChatsComponent, ChatLauncherComponent, ChatWidgetModule, ChatWidgetNotificationComponent };
 //# sourceMappingURL=arthakosh-chat-widget.mjs.map