@rtsee/ngx 0.0.111 → 0.0.112

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Input, Component, ViewChild, EventEmitter, Output, forwardRef, Directive, HostListener, reflectComponentType, DOCUMENT, Inject, ChangeDetectionStrategy, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
-import { NgClass, NgIf, NgForOf, DatePipe, NgComponentOutlet, SlicePipe, JsonPipe, DOCUMENT as DOCUMENT$1, NgStyle, CommonModule, NgOptimizedImage } from '@angular/common';
+import { NgClass, NgIf, NgForOf, DatePipe, NgComponentOutlet, SlicePipe, JsonPipe, DOCUMENT as DOCUMENT$1, CommonModule, NgStyle, NgOptimizedImage } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Select } from 'primeng/select';
@@ -3919,9 +3919,249 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+class BaseEventWidgetComponent {
+    set event(value) {
+        this._event = value;
+        this.initCounter();
+    }
+    get event() {
+        return this._event;
+    }
+    set session(value) {
+        this._session = value;
+        this.initCounter();
+    }
+    get session() {
+        return this._session;
+    }
+    constructor(cd) {
+        this.cd = cd;
+        this.durationText = '0s';
+        this.totalSeconds = 0;
+        this.isLive = false;
+        this.intervalId = null;
+    }
+    ngOnInit() {
+        this.initCounter();
+    }
+    ngOnChanges(changes) {
+        if (changes['event'] || changes['session']) {
+            this.initCounter();
+        }
+    }
+    ngOnDestroy() {
+        this.stopCounter();
+    }
+    initCounter() {
+        this.stopCounter();
+        this.updateDuration();
+        if (this.isLive) {
+            this.intervalId = setInterval(() => {
+                this.updateDuration();
+                this.cd.markForCheck();
+            }, 1000);
+        }
+    }
+    stopCounter() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+    updateDuration() {
+        if (!this.event?.createdAt) {
+            this.durationText = '0s';
+            this.totalSeconds = 0;
+            this.isLive = false;
+            return;
+        }
+        const eventTime = new Date(this.event.createdAt).getTime();
+        if (isNaN(eventTime)) {
+            this.durationText = '0s';
+            this.totalSeconds = 0;
+            this.isLive = false;
+            return;
+        }
+        const events = this.session?.events || [];
+        // Sort all events chronologically (oldest to newest)
+        const sortedChronological = [...events].sort((a, b) => {
+            const timeA = new Date(a.createdAt).getTime();
+            const timeB = new Date(b.createdAt).getTime();
+            return timeA - timeB;
+        });
+        const currentIndex = sortedChronological.findIndex((e) => (e.id && this.event.id && e.id === this.event.id) || e === this.event);
+        // If there is an event chronologically after this one in the session:
+        if (currentIndex >= 0 && currentIndex < sortedChronological.length - 1) {
+            this.isLive = false;
+            const nextEvent = sortedChronological[currentIndex + 1];
+            const nextTime = new Date(nextEvent.createdAt).getTime();
+            this.totalSeconds = Math.max(0, Math.floor((nextTime - eventTime) / 1000));
+            this.durationText = this.formatSeconds(this.totalSeconds);
+            this.stopCounter();
+            return;
+        }
+        // This is the chronologically last event in the session (or standalone event)
+        if (this.session?.isActive) {
+            this.isLive = true;
+            this.totalSeconds = Math.max(0, Math.floor((Date.now() - eventTime) / 1000));
+            this.durationText = this.formatSeconds(this.totalSeconds);
+        }
+        else {
+            // Past session loaded from server: no subsequent event occurred, so counter is 0s
+            this.isLive = false;
+            this.totalSeconds = 0;
+            this.durationText = '0s';
+            this.stopCounter();
+        }
+    }
+    formatSeconds(seconds) {
+        if (seconds < 60) {
+            return `${seconds}s`;
+        }
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}m ${secs}s`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseEventWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: BaseEventWidgetComponent, isStandalone: true, inputs: { event: "event", session: "session" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseEventWidgetComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { event: [{
+                type: Input
+            }], session: [{
+                type: Input
+            }] } });
+
+class StoryDetailsOpenedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get storyName() {
+        return (this.event?.payload?.text ||
+            this.event?.payload?.data?.storyName ||
+            this.event?.payload?.data?.story?.name ||
+            'Story Details');
+    }
+    get storyUrl() {
+        if (this.event?.payload?.url) {
+            return this.event.payload.url;
+        }
+        const storyId = this.event?.payload?.data?.storyId ||
+            this.event?.payload?.data?.story?.id;
+        return storyId ? `/presentation/content/${storyId}` : null;
+    }
+    get imageUrl() {
+        return (this.event?.payload?.imageUrl ||
+            this.event?.payload?.data?.story?.imageUrl ||
+            null);
+    }
+    get description() {
+        return (this.event?.payload?.data?.storyDescription ||
+            this.event?.payload?.data?.story?.description ||
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsOpenedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsOpenedWidgetComponent, isStandalone: true, selector: "rtsee-story-details-opened-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget story-details-opened-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge opened-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">visibility</span>\n      <span class=\"widget-badge-label\">Story Opened</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"storyName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder\">\n          <span class=\"material-icons-outlined\">auto_stories</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      @if (storyUrl) {\n        <a\n          [href]=\"storyUrl\"\n          target=\"_blank\"\n          class=\"widget-title-link\"\n          [title]=\"storyName\"\n        >\n          <span class=\"widget-title\">{{ storyName }}</span>\n          <span class=\"material-icons-outlined external-icon\">open_in_new</span>\n        </a>\n      } @else {\n        <span class=\"widget-title\" [title]=\"storyName\">{{ storyName }}</span>\n      }\n\n      @if (description) {\n        <p class=\"widget-description\">{{ description }}</p>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsOpenedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-story-details-opened-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget story-details-opened-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge opened-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">visibility</span>\n      <span class=\"widget-badge-label\">Story Opened</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"storyName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder\">\n          <span class=\"material-icons-outlined\">auto_stories</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      @if (storyUrl) {\n        <a\n          [href]=\"storyUrl\"\n          target=\"_blank\"\n          class=\"widget-title-link\"\n          [title]=\"storyName\"\n        >\n          <span class=\"widget-title\">{{ storyName }}</span>\n          <span class=\"material-icons-outlined external-icon\">open_in_new</span>\n        </a>\n      } @else {\n        <span class=\"widget-title\" [title]=\"storyName\">{{ storyName }}</span>\n      }\n\n      @if (description) {\n        <p class=\"widget-description\">{{ description }}</p>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class StoryReadingStartedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get storyName() {
+        return (this.event?.payload?.text ||
+            this.event?.payload?.data?.storyName ||
+            this.event?.payload?.data?.story?.name ||
+            'Reading Story');
+    }
+    get storyUrl() {
+        if (this.event?.payload?.url) {
+            return this.event.payload.url;
+        }
+        const storyId = this.event?.payload?.data?.storyId ||
+            this.event?.payload?.data?.story?.id;
+        return storyId ? `/presentation/content/${storyId}` : null;
+    }
+    get imageUrl() {
+        return (this.event?.payload?.imageUrl ||
+            this.event?.payload?.data?.story?.imageUrl ||
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryReadingStartedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryReadingStartedWidgetComponent, isStandalone: true, selector: "rtsee-story-reading-started-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget story-reading-started-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge reading-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">menu_book</span>\n      <span class=\"widget-badge-label\">Reading Started</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently reading' : 'Time spent reading'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"storyName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder reading-placeholder\">\n          <span class=\"material-icons-outlined\">menu_book</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      @if (storyUrl) {\n        <a\n          [href]=\"storyUrl\"\n          target=\"_blank\"\n          class=\"widget-title-link\"\n          [title]=\"storyName\"\n        >\n          <span class=\"widget-title\">{{ storyName }}</span>\n          <span class=\"material-icons-outlined external-icon\">open_in_new</span>\n        </a>\n      } @else {\n        <span class=\"widget-title\" [title]=\"storyName\">{{ storyName }}</span>\n      }\n      <span class=\"widget-subtitle\">Interactive Story Session</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryReadingStartedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-story-reading-started-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget story-reading-started-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge reading-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">menu_book</span>\n      <span class=\"widget-badge-label\">Reading Started</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently reading' : 'Time spent reading'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"storyName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder reading-placeholder\">\n          <span class=\"material-icons-outlined\">menu_book</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      @if (storyUrl) {\n        <a\n          [href]=\"storyUrl\"\n          target=\"_blank\"\n          class=\"widget-title-link\"\n          [title]=\"storyName\"\n        >\n          <span class=\"widget-title\">{{ storyName }}</span>\n          <span class=\"material-icons-outlined external-icon\">open_in_new</span>\n        </a>\n      } @else {\n        <span class=\"widget-title\" [title]=\"storyName\">{{ storyName }}</span>\n      }\n      <span class=\"widget-subtitle\">Interactive Story Session</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class SlideNumberChangedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get slideNumber() {
+        const num = this.event?.payload?.data?.slideNumber ??
+            this.event?.payload?.data?.slide?.slideNumber;
+        return num !== undefined ? num : '?';
+    }
+    get totalSlides() {
+        const total = this.event?.payload?.data?.totalSlides;
+        return total !== undefined ? total : null;
+    }
+    get slideText() {
+        return (this.event?.payload?.text ||
+            this.event?.payload?.data?.slide?.description ||
+            this.event?.payload?.data?.slide?.name ||
+            `Slide ${this.slideNumber}`);
+    }
+    get storyName() {
+        return (this.event?.payload?.data?.storyName ||
+            this.event?.payload?.data?.story?.name ||
+            null);
+    }
+    get storyUrl() {
+        if (this.event?.payload?.url) {
+            return this.event.payload.url;
+        }
+        const storyId = this.event?.payload?.data?.storyId ||
+            this.event?.payload?.data?.story?.id;
+        return storyId ? `/presentation/content/${storyId}` : null;
+    }
+    get imageUrl() {
+        return (this.event?.payload?.imageUrl ||
+            this.event?.payload?.data?.slide?.imageUrl ||
+            this.event?.payload?.data?.story?.imageUrl ||
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideNumberChangedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideNumberChangedWidgetComponent, isStandalone: true, selector: "rtsee-slide-number-changed-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget slide-number-changed-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge slide-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\"\n        >view_carousel</span\n      >\n      <span class=\"widget-badge-label\">\n        Slide {{ slideNumber }}\n        @if (totalSlides) {\n          / {{ totalSlides }}\n        }\n      </span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently viewing slide' : 'Time spent on this slide'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"slideText\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder slide-placeholder\">\n          <span class=\"material-icons-outlined\">image</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"slideText\">{{ slideText }}</span>\n      @if (storyName) {\n        @if (storyUrl) {\n          <a\n            [href]=\"storyUrl\"\n            target=\"_blank\"\n            class=\"widget-story-link\"\n            [title]=\"storyName\"\n          >\n            <span class=\"widget-story-name\">{{ storyName }}</span>\n            <span class=\"material-icons-outlined external-icon\"\n              >open_in_new</span\n            >\n          </a>\n        } @else {\n          <span class=\"widget-story-name\">{{ storyName }}</span>\n        }\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideNumberChangedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-slide-number-changed-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget slide-number-changed-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge slide-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\"\n        >view_carousel</span\n      >\n      <span class=\"widget-badge-label\">\n        Slide {{ slideNumber }}\n        @if (totalSlides) {\n          / {{ totalSlides }}\n        }\n      </span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently viewing slide' : 'Time spent on this slide'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"slideText\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder slide-placeholder\">\n          <span class=\"material-icons-outlined\">image</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"slideText\">{{ slideText }}</span>\n      @if (storyName) {\n        @if (storyUrl) {\n          <a\n            [href]=\"storyUrl\"\n            target=\"_blank\"\n            class=\"widget-story-link\"\n            [title]=\"storyName\"\n          >\n            <span class=\"widget-story-name\">{{ storyName }}</span>\n            <span class=\"material-icons-outlined external-icon\"\n              >open_in_new</span\n            >\n          </a>\n        } @else {\n          <span class=\"widget-story-name\">{{ storyName }}</span>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
 class EventsWidgetsService {
     constructor() {
-        this.widgetsMap = [];
+        this.widgetsMap = [
+            {
+                name: 'story-details-opened',
+                component: StoryDetailsOpenedWidgetComponent,
+            },
+            {
+                name: 'story-reading-started',
+                component: StoryReadingStartedWidgetComponent,
+            },
+            {
+                name: 'slide-number-changed',
+                component: SlideNumberChangedWidgetComponent,
+            },
+        ];
     }
     getWidgetComponentByName(name) {
         /* eslint-disable */
@@ -3951,7 +4191,8 @@ class EventThumbnailComponent {
         this.timeInAgoFormat = '';
     }
     ngOnInit() {
-        if (this.event.data) {
+        const eventData = this.event.payload?.data || this.event.data;
+        if (eventData) {
             this.generateTooltip();
         }
         this.timeInAgoFormat = this.timeFormatService.toAgo(this.event.createdAt);
@@ -3962,16 +4203,17 @@ class EventThumbnailComponent {
     generateTooltip() {
         /* eslint-disable */
         let tooltip = '';
-        if (typeof this.event.data !== 'object') {
+        const eventData = this.event.payload?.data || this.event.data;
+        if (typeof eventData !== 'object' || !eventData) {
             return;
         }
         try {
-            for (const key in this.event.data) {
-                if (this.event.data.hasOwnProperty(key)) {
+            for (const key in eventData) {
+                if (eventData.hasOwnProperty(key)) {
                     if (tooltip) {
-                        tooltip += '&#013;';
+                        tooltip += '\n';
                     }
-                    tooltip += key + ' -> ' + this.event.data[key];
+                    tooltip += key + ' -> ' + eventData[key];
                 }
             }
             this.tooltip = tooltip;
@@ -3981,6 +4223,17 @@ class EventThumbnailComponent {
         }
         /* eslint-enable */
     }
+    ngOnChanges(changes) {
+        if (this.componentRef) {
+            if (changes['event']) {
+                this.componentRef.instance.event = this.event;
+            }
+            if (changes['session']) {
+                this.componentRef.instance.session = this.session;
+            }
+            this.componentRef.changeDetectorRef.detectChanges();
+        }
+    }
     ngAfterViewInit() {
         this.cd.detectChanges();
         /* eslint-disable */
@@ -3992,37 +4245,99 @@ class EventThumbnailComponent {
             const viewContainerRef = this.widgetHost.viewContainerRef;
             viewContainerRef.clear();
             const componentToShow = this.componentFactoryResolver.resolveComponentFactory(widget);
-            const componentRef = viewContainerRef.createComponent(componentToShow);
-            componentRef.instance.event = this.event;
-            componentRef.instance.event = this.event;
-            componentRef.changeDetectorRef.detectChanges();
+            this.componentRef = viewContainerRef.createComponent(componentToShow);
+            this.componentRef.instance.event = this.event;
+            this.componentRef.instance.session = this.session;
+            this.componentRef.changeDetectorRef.detectChanges();
         }
         /* eslint-enable */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EventThumbnailComponent, deps: [{ token: EventsWidgetsService }, { token: i0.ComponentFactoryResolver }, { token: TimeFormatHelperService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EventThumbnailComponent, isStandalone: true, selector: "rtsee-event-thumbnail", inputs: { event: "event" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], ngImport: i0, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div class=\"rtsee-events-dashboard-default-event-thumbnail\"\n         [ngClass]=\"{'rtsee-events-dashboard-default-event-thumbnail-with-data': event.data}\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">{{event.name}}</div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (event.data) {\n          <div class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n               [title]=\"tooltip\"\n          >\n          <span class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n          >info</span>\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EventThumbnailComponent, isStandalone: true, selector: "rtsee-event-thumbnail", inputs: { event: "event", session: "session" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div\n      class=\"rtsee-events-dashboard-default-event-thumbnail\"\n      [ngClass]=\"{\n        'rtsee-events-dashboard-default-event-thumbnail-with-data':\n          event.payload?.data || event.data,\n      }\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">\n        {{ event.name }}\n      </div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (event.payload?.data || event.data) {\n          <div\n            class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n            [title]=\"tooltip\"\n          >\n            <span\n              class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n              >info</span\n            >\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EventThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-event-thumbnail', imports: [WidgetDirective, NgClass], standalone: true, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div class=\"rtsee-events-dashboard-default-event-thumbnail\"\n         [ngClass]=\"{'rtsee-events-dashboard-default-event-thumbnail-with-data': event.data}\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">{{event.name}}</div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (event.data) {\n          <div class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n               [title]=\"tooltip\"\n          >\n          <span class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n          >info</span>\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-event-thumbnail', imports: [WidgetDirective, NgClass], standalone: true, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div\n      class=\"rtsee-events-dashboard-default-event-thumbnail\"\n      [ngClass]=\"{\n        'rtsee-events-dashboard-default-event-thumbnail-with-data':\n          event.payload?.data || event.data,\n      }\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">\n        {{ event.name }}\n      </div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (event.payload?.data || event.data) {\n          <div\n            class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n            [title]=\"tooltip\"\n          >\n            <span\n              class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n              >info</span\n            >\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: EventsWidgetsService }, { type: i0.ComponentFactoryResolver }, { type: TimeFormatHelperService }, { type: i0.ChangeDetectorRef }], propDecorators: { event: [{
                 type: Input
+            }], session: [{
+                type: Input
             }], widgetHost: [{
                 type: ViewChild,
                 args: [WidgetDirective, { static: false }]
             }] } });
 
 class RtseeEventsDashboardSessionComponent {
-    constructor(timeFormatService) {
+    constructor(timeFormatService, cd) {
         this.timeFormatService = timeFormatService;
+        this.cd = cd;
+        this.durationText = '00:00';
+        this.visibleEventsCount = 5;
+        this.timerInterval = null;
+    }
+    ngOnInit() {
+        this.initTimer();
+    }
+    ngOnChanges(changes) {
+        if (changes['session']) {
+            this.initTimer();
+        }
+    }
+    ngOnDestroy() {
+        this.stopTimer();
+    }
+    loadMoreEvents() {
+        this.visibleEventsCount += 5;
+        this.cd.markForCheck();
+    }
+    initTimer() {
+        this.stopTimer();
+        this.updateDuration();
+        if (this.session?.isActive) {
+            this.timerInterval = setInterval(() => {
+                this.updateDuration();
+                this.cd.markForCheck();
+            }, 1000);
+        }
+    }
+    stopTimer() {
+        if (this.timerInterval) {
+            clearInterval(this.timerInterval);
+            this.timerInterval = null;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardSessionComponent, deps: [{ token: TimeFormatHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardSessionComponent, isStandalone: true, selector: "rtsee-rtsee-events-dashboard-session", inputs: { session: "session" }, ngImport: i0, template: "<div class=\"rtsee-events-dashboard-session\">\n  @if (session.info) {\n    <div class=\"rtsee-events-dashboard-session-header\">\n      <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n      <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n      <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n        @if (session.info.deviceType === 'smartphone' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >phone_iphone</span>\n        }\n        @if (session.info.deviceType === 'tablet' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >tablet_mac</span>\n        }\n        @if (session.info.deviceType === 'desktop' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >computer</span>\n        }\n        @if (session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >smart_toy</span>\n        }\n      </div>\n    </div>\n  }\n  @if (session.events && session.events.length) {\n    <ul class=\"rtsee-events-dashboard-session-events-list\"\n    >\n      @for (event of session.events | slice:0:5; track event.id) {\n        <li class=\"rtsee-events-dashboard-session-event\">\n          <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n        </li>\n      }\n    </ul>\n  }\n\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EventThumbnailComponent, selector: "rtsee-event-thumbnail", inputs: ["event"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
+    updateDuration() {
+        if (!this.session) {
+            return;
+        }
+        const start = this.session.connectedAt
+            ? new Date(this.session.connectedAt).getTime()
+            : Date.now();
+        let end;
+        if (this.session.isActive) {
+            end = Date.now();
+        }
+        else if (this.session.endedAt) {
+            end = new Date(this.session.endedAt).getTime();
+        }
+        else if (this.session.events && this.session.events.length > 0) {
+            end = new Date(this.session.events[0].createdAt).getTime();
+        }
+        else {
+            end = start;
+        }
+        const totalSeconds = Math.max(0, Math.floor((end - start) / 1000));
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        this.durationText = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardSessionComponent, deps: [{ token: TimeFormatHelperService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardSessionComponent, isStandalone: true, selector: "rtsee-rtsee-events-dashboard-session", inputs: { session: "session" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rtsee-events-dashboard-session\">\n  <div class=\"rtsee-events-dashboard-session-header\">\n    @if (session.info) {\n      <div class=\"rtsee-events-dashboard-session-header-client\">\n        <p class=\"rtsee-events-dashboard-session-client-info\">\n          {{ session.info.clientThumbnail }}\n        </p>\n        <p class=\"rtsee-events-dashboard-session-os-info\">\n          {{ session.info.osThumbnail }}\n        </p>\n      </div>\n      <div\n        class=\"rtsee-events-dashboard-session-device-info\"\n        [title]=\"session.info.deviceThumbnail\"\n      >\n        @if (\n          session.info.deviceType === \"smartphone\" && !session.info.botName\n        ) {\n          <span\n            class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            >phone_iphone</span\n          >\n        }\n        @if (session.info.deviceType === \"tablet\" && !session.info.botName) {\n          <span\n            class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            >tablet_mac</span\n          >\n        }\n        @if (session.info.deviceType === \"desktop\" && !session.info.botName) {\n          <span\n            class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            >computer</span\n          >\n        }\n        @if (session.info.botName) {\n          <span\n            class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            >smart_toy</span\n          >\n        }\n      </div>\n    }\n    <div\n      class=\"rtsee-events-dashboard-session-duration\"\n      [class.is-active]=\"session.isActive\"\n      [title]=\"session.isActive ? 'Active session' : 'Session ended'\"\n    >\n      <span\n        class=\"material-icons-outlined rtsee-events-dashboard-session-duration-icon\"\n        >timer</span\n      >\n      <span class=\"rtsee-events-dashboard-session-duration-text\">{{\n        durationText\n      }}</span>\n    </div>\n  </div>\n\n  @if (session.events && session.events.length) {\n    <ul class=\"rtsee-events-dashboard-session-events-list\">\n      @for (\n        event of session.events | slice: 0 : visibleEventsCount;\n        track event.id\n      ) {\n        <li class=\"rtsee-events-dashboard-session-event\">\n          <rtsee-event-thumbnail\n            [event]=\"event\"\n            [session]=\"session\"\n          ></rtsee-event-thumbnail>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (session.events && session.events.length > visibleEventsCount) {\n    <div class=\"rtsee-events-dashboard-session-footer\">\n      <button\n        class=\"rtsee-events-dashboard-session-more-btn\"\n        (click)=\"loadMoreEvents()\"\n      >\n        {{ session.events.length - visibleEventsCount }} more\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: EventThumbnailComponent, selector: "rtsee-event-thumbnail", inputs: ["event", "session"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardSessionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-rtsee-events-dashboard-session', imports: [NgIf, EventThumbnailComponent, SlicePipe], standalone: true, template: "<div class=\"rtsee-events-dashboard-session\">\n  @if (session.info) {\n    <div class=\"rtsee-events-dashboard-session-header\">\n      <p class=\"rtsee-events-dashboard-session-client-info\">{{session.info.clientThumbnail}}</p>\n      <p class=\"rtsee-events-dashboard-session-os-info\">{{session.info.osThumbnail}}</p>\n      <div class=\"rtsee-events-dashboard-session-device-info\" [title]=\"session.info.deviceThumbnail\">\n        @if (session.info.deviceType === 'smartphone' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >phone_iphone</span>\n        }\n        @if (session.info.deviceType === 'tablet' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >tablet_mac</span>\n        }\n        @if (session.info.deviceType === 'desktop' && !session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >computer</span>\n        }\n        @if (session.info.botName) {\n          <span class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n          >smart_toy</span>\n        }\n      </div>\n    </div>\n  }\n  @if (session.events && session.events.length) {\n    <ul class=\"rtsee-events-dashboard-session-events-list\"\n    >\n      @for (event of session.events | slice:0:5; track event.id) {\n        <li class=\"rtsee-events-dashboard-session-event\">\n          <rtsee-event-thumbnail [event]=\"event\"></rtsee-event-thumbnail>\n        </li>\n      }\n    </ul>\n  }\n\n  <div class=\"rtsee-events-dashboard-session-footer\">\n    <button *ngIf=\"session.events.length > 5\">{{session.events.length - 5}} more</button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: TimeFormatHelperService }], propDecorators: { session: [{
+            args: [{ selector: 'rtsee-rtsee-events-dashboard-session', imports: [NgIf, EventThumbnailComponent, SlicePipe, NgClass], standalone: true, template: "<div class=\"rtsee-events-dashboard-session\">\n  <div class=\"rtsee-events-dashboard-session-header\">\n    @if (session.info) {\n      <div class=\"rtsee-events-dashboard-session-header-client\">\n        <p class=\"rtsee-events-dashboard-session-client-info\">\n          {{ session.info.clientThumbnail }}\n        </p>\n        <p class=\"rtsee-events-dashboard-session-os-info\">\n          {{ session.info.osThumbnail }}\n        </p>\n      </div>\n      <div\n        class=\"rtsee-events-dashboard-session-device-info\"\n        [title]=\"session.info.deviceThumbnail\"\n      >\n        @if (\n          session.info.deviceType === \"smartphone\" && !session.info.botName\n        ) {\n          <span\n            class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            >phone_iphone</span\n          >\n        }\n        @if (session.info.deviceType === \"tablet\" && !session.info.botName) {\n          <span\n            class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            >tablet_mac</span\n          >\n        }\n        @if (session.info.deviceType === \"desktop\" && !session.info.botName) {\n          <span\n            class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            >computer</span\n          >\n        }\n        @if (session.info.botName) {\n          <span\n            class=\"material-icons-outlined rtsee-events-dashboard-session-device-info-icon\"\n            >smart_toy</span\n          >\n        }\n      </div>\n    }\n    <div\n      class=\"rtsee-events-dashboard-session-duration\"\n      [class.is-active]=\"session.isActive\"\n      [title]=\"session.isActive ? 'Active session' : 'Session ended'\"\n    >\n      <span\n        class=\"material-icons-outlined rtsee-events-dashboard-session-duration-icon\"\n        >timer</span\n      >\n      <span class=\"rtsee-events-dashboard-session-duration-text\">{{\n        durationText\n      }}</span>\n    </div>\n  </div>\n\n  @if (session.events && session.events.length) {\n    <ul class=\"rtsee-events-dashboard-session-events-list\">\n      @for (\n        event of session.events | slice: 0 : visibleEventsCount;\n        track event.id\n      ) {\n        <li class=\"rtsee-events-dashboard-session-event\">\n          <rtsee-event-thumbnail\n            [event]=\"event\"\n            [session]=\"session\"\n          ></rtsee-event-thumbnail>\n        </li>\n      }\n    </ul>\n  }\n\n  @if (session.events && session.events.length > visibleEventsCount) {\n    <div class=\"rtsee-events-dashboard-session-footer\">\n      <button\n        class=\"rtsee-events-dashboard-session-more-btn\"\n        (click)=\"loadMoreEvents()\"\n      >\n        {{ session.events.length - visibleEventsCount }} more\n      </button>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: i0.ChangeDetectorRef }], propDecorators: { session: [{
                 type: Input
             }] } });
 
@@ -4036,11 +4351,11 @@ class RtseeEventsDashboardClientThumbnailComponent {
         this.dashboard.openChat(this.client);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardClientThumbnailComponent, deps: [{ token: TimeFormatHelperService }, { token: DefaultImagesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardClientThumbnailComponent, isStandalone: true, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: { dashboard: "dashboard", client: "client" }, ngImport: i0, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n  <div class=\"rtsee-dashboard-client-header\">\n    <div class=\"rtsee-dashboard-client-header-photo\">\n      <div class=\"rtsee-dashboard-client-header-image\"\n           [style.background-image]=\"'url(' + client.imageUrl || defaultImagesService.PROFILE + ')'\"\n      ></div>\n      @if (client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\n    </div>\n    <p class=\"rtsee-dashboard-client-name\">\n      <span class=\"rtsee-dashboard-client-name-text\">{{ client.name || client.id }}</span>\n      <button (click)=\"openChat()\" class=\"rtsee-dashboard-client-engage\">\n        <span class=\"rtsee-dashboard-client-engage-icon material-icons-outlined\">chat_bubble</span>\n      </button>\n    </p>\n  </div>\n  <div class=\"rtsee-dashboard-sessions\">\n    @for(session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RtseeEventsDashboardSessionComponent, selector: "rtsee-rtsee-events-dashboard-session", inputs: ["session"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardClientThumbnailComponent, isStandalone: true, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: { dashboard: "dashboard", client: "client" }, ngImport: i0, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n  <div class=\"rtsee-dashboard-client-header\">\n    <div class=\"rtsee-dashboard-client-header-photo\">\n      <div\n        class=\"rtsee-dashboard-client-header-image\"\n        [style.background-image]=\"\n          'url(' + client.imageUrl || defaultImagesService.PROFILE + ')'\n        \"\n      ></div>\n      @if (client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\n    </div>\n    <p class=\"rtsee-dashboard-client-name\">\n      <span class=\"rtsee-dashboard-client-name-text\">{{\n        client.name || client.id\n      }}</span>\n      <button (click)=\"openChat()\" class=\"rtsee-dashboard-client-engage\">\n        <span class=\"rtsee-dashboard-client-engage-icon material-icons-outlined\"\n          >chat_bubble</span\n        >\n      </button>\n    </p>\n  </div>\n  <div class=\"rtsee-dashboard-sessions\">\n    @for (session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session\n          [session]=\"session\"\n        ></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RtseeEventsDashboardSessionComponent, selector: "rtsee-rtsee-events-dashboard-session", inputs: ["session"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardClientThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-rtsee-events-dashboard-client-thumbnail', imports: [RtseeEventsDashboardSessionComponent], standalone: true, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n  <div class=\"rtsee-dashboard-client-header\">\n    <div class=\"rtsee-dashboard-client-header-photo\">\n      <div class=\"rtsee-dashboard-client-header-image\"\n           [style.background-image]=\"'url(' + client.imageUrl || defaultImagesService.PROFILE + ')'\"\n      ></div>\n      @if (client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\n    </div>\n    <p class=\"rtsee-dashboard-client-name\">\n      <span class=\"rtsee-dashboard-client-name-text\">{{ client.name || client.id }}</span>\n      <button (click)=\"openChat()\" class=\"rtsee-dashboard-client-engage\">\n        <span class=\"rtsee-dashboard-client-engage-icon material-icons-outlined\">chat_bubble</span>\n      </button>\n    </p>\n  </div>\n  <div class=\"rtsee-dashboard-sessions\">\n    @for(session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session [session]=\"session\"></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'ngx-rtsee-events-dashboard-client-thumbnail', imports: [RtseeEventsDashboardSessionComponent], standalone: true, template: "<div class=\"rtsee-dashboard-client-thumbnail\">\n  <div class=\"rtsee-dashboard-client-header\">\n    <div class=\"rtsee-dashboard-client-header-photo\">\n      <div\n        class=\"rtsee-dashboard-client-header-image\"\n        [style.background-image]=\"\n          'url(' + client.imageUrl || defaultImagesService.PROFILE + ')'\n        \"\n      ></div>\n      @if (client.isConnected) {\n        <div class=\"rtsee-dashboard-client-live-indicator\"></div>\n      }\n    </div>\n    <p class=\"rtsee-dashboard-client-name\">\n      <span class=\"rtsee-dashboard-client-name-text\">{{\n        client.name || client.id\n      }}</span>\n      <button (click)=\"openChat()\" class=\"rtsee-dashboard-client-engage\">\n        <span class=\"rtsee-dashboard-client-engage-icon material-icons-outlined\"\n          >chat_bubble</span\n        >\n      </button>\n    </p>\n  </div>\n  <div class=\"rtsee-dashboard-sessions\">\n    @for (session of client.sessions; track session.id) {\n      <div class=\"rtsee-dashboard-sessions-container\">\n        <rtsee-rtsee-events-dashboard-session\n          [session]=\"session\"\n        ></rtsee-rtsee-events-dashboard-session>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: DefaultImagesService }], propDecorators: { dashboard: [{
                 type: Input
             }], client: [{
@@ -4048,12 +4363,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class RtseeEventsDashboardComponent {
+    loadMore() {
+        if (this.eventsDashboard) {
+            this.eventsDashboard.loadMoreClients();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardComponent, isStandalone: true, selector: "rtsee-events-dashboard", inputs: { eventsDashboard: "eventsDashboard" }, ngImport: i0, template: "<div class=\"rtsee-events-dashboard\">\n  <div class=\"rtsee-events-dashboard-client-thumbnails\">\n    @for (client of eventsDashboard.clients; track client.id) {\n      <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\">\n        <ngx-rtsee-events-dashboard-client-thumbnail\n          [client]=\"client\"\n          [dashboard]=\"eventsDashboard\"\n        ></ngx-rtsee-events-dashboard-client-thumbnail>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: RtseeEventsDashboardClientThumbnailComponent, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: ["dashboard", "client"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEventsDashboardComponent, isStandalone: true, selector: "rtsee-events-dashboard", inputs: { eventsDashboard: "eventsDashboard" }, ngImport: i0, template: "<div class=\"rtsee-events-dashboard\">\n  <div class=\"rtsee-events-dashboard-client-thumbnails\">\n    @for (client of eventsDashboard.clients; track client.id) {\n      <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\">\n        <ngx-rtsee-events-dashboard-client-thumbnail\n          [client]=\"client\"\n          [dashboard]=\"eventsDashboard\"\n        ></ngx-rtsee-events-dashboard-client-thumbnail>\n      </div>\n    }\n  </div>\n\n  @if (eventsDashboard?.hasMoreClients) {\n    <div class=\"rtsee-events-dashboard-load-more\">\n      <button\n        type=\"button\"\n        class=\"rtsee-events-dashboard-load-more-btn\"\n        [disabled]=\"eventsDashboard.isLoadingMore\"\n        (click)=\"loadMore()\"\n      >\n        @if (eventsDashboard.isLoadingMore) {\n          <span class=\"material-icons-outlined spin-icon\">sync</span>\n          <span>Loading...</span>\n        } @else {\n          <span class=\"material-icons-outlined\">expand_more</span>\n          <span>Load More Sessions</span>\n        }\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: RtseeEventsDashboardClientThumbnailComponent, selector: "ngx-rtsee-events-dashboard-client-thumbnail", inputs: ["dashboard", "client"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEventsDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-events-dashboard', imports: [RtseeEventsDashboardClientThumbnailComponent], standalone: true, template: "<div class=\"rtsee-events-dashboard\">\n  <div class=\"rtsee-events-dashboard-client-thumbnails\">\n    @for (client of eventsDashboard.clients; track client.id) {\n      <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\">\n        <ngx-rtsee-events-dashboard-client-thumbnail\n          [client]=\"client\"\n          [dashboard]=\"eventsDashboard\"\n        ></ngx-rtsee-events-dashboard-client-thumbnail>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-events-dashboard', imports: [RtseeEventsDashboardClientThumbnailComponent], standalone: true, template: "<div class=\"rtsee-events-dashboard\">\n  <div class=\"rtsee-events-dashboard-client-thumbnails\">\n    @for (client of eventsDashboard.clients; track client.id) {\n      <div class=\"rtsee-events-dashboard-client-thumbnail-wrapper\">\n        <ngx-rtsee-events-dashboard-client-thumbnail\n          [client]=\"client\"\n          [dashboard]=\"eventsDashboard\"\n        ></ngx-rtsee-events-dashboard-client-thumbnail>\n      </div>\n    }\n  </div>\n\n  @if (eventsDashboard?.hasMoreClients) {\n    <div class=\"rtsee-events-dashboard-load-more\">\n      <button\n        type=\"button\"\n        class=\"rtsee-events-dashboard-load-more-btn\"\n        [disabled]=\"eventsDashboard.isLoadingMore\"\n        (click)=\"loadMore()\"\n      >\n        @if (eventsDashboard.isLoadingMore) {\n          <span class=\"material-icons-outlined spin-icon\">sync</span>\n          <span>Loading...</span>\n        } @else {\n          <span class=\"material-icons-outlined\">expand_more</span>\n          <span>Load More Sessions</span>\n        }\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { eventsDashboard: [{
                 type: Input
             }] } });
@@ -6889,5 +7209,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, StoryElementsSectionComponent, WorkflowStepsService };
+export { BaseEventWidgetComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent };
 //# sourceMappingURL=rtsee-ngx.mjs.map