@rtsee/ngx 0.0.75 → 0.0.77

package/dist/ngx/fesm2022/rtsee-ngx.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ViewChild, Directive, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
@@ -8,12 +8,12 @@ import { Select } from 'primeng/select';
 import { FloatLabel } from 'primeng/floatlabel';
 import * as i4 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
-import { interval, tap } from 'rxjs';
+import { interval, tap, filter } from 'rxjs';
 import * as i2$2 from 'primeng/message';
 import { Message, MessageModule } from 'primeng/message';
 import { AuthEndpointsKeys, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
 import * as i2 from '@angular/router';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import * as i1$1 from '@angular/common/http';
 import { InfiniteScrollDirective, InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { RTSeeChatTypes } from '@rtsee/common';
@@ -37,6 +37,7 @@ import * as i1$3 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { OrderList } from 'primeng/orderlist';
 import { Divider } from 'primeng/divider';
+import { ToggleSwitch } from 'primeng/toggleswitch';
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
@@ -497,7 +498,8 @@ const COMMON_CONSTANTS = {
     customDateFormat: 'dd/MM/YYYY',
     customDateFormatDaysJs: 'DD/MM/YYYY',
     customDateTimeFormat: 'dd/MM/YYYY HH:mm',
-    defaultProfileImgUrl: 'https://werf.co/assets/images/default-profile.png'
+    defaultProfileImgUrl: 'https://werf.co/assets/images/default-profile.png',
+    mobileBreakpoint: 800
 };
 
 class ChatThumbnailComponent {
@@ -637,7 +639,7 @@ class MessageComponent {
         /* eslint-enable */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageComponent, deps: [{ token: MessageWidgetsService }, { token: i0.ComponentFactoryResolver }, { token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessageComponent, isStandalone: true, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n  <div class=\"message-tail\"></div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessageComponent, isStandalone: true, selector: "rtsee-message", inputs: { chat: "chat", message: "message", member: "member", messenger: "messenger" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageTimeAndStatusComponent, selector: "rtsee-message-time-and-status", inputs: ["message", "hideStatus", "inChat"] }, { kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
@@ -645,7 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         NgClass,
                         MessageTimeAndStatusComponent,
                         WidgetDirective
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n  <div class=\"message-tail\"></div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-messenger-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rtsee-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rtsee-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rtsee-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rtsee-messenger-message-info\" #rtsMessageInfo>\n     <rtsee-message-time-and-status [message]=\"message\"\n                                    [inChat]=\"true\"\n                                    [hideStatus]=\"message.from.id !== messenger.clientId\"\n     ></rtsee-message-time-and-status>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: MessageWidgetsService }, { type: i0.ComponentFactoryResolver }, { type: TimeFormatHelperService }], propDecorators: { chat: [{
                 type: Input
             }], message: [{
@@ -660,16 +662,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class MessagesListComponent {
-    constructor(timeFormatService, scroller) {
+    constructor(timeFormatService, scroller, document) {
         this.timeFormatService = timeFormatService;
         this.scroller = scroller;
+        this.document = document;
+        this.messagesGroups = [];
+        this.firstGroupedMessage = null;
+        this.lastGroupedMessage = null;
+        this.RTSeeChatTypes = RTSeeChatTypes;
         this.bindScrollFunction = this.scrollToBottom.bind(this);
+        this.bindedGroupFunction = this.groupMessages.bind(this);
+    }
+    onWindowScroll(event) {
+        // Get the vertical scroll position
+        const verticalOffset = window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
+        if (window.innerWidth >= COMMON_CONSTANTS.mobileBreakpoint) {
+            return;
+        }
+        // You can add logic here, e.g., show a 'scroll to top' button
+        if (verticalOffset < 300) {
+            // Logic to show button
+            console.log('scrolled to top');
+            this.onScrolledToTop();
+        }
+        else {
+            console.log('scrolled to bottom');
+            // Logic to hide button
+        }
     }
     ngOnInit() {
+        this.chat.on(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
         this.chat.on(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        this.groupMessages();
     }
     ngAfterViewInit() {
-        console.log(this.chat.messages.length);
+        if (this.chat.isStandalone) {
+            return;
+        }
         this.scrollToBottom();
     }
     onMessageSent() {
@@ -677,6 +706,7 @@ class MessagesListComponent {
     }
     ngOnDestroy() {
         this.chat.off(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        this.chat.off(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
     }
     onScrolledToTop() {
         console.log('scrolledToTop');
@@ -696,8 +726,13 @@ class MessagesListComponent {
         this.chat.loadRemoteMessages('front');
     }
     scrollToBottom() {
+        if (this.chat.isStandalone) {
+            return;
+        }
         setTimeout(() => {
-            this.scroller.scrollToPosition([0, document.body.scrollHeight]);
+            if (window.innerWidth < COMMON_CONSTANTS.mobileBreakpoint) {
+                this.scroller.scrollToPosition([0, document.body.scrollHeight]);
+            }
             if (!this.scrollContainer?.nativeElement?.scrollHeight) {
                 console.log('scrollToBottom early return');
                 return;
@@ -714,23 +749,147 @@ class MessagesListComponent {
     formatDate(message) {
         return this.timeFormatService.formatDate(message.createdAt);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }, { token: i2$1.ViewportScroller }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessagesListComponent, isStandalone: true, selector: "rtsee-messages-list", inputs: { chat: "chat", messenger: "messenger" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"true\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (message of chat.messages; track message.id; let i = $index) {\n    <div [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n         class=\"rtsee-messenger-message-wrapper\"\n    >\n      <rtsee-message [message]=\"message\"\n                     [messenger]=\"messenger\"\n                     [chat]=\"chat\"\n      ></rtsee-message>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }] }); }
+    groupMessages() {
+        if (!this.chat || !this.chat.messages.length) {
+            this.messagesGroups.length = 0;
+        }
+        if (!this.firstGroupedMessage || !this.lastGroupedMessage) {
+            this.performGrouping();
+        }
+        else {
+            if (this.areForwardMessagesAdded()) {
+                this.performGrouping(this.chat.messages.indexOf(this.lastGroupedMessage) + 1);
+            }
+            if (this.areBackwardMessagesAdded()) {
+                console.log('backward added', this.chat.messages);
+                this.performGrouping(0, this.chat.messages.indexOf(this.firstGroupedMessage) - 1, true);
+            }
+        }
+        this.saveFirstAndLastGroupedMessages();
+    }
+    performGrouping(startIndex, endIndex, prepend) {
+        const processedGroups = [];
+        let lastSenderId = null;
+        let currentGroup = null;
+        const startFrom = startIndex || 0;
+        for (let i = startFrom; i < (endIndex || this.chat.messages.length); i++) {
+            const message = this.chat.messages[i];
+            if (message.from.id === lastSenderId && currentGroup) {
+                currentGroup.messages.push(message);
+            }
+            else {
+                lastSenderId = message.from.id;
+                if (currentGroup) {
+                    processedGroups.push(currentGroup);
+                }
+                if (!message.id && !message.temporaryId) {
+                    throw new Error('Either m.id or m.temporary id is required');
+                }
+                const isFromMe = message.from.id === this.messenger.clientId;
+                const isSenderVisible = (this.chat.type !== RTSeeChatTypes.INDIVIDUAL && !isFromMe)
+                    || this.chat.type === RTSeeChatTypes.COMMENTS
+                    || this.chat.type === RTSeeChatTypes.RATINGS;
+                currentGroup = {
+                    id: message.id || message.temporaryId,
+                    sender: message.from,
+                    senderVisible: isSenderVisible,
+                    messages: [message]
+                };
+            }
+        }
+        if (currentGroup) {
+            processedGroups.push(currentGroup);
+        }
+        if (prepend) {
+            this.stitchGroups(processedGroups, true);
+        }
+        else {
+            this.stitchGroups(processedGroups);
+        }
+    }
+    stitchGroups(newGroups, prepend) {
+        if (!newGroups.length) {
+            return;
+        }
+        if (!this.messagesGroups.length) {
+            this.messagesGroups.push(...newGroups);
+            return;
+        }
+        if (prepend) {
+            const lastOfNewGroups = newGroups[newGroups.length - 1];
+            const firstOfExistingGroups = this.messagesGroups[0];
+            if (lastOfNewGroups.sender.id === firstOfExistingGroups.sender.id) {
+                firstOfExistingGroups.messages.unshift(...lastOfNewGroups.messages);
+                newGroups.splice(newGroups.length - 1, 1);
+            }
+            this.messagesGroups.unshift(...newGroups);
+        }
+        else {
+            const firstOfNewGroups = newGroups[0];
+            const lastOfExistingGroups = this.messagesGroups[this.messagesGroups.length - 1];
+            if (firstOfNewGroups.sender.id === lastOfExistingGroups.sender.id) {
+                lastOfExistingGroups.messages.push(...firstOfNewGroups.messages);
+                newGroups.splice(0, 1);
+            }
+            this.messagesGroups.push(...newGroups);
+        }
+    }
+    areForwardMessagesAdded() {
+        console.log('last grouped present', this.lastGroupedMessage);
+        if (!this.lastGroupedMessage) {
+            return false;
+        }
+        const index = this.chat.messages.indexOf(this.lastGroupedMessage);
+        return index !== -1 && index < this.chat.messages.length - 1;
+    }
+    areBackwardMessagesAdded() {
+        console.log('first grouped present', this.firstGroupedMessage);
+        if (!this.firstGroupedMessage) {
+            return false;
+        }
+        const index = this.chat.messages.indexOf(this.firstGroupedMessage);
+        console.log('outcome', index !== -1 && index > 0);
+        return index !== -1 && index > 0;
+    }
+    saveFirstAndLastGroupedMessages() {
+        const firstAndLast = this.getFirstAndLastMessage();
+        if (!firstAndLast) {
+            this.firstGroupedMessage = null;
+            this.lastGroupedMessage = null;
+            return;
+        }
+        this.firstGroupedMessage = firstAndLast[0];
+        this.lastGroupedMessage = firstAndLast[1];
+    }
+    getFirstAndLastMessage() {
+        if (!this.chat.messages.length) {
+            return null;
+        }
+        return [this.chat.messages[0], this.chat.messages[this.chat.messages.length - 1]];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }, { token: i2$1.ViewportScroller }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessagesListComponent, isStandalone: true, selector: "rtsee-messages-list", inputs: { chat: "chat", messenger: "messenger" }, host: { listeners: { "window:scroll": "onWindowScroll($event)" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (messageGroup of messagesGroups; track messageGroup.id) {\n    <div class=\"rtsee-messenger-message-wrapper\" [ngClass]=\"{\n     'rtsee-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rtsee-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rtsee-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rtsee-messenger-message-sender-name\">\n        <p>{{messageGroup.sender.name}}</p>\n      </div>\n\n      @for (message of messageGroup.messages; track message.id) {\n        <rtsee-message [message]=\"message\"\n                       [messenger]=\"messenger\"\n                       [chat]=\"chat\"\n        ></rtsee-message>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: MessageComponent, selector: "rtsee-message", inputs: ["chat", "message", "member", "messenger"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-messages-list', imports: [
                         InfiniteScrollDirective,
-                        NgClass,
-                        MessageComponent
-                    ], standalone: true, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"true\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (message of chat.messages; track message.id; let i = $index) {\n    <div [ngClass]=\"{'rtsee-messenger-message-wrapper-consecutive': message.from === chat.messages[i+1]?.from}\"\n         class=\"rtsee-messenger-message-wrapper\"\n    >\n      <rtsee-message [message]=\"message\"\n                     [messenger]=\"messenger\"\n                     [chat]=\"chat\"\n      ></rtsee-message>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: i2$1.ViewportScroller }], propDecorators: { chat: [{
+                        MessageComponent,
+                        NgClass
+                    ], standalone: true, template: "<div class=\"rtsee-messenger-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onScroll()\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  @for (messageGroup of messagesGroups; track messageGroup.id) {\n    <div class=\"rtsee-messenger-message-wrapper\" [ngClass]=\"{\n     'rtsee-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rtsee-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rtsee-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rtsee-messenger-message-sender-name\">\n        <p>{{messageGroup.sender.name}}</p>\n      </div>\n\n      @for (message of messageGroup.messages; track message.id) {\n        <rtsee-message [message]=\"message\"\n                       [messenger]=\"messenger\"\n                       [chat]=\"chat\"\n        ></rtsee-message>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: i2$1.ViewportScroller }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { chat: [{
                 type: Input
             }], messenger: [{
                 type: Input
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollBlock']
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
             }] } });
 
 class ChatInputComponent {
@@ -780,18 +939,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['chatInput']
             }] } });
 
+class ViewportObserverDirective {
+    constructor(element) {
+        this.element = element;
+        this.inViewport = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        // Options for the observer: 0.2 means 20% of the element must be visible
+        // to trigger the callback
+        const options = {
+            root: null, // observing relative to the document's viewport
+            rootMargin: '0px',
+            threshold: 0
+        };
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                // entry.isIntersecting is true if the element is in the viewport
+                this.inViewport.emit(entry.isIntersecting);
+            });
+        }, options);
+        this.observer.observe(this.element.nativeElement);
+    }
+    ngOnDestroy() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ViewportObserverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: ViewportObserverDirective, isStandalone: true, selector: "[rtseeViewportObserver]", outputs: { inViewport: "inViewport" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ViewportObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtseeViewportObserver]',
+                    standalone: true // Use `standalone: true` in modern Angular
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inViewport: [{
+                type: Output
+            }] } });
+
 class ChatComponent {
+    onInViewPortChange(value) {
+        console.log('Received inViewPortChange', value);
+        this.chat.isInViewPort = value;
+    }
+    ngOnInit() {
+        if (!this.chat && !this.chatData) {
+            console.log(`Either chat ot chatData is required!`);
+        }
+        if (!this.chat && this.chatData) {
+            this.chat = this.messenger.addStandaloneChat(this.chatData);
+            this.chat.loadRemoteMessages('back');
+        }
+    }
+    ngOnDestroy() {
+        if (this.chat.isStandalone) {
+            this.messenger.removeStandaloneChat(this.chat.id);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatComponent, isStandalone: true, selector: "rtsee-chat", inputs: { chat: "chat", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\">\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { kind: "component", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatComponent, isStandalone: true, selector: "rtsee-chat", inputs: { chat: "chat", chatData: "chatData", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger"] }, { kind: "component", type: ChatInputComponent, selector: "rtsee-chat-input", inputs: ["messenger", "chat"] }, { kind: "directive", type: ViewportObserverDirective, selector: "[rtseeViewportObserver]", outputs: ["inViewport"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-chat', imports: [
                         MessagesListComponent,
-                        ChatInputComponent
-                    ], standalone: true, template: "<div class=\"rtsee-chat\">\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n</div>\n" }]
+                        ChatInputComponent,
+                        ViewportObserverDirective,
+                        NgClass
+                    ], standalone: true, template: "<div class=\"rtsee-chat\"\n     [ngClass]=\"{\n        'rtsee-chat-standalone': chat.isStandalone,\n        'rtsee-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rtsee-chat-footer-container\">\n    <div class=\"rtsee-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rtsee-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n" }]
         }], propDecorators: { chat: [{
                 type: Input
+            }], chatData: [{
+                type: Input
             }], messenger: [{
                 type: Input
             }] } });
