@arthakosh/chat-widget 0.1.20 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -161,7 +161,7 @@ export class ChatWindowComponent {
|
|
|
161
161
|
this.showUsers = !this.showUsers;
|
|
162
162
|
}
|
|
163
163
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
164
|
-
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 }, addUserAllowed: { classPropertyName: "addUserAllowed", publicName: "addUserAllowed", 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 } }, 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=\"chat-window\" [class.minimized]=\"minimized\" [class.floating]=\"mode === 'floating'\"\r\n [class.fullscreen]=\"mode === 'fullscreen'\" [class.dark]=\"theme === 'dark'\">\r\n <div class=\"chat-header\">\r\n <div class=\"title\">\r\n <span>{{ header }}</span>\r\n <small *ngIf=\"users().length\">({{ users().length }} participants)</small>\r\n </div>\r\n <div>\r\n <span>{{ metadata }}</span>\r\n </div>\r\n <div class=\"header-actions\">\r\n <button pButton icon=\"pi pi-users\" (click)=\"toggleUsers()\" style=\"font-size: 0.5rem\"></button>\r\n <button pButton icon=\"pi pi-minus\" (click)=\"toggleMinimize()\" style=\"font-size: 0.5rem\"></button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-body\" *ngIf=\"!minimized\">\r\n <div class=\"chat-layout\" [class.users-hidden]=\"!showUsers\">\r\n <div class=\"chat-main\">\r\n <div class=\"messages\" #messagesContainer [class.loading]=\"loading\">\r\n <div *ngFor=\"let msg of messages(); trackBy: trackById\" class=\"message-row\"\r\n [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\">\r\n <div class=\"message-bubble\">\r\n <div class=\"message-meta\">\r\n <span class=\"sender\" *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 class=\"reply-banner\" *ngIf=\"replyTo\">\r\n <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n <button pButton icon=\"pi pi-times\" class=\"p-button-text p-button-sm\" (click)=\"clearReply()\"></button>\r\n </div>\r\n\r\n <textarea pInputTextarea [(ngModel)]=\"newMessage\" rows=\"2\" autoResize=\"true\" placeholder=\"Type a message\"\r\n (keyup.enter)=\"send()\">\r\n </textarea>\r\n\r\n <div class=\"input-actions\">\r\n <button pButton icon=\"pi pi-send\" label=\"Send\" (click)=\"send()\"></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 class=\"user-row\" *ngFor=\"let u of users()\">\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(addUserAllowed) {\r\n <div class=\"user-list-add\">\r\n <p-dropdown [options]=\"chatService.userList()\" [(ngModel)]=\"selectedUser\" optionLabel=\"full_name\"\r\n placeholder=\"Select User\" />\r\n <div style=\"margin-top: 2em;\">\r\n <button pButton icon=\"pi pi-plus\" label=\"Add\" (click)=\"addUserToRoom()\"></button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".chat-window{--glass-bg: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .25);--primary: #4f6ef7;--text-dark: #1c1e21;--text-muted: #65676b;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--glass-bg);border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 24px 60px #0000002e}.chat-window.dark{--glass-bg: rgba(24, 26, 30, .78);--glass-border: rgba(255, 255, 255, .08);--primary: #6b7cff;--text-dark: #e4e6eb;--text-muted: #b0b3b8}.chat-window.floating{width:400px;height:400px}.chat-window.fullscreen{width:100%;height:100%;border-radius:0;box-shadow:none}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:15px}.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:#ffffffd9;color:var(--text-dark);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.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:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { 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: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.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 }] }); }
|
|
164
|
+
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 }, addUserAllowed: { classPropertyName: "addUserAllowed", publicName: "addUserAllowed", 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 } }, 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=\"chat-window\" [class.minimized]=\"minimized\" [class.floating]=\"mode === 'floating'\"\r\n [class.fullscreen]=\"mode === 'fullscreen'\" [class.dark]=\"theme === 'dark'\">\r\n <div class=\"chat-header\">\r\n <div class=\"title\">\r\n <span>{{ header }}</span>\r\n <small *ngIf=\"users().length\">({{ users().length }} participants)</small>\r\n </div>\r\n <div>\r\n <span>{{ metadata }}</span>\r\n </div>\r\n <div class=\"header-actions\">\r\n <button pButton icon=\"pi pi-users\" (click)=\"toggleUsers()\" style=\"font-size: 0.5rem\"></button>\r\n <button pButton icon=\"pi pi-minus\" (click)=\"toggleMinimize()\" style=\"font-size: 0.5rem\"></button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-body\" *ngIf=\"!minimized\">\r\n <div class=\"chat-layout\" [class.users-hidden]=\"!showUsers\">\r\n <div class=\"chat-main\">\r\n <div class=\"messages\" #messagesContainer [class.loading]=\"loading\">\r\n <div *ngFor=\"let msg of messages(); trackBy: trackById\" class=\"message-row\"\r\n [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\">\r\n <div class=\"message-bubble\">\r\n <div class=\"message-meta\">\r\n <span class=\"sender\" *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 class=\"reply-banner\" *ngIf=\"replyTo\">\r\n <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n <button pButton icon=\"pi pi-times\" class=\"p-button-text p-button-sm\" (click)=\"clearReply()\"></button>\r\n </div>\r\n\r\n <textarea pInputTextarea [(ngModel)]=\"newMessage\" rows=\"2\" autoResize=\"true\" placeholder=\"Type a message\"\r\n (keyup.enter)=\"send()\">\r\n </textarea>\r\n\r\n <div class=\"input-actions\">\r\n <button pButton icon=\"pi pi-send\" label=\"Send\" (click)=\"send()\"></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 class=\"user-row\" *ngFor=\"let u of users()\">\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(addUserAllowed) {\r\n <div class=\"user-list-add\">\r\n <p-dropdown [options]=\"chatService.userList()\" [(ngModel)]=\"selectedUser\" optionLabel=\"full_name\"\r\n placeholder=\"Select User\" />\r\n <div style=\"margin-top: 2em;\">\r\n <button pButton icon=\"pi pi-plus\" label=\"Add\" (click)=\"addUserToRoom()\"></button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".chat-window{--glass-bg: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .25);--primary: #4f6ef7;--text-dark: #1c1e21;--text-muted: #65676b;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--glass-bg);border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 24px 60px #0000002e}.chat-window.dark{--glass-bg: rgba(24, 26, 30, .78);--glass-border: rgba(255, 255, 255, .08);--primary: #6b7cff;--text-dark: #e4e6eb;--text-muted: #b0b3b8}.chat-window.floating{width:400px;height:400px}.chat-window.fullscreen{width:100%;height:100%;border-radius:0;box-shadow:none}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:15px}.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:56vh}.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:#ffffffd9;color:var(--text-dark);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.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:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { 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: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.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 }] }); }
|
|
165
165
|
}
|
|
166
166
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWindowComponent, decorators: [{
|
|
167
167
|
type: Component,
|
|
@@ -176,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
176
176
|
ChipModule,
|
|
177
177
|
DropdownModule,
|
|
178
178
|
OverlayPanelModule
|
|
179
|
-
], providers: [MessageService], template: "<p-toast></p-toast>\r\n\r\n<div class=\"chat-window\" [class.minimized]=\"minimized\" [class.floating]=\"mode === 'floating'\"\r\n [class.fullscreen]=\"mode === 'fullscreen'\" [class.dark]=\"theme === 'dark'\">\r\n <div class=\"chat-header\">\r\n <div class=\"title\">\r\n <span>{{ header }}</span>\r\n <small *ngIf=\"users().length\">({{ users().length }} participants)</small>\r\n </div>\r\n <div>\r\n <span>{{ metadata }}</span>\r\n </div>\r\n <div class=\"header-actions\">\r\n <button pButton icon=\"pi pi-users\" (click)=\"toggleUsers()\" style=\"font-size: 0.5rem\"></button>\r\n <button pButton icon=\"pi pi-minus\" (click)=\"toggleMinimize()\" style=\"font-size: 0.5rem\"></button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-body\" *ngIf=\"!minimized\">\r\n <div class=\"chat-layout\" [class.users-hidden]=\"!showUsers\">\r\n <div class=\"chat-main\">\r\n <div class=\"messages\" #messagesContainer [class.loading]=\"loading\">\r\n <div *ngFor=\"let msg of messages(); trackBy: trackById\" class=\"message-row\"\r\n [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\">\r\n <div class=\"message-bubble\">\r\n <div class=\"message-meta\">\r\n <span class=\"sender\" *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 class=\"reply-banner\" *ngIf=\"replyTo\">\r\n <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n <button pButton icon=\"pi pi-times\" class=\"p-button-text p-button-sm\" (click)=\"clearReply()\"></button>\r\n </div>\r\n\r\n <textarea pInputTextarea [(ngModel)]=\"newMessage\" rows=\"2\" autoResize=\"true\" placeholder=\"Type a message\"\r\n (keyup.enter)=\"send()\">\r\n </textarea>\r\n\r\n <div class=\"input-actions\">\r\n <button pButton icon=\"pi pi-send\" label=\"Send\" (click)=\"send()\"></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 class=\"user-row\" *ngFor=\"let u of users()\">\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(addUserAllowed) {\r\n <div class=\"user-list-add\">\r\n <p-dropdown [options]=\"chatService.userList()\" [(ngModel)]=\"selectedUser\" optionLabel=\"full_name\"\r\n placeholder=\"Select User\" />\r\n <div style=\"margin-top: 2em;\">\r\n <button pButton icon=\"pi pi-plus\" label=\"Add\" (click)=\"addUserToRoom()\"></button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".chat-window{--glass-bg: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .25);--primary: #4f6ef7;--text-dark: #1c1e21;--text-muted: #65676b;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--glass-bg);border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 24px 60px #0000002e}.chat-window.dark{--glass-bg: rgba(24, 26, 30, .78);--glass-border: rgba(255, 255, 255, .08);--primary: #6b7cff;--text-dark: #e4e6eb;--text-muted: #b0b3b8}.chat-window.floating{width:400px;height:400px}.chat-window.fullscreen{width:100%;height:100%;border-radius:0;box-shadow:none}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:15px}.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:
|
|
179
|
+
], providers: [MessageService], template: "<p-toast></p-toast>\r\n\r\n<div class=\"chat-window\" [class.minimized]=\"minimized\" [class.floating]=\"mode === 'floating'\"\r\n [class.fullscreen]=\"mode === 'fullscreen'\" [class.dark]=\"theme === 'dark'\">\r\n <div class=\"chat-header\">\r\n <div class=\"title\">\r\n <span>{{ header }}</span>\r\n <small *ngIf=\"users().length\">({{ users().length }} participants)</small>\r\n </div>\r\n <div>\r\n <span>{{ metadata }}</span>\r\n </div>\r\n <div class=\"header-actions\">\r\n <button pButton icon=\"pi pi-users\" (click)=\"toggleUsers()\" style=\"font-size: 0.5rem\"></button>\r\n <button pButton icon=\"pi pi-minus\" (click)=\"toggleMinimize()\" style=\"font-size: 0.5rem\"></button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-body\" *ngIf=\"!minimized\">\r\n <div class=\"chat-layout\" [class.users-hidden]=\"!showUsers\">\r\n <div class=\"chat-main\">\r\n <div class=\"messages\" #messagesContainer [class.loading]=\"loading\">\r\n <div *ngFor=\"let msg of messages(); trackBy: trackById\" class=\"message-row\"\r\n [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\">\r\n <div class=\"message-bubble\">\r\n <div class=\"message-meta\">\r\n <span class=\"sender\" *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 class=\"reply-banner\" *ngIf=\"replyTo\">\r\n <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n <button pButton icon=\"pi pi-times\" class=\"p-button-text p-button-sm\" (click)=\"clearReply()\"></button>\r\n </div>\r\n\r\n <textarea pInputTextarea [(ngModel)]=\"newMessage\" rows=\"2\" autoResize=\"true\" placeholder=\"Type a message\"\r\n (keyup.enter)=\"send()\">\r\n </textarea>\r\n\r\n <div class=\"input-actions\">\r\n <button pButton icon=\"pi pi-send\" label=\"Send\" (click)=\"send()\"></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 class=\"user-row\" *ngFor=\"let u of users()\">\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(addUserAllowed) {\r\n <div class=\"user-list-add\">\r\n <p-dropdown [options]=\"chatService.userList()\" [(ngModel)]=\"selectedUser\" optionLabel=\"full_name\"\r\n placeholder=\"Select User\" />\r\n <div style=\"margin-top: 2em;\">\r\n <button pButton icon=\"pi pi-plus\" label=\"Add\" (click)=\"addUserToRoom()\"></button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".chat-window{--glass-bg: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .25);--primary: #4f6ef7;--text-dark: #1c1e21;--text-muted: #65676b;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--glass-bg);border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 24px 60px #0000002e}.chat-window.dark{--glass-bg: rgba(24, 26, 30, .78);--glass-border: rgba(255, 255, 255, .08);--primary: #6b7cff;--text-dark: #e4e6eb;--text-muted: #b0b3b8}.chat-window.floating{width:400px;height:400px}.chat-window.fullscreen{width:100%;height:100%;border-radius:0;box-shadow:none}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:15px}.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:56vh}.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:#ffffffd9;color:var(--text-dark);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.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:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff}.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}\n"] }]
|
|
180
180
|
}], ctorParameters: () => [], propDecorators: { chatRoomId: [{
|
|
181
181
|
type: Input
|
|
182
182
|
}], header: [{
|
|
@@ -277,7 +277,7 @@ class ChatWindowComponent {
|
|
|
277
277
|
this.showUsers = !this.showUsers;
|
|
278
278
|
}
|
|
279
279
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
280
|
-
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 }, addUserAllowed: { classPropertyName: "addUserAllowed", publicName: "addUserAllowed", 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 } }, 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=\"chat-window\" [class.minimized]=\"minimized\" [class.floating]=\"mode === 'floating'\"\r\n [class.fullscreen]=\"mode === 'fullscreen'\" [class.dark]=\"theme === 'dark'\">\r\n <div class=\"chat-header\">\r\n <div class=\"title\">\r\n <span>{{ header }}</span>\r\n <small *ngIf=\"users().length\">({{ users().length }} participants)</small>\r\n </div>\r\n <div>\r\n <span>{{ metadata }}</span>\r\n </div>\r\n <div class=\"header-actions\">\r\n <button pButton icon=\"pi pi-users\" (click)=\"toggleUsers()\" style=\"font-size: 0.5rem\"></button>\r\n <button pButton icon=\"pi pi-minus\" (click)=\"toggleMinimize()\" style=\"font-size: 0.5rem\"></button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-body\" *ngIf=\"!minimized\">\r\n <div class=\"chat-layout\" [class.users-hidden]=\"!showUsers\">\r\n <div class=\"chat-main\">\r\n <div class=\"messages\" #messagesContainer [class.loading]=\"loading\">\r\n <div *ngFor=\"let msg of messages(); trackBy: trackById\" class=\"message-row\"\r\n [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\">\r\n <div class=\"message-bubble\">\r\n <div class=\"message-meta\">\r\n <span class=\"sender\" *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 class=\"reply-banner\" *ngIf=\"replyTo\">\r\n <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n <button pButton icon=\"pi pi-times\" class=\"p-button-text p-button-sm\" (click)=\"clearReply()\"></button>\r\n </div>\r\n\r\n <textarea pInputTextarea [(ngModel)]=\"newMessage\" rows=\"2\" autoResize=\"true\" placeholder=\"Type a message\"\r\n (keyup.enter)=\"send()\">\r\n </textarea>\r\n\r\n <div class=\"input-actions\">\r\n <button pButton icon=\"pi pi-send\" label=\"Send\" (click)=\"send()\"></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 class=\"user-row\" *ngFor=\"let u of users()\">\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(addUserAllowed) {\r\n <div class=\"user-list-add\">\r\n <p-dropdown [options]=\"chatService.userList()\" [(ngModel)]=\"selectedUser\" optionLabel=\"full_name\"\r\n placeholder=\"Select User\" />\r\n <div style=\"margin-top: 2em;\">\r\n <button pButton icon=\"pi pi-plus\" label=\"Add\" (click)=\"addUserToRoom()\"></button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".chat-window{--glass-bg: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .25);--primary: #4f6ef7;--text-dark: #1c1e21;--text-muted: #65676b;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--glass-bg);border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 24px 60px #0000002e}.chat-window.dark{--glass-bg: rgba(24, 26, 30, .78);--glass-border: rgba(255, 255, 255, .08);--primary: #6b7cff;--text-dark: #e4e6eb;--text-muted: #b0b3b8}.chat-window.floating{width:400px;height:400px}.chat-window.fullscreen{width:100%;height:100%;border-radius:0;box-shadow:none}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:15px}.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:#ffffffd9;color:var(--text-dark);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.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:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff}.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}\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: "pipe", type: i1$1.DatePipe, name: "date" }, { 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: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.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 }] }); }
|
|
280
|
+
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 }, addUserAllowed: { classPropertyName: "addUserAllowed", publicName: "addUserAllowed", 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 } }, 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=\"chat-window\" [class.minimized]=\"minimized\" [class.floating]=\"mode === 'floating'\"\r\n [class.fullscreen]=\"mode === 'fullscreen'\" [class.dark]=\"theme === 'dark'\">\r\n <div class=\"chat-header\">\r\n <div class=\"title\">\r\n <span>{{ header }}</span>\r\n <small *ngIf=\"users().length\">({{ users().length }} participants)</small>\r\n </div>\r\n <div>\r\n <span>{{ metadata }}</span>\r\n </div>\r\n <div class=\"header-actions\">\r\n <button pButton icon=\"pi pi-users\" (click)=\"toggleUsers()\" style=\"font-size: 0.5rem\"></button>\r\n <button pButton icon=\"pi pi-minus\" (click)=\"toggleMinimize()\" style=\"font-size: 0.5rem\"></button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-body\" *ngIf=\"!minimized\">\r\n <div class=\"chat-layout\" [class.users-hidden]=\"!showUsers\">\r\n <div class=\"chat-main\">\r\n <div class=\"messages\" #messagesContainer [class.loading]=\"loading\">\r\n <div *ngFor=\"let msg of messages(); trackBy: trackById\" class=\"message-row\"\r\n [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\">\r\n <div class=\"message-bubble\">\r\n <div class=\"message-meta\">\r\n <span class=\"sender\" *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 class=\"reply-banner\" *ngIf=\"replyTo\">\r\n <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n <button pButton icon=\"pi pi-times\" class=\"p-button-text p-button-sm\" (click)=\"clearReply()\"></button>\r\n </div>\r\n\r\n <textarea pInputTextarea [(ngModel)]=\"newMessage\" rows=\"2\" autoResize=\"true\" placeholder=\"Type a message\"\r\n (keyup.enter)=\"send()\">\r\n </textarea>\r\n\r\n <div class=\"input-actions\">\r\n <button pButton icon=\"pi pi-send\" label=\"Send\" (click)=\"send()\"></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 class=\"user-row\" *ngFor=\"let u of users()\">\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(addUserAllowed) {\r\n <div class=\"user-list-add\">\r\n <p-dropdown [options]=\"chatService.userList()\" [(ngModel)]=\"selectedUser\" optionLabel=\"full_name\"\r\n placeholder=\"Select User\" />\r\n <div style=\"margin-top: 2em;\">\r\n <button pButton icon=\"pi pi-plus\" label=\"Add\" (click)=\"addUserToRoom()\"></button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".chat-window{--glass-bg: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .25);--primary: #4f6ef7;--text-dark: #1c1e21;--text-muted: #65676b;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--glass-bg);border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 24px 60px #0000002e}.chat-window.dark{--glass-bg: rgba(24, 26, 30, .78);--glass-border: rgba(255, 255, 255, .08);--primary: #6b7cff;--text-dark: #e4e6eb;--text-muted: #b0b3b8}.chat-window.floating{width:400px;height:400px}.chat-window.fullscreen{width:100%;height:100%;border-radius:0;box-shadow:none}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:15px}.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:56vh}.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:#ffffffd9;color:var(--text-dark);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.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:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff}.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}\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: "pipe", type: i1$1.DatePipe, name: "date" }, { 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: "ngmodule", type: InputTextareaModule }, { kind: "directive", type: i6.InputTextarea, selector: "[pInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.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 }] }); }
|
|
281
281
|
}
|
|
282
282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChatWindowComponent, decorators: [{
|
|
283
283
|
type: Component,
|
|
@@ -292,7 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
292
292
|
ChipModule,
|
|
293
293
|
DropdownModule,
|
|
294
294
|
OverlayPanelModule
|
|
295
|
-
], providers: [MessageService], template: "<p-toast></p-toast>\r\n\r\n<div class=\"chat-window\" [class.minimized]=\"minimized\" [class.floating]=\"mode === 'floating'\"\r\n [class.fullscreen]=\"mode === 'fullscreen'\" [class.dark]=\"theme === 'dark'\">\r\n <div class=\"chat-header\">\r\n <div class=\"title\">\r\n <span>{{ header }}</span>\r\n <small *ngIf=\"users().length\">({{ users().length }} participants)</small>\r\n </div>\r\n <div>\r\n <span>{{ metadata }}</span>\r\n </div>\r\n <div class=\"header-actions\">\r\n <button pButton icon=\"pi pi-users\" (click)=\"toggleUsers()\" style=\"font-size: 0.5rem\"></button>\r\n <button pButton icon=\"pi pi-minus\" (click)=\"toggleMinimize()\" style=\"font-size: 0.5rem\"></button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-body\" *ngIf=\"!minimized\">\r\n <div class=\"chat-layout\" [class.users-hidden]=\"!showUsers\">\r\n <div class=\"chat-main\">\r\n <div class=\"messages\" #messagesContainer [class.loading]=\"loading\">\r\n <div *ngFor=\"let msg of messages(); trackBy: trackById\" class=\"message-row\"\r\n [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\">\r\n <div class=\"message-bubble\">\r\n <div class=\"message-meta\">\r\n <span class=\"sender\" *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 class=\"reply-banner\" *ngIf=\"replyTo\">\r\n <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n <button pButton icon=\"pi pi-times\" class=\"p-button-text p-button-sm\" (click)=\"clearReply()\"></button>\r\n </div>\r\n\r\n <textarea pInputTextarea [(ngModel)]=\"newMessage\" rows=\"2\" autoResize=\"true\" placeholder=\"Type a message\"\r\n (keyup.enter)=\"send()\">\r\n </textarea>\r\n\r\n <div class=\"input-actions\">\r\n <button pButton icon=\"pi pi-send\" label=\"Send\" (click)=\"send()\"></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 class=\"user-row\" *ngFor=\"let u of users()\">\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(addUserAllowed) {\r\n <div class=\"user-list-add\">\r\n <p-dropdown [options]=\"chatService.userList()\" [(ngModel)]=\"selectedUser\" optionLabel=\"full_name\"\r\n placeholder=\"Select User\" />\r\n <div style=\"margin-top: 2em;\">\r\n <button pButton icon=\"pi pi-plus\" label=\"Add\" (click)=\"addUserToRoom()\"></button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".chat-window{--glass-bg: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .25);--primary: #4f6ef7;--text-dark: #1c1e21;--text-muted: #65676b;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--glass-bg);border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 24px 60px #0000002e}.chat-window.dark{--glass-bg: rgba(24, 26, 30, .78);--glass-border: rgba(255, 255, 255, .08);--primary: #6b7cff;--text-dark: #e4e6eb;--text-muted: #b0b3b8}.chat-window.floating{width:400px;height:400px}.chat-window.fullscreen{width:100%;height:100%;border-radius:0;box-shadow:none}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:15px}.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:
|
|
295
|
+
], providers: [MessageService], template: "<p-toast></p-toast>\r\n\r\n<div class=\"chat-window\" [class.minimized]=\"minimized\" [class.floating]=\"mode === 'floating'\"\r\n [class.fullscreen]=\"mode === 'fullscreen'\" [class.dark]=\"theme === 'dark'\">\r\n <div class=\"chat-header\">\r\n <div class=\"title\">\r\n <span>{{ header }}</span>\r\n <small *ngIf=\"users().length\">({{ users().length }} participants)</small>\r\n </div>\r\n <div>\r\n <span>{{ metadata }}</span>\r\n </div>\r\n <div class=\"header-actions\">\r\n <button pButton icon=\"pi pi-users\" (click)=\"toggleUsers()\" style=\"font-size: 0.5rem\"></button>\r\n <button pButton icon=\"pi pi-minus\" (click)=\"toggleMinimize()\" style=\"font-size: 0.5rem\"></button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-body\" *ngIf=\"!minimized\">\r\n <div class=\"chat-layout\" [class.users-hidden]=\"!showUsers\">\r\n <div class=\"chat-main\">\r\n <div class=\"messages\" #messagesContainer [class.loading]=\"loading\">\r\n <div *ngFor=\"let msg of messages(); trackBy: trackById\" class=\"message-row\"\r\n [ngClass]=\"{ outgoing: msg.senderId === chatService.currentUser().userId, incoming: msg.senderId !== chatService.currentUser().userId }\">\r\n <div class=\"message-bubble\">\r\n <div class=\"message-meta\">\r\n <span class=\"sender\" *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 class=\"reply-banner\" *ngIf=\"replyTo\">\r\n <span>Replying to: {{ replyTo.content | slice: 0:50 }}</span>\r\n <button pButton icon=\"pi pi-times\" class=\"p-button-text p-button-sm\" (click)=\"clearReply()\"></button>\r\n </div>\r\n\r\n <textarea pInputTextarea [(ngModel)]=\"newMessage\" rows=\"2\" autoResize=\"true\" placeholder=\"Type a message\"\r\n (keyup.enter)=\"send()\">\r\n </textarea>\r\n\r\n <div class=\"input-actions\">\r\n <button pButton icon=\"pi pi-send\" label=\"Send\" (click)=\"send()\"></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 class=\"user-row\" *ngFor=\"let u of users()\">\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(addUserAllowed) {\r\n <div class=\"user-list-add\">\r\n <p-dropdown [options]=\"chatService.userList()\" [(ngModel)]=\"selectedUser\" optionLabel=\"full_name\"\r\n placeholder=\"Select User\" />\r\n <div style=\"margin-top: 2em;\">\r\n <button pButton icon=\"pi pi-plus\" label=\"Add\" (click)=\"addUserToRoom()\"></button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".chat-window{--glass-bg: rgba(255, 255, 255, .78);--glass-border: rgba(255, 255, 255, .25);--primary: #4f6ef7;--text-dark: #1c1e21;--text-muted: #65676b;display:flex;flex-direction:column;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--glass-bg);border-radius:18px;border:1px solid var(--glass-border);box-shadow:0 24px 60px #0000002e}.chat-window.dark{--glass-bg: rgba(24, 26, 30, .78);--glass-border: rgba(255, 255, 255, .08);--primary: #6b7cff;--text-dark: #e4e6eb;--text-muted: #b0b3b8}.chat-window.floating{width:400px;height:400px}.chat-window.fullscreen{width:100%;height:100%;border-radius:0;box-shadow:none}.chat-window.minimized{height:auto}.chat-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff;border-bottom:1px solid rgba(255,255,255,.15);padding:10px 14px;border-radius:15px}.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:56vh}.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:#ffffffd9;color:var(--text-dark);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.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:linear-gradient(135deg,var(--primary),#6f80ff);color:#fff}.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}\n"] }]
|
|
296
296
|
}], ctorParameters: () => [], propDecorators: { chatRoomId: [{
|
|
297
297
|
type: Input
|
|
298
298
|
}], header: [{
|