@@ -802,7 +1022,7 @@ class MessengerComponent {
         this.messenger.loadChats();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-messenger\" [ngClass]=\"{\n  'rtsee-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rtsee-messenger-folded': messenger.folded\n}\">\n  <div class=\"rtsee-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rtsee-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n\n\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, decorators: [{
             type: Component,
@@ -1323,7 +1543,9 @@ class ManageStoryComponent {
                     Validators.maxLength(244)
                 ]
             }),
-            averageReadTime: this.formBuilder.control(0)
+            averageReadTime: this.formBuilder.control(0),
+            isPublished: this.formBuilder.control(false),
+            isDiscussable: this.formBuilder.control(false)
         });
     }
     submit() {
@@ -1332,6 +1554,8 @@ class ManageStoryComponent {
                 name: this.nameField.value,
                 description: this.descriptionField.value,
                 averageReadTime: this.averageReadTimeField.value,
+                commentsEnabled: this.isDiscussableField.value,
+                isPublished: this.isPublishedField.value
             });
         }
         else {
@@ -1342,6 +1566,8 @@ class ManageStoryComponent {
         this.nameField.setValue(this.manageStory.story.name);
         this.descriptionField.setValue(this.manageStory.story.description || '');
         this.averageReadTimeField.setValue(this.manageStory.story.averageReadTime || 0);
+        this.isPublishedField.setValue(this.manageStory.story.isPublished || false);
+        this.isDiscussableField.setValue(this.manageStory.story.commentsEnabled || false);
     }
     get nameField() {
         return this.storyForm.get('name');
@@ -1352,6 +1578,12 @@ class ManageStoryComponent {
     get averageReadTimeField() {
         return this.storyForm.get('averageReadTime');
     }
+    get isPublishedField() {
+        return this.storyForm.get('isPublished');
+    }
+    get isDiscussableField() {
+        return this.storyForm.get('isDiscussable');
+    }
     disableFormFields() {
         this.nameField.disable();
         this.descriptionField.disable();
@@ -1363,7 +1595,7 @@ class ManageStoryComponent {
         this.averageReadTimeField.disable();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoryComponent, isStandalone: true, selector: "rtsee-manage-story", inputs: { manageStory: "manageStory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      <div class=\"rtsee-manage-story-image\">\n        <rtsee-image-uploader [imageUploader]=\"manageStory.imageUploader\"\n        ></rtsee-image-uploader>\n      </div>\n      <form class=\"rtsee-story-form rtsee-form\"\n            [formGroup]=\"storyForm\"\n            (ngSubmit)=\"submit()\"\n      >\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <input id=\"rtsee-story-name-field\"\n                     class=\"rtsee-form-field\"\n                     pInputText\n                     [formControl]=\"nameField\"\n                     [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n              />\n              <label for=\"sign-up-email\">Name</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (nameField.hasError('required') && nameField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Name is required</p-message>\n          }\n        </div>\n        <rtsee-autocomplete [config]=\"manageStory.categoriesMultiselect\"></rtsee-autocomplete>\n        <rtsee-autocomplete [config]=\"manageStory.labelsMultiselect\"></rtsee-autocomplete>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n              <label for=\"rtsee-story-description-field\">Description</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (descriptionField.hasError('required') && descriptionField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Description is required</p-message>\n          }\n        </div>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-input-number [formControl]=\"averageReadTimeField\"\n                              id=\"rtsee-story-average-read-time\"\n                              mode=\"decimal\"\n                              [min]=\"2\"\n                              [max]=\"10000\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\n        </div>\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n        <p-divider />\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageStory.cancel()\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n      </form>\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: RTSeeImageUploaderComponent, selector: "rtsee-image-uploader", inputs: ["imageUploader"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: ManageSlidesComponent, selector: "rtsee-manage-slides", inputs: ["manageSlides"] }, { kind: "component", type: ManageSlideComponent, selector: "rtsee-manage-slide", inputs: ["manageSlide"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ManageStoryComponent, isStandalone: true, selector: "rtsee-manage-story", inputs: { manageStory: "manageStory" }, ngImport: i0, template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      <div class=\"rtsee-manage-story-image\">\n        <rtsee-image-uploader [imageUploader]=\"manageStory.imageUploader\"\n        ></rtsee-image-uploader>\n      </div>\n      <form class=\"rtsee-story-form rtsee-form\"\n            [formGroup]=\"storyForm\"\n            (ngSubmit)=\"submit()\"\n      >\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <input id=\"rtsee-story-name-field\"\n                     class=\"rtsee-form-field\"\n                     pInputText\n                     [formControl]=\"nameField\"\n                     [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n              />\n              <label for=\"sign-up-email\">Name</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (nameField.hasError('required') && nameField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Name is required</p-message>\n          }\n        </div>\n        <rtsee-autocomplete [config]=\"manageStory.categoriesMultiselect\"></rtsee-autocomplete>\n        <rtsee-autocomplete [config]=\"manageStory.labelsMultiselect\"></rtsee-autocomplete>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n              <label for=\"rtsee-story-description-field\">Description</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (descriptionField.hasError('required') && descriptionField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Description is required</p-message>\n          }\n        </div>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-input-number [formControl]=\"averageReadTimeField\"\n                              id=\"rtsee-story-average-read-time\"\n                              mode=\"decimal\"\n                              [min]=\"2\"\n                              [max]=\"10000\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          <div class=\"rtsee-form-field-container\">\n            <p>Published</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isPublished\"/>\n          </div>\n          <div class=\"rtsee-form-field-container\">\n            <p>Enable Comments</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isDiscussable\"/>\n          </div>\n        </div>\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n        <p-divider />\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageStory.cancel()\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n      </form>\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: RTSeeImageUploaderComponent, selector: "rtsee-image-uploader", inputs: ["imageUploader"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AutocompleteComponent, selector: "rtsee-autocomplete", inputs: ["config"] }, { kind: "component", type: ManageSlidesComponent, selector: "rtsee-manage-slides", inputs: ["manageSlides"] }, { kind: "component", type: ManageSlideComponent, selector: "rtsee-manage-slide", inputs: ["manageSlide"] }, { kind: "component", type: Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ManageStoryComponent, decorators: [{
             type: Component,
@@ -1381,8 +1613,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         AutocompleteComponent,
                         ManageSlidesComponent,
                         ManageSlideComponent,
-                        Divider
-                    ], template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      <div class=\"rtsee-manage-story-image\">\n        <rtsee-image-uploader [imageUploader]=\"manageStory.imageUploader\"\n        ></rtsee-image-uploader>\n      </div>\n      <form class=\"rtsee-story-form rtsee-form\"\n            [formGroup]=\"storyForm\"\n            (ngSubmit)=\"submit()\"\n      >\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <input id=\"rtsee-story-name-field\"\n                     class=\"rtsee-form-field\"\n                     pInputText\n                     [formControl]=\"nameField\"\n                     [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n              />\n              <label for=\"sign-up-email\">Name</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (nameField.hasError('required') && nameField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Name is required</p-message>\n          }\n        </div>\n        <rtsee-autocomplete [config]=\"manageStory.categoriesMultiselect\"></rtsee-autocomplete>\n        <rtsee-autocomplete [config]=\"manageStory.labelsMultiselect\"></rtsee-autocomplete>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n              <label for=\"rtsee-story-description-field\">Description</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (descriptionField.hasError('required') && descriptionField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Description is required</p-message>\n          }\n        </div>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-input-number [formControl]=\"averageReadTimeField\"\n                              id=\"rtsee-story-average-read-time\"\n                              mode=\"decimal\"\n                              [min]=\"2\"\n                              [max]=\"10000\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\n        </div>\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n        <p-divider />\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageStory.cancel()\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n      </form>\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n" }]
+                        Divider,
+                        ToggleSwitch
+                    ], template: "<div class=\"rtsee-manage-story\">\n  @if (!manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-info rtsee-form-container\">\n      <div class=\"rtsee-manage-story-image\">\n        <rtsee-image-uploader [imageUploader]=\"manageStory.imageUploader\"\n        ></rtsee-image-uploader>\n      </div>\n      <form class=\"rtsee-story-form rtsee-form\"\n            [formGroup]=\"storyForm\"\n            (ngSubmit)=\"submit()\"\n      >\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <input id=\"rtsee-story-name-field\"\n                     class=\"rtsee-form-field\"\n                     pInputText\n                     [formControl]=\"nameField\"\n                     [class.p-invalid]=\"nameField.invalid && nameField.touched\"\n              />\n              <label for=\"sign-up-email\">Name</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (nameField.hasError('required') && nameField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Name is required</p-message>\n          }\n        </div>\n        <rtsee-autocomplete [config]=\"manageStory.categoriesMultiselect\"></rtsee-autocomplete>\n        <rtsee-autocomplete [config]=\"manageStory.labelsMultiselect\"></rtsee-autocomplete>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n            <textarea [formControl]=\"descriptionField\"\n                      id=\"rtsee-story-description-field\"\n                      class=\"rtsee-form-field\"\n                      rows=\"3\"\n                      cols=\"30\"\n                      pTextarea\n                      [class.p-invalid]=\"descriptionField.invalid && descriptionField.touched\"\n            ></textarea>\n              <label for=\"rtsee-story-description-field\">Description</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          @if (descriptionField.hasError('required') && descriptionField.touched) {\n            <p-message class=\"rtsee-form-field-error-message\"\n                       severity=\"error\"\n                       variant=\"simple\"\n                       size=\"small\"\n            >Description is required</p-message>\n          }\n        </div>\n        <div class=\"rtsee-form-field-container\">\n          <p-inputgroup>\n            <p-floatlabel variant=\"on\">\n              <p-input-number [formControl]=\"averageReadTimeField\"\n                              id=\"rtsee-story-average-read-time\"\n                              mode=\"decimal\"\n                              [min]=\"2\"\n                              [max]=\"10000\"\n              />\n              <label for=\"rtsee-story-average-read-time\">Average Read Time</label>\n            </p-floatlabel>\n          </p-inputgroup>\n          <div class=\"rtsee-form-field-container\">\n            <p>Published</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isPublished\"/>\n          </div>\n          <div class=\"rtsee-form-field-container\">\n            <p>Enable Comments</p>\n            <p-toggleswitch name=\"publishing\" formControlName=\"isDiscussable\"/>\n          </div>\n        </div>\n        <p-divider />\n        <div class=\"rtsee-story-slides-wrapper\">\n          <rtsee-manage-slides [manageSlides]=\"manageStory.manageSlides\"></rtsee-manage-slides>\n        </div>\n        <p-divider />\n        <p-button type=\"submit\"\n                  [label]=\"'Save'\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n        <p-button [label]=\"'Cancel'\"\n                  severity=\"secondary\"\n                  (click)=\"manageStory.cancel()\"\n                  [disabled]=\"manageStory.saveInProgress\"\n        />\n      </form>\n    </div>\n  }\n  @if (manageStory.manageSlides.selectedSlide) {\n    <div class=\"rtsee-manage-story-slide-wrapper\">\n      <rtsee-manage-slide [manageSlide]=\"manageStory.manageSlides.selectedSlide\"\n      ></rtsee-manage-slide>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { manageStory: [{
                 type: Input
             }] } });
@@ -1623,10 +1856,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class StoryDetailsComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "messenger"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-story-details', imports: [
+                        Chip,
+                        Tag,
+                        Button,
+                        ChatComponent
+                    ], template: "<div class=\"rtsee-story-details\">\n  <div class=\"rtsee-story-details-image-container\" (click)=\"presentation.setActiveStory(story)\">\n    <img [src]=\"story.imageUrl\" alt=\"story_image\" class=\"rtsee-story-details-image\">\n    <p-button label=\"Start Reading\"\n              class=\"rtsee-story-details-start-reading\"\n    ></p-button>\n    <p-button label=\"Close\"\n              class=\"rtsee-story-details-close\"\n              severity=\"secondary\"\n              (click)=\"presentation.closeStoryDetails()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-story-details-title-container\">\n    <h1 class=\"rtsee-story-details-title\">{{story.name}}</h1>\n  </div>\n  @if (story.categories?.length && false) {\n    <div class=\"rtsee-story-details-categories\">\n      @for (category of story.categories; track category.id) {\n        <p-tag [value]=\"category.name\"></p-tag>\n      }\n    </div>\n  }\n\n  @if (story.labels?.length) {\n    <div class=\"rtsee-story-details-labels\">\n      @for (label of story.labels; track label  .id) {\n        <p-chip class=\"rtsee-story-details-label\">\n          <span class=\"rtsee-story-details-label-left\"\n          >{{label.symbol}}</span>\n          <span class=\"rtsee-story-details-label-right\"\n          >{{label.name}}</span>\n        </p-chip>\n      }\n    </div>\n  }\n\n  <div class=\"rtsee-story-details-description-container\">\n    <p class=\"rtsee-story-details-description\">{{story.description}}</p>\n  </div>\n  <div class=\"rtsee-story-details-description-history\">\n  </div>\n  @if (story.isPublished) {\n    <div class=\"rtsee-story-details-feedback\">\n      <p>feedback here</p>\n    </div>\n  } @else if (messenger && story.discussion) {\n\n    <div class=\"rtsee-story-details-votes\">\n      <p class=\"rtsee-story-details-comments-label\">Comments</p>\n      <rtsee-chat [messenger]=\"messenger\"\n                  [chatData]=\"story.discussion\"\n      ></rtsee-chat>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { story: [{
+                type: Input
+            }], presentation: [{
+                type: Input
+            }], messenger: [{
+                type: Input
+            }] } });
+
 class PresentationComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.setActiveStoryById(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationComponent, isStandalone: true, selector: "rtsee-presentation", inputs: { presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n", dependencies: [{ kind: "component", type: PresentationHeaderComponent, selector: "rtsee-presentation-header", inputs: ["presentation"] }, { kind: "component", type: StoryThumbnailComponent, selector: "rtsee-story-thumbnail", inputs: ["story"] }, { kind: "component", type: StoryPlayerComponent, selector: "rtsee-story-player", inputs: ["story", "settings"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: PresentationsDashboardComponent, selector: "rtsee-presentations-dashboard", inputs: ["dashboard"] }, { kind: "component", type: PresentationSettingsComponent, selector: "rtsee-presentation-settings", inputs: ["settings", "presentation"] }, { kind: "component", type: StoryDetailsComponent, selector: "rtsee-story-details", inputs: ["story", "presentation", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationComponent, decorators: [{
             type: Component,
@@ -1637,10 +1890,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PreloaderComponent,
                         PreloaderComponent,
                         PresentationsDashboardComponent,
-                        PresentationSettingsComponent
-                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (!presentation.isDashboardOpen && !presentation.activeStory && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.setActiveStoryById(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  }\n</div>\n" }]
+                        PresentationSettingsComponent,
+                        StoryDetailsComponent
+                    ], standalone: true, template: "<div class=\"rtsee-presentation\">\n  <div class=\"rtsee-presentation-header-block\">\n    <rtsee-presentation-header [presentation]=\"presentation\"\n    ></rtsee-presentation-header>\n  </div>\n\n  @if (presentation.storyLoadInProgress) {\n    <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n  }\n\n  @if(presentation.isDashboardOpen && presentation.dashboard) {\n    <rtsee-presentations-dashboard [dashboard]=\"presentation.dashboard\"\n    ></rtsee-presentations-dashboard>\n  }\n\n  @if (presentation.settings.isExpanded) {\n    <rtsee-presentation-settings [settings]=\"presentation.settings\"\n                                 [presentation]=\"presentation\"\n    ></rtsee-presentation-settings>\n  }\n\n  @if (presentation.isCategoriesListVisible && !presentation.storyLoadInProgress) {\n    <div class=\"rtsee-presentation-categories-list\">\n      @if (presentation.categoriesLoadInProgress) {\n        <rtsee-preloader [diameter]=\"15\"></rtsee-preloader>\n      }\n      @for (category of presentation.categories; track category.id) {\n        <p class=\"rtsee-presentation-category-name\">{{category.name}}</p>\n        <div class=\"rtsee-presentation-stories-list\">\n          @for (story of category.stories; track story.id) {\n            <div class=\"rtsee-presentation-story-thumbnail-container\"\n                 (click)=\"presentation.openStoryDetails(story.id)\"\n            >\n              <rtsee-story-thumbnail\n                [story]=\"story\"\n              ></rtsee-story-thumbnail>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-story-viewer-container\">\n      <rtsee-story-player [story]=\"presentation.activeStory\"\n                          [settings]=\"presentation.settings\"\n      ></rtsee-story-player>\n    </div>\n  } @else if (presentation.openedStoryDetails) {\n    <rtsee-story-details [story]=\"presentation.openedStoryDetails\"\n                         [presentation]=\"presentation\"\n                         [messenger]=\"messenger\"\n    ></rtsee-story-details>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { presentation: [{
                 type: Input
+            }], messenger: [{
+                type: Input
             }] } });
 
 class RtseeNavComponent {
@@ -1666,8 +1922,6 @@ class RtseeNavComponent {
             console.log('RTSeeContainer: user peer not found');
             return false;
         }
-        console.log('peer', peer);
-        console.log('peer', peer.permissions?.length);
         const profileRoute = this.config.routes
             .find((r) => r.rtseeRoute === RTSeeRoutesList.PROFILE) || null;
         const dashboardRoute = this.config.routes
@@ -1709,18 +1963,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class RTSeeContainerComponent {
-    constructor(authService) {
+    constructor(authService, router) {
         this.authService = authService;
+        this.router = router;
         this.isSidenavExpanded = true;
+        this.isSidenavContent = false;
+        this.isSidenavFullScreen = false;
+    }
+    ngOnInit() {
+        this.authService.init(this.auth);
+        this.routeSubscription = this.router.events.pipe(
+        // Filter for the NavigationEnd event to know when navigation is complete
+        filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
+            this.defineSideNavState(event.url);
+        });
     }
     onSidenavToggleClicked() {
         this.isSidenavExpanded = !this.isSidenavExpanded;
     }
-    ngOnInit() {
-        this.authService.init(this.auth);
+    defineSideNavState(url) {
+        const isBase = url === '/' || url.startsWith('/?');
+        const routeUrlSplit = url.split('/');
+        const rootRoutePath = isBase ? '' : (routeUrlSplit[1] || null);
+        if (!rootRoutePath && !isBase) {
+            return;
+        }
+        const rtseeRoute = this.navigationConfig.routes
+            .find((rn) => rn.link === rootRoutePath) || null;
+        if (!rtseeRoute) {
+            return;
+        }
+        this.isSidenavContent = rtseeRoute.fullContent || false;
+        this.isSidenavFullScreen = rtseeRoute.fullScreen || false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, deps: [{ token: RTSeeAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, deps: [{ token: RTSeeAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation", "messenger"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, decorators: [{
             type: Component,
@@ -1731,8 +2008,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RtseeEventsDashboardComponent,
                         PresentationComponent,
                         RtseeNavComponent
-                    ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: RTSeeAuthService }], propDecorators: { rtsee: [{
+                    ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { rtsee: [{
                 type: Input
             }], navigationConfig: [{
                 type: Input