@rtsee/ngx 0.0.112 → 0.0.113

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

@@ -10,23 +10,23 @@ import * as i4 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
 import { interval, tap, map, filter } from 'rxjs';
 import { RTSeeTextLabelKeys, RTSeeCore, hasPermission, RTSeePeerPermissions } from '@rtsee/core';
-import * as i2$2 from 'primeng/message';
-import { Message, MessageModule } from 'primeng/message';
 import { AuthEndpointsKeys, LS_TOKEN_LABEL, LS_USER_LABEL, DEFAULT_ROUTE_NAMES } from '@rtsee/auth';
 import * as i2 from '@angular/router';
 import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
-import { Divider } from 'primeng/divider';
 import * as i1$1 from '@angular/common/http';
 import { RTSeeChatMemberRoles, RTSeeIllustratorEvents, RTSeeChatTypes, OzzyTaskStatus, getStoryTranslatorLanguage, STORY_TRANSLATOR_LANGUAGES } from '@rtsee/common';
 import { sanitizeImageUrl, ManageAgentForm, RTSeeForm, RTSeeFormFieldRadioGroup, RTSeeFormField, RTSeeFormFieldImageUploader, fetchImageBlob, RTSeeRater } from '@rtsee/utilities-ui';
 import { InputText } from 'primeng/inputtext';
 import { InputGroup } from 'primeng/inputgroup';
+import * as i2$2 from 'primeng/message';
+import { Message, MessageModule } from 'primeng/message';
 import { Textarea } from 'primeng/textarea';
 import { Checkbox } from 'primeng/checkbox';
 import { RadioButton } from 'primeng/radiobutton';
 import { InputNumber } from 'primeng/inputnumber';
 import * as i1$2 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
+import { Divider } from 'primeng/divider';
 import { ImageCropperComponent } from 'ngx-image-cropper';
 import { Tooltip } from 'primeng/tooltip';
 import { Fieldset } from 'primeng/fieldset';
@@ -51,7 +51,6 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'primeng/tabs';
 import { ColorPicker } from 'primeng/colorpicker';
 import { Slider } from 'primeng/slider';
 import { Tag } from 'primeng/tag';
-import { Listbox } from 'primeng/listbox';
 import { RTSeeRoutesList } from '@rtsee/factory';
 import { Avatar } from 'primeng/avatar';
 import { Image } from 'primeng/image';
@@ -284,21 +283,81 @@ class ProfileComponent {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
         this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
     }
+    get targetPeer() {
+        if (this.peer) {
+            return { id: this.peer.clientId, name: this.peer.name, imageUrl: this.peer.imageUrl };
+        }
+        if (this.messenger?.openedChat) {
+            const myId = this.messenger.myPeer?.clientId || this.messenger.clientId;
+            const other = this.messenger.openedChat.members.find((m) => m.id !== myId && m.clientId !== myId);
+            if (other) {
+                return other;
+            }
+        }
+        if (this.messenger?.myPeer) {
+            return {
+                id: this.messenger.myPeer.clientId,
+                name: this.messenger.myPeer.name,
+                imageUrl: this.messenger.myPeer.imageUrl,
+            };
+        }
+        return undefined;
+    }
+    get isOtherUser() {
+        if (!this.messenger?.ownProfileOpened) {
+            return true;
+        }
+        const myId = this.messenger?.myPeer?.clientId || this.messenger?.clientId;
+        if (this.targetPeer && myId && this.targetPeer.id !== myId) {
+            return true;
+        }
+        return false;
+    }
+    get displayName() {
+        return (this.targetPeer?.name ||
+            this.messenger?.openedChat?.name ||
+            this.messenger?.myPeer?.name ||
+            'User');
+    }
+    get displayInitials() {
+        const name = this.displayName.trim();
+        if (!name)
+            return '?';
+        const parts = name.split(' ');
+        if (parts.length >= 2 && parts[1]) {
+            return (parts[0][0] + parts[1][0]).toUpperCase();
+        }
+        return name.slice(0, 2).toUpperCase();
+    }
+    get displayImageUrl() {
+        return this.targetPeer?.imageUrl || (this.isOtherUser ? undefined : this.messenger?.myPeer?.imageUrl);
+    }
+    get displaySubtitle() {
+        if (this.isOtherUser) {
+            return this.messenger?.openedChat ? 'Direct Chat' : 'Contact';
+        }
+        if (!this.messenger?.myPeer?.name) {
+            return '';
+        }
+        return 'My Profile';
+    }
     setLanguage() {
         this.messenger.setLanguage(this.messenger.currentLanguage);
         void this.messenger.propagateLanguageChange(this.messenger.currentLanguage);
     }
     call() {
-        if (!this.messenger.openedChat) {
+        const chat = this.messenger.openedChat;
+        if (!chat) {
             return;
         }
-        void this.messenger.initializeVideoCall(this.messenger.openedChat);
+        void this.messenger.initializeVideoCall(chat);
     }
     videoCall() {
-        if (!this.messenger.openedChat) {
+        const chat = this.messenger.openedChat;
+        if (!chat) {
             return;
         }
-        void this.messenger.initializeVideoCall(this.messenger.openedChat);
+        void this.messenger.initializeVideoCall(chat);
     }
     logOut() {
         this.authService.rtseeAuth.logOut();
@@ -308,11 +367,11 @@ class ProfileComponent {
         }, 200);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, deps: [{ token: RTSeeAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ProfileComponent, isStandalone: true, selector: "rtsee-profile", inputs: { messenger: "messenger", peer: "peer" }, ngImport: i0, template: "<div class=\"rts-messenger-profile\">\n  @if (!messenger.ownProfileOpened) {\n    <ul class=\"rts-messenger-profile-actions\">\n      <li class=\"rts-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"call()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-phone\"\n        />\n      </li>\n      <li class=\"rts-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"videoCall()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-video\"\n        />\n      </li>\n    </ul>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rts-messenger-profile-info\">\n      <div class=\"rts-messenger-profile-glass-card\">\n        <p class=\"rts-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n        <div class=\"rts-messenger-profile-info-language\">\n          <p class=\"rts-messenger-profile-info-language-label\">Language:</p>\n          <p-select [options]=\"messenger.languageOptions\"\n                    [(ngModel)]=\"messenger.currentLanguage\"\n                    (ngModelChange)=\"setLanguage()\"\n                    optionLabel=\"key\"\n                    optionValue=\"key\"\n                    [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                    class=\"rts-messenger-profile-info-language-select\"\n          />\n        </div>\n        <div class=\"rts-messenger-profile-edit-btn\">\n          <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n                    (click)=\"messenger.openManageProfile()\"\n          ></p-button>\n        </div>\n      </div>\n\n      @if (messenger.myPeer.plan) {\n        <p-divider></p-divider>\n        <div class=\"rts-messenger-profile-glass-card\">\n          <div class=\"rts-messenger-profile-plan-status\">\n            <p-message severity=\"success\">\n              <span>{{messenger.myPeer.plan.productName}}</span>\n            </p-message>\n          </div>\n          <div class=\"rts-messenger-profile-manage-plan-btn\">\n            <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n                      (click)=\"messenger.openManagePlanPage()\"\n            ></p-button>\n          </div>\n        </div>\n      } @else {\n        <p-divider></p-divider>\n        <div class=\"rts-messenger-profile-subscribe-btn\">\n          <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL]\"\n                    (click)=\"messenger.openPaymentPage()\"\n          ></p-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n    <div class=\"rts-messenger-profile-auth\">\n      <div class=\"rts-messenger-profile-anon-message\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p-message severity=\"warn\">\n            <span>This is an anonymous identity we've generated for you.</span>\n            <span>&nbsp;</span>\n            <span>You can use it to play around.</span>\n            <span>&nbsp;</span>\n            <span>But we are guilty of erasing these time after time.</span>\n            <span>&nbsp;</span>\n            <span>So please Sign Up if you're looking for something more stable :)</span>\n          </p-message>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p-message severity=\"warn\">\n            <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n            <span>&nbsp;</span>\n            <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n          </p-message>\n        }\n      </div>\n\n      <div class=\"rts-messenger-profile-auth-buttons\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rts-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n                  severity=\"secondary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n                  class=\"rts-messenger-profile-auth-button\"\n        ></p-button>\n      </div>\n    </div>\n  } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n    <p-divider></p-divider>\n    <div class=\"rts-messenger-profile-logout-btn\">\n      <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n                severity=\"danger\"\n                (click)=\"logOut()\"\n      ></p-button>\n    </div>\n  }\n</div>\n", dependencies: [{ 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: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: ProfileComponent, isStandalone: true, selector: "rtsee-profile", inputs: { messenger: "messenger", peer: "peer" }, ngImport: i0, template: "<div class=\"rts-chat-info rts-messenger-profile\">\n  @if (displaySubtitle) {\n    <div class=\"rts-chat-info-meta\">\n      <p class=\"rts-chat-info-type\">{{ displaySubtitle }}</p>\n    </div>\n  }\n\n  @if (isOtherUser) {\n    <div class=\"rts-chat-info-call-actions\">\n      <button class=\"rts-call-btn\"\n              (click)=\"call()\"\n              type=\"button\"\n              title=\"Audio Call\"\n      >\n        <span class=\"material-icons-outlined\">call</span>\n        <span>Audio</span>\n      </button>\n      <button class=\"rts-call-btn rts-call-btn-video\"\n              (click)=\"videoCall()\"\n              type=\"button\"\n              title=\"Video Call\"\n      >\n        <span class=\"material-icons-outlined\">videocam</span>\n        <span>Video</span>\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"messenger.openManageProfile()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL] || 'Edit Profile' }}\n      </button>\n    </div>\n\n    <hr class=\"rts-divider\" />\n\n    <div class=\"rts-profile-section\">\n      <div class=\"rts-profile-field-row\">\n        <label class=\"rts-profile-field-label\">Language</label>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rts-profile-language-select\"\n        />\n      </div>\n    </div>\n\n    @if (messenger.myPeer.plan) {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <div class=\"rts-profile-plan-badge\">\n          <span class=\"material-icons-outlined\">verified</span>\n          <span>{{ messenger.myPeer.plan.productName }}</span>\n        </div>\n        <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n                (click)=\"messenger.openManagePlanPage()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN] || 'Manage Plan' }}\n        </button>\n      </div>\n    } @else {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n                (click)=\"messenger.openPaymentPage()\"\n        >\n          <span class=\"material-icons-outlined\">stars</span>\n          {{ messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL] || 'Upgrade Plan' }}\n        </button>\n      </div>\n    }\n\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"logOut()\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON] || 'Logout' }}\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer?.isAnonymous) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-profile-anon-box\">\n      <div class=\"rts-profile-anon-icon\">\n        <span class=\"material-icons-outlined\">shield</span>\n      </div>\n      <div class=\"rts-profile-anon-text\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p>This is a temporary anonymous identity. Sign up or sign in to save your history permanently.</p>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p>\u0426\u0435 \u0442\u0438\u043C\u0447\u0430\u0441\u043E\u0432\u0430 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0430 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C. \u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u0437\u0431\u0435\u0440\u0435\u0433\u0442\u0438 \u0456\u0441\u0442\u043E\u0440\u0456\u044E \u0441\u043F\u0456\u043B\u043A\u0443\u0432\u0430\u043D\u043D\u044F.</p>\n        }\n      </div>\n    </div>\n\n    <div class=\"rts-profile-auth-actions\">\n      <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON] || 'Sign Up' }}\n      </button>\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON] || 'Sign In' }}\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-profile', imports: [Button, Message, RouterLink, Select, FormsModule, Divider], standalone: true, template: "<div class=\"rts-messenger-profile\">\n  @if (!messenger.ownProfileOpened) {\n    <ul class=\"rts-messenger-profile-actions\">\n      <li class=\"rts-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"call()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-phone\"\n        />\n      </li>\n      <li class=\"rts-messenger-profile-actions-item\">\n        <p-button\n          (click)=\"videoCall()\"\n          size=\"large\"\n          severity=\"secondary\"\n          icon=\"pi pi-video\"\n        />\n      </li>\n    </ul>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rts-messenger-profile-info\">\n      <div class=\"rts-messenger-profile-glass-card\">\n        <p class=\"rts-messenger-profile-info-name\">{{messenger.myPeer.name}}</p>\n        <div class=\"rts-messenger-profile-info-language\">\n          <p class=\"rts-messenger-profile-info-language-label\">Language:</p>\n          <p-select [options]=\"messenger.languageOptions\"\n                    [(ngModel)]=\"messenger.currentLanguage\"\n                    (ngModelChange)=\"setLanguage()\"\n                    optionLabel=\"key\"\n                    optionValue=\"key\"\n                    [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                    class=\"rts-messenger-profile-info-language-select\"\n          />\n        </div>\n        <div class=\"rts-messenger-profile-edit-btn\">\n          <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL]\"\n                    (click)=\"messenger.openManageProfile()\"\n          ></p-button>\n        </div>\n      </div>\n\n      @if (messenger.myPeer.plan) {\n        <p-divider></p-divider>\n        <div class=\"rts-messenger-profile-glass-card\">\n          <div class=\"rts-messenger-profile-plan-status\">\n            <p-message severity=\"success\">\n              <span>{{messenger.myPeer.plan.productName}}</span>\n            </p-message>\n          </div>\n          <div class=\"rts-messenger-profile-manage-plan-btn\">\n            <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN]\"\n                      (click)=\"messenger.openManagePlanPage()\"\n            ></p-button>\n          </div>\n        </div>\n      } @else {\n        <p-divider></p-divider>\n        <div class=\"rts-messenger-profile-subscribe-btn\">\n          <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL]\"\n                    (click)=\"messenger.openPaymentPage()\"\n          ></p-button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (messenger.ownProfileOpened && messenger.myPeer?.isAnonymous) {\n    <div class=\"rts-messenger-profile-auth\">\n      <div class=\"rts-messenger-profile-anon-message\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p-message severity=\"warn\">\n            <span>This is an anonymous identity we've generated for you.</span>\n            <span>&nbsp;</span>\n            <span>You can use it to play around.</span>\n            <span>&nbsp;</span>\n            <span>But we are guilty of erasing these time after time.</span>\n            <span>&nbsp;</span>\n            <span>So please Sign Up if you're looking for something more stable :)</span>\n          </p-message>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p-message severity=\"warn\">\n            <span>\u041C\u0438 \u0437\u0433\u0435\u043D\u0435\u0440\u0443\u0432\u0430\u043B\u0438 \u0434\u043B\u044F \u0432\u0430\u0441 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0443 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C.</span>\n            <span>&nbsp;</span>\n            <span>\u0421\u043A\u043E\u0440\u0438\u0441\u0442\u0430\u0439\u0442\u0435\u0441\u044F \u043D\u0435\u044E \u0434\u043B\u044F \u043E\u0437\u043D\u0430\u0439\u043E\u043C\u043B\u0435\u043D\u043D\u044F \u0437 \u0441\u0430\u0439\u0442\u043E\u043C.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u0430, \u0447\u0430\u0441-\u0432\u0456\u0434-\u0447\u0430\u0441\u0443, \u043C\u0438 \u0457\u0445 \u0432\u0438\u0434\u0430\u043B\u044F\u0454\u043C\u043E.</span>\n            <span>&nbsp;</span>\n            <span>\u0422\u043E\u0436 \u043A\u0440\u0430\u0449\u0435 \u0437\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u043D\u0435 \u0432\u0442\u0440\u0430\u0442\u0438\u0442\u0438 \u0434\u0430\u043D\u0456 :)</span>\n          </p-message>\n        }\n      </div>\n\n      <div class=\"rts-messenger-profile-auth-buttons\">\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON]\"\n                  severity=\"primary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n                  class=\"rts-messenger-profile-auth-button\"\n        ></p-button>\n        <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON]\"\n                  severity=\"secondary\"\n                  [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n                  class=\"rts-messenger-profile-auth-button\"\n        ></p-button>\n      </div>\n    </div>\n  } @else if (messenger.ownProfileOpened && !messenger.myPeer?.isAnonymous) {\n    <p-divider></p-divider>\n    <div class=\"rts-messenger-profile-logout-btn\">\n      <p-button [label]=\"messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON]\"\n                severity=\"danger\"\n                (click)=\"logOut()\"\n      ></p-button>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-profile', imports: [RouterLink, Select, FormsModule], standalone: true, template: "<div class=\"rts-chat-info rts-messenger-profile\">\n  @if (displaySubtitle) {\n    <div class=\"rts-chat-info-meta\">\n      <p class=\"rts-chat-info-type\">{{ displaySubtitle }}</p>\n    </div>\n  }\n\n  @if (isOtherUser) {\n    <div class=\"rts-chat-info-call-actions\">\n      <button class=\"rts-call-btn\"\n              (click)=\"call()\"\n              type=\"button\"\n              title=\"Audio Call\"\n      >\n        <span class=\"material-icons-outlined\">call</span>\n        <span>Audio</span>\n      </button>\n      <button class=\"rts-call-btn rts-call-btn-video\"\n              (click)=\"videoCall()\"\n              type=\"button\"\n              title=\"Video Call\"\n      >\n        <span class=\"material-icons-outlined\">videocam</span>\n        <span>Video</span>\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer && !messenger.myPeer.isAnonymous) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"messenger.openManageProfile()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_EDIT_PROFILE_BTN_LABEL] || 'Edit Profile' }}\n      </button>\n    </div>\n\n    <hr class=\"rts-divider\" />\n\n    <div class=\"rts-profile-section\">\n      <div class=\"rts-profile-field-row\">\n        <label class=\"rts-profile-field-label\">Language</label>\n        <p-select [options]=\"messenger.languageOptions\"\n                  [(ngModel)]=\"messenger.currentLanguage\"\n                  (ngModelChange)=\"setLanguage()\"\n                  optionLabel=\"key\"\n                  optionValue=\"key\"\n                  [placeholder]=\"messenger.labels[RTSeeTextLabelKeys.MESSANGER_LANGUAGE_PLACEHOLDER]\"\n                  class=\"rts-profile-language-select\"\n        />\n      </div>\n    </div>\n\n    @if (messenger.myPeer.plan) {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <div class=\"rts-profile-plan-badge\">\n          <span class=\"material-icons-outlined\">verified</span>\n          <span>{{ messenger.myPeer.plan.productName }}</span>\n        </div>\n        <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n                (click)=\"messenger.openManagePlanPage()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MANAGE_PLAN] || 'Manage Plan' }}\n        </button>\n      </div>\n    } @else {\n      <hr class=\"rts-divider\" />\n      <div class=\"rts-profile-section\">\n        <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n                (click)=\"messenger.openPaymentPage()\"\n        >\n          <span class=\"material-icons-outlined\">stars</span>\n          {{ messenger.labels[RTSeeTextLabelKeys.SUBSCRIBE_LABEL] || 'Upgrade Plan' }}\n        </button>\n      </div>\n    }\n\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"logOut()\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.LOGOUT_BUTTON] || 'Logout' }}\n      </button>\n    </div>\n  }\n\n  @if (!isOtherUser && messenger.myPeer?.isAnonymous) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-profile-anon-box\">\n      <div class=\"rts-profile-anon-icon\">\n        <span class=\"material-icons-outlined\">shield</span>\n      </div>\n      <div class=\"rts-profile-anon-text\">\n        @if (!messenger.currentLanguage || messenger.currentLanguage === 'eng') {\n          <p>This is a temporary anonymous identity. Sign up or sign in to save your history permanently.</p>\n        } @else if (messenger.currentLanguage === 'ua') {\n          <p>\u0426\u0435 \u0442\u0438\u043C\u0447\u0430\u0441\u043E\u0432\u0430 \u0430\u043D\u043E\u043D\u0456\u043C\u043D\u0430 \u043E\u0441\u043E\u0431\u0438\u0441\u0442\u0456\u0441\u0442\u044C. \u0417\u0430\u0440\u0435\u0454\u0441\u0442\u0440\u0443\u0439\u0442\u0435\u0441\u044F, \u0430\u0431\u0438 \u0437\u0431\u0435\u0440\u0435\u0433\u0442\u0438 \u0456\u0441\u0442\u043E\u0440\u0456\u044E \u0441\u043F\u0456\u043B\u043A\u0443\u0432\u0430\u043D\u043D\u044F.</p>\n        }\n      </div>\n    </div>\n\n    <div class=\"rts-profile-auth-actions\">\n      <button class=\"rts-btn rts-btn-primary rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_UP_BUTTON] || 'Sign Up' }}\n      </button>\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              [routerLink]=\"authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)\"\n      >\n        {{ messenger.labels[RTSeeTextLabelKeys.SIGN_IN_BUTTON] || 'Sign In' }}\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { messenger: [{
                 type: Input
             }], peer: [{
@@ -1356,15 +1415,27 @@ class ChatInfoComponent {
     onEditChatInfo() {
         this.editChatInfo.emit();
     }
+    call() {
+        if (!this.chatInfo?.chat) {
+            return;
+        }
+        void this.messenger.initializeVideoCall(this.chatInfo.chat);
+    }
+    videoCall() {
+        if (!this.chatInfo?.chat) {
+            return;
+        }
+        void this.messenger.initializeVideoCall(this.chatInfo.chat);
+    }
     async onDeleteChat() {
         await this.chatInfo.deleteChat();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatInfoComponent, isStandalone: true, selector: "rtsee-chat-info", inputs: { messenger: "messenger", chatInfo: "chatInfo" }, outputs: { editChatInfo: "editChatInfo", chatDeleted: "chatDeleted" }, ngImport: i0, template: "<div class=\"rts-chat-info\">\n  <div class=\"rts-chat-info-meta\">\n    <p class=\"rts-chat-info-type\">{{ chatInfo.chat.type }}</p>\n    <p class=\"rts-chat-info-member-count\">{{ chatInfo.chat.members.length }} members</p>\n  </div>\n\n  @if (chatInfo.canManageChatInfo) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"onEditChatInfo()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        Edit Chat Info\n      </button>\n    </div>\n  }\n\n  <hr class=\"rts-divider\" />\n\n  <rtsee-chat-members\n    [chatInfo]=\"chatInfo\"\n    [messenger]=\"messenger\"\n  ></rtsee-chat-members>\n\n  @if (chatInfo.myRole === RTSeeChatMemberRoles.ADMIN) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"onDeleteChat()\"\n      >\n        Delete Chat\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ChatMembersComponent, selector: "rtsee-chat-members", inputs: ["chatInfo", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatInfoComponent, isStandalone: true, selector: "rtsee-chat-info", inputs: { messenger: "messenger", chatInfo: "chatInfo" }, outputs: { editChatInfo: "editChatInfo", chatDeleted: "chatDeleted" }, ngImport: i0, template: "<div class=\"rts-chat-info\">\n  <div class=\"rts-chat-info-meta\">\n    <p class=\"rts-chat-info-type\">{{ chatInfo.chat.type }}</p>\n    <p class=\"rts-chat-info-member-count\">{{ chatInfo.chat.members.length }} members</p>\n  </div>\n\n  <div class=\"rts-chat-info-call-actions\">\n    <button class=\"rts-call-btn\"\n            (click)=\"call()\"\n            type=\"button\"\n            title=\"Audio Call\"\n    >\n      <span class=\"material-icons-outlined\">call</span>\n      <span>Audio</span>\n    </button>\n    <button class=\"rts-call-btn rts-call-btn-video\"\n            (click)=\"videoCall()\"\n            type=\"button\"\n            title=\"Video Call\"\n    >\n      <span class=\"material-icons-outlined\">videocam</span>\n      <span>Video</span>\n    </button>\n  </div>\n\n  @if (chatInfo.canManageChatInfo) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"onEditChatInfo()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        Edit Chat Info\n      </button>\n    </div>\n  }\n\n  <hr class=\"rts-divider\" />\n\n  <rtsee-chat-members\n    [chatInfo]=\"chatInfo\"\n    [messenger]=\"messenger\"\n  ></rtsee-chat-members>\n\n  @if (chatInfo.myRole === RTSeeChatMemberRoles.ADMIN) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"onDeleteChat()\"\n      >\n        Delete Chat\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ChatMembersComponent, selector: "rtsee-chat-members", inputs: ["chatInfo", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-chat-info', standalone: true, imports: [PreloaderComponent, ChatMembersComponent], template: "<div class=\"rts-chat-info\">\n  <div class=\"rts-chat-info-meta\">\n    <p class=\"rts-chat-info-type\">{{ chatInfo.chat.type }}</p>\n    <p class=\"rts-chat-info-member-count\">{{ chatInfo.chat.members.length }} members</p>\n  </div>\n\n  @if (chatInfo.canManageChatInfo) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"onEditChatInfo()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        Edit Chat Info\n      </button>\n    </div>\n  }\n\n  <hr class=\"rts-divider\" />\n\n  <rtsee-chat-members\n    [chatInfo]=\"chatInfo\"\n    [messenger]=\"messenger\"\n  ></rtsee-chat-members>\n\n  @if (chatInfo.myRole === RTSeeChatMemberRoles.ADMIN) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"onDeleteChat()\"\n      >\n        Delete Chat\n      </button>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-chat-info', standalone: true, imports: [PreloaderComponent, ChatMembersComponent], template: "<div class=\"rts-chat-info\">\n  <div class=\"rts-chat-info-meta\">\n    <p class=\"rts-chat-info-type\">{{ chatInfo.chat.type }}</p>\n    <p class=\"rts-chat-info-member-count\">{{ chatInfo.chat.members.length }} members</p>\n  </div>\n\n  <div class=\"rts-chat-info-call-actions\">\n    <button class=\"rts-call-btn\"\n            (click)=\"call()\"\n            type=\"button\"\n            title=\"Audio Call\"\n    >\n      <span class=\"material-icons-outlined\">call</span>\n      <span>Audio</span>\n    </button>\n    <button class=\"rts-call-btn rts-call-btn-video\"\n            (click)=\"videoCall()\"\n            type=\"button\"\n            title=\"Video Call\"\n    >\n      <span class=\"material-icons-outlined\">videocam</span>\n      <span>Video</span>\n    </button>\n  </div>\n\n  @if (chatInfo.canManageChatInfo) {\n    <div class=\"rts-chat-info-actions\">\n      <button class=\"rts-btn rts-btn-ghost rts-btn-block\"\n              (click)=\"onEditChatInfo()\"\n      >\n        <span class=\"material-icons-outlined\">edit</span>\n        Edit Chat Info\n      </button>\n    </div>\n  }\n\n  <hr class=\"rts-divider\" />\n\n  <rtsee-chat-members\n    [chatInfo]=\"chatInfo\"\n    [messenger]=\"messenger\"\n  ></rtsee-chat-members>\n\n  @if (chatInfo.myRole === RTSeeChatMemberRoles.ADMIN) {\n    <hr class=\"rts-divider\" />\n    <div class=\"rts-chat-info-danger-zone\">\n      <button class=\"rts-btn rts-btn-danger rts-btn-block\"\n              (click)=\"onDeleteChat()\"\n      >\n        Delete Chat\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { messenger: [{
                 type: Input
             }], chatInfo: [{
@@ -1517,13 +1588,19 @@ class MessengerHeaderComponent {
     constructor(defaultImagesService) {
         this.defaultImagesService = defaultImagesService;
         this.isDropdownOpen = false;
-        this.chatImageExpanded = false;
+        this.imageExpandedToSquare = false;
+        this.lastSquareToggleTime = 0;
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     openProfile(id) {
         if (this.messenger.ownProfileOpened) {
             return;
         }
+        this.imageExpandedToSquare = false;
+        if (this.messenger.myPeer && id === this.messenger.myPeer.clientId) {
+            this.messenger.ownProfileOpened = true;
+            this.messenger.openedProfile = this.messenger.myPeer;
+        }
         void this.messenger.openProfile(id);
     }
     toggleDropdown() {
@@ -1542,35 +1619,85 @@ class MessengerHeaderComponent {
     onChatSaved(chat) {
         this.messenger.closeManageChatInfo();
     }
+    onMyAvatarClick() {
+        if (!this.messenger.ownProfileOpened) {
+            if (this.messenger.myPeer) {
+                this.openProfile(this.messenger.myPeer.clientId);
+            }
+        }
+        else if (this.imageExpandedToSquare) {
+            if (Date.now() - this.lastSquareToggleTime > 300) {
+                this.imageExpandedToSquare = false;
+                this.lastSquareToggleTime = Date.now();
+            }
+        }
+    }
+    onMyAvatarDblClick() {
+        if (this.messenger.ownProfileOpened) {
+            if (Date.now() - this.lastSquareToggleTime > 300) {
+                this.imageExpandedToSquare = !this.imageExpandedToSquare;
+                this.lastSquareToggleTime = Date.now();
+            }
+        }
+    }
     onChatImageClick() {
-        if (!this.messenger.openedChatDetails) {
-            // First click: open chat info (circle image)
-            this.chatImageExpanded = false;
+        const isExpanded = !!(this.messenger.openedProfile || this.messenger.openedChatDetails);
+        if (!isExpanded) {
+            // First click: open chat info (enters State 2: centered circle)
+            this.imageExpandedToSquare = false;
             this.messenger.openChatInfo();
         }
-        else if (!this.chatImageExpanded) {
-            // Second click: expand image to full width square
-            this.chatImageExpanded = true;
+        else if (this.imageExpandedToSquare) {
+            // In square state: single click collapses back to circle
+            if (Date.now() - this.lastSquareToggleTime > 300) {
+                this.imageExpandedToSquare = false;
+                this.lastSquareToggleTime = Date.now();
+            }
         }
-        else {
-            // Third click: collapse back to circle
-            this.chatImageExpanded = false;
+    }
+    onChatImageDblClick() {
+        const isExpanded = !!(this.messenger.openedProfile || this.messenger.openedChatDetails);
+        if (isExpanded) {
+            if (Date.now() - this.lastSquareToggleTime > 300) {
+                this.imageExpandedToSquare = !this.imageExpandedToSquare;
+                this.lastSquareToggleTime = Date.now();
+            }
         }
     }
     collapseInfo() {
-        this.chatImageExpanded = false;
+        this.imageExpandedToSquare = false;
         this.messenger.collapseInfo();
     }
     get isGroupOrChannelChat() {
         return this.messenger.openedChat?.type === RTSeeChatTypes.GROUP ||
             this.messenger.openedChat?.type === RTSeeChatTypes.CHANNEL;
     }
+    get headerTitle() {
+        if (this.messenger.ownProfileOpened) {
+            return this.messenger.myPeer?.name || 'My Profile';
+        }
+        if (this.messenger.openedProfile?.name) {
+            return this.messenger.openedProfile.name;
+        }
+        if (this.messenger.openedChat?.name) {
+            return this.messenger.openedChat.name;
+        }
+        return '';
+    }
+    get myProfileImageUrl() {
+        return this.messenger?.myPeer?.imageUrl || this.defaultImagesService.PROFILE;
+    }
+    get chatImageUrl() {
+        return this.messenger?.openedProfile?.imageUrl ||
+            this.messenger?.openedChat?.imageUrl ||
+            this.defaultImagesService.PROFILE;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerHeaderComponent, deps: [{ token: DefaultImagesService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerHeaderComponent, isStandalone: true, selector: "rtsee-messenger-header", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rts-messenger-header\"\n     [ngClass]=\"{\n       'rts-messenger-header-chat-opened': messenger.openedChat && !messenger.manageChatInfo,\n       'rts-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\n       'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails || messenger.manageChatInfo,\n       'rts-messenger-header-create-chat-mode': messenger.manageChatInfo,\n       'rts-messenger-header-my-profile-mode': messenger.ownProfileOpened,\n       'rts-messenger-header-chat-info-mode': (messenger.openedProfile || messenger.openedChatDetails) && !messenger.ownProfileOpened && !messenger.manageChatInfo,\n       'rts-messenger-header-chat-image-expanded': chatImageExpanded\n      }\"\n>\n  <span class=\"rts-messenger-header-collapse-button\"\n        (click)=\"messenger.manageChatInfo ? closeManageChatDialog() : collapseInfo()\"\n  >\n    <span class=\"pi pi-arrow-left\"></span>\n  </span>\n  <div class=\"rts-messenger-header-left\">\n    @if (!messenger.openedChat && messenger.myPeer) {\n      <div class=\"rts-messenger-header-avatar\"\n           (click)=\"openProfile(messenger.myPeer.clientId)\"\n      >\n        <div [style.background-image]=\"'url(' + messenger.myPeer.imageUrl || defaultImagesService.PROFILE + ')'\"\n             class=\"rts-messenger-header-avatar-image\">\n        </div>\n      </div>\n    } @else if (messenger.openedChat) {\n      <button class=\"rts-messenger-close-chat\"\n              (click)=\"messenger.closeChat()\"\n      >\n        <span class=\"material-icons-outlined\">arrow_back</span>\n        @if (messenger.unreadMessagesCount) {\n          <span class=\"unread-count\">{{messenger.unreadMessagesCount}}</span>\n        }\n      </button>\n    }\n  </div>\n  <div class=\"rts-messenger-header-right\">\n    @if (messenger.openedChat) {\n      <div class=\"rts-messenger-chat-image-container rts-messenger-header-avatar\"\n           (click)=\"onChatImageClick()\"\n      >\n        <div class=\"rts-messenger-chat-image rts-messenger-header-avatar-image\"\n             [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n        ></div>\n      </div>\n    } @else {\n      <div class=\"rts-messenger-header-actions\">\n        <button class=\"rts-messenger-header-add-button\"\n                (click)=\"toggleDropdown()\"\n        >\n          <span class=\"material-icons-outlined\">add</span>\n        </button>\n\n        @if (isDropdownOpen) {\n          <div class=\"rts-messenger-header-dropdown-backdrop\"\n               (click)=\"closeDropdown()\"\n          ></div>\n          <div class=\"rts-messenger-header-dropdown\">\n            <button class=\"rts-messenger-header-dropdown-item\"\n                    (click)=\"openNewChatDialog()\"\n            >\n              <span class=\"material-icons-outlined rts-messenger-header-dropdown-icon\">chat_bubble_outline</span>\n              <span>New Chat</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"rts-messenger-header-center\">\n    @if (messenger.manageChatInfo) {\n      <div class=\"rts-messenger-header-create-chat-container\">\n        <rtsee-manage-chat-info [messenger]=\"messenger\"\n                                [chat]=\"messenger.manageChatInfo.chat || undefined\"\n                                (chatSaved)=\"onChatSaved($event)\"\n                                (cancelled)=\"closeManageChatDialog()\"\n        ></rtsee-manage-chat-info>\n      </div>\n    } @else if (messenger.openedChat) {\n      <div [ngClass]=\"{'rts-messenger-header-opened-chat-info-expanded': messenger.openedProfile || messenger.openedChatDetails}\"\n           class=\"rts-messenger-header-opened-chat-info\">\n        <div class=\"rts-messenger-profile-header-placeholder\">\n          <p class=\"rts-messenger-header-chat-title\"\n          >{{ messenger.openedChat.name }}</p>\n        </div>\n\n        <div class=\"rts-messenger-profile-data-container\">\n          @if (messenger.openedChatDetails && isGroupOrChannelChat && messenger.chatInfo) {\n            <rtsee-chat-info [messenger]=\"messenger\"\n                             [chatInfo]=\"messenger.chatInfo\"\n                             (editChatInfo)=\"messenger.openManageChatInfo(messenger.openedChat)\"\n                             (chatDeleted)=\"messenger.closeChatInfo()\"\n            ></rtsee-chat-info>\n          } @else if (messenger.openedChatDetails) {\n            <rtsee-profile [messenger]=\"messenger\"\n            ></rtsee-profile>\n          }\n        </div>\n      </div>\n    } @else {\n      <p class=\"rts-messenger-header-title\"\n      >{{messenger.labels[RTSeeTextLabelKeys.MESSANGER_TITLE]}}</p>\n      <rtsee-profile [messenger]=\"messenger\"\n                     [peer]=\"messenger.myPeer\"\n      ></rtsee-profile>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ChatInfoComponent, selector: "rtsee-chat-info", inputs: ["messenger", "chatInfo"], outputs: ["editChatInfo", "chatDeleted"] }, { kind: "component", type: ManageChatInfoComponent, selector: "rtsee-manage-chat-info", inputs: ["messenger", "chat"], outputs: ["chatSaved", "cancelled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerHeaderComponent, isStandalone: true, selector: "rtsee-messenger-header", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rts-messenger-header\"\n     [ngClass]=\"{\n       'rts-messenger-header-chat-opened': messenger.openedChat && !messenger.manageChatInfo,\n       'rts-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\n       'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails || messenger.manageChatInfo,\n       'rts-messenger-header-create-chat-mode': messenger.manageChatInfo,\n       'rts-messenger-header-my-profile-mode': messenger.ownProfileOpened,\n       'rts-messenger-header-chat-info-mode': (messenger.openedProfile || messenger.openedChatDetails) && !messenger.ownProfileOpened && !messenger.manageChatInfo,\n       'rts-messenger-header-chat-image-expanded': imageExpandedToSquare,\n       'rts-messenger-header-image-square': imageExpandedToSquare\n      }\"\n>\n  <span class=\"rts-messenger-header-collapse-button\"\n        (click)=\"messenger.manageChatInfo ? closeManageChatDialog() : collapseInfo()\"\n  >\n    <span class=\"pi pi-arrow-left\"></span>\n  </span>\n  <div class=\"rts-messenger-header-left\">\n    @if (!messenger.openedChat && messenger.myPeer) {\n      <div class=\"rts-messenger-header-avatar\"\n           (click)=\"onMyAvatarClick()\"\n           (dblclick)=\"onMyAvatarDblClick()\"\n      >\n        <div [style.background-image]=\"'url(' + myProfileImageUrl + ')'\"\n             class=\"rts-messenger-header-avatar-image\">\n        </div>\n      </div>\n    } @else if (messenger.openedChat) {\n      <button class=\"rts-messenger-close-chat\"\n              (click)=\"messenger.closeChat()\"\n      >\n        <span class=\"material-icons-outlined\">arrow_back</span>\n        @if (messenger.unreadMessagesCount) {\n          <span class=\"unread-count\">{{messenger.unreadMessagesCount}}</span>\n        }\n      </button>\n    }\n  </div>\n  <div class=\"rts-messenger-header-right\">\n    @if (messenger.openedChat) {\n      <div class=\"rts-messenger-chat-image-container rts-messenger-header-avatar\"\n           (click)=\"onChatImageClick()\"\n           (dblclick)=\"onChatImageDblClick()\"\n      >\n        <div class=\"rts-messenger-chat-image rts-messenger-header-avatar-image\"\n             [style.background-image]=\"'url(' + chatImageUrl + ')'\"\n        ></div>\n      </div>\n    } @else {\n      <div class=\"rts-messenger-header-actions\">\n        <button class=\"rts-messenger-header-add-button\"\n                (click)=\"toggleDropdown()\"\n        >\n          <span class=\"material-icons-outlined\">add</span>\n        </button>\n\n        @if (isDropdownOpen) {\n          <div class=\"rts-messenger-header-dropdown-backdrop\"\n               (click)=\"closeDropdown()\"\n          ></div>\n          <div class=\"rts-messenger-header-dropdown\">\n            <button class=\"rts-messenger-header-dropdown-item\"\n                    (click)=\"openNewChatDialog()\"\n            >\n              <span class=\"material-icons-outlined rts-messenger-header-dropdown-icon\">chat_bubble_outline</span>\n              <span>New Chat</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"rts-messenger-header-center\">\n    @if (messenger.manageChatInfo) {\n      <div class=\"rts-messenger-header-create-chat-container\">\n        <rtsee-manage-chat-info [messenger]=\"messenger\"\n                                [chat]=\"messenger.manageChatInfo.chat || undefined\"\n                                (chatSaved)=\"onChatSaved($event)\"\n                                (cancelled)=\"closeManageChatDialog()\"\n        ></rtsee-manage-chat-info>\n      </div>\n    } @else if (messenger.openedChat) {\n      <div [ngClass]=\"{'rts-messenger-header-opened-chat-info-expanded': messenger.openedProfile || messenger.openedChatDetails}\"\n           class=\"rts-messenger-header-opened-chat-info\">\n        <div class=\"rts-messenger-profile-header-placeholder\">\n          <p class=\"rts-messenger-header-chat-title\"\n          >{{ headerTitle }}</p>\n        </div>\n\n        <div class=\"rts-messenger-profile-data-container\">\n          @if (messenger.openedChatDetails && isGroupOrChannelChat && messenger.chatInfo) {\n            <rtsee-chat-info [messenger]=\"messenger\"\n                             [chatInfo]=\"messenger.chatInfo\"\n                             (editChatInfo)=\"messenger.openManageChatInfo(messenger.openedChat)\"\n                             (chatDeleted)=\"messenger.closeChatInfo()\"\n            ></rtsee-chat-info>\n          } @else if (messenger.openedChatDetails || messenger.openedProfile) {\n            <rtsee-profile [messenger]=\"messenger\"\n            ></rtsee-profile>\n          }\n        </div>\n      </div>\n    } @else {\n      @if (messenger.ownProfileOpened) {\n        <div class=\"rts-messenger-header-opened-chat-info rts-messenger-header-opened-chat-info-expanded\">\n          <div class=\"rts-messenger-profile-header-placeholder\">\n            <p class=\"rts-messenger-header-chat-title\">{{ headerTitle }}</p>\n          </div>\n          <div class=\"rts-messenger-profile-data-container\">\n            <rtsee-profile [messenger]=\"messenger\"\n                           [peer]=\"messenger.myPeer\"\n            ></rtsee-profile>\n          </div>\n        </div>\n      } @else {\n        <p class=\"rts-messenger-header-title\"\n        >{{messenger.labels[RTSeeTextLabelKeys.MESSANGER_TITLE]}}</p>\n        <rtsee-profile [messenger]=\"messenger\"\n                       [peer]=\"messenger.myPeer\"\n        ></rtsee-profile>\n      }\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ChatInfoComponent, selector: "rtsee-chat-info", inputs: ["messenger", "chatInfo"], outputs: ["editChatInfo", "chatDeleted"] }, { kind: "component", type: ManageChatInfoComponent, selector: "rtsee-manage-chat-info", inputs: ["messenger", "chat"], outputs: ["chatSaved", "cancelled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-messenger-header', imports: [NgClass, ProfileComponent, ChatInfoComponent, ManageChatInfoComponent], standalone: true, template: "<div class=\"rts-messenger-header\"\n     [ngClass]=\"{\n       'rts-messenger-header-chat-opened': messenger.openedChat && !messenger.manageChatInfo,\n       'rts-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\n       'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails || messenger.manageChatInfo,\n       'rts-messenger-header-create-chat-mode': messenger.manageChatInfo,\n       'rts-messenger-header-my-profile-mode': messenger.ownProfileOpened,\n       'rts-messenger-header-chat-info-mode': (messenger.openedProfile || messenger.openedChatDetails) && !messenger.ownProfileOpened && !messenger.manageChatInfo,\n       'rts-messenger-header-chat-image-expanded': chatImageExpanded\n      }\"\n>\n  <span class=\"rts-messenger-header-collapse-button\"\n        (click)=\"messenger.manageChatInfo ? closeManageChatDialog() : collapseInfo()\"\n  >\n    <span class=\"pi pi-arrow-left\"></span>\n  </span>\n  <div class=\"rts-messenger-header-left\">\n    @if (!messenger.openedChat && messenger.myPeer) {\n      <div class=\"rts-messenger-header-avatar\"\n           (click)=\"openProfile(messenger.myPeer.clientId)\"\n      >\n        <div [style.background-image]=\"'url(' + messenger.myPeer.imageUrl || defaultImagesService.PROFILE + ')'\"\n             class=\"rts-messenger-header-avatar-image\">\n        </div>\n      </div>\n    } @else if (messenger.openedChat) {\n      <button class=\"rts-messenger-close-chat\"\n              (click)=\"messenger.closeChat()\"\n      >\n        <span class=\"material-icons-outlined\">arrow_back</span>\n        @if (messenger.unreadMessagesCount) {\n          <span class=\"unread-count\">{{messenger.unreadMessagesCount}}</span>\n        }\n      </button>\n    }\n  </div>\n  <div class=\"rts-messenger-header-right\">\n    @if (messenger.openedChat) {\n      <div class=\"rts-messenger-chat-image-container rts-messenger-header-avatar\"\n           (click)=\"onChatImageClick()\"\n      >\n        <div class=\"rts-messenger-chat-image rts-messenger-header-avatar-image\"\n             [style.background-image]=\"'url(' + messenger.openedChat.imageUrl || defaultImagesService.PROFILE + ')'\"\n        ></div>\n      </div>\n    } @else {\n      <div class=\"rts-messenger-header-actions\">\n        <button class=\"rts-messenger-header-add-button\"\n                (click)=\"toggleDropdown()\"\n        >\n          <span class=\"material-icons-outlined\">add</span>\n        </button>\n\n        @if (isDropdownOpen) {\n          <div class=\"rts-messenger-header-dropdown-backdrop\"\n               (click)=\"closeDropdown()\"\n          ></div>\n          <div class=\"rts-messenger-header-dropdown\">\n            <button class=\"rts-messenger-header-dropdown-item\"\n                    (click)=\"openNewChatDialog()\"\n            >\n              <span class=\"material-icons-outlined rts-messenger-header-dropdown-icon\">chat_bubble_outline</span>\n              <span>New Chat</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"rts-messenger-header-center\">\n    @if (messenger.manageChatInfo) {\n      <div class=\"rts-messenger-header-create-chat-container\">\n        <rtsee-manage-chat-info [messenger]=\"messenger\"\n                                [chat]=\"messenger.manageChatInfo.chat || undefined\"\n                                (chatSaved)=\"onChatSaved($event)\"\n                                (cancelled)=\"closeManageChatDialog()\"\n        ></rtsee-manage-chat-info>\n      </div>\n    } @else if (messenger.openedChat) {\n      <div [ngClass]=\"{'rts-messenger-header-opened-chat-info-expanded': messenger.openedProfile || messenger.openedChatDetails}\"\n           class=\"rts-messenger-header-opened-chat-info\">\n        <div class=\"rts-messenger-profile-header-placeholder\">\n          <p class=\"rts-messenger-header-chat-title\"\n          >{{ messenger.openedChat.name }}</p>\n        </div>\n\n        <div class=\"rts-messenger-profile-data-container\">\n          @if (messenger.openedChatDetails && isGroupOrChannelChat && messenger.chatInfo) {\n            <rtsee-chat-info [messenger]=\"messenger\"\n                             [chatInfo]=\"messenger.chatInfo\"\n                             (editChatInfo)=\"messenger.openManageChatInfo(messenger.openedChat)\"\n                             (chatDeleted)=\"messenger.closeChatInfo()\"\n            ></rtsee-chat-info>\n          } @else if (messenger.openedChatDetails) {\n            <rtsee-profile [messenger]=\"messenger\"\n            ></rtsee-profile>\n          }\n        </div>\n      </div>\n    } @else {\n      <p class=\"rts-messenger-header-title\"\n      >{{messenger.labels[RTSeeTextLabelKeys.MESSANGER_TITLE]}}</p>\n      <rtsee-profile [messenger]=\"messenger\"\n                     [peer]=\"messenger.myPeer\"\n      ></rtsee-profile>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-messenger-header', imports: [NgClass, ProfileComponent, ChatInfoComponent, ManageChatInfoComponent], standalone: true, template: "<div class=\"rts-messenger-header\"\n     [ngClass]=\"{\n       'rts-messenger-header-chat-opened': messenger.openedChat && !messenger.manageChatInfo,\n       'rts-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\n       'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails || messenger.manageChatInfo,\n       'rts-messenger-header-create-chat-mode': messenger.manageChatInfo,\n       'rts-messenger-header-my-profile-mode': messenger.ownProfileOpened,\n       'rts-messenger-header-chat-info-mode': (messenger.openedProfile || messenger.openedChatDetails) && !messenger.ownProfileOpened && !messenger.manageChatInfo,\n       'rts-messenger-header-chat-image-expanded': imageExpandedToSquare,\n       'rts-messenger-header-image-square': imageExpandedToSquare\n      }\"\n>\n  <span class=\"rts-messenger-header-collapse-button\"\n        (click)=\"messenger.manageChatInfo ? closeManageChatDialog() : collapseInfo()\"\n  >\n    <span class=\"pi pi-arrow-left\"></span>\n  </span>\n  <div class=\"rts-messenger-header-left\">\n    @if (!messenger.openedChat && messenger.myPeer) {\n      <div class=\"rts-messenger-header-avatar\"\n           (click)=\"onMyAvatarClick()\"\n           (dblclick)=\"onMyAvatarDblClick()\"\n      >\n        <div [style.background-image]=\"'url(' + myProfileImageUrl + ')'\"\n             class=\"rts-messenger-header-avatar-image\">\n        </div>\n      </div>\n    } @else if (messenger.openedChat) {\n      <button class=\"rts-messenger-close-chat\"\n              (click)=\"messenger.closeChat()\"\n      >\n        <span class=\"material-icons-outlined\">arrow_back</span>\n        @if (messenger.unreadMessagesCount) {\n          <span class=\"unread-count\">{{messenger.unreadMessagesCount}}</span>\n        }\n      </button>\n    }\n  </div>\n  <div class=\"rts-messenger-header-right\">\n    @if (messenger.openedChat) {\n      <div class=\"rts-messenger-chat-image-container rts-messenger-header-avatar\"\n           (click)=\"onChatImageClick()\"\n           (dblclick)=\"onChatImageDblClick()\"\n      >\n        <div class=\"rts-messenger-chat-image rts-messenger-header-avatar-image\"\n             [style.background-image]=\"'url(' + chatImageUrl + ')'\"\n        ></div>\n      </div>\n    } @else {\n      <div class=\"rts-messenger-header-actions\">\n        <button class=\"rts-messenger-header-add-button\"\n                (click)=\"toggleDropdown()\"\n        >\n          <span class=\"material-icons-outlined\">add</span>\n        </button>\n\n        @if (isDropdownOpen) {\n          <div class=\"rts-messenger-header-dropdown-backdrop\"\n               (click)=\"closeDropdown()\"\n          ></div>\n          <div class=\"rts-messenger-header-dropdown\">\n            <button class=\"rts-messenger-header-dropdown-item\"\n                    (click)=\"openNewChatDialog()\"\n            >\n              <span class=\"material-icons-outlined rts-messenger-header-dropdown-icon\">chat_bubble_outline</span>\n              <span>New Chat</span>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <div class=\"rts-messenger-header-center\">\n    @if (messenger.manageChatInfo) {\n      <div class=\"rts-messenger-header-create-chat-container\">\n        <rtsee-manage-chat-info [messenger]=\"messenger\"\n                                [chat]=\"messenger.manageChatInfo.chat || undefined\"\n                                (chatSaved)=\"onChatSaved($event)\"\n                                (cancelled)=\"closeManageChatDialog()\"\n        ></rtsee-manage-chat-info>\n      </div>\n    } @else if (messenger.openedChat) {\n      <div [ngClass]=\"{'rts-messenger-header-opened-chat-info-expanded': messenger.openedProfile || messenger.openedChatDetails}\"\n           class=\"rts-messenger-header-opened-chat-info\">\n        <div class=\"rts-messenger-profile-header-placeholder\">\n          <p class=\"rts-messenger-header-chat-title\"\n          >{{ headerTitle }}</p>\n        </div>\n\n        <div class=\"rts-messenger-profile-data-container\">\n          @if (messenger.openedChatDetails && isGroupOrChannelChat && messenger.chatInfo) {\n            <rtsee-chat-info [messenger]=\"messenger\"\n                             [chatInfo]=\"messenger.chatInfo\"\n                             (editChatInfo)=\"messenger.openManageChatInfo(messenger.openedChat)\"\n                             (chatDeleted)=\"messenger.closeChatInfo()\"\n            ></rtsee-chat-info>\n          } @else if (messenger.openedChatDetails || messenger.openedProfile) {\n            <rtsee-profile [messenger]=\"messenger\"\n            ></rtsee-profile>\n          }\n        </div>\n      </div>\n    } @else {\n      @if (messenger.ownProfileOpened) {\n        <div class=\"rts-messenger-header-opened-chat-info rts-messenger-header-opened-chat-info-expanded\">\n          <div class=\"rts-messenger-profile-header-placeholder\">\n            <p class=\"rts-messenger-header-chat-title\">{{ headerTitle }}</p>\n          </div>\n          <div class=\"rts-messenger-profile-data-container\">\n            <rtsee-profile [messenger]=\"messenger\"\n                           [peer]=\"messenger.myPeer\"\n            ></rtsee-profile>\n          </div>\n        </div>\n      } @else {\n        <p class=\"rts-messenger-header-title\"\n        >{{messenger.labels[RTSeeTextLabelKeys.MESSANGER_TITLE]}}</p>\n        <rtsee-profile [messenger]=\"messenger\"\n                       [peer]=\"messenger.myPeer\"\n        ></rtsee-profile>\n      }\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: DefaultImagesService }], propDecorators: { messenger: [{
                 type: Input
             }] } });
@@ -1819,26 +1946,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class CallWidgetComponent {
     ngOnInit() { }
-    joinCall() {
-        console.log('message data: ', this.message.data);
-        if (!this.messenger ||
-            (!this.message.data?.roomId && !this.chat.conferenceRoom)) {
-            console.log('No Room Id specified or no messenger!');
-            return;
+    get roomId() {
+        return this.message?.data?.roomId || this.chat?.conferenceRoom?.id || null;
+    }
+    get callerName() {
+        return this.message?.from?.name || 'A participant';
+    }
+    get isUserInCall() {
+        const videoChat = this.messenger?.videoChat;
+        const currentRoomId = videoChat?.roomId;
+        return !!(videoChat?.isInActiveCall &&
+            currentRoomId &&
+            currentRoomId === this.roomId);
+    }
+    get presentMembers() {
+        const membersMap = new Map();
+        // 1. Caller who started the call
+        if (this.message?.from) {
+            const from = this.message.from;
+            const id = from.id || from.clientId;
+            const name = from.name || 'Caller';
+            if (id) {
+                membersMap.set(id, {
+                    id,
+                    name,
+                    imageUrl: from.imageUrl,
+                    initials: this.getInitials(name),
+                });
+            }
         }
-        const roomId = this.message.data?.roomId || this.chat.conferenceRoom?.id || null;
-        if (!roomId) {
-            console.log('Room Id unavailable!');
+        // 2. Members specified in call message data
+        const callMembers = this.message?.data?.members;
+        if (Array.isArray(callMembers)) {
+            for (const m of callMembers) {
+                const id = m.clientId || m.id;
+                if (id && !membersMap.has(id)) {
+                    const name = m.name || id;
+                    membersMap.set(id, {
+                        id,
+                        name,
+                        imageUrl: m.imageUrl,
+                        initials: this.getInitials(name),
+                    });
+                }
+            }
+        }
+        // 3. Live connected peers from WebRTC conference if active
+        const videoChat = this.messenger?.videoChat;
+        if (videoChat) {
+            // Add current user if in active call for this room
+            if (videoChat.isInActiveCall && videoChat.roomId === this.roomId && this.messenger.myPeer) {
+                const myId = this.messenger.myPeer.clientId;
+                const myName = this.messenger.myPeer.name || 'You';
+                if (myId && !membersMap.has(myId)) {
+                    membersMap.set(myId, {
+                        id: myId,
+                        name: myName,
+                        imageUrl: this.messenger.myPeer.imageUrl,
+                        initials: this.getInitials(myName),
+                    });
+                }
+            }
+            // Add connected peers
+            const conns = videoChat.rtcPeerConnections?.connections || [];
+            for (const conn of conns) {
+                const peerId = conn.clientId;
+                if (peerId && !membersMap.has(peerId)) {
+                    const chatMember = this.chat?.getMemberById(peerId);
+                    const name = conn.name || chatMember?.name || peerId;
+                    const imageUrl = conn.imageUrl || chatMember?.imageUrl;
+                    membersMap.set(peerId, {
+                        id: peerId,
+                        name,
+                        imageUrl,
+                        initials: this.getInitials(name),
+                    });
+                }
+            }
+        }
+        return Array.from(membersMap.values());
+    }
+    getInitials(name) {
+        const trimmed = name.trim();
+        if (!trimmed)
+            return '?';
+        const parts = trimmed.split(' ');
+        if (parts.length >= 2 && parts[1]) {
+            return (parts[0][0] + parts[1][0]).toUpperCase();
+        }
+        return trimmed.slice(0, 2).toUpperCase();
+    }
+    joinCall() {
+        if (!this.messenger || !this.roomId) {
+            console.log('Room Id unavailable or no messenger!');
             return;
         }
-        void this.messenger.joinCall(roomId);
+        void this.messenger.joinCall(this.roomId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CallWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: CallWidgetComponent, isStandalone: true, selector: "ngx-call-widget", inputs: { message: "message", messenger: "messenger", chat: "chat" }, ngImport: i0, template: "<div class=\"rts-call-widget\">\n  <p> The call has started</p>\n  <button class=\"rts-join-call-btn\"\n          (click)=\"joinCall()\">\n    Join Call\n  </button>\n</div>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CallWidgetComponent, isStandalone: true, selector: "ngx-call-widget", inputs: { message: "message", messenger: "messenger", chat: "chat" }, ngImport: i0, template: "<div class=\"rts-call-widget\" [class.rts-call-widget-active]=\"isUserInCall\">\n  <div class=\"rts-call-widget-header\">\n    <div class=\"rts-call-widget-badge\">\n      <span class=\"rts-call-live-dot\"></span>\n      <span class=\"rts-call-badge-text\">{{ isUserInCall ? 'Connected' : 'Live Call' }}</span>\n    </div>\n    <span class=\"material-icons-outlined rts-call-widget-icon\">videocam</span>\n  </div>\n\n  <div class=\"rts-call-widget-content\">\n    <p class=\"rts-call-widget-subtitle\">\n      Started by <strong>{{ callerName }}</strong>\n    </p>\n\n    @if (presentMembers.length > 0) {\n      <div class=\"rts-call-members-section\">\n        <span class=\"rts-call-members-label\">In call ({{ presentMembers.length }}):</span>\n        <div class=\"rts-call-avatar-stack\">\n          @for (member of presentMembers; track member.id) {\n            <div class=\"rts-call-avatar-item\" [title]=\"member.name\">\n              @if (member.imageUrl) {\n                <img [src]=\"member.imageUrl\" [alt]=\"member.name\" class=\"rts-call-avatar-img\" />\n              } @else {\n                <div class=\"rts-call-avatar-fallback\">\n                  {{ member.initials }}\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"rts-call-widget-actions\">\n    @if (isUserInCall) {\n      <button class=\"rts-call-action-btn rts-call-btn-connected\" disabled type=\"button\">\n        <span class=\"material-icons-outlined\">check_circle</span>\n        <span>In Call</span>\n      </button>\n    } @else {\n      <button class=\"rts-call-action-btn rts-join-call-btn\"\n              (click)=\"joinCall()\"\n              type=\"button\"\n      >\n        <span class=\"material-icons-outlined\">call</span>\n        <span>Join Call</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".rts-theme-dark{--rts-bg-primary: #0e0e10;--rts-bg-surface: #1a1a1e;--rts-bg-surface-elevated: #242428;--rts-bg-surface-hover: rgba(255, 255, 255, .05);--rts-bg-gradient: linear-gradient(135deg, #1b0533 0%, #0e0e10 60%, #0a1628 100%);--rts-text-primary: #e5e5e7;--rts-text-secondary: #8e8e93;--rts-text-muted: #6a6a7a;--rts-accent: #6c5ce7;--rts-accent-light: #a29bfe;--rts-accent-blue: #3b82f7;--rts-accent-highlight: #bf8bff;--rts-accent-highlight-dim: rgba(191, 139, 255, .15);--rts-border-dim: rgba(255, 255, 255, .05);--rts-border-med: rgba(255, 255, 255, .08);--rts-border-bright: rgba(255, 255, 255, .15);--rts-card-bg-start: rgba(28, 28, 40, .8);--rts-card-bg-end: rgba(20, 20, 30, .9);--rts-danger: #e84118;--rts-danger-bg: rgba(232, 65, 24, .05);--rts-danger-border: rgba(232, 65, 24, .1);--rts-success: #2ecc71;--rts-warning: #f9ca24;--rts-shadow-rgb: 0, 0, 0;--rts-glass-tint: rgba(255, 255, 255, .03)}.rts-theme-light{--rts-bg-primary: #f8f9fa;--rts-bg-surface: #ffffff;--rts-bg-surface-elevated: #f0f0f4;--rts-bg-surface-hover: rgba(0, 0, 0, .04);--rts-bg-gradient: linear-gradient(135deg, #f0ecff 0%, #f8f9fa 60%, #edf4ff 100%);--rts-text-primary: #1a1a2e;--rts-text-secondary: #555570;--rts-text-muted: #8888a0;--rts-accent: #6c5ce7;--rts-accent-light: #a29bfe;--rts-accent-blue: #3b82f7;--rts-accent-highlight: #bf8bff;--rts-accent-highlight-dim: rgba(191, 139, 255, .1);--rts-border-dim: rgba(0, 0, 0, .06);--rts-border-med: rgba(0, 0, 0, .1);--rts-border-bright: rgba(0, 0, 0, .15);--rts-card-bg-start: rgba(255, 255, 255, .95);--rts-card-bg-end: rgba(248, 248, 255, .98);--rts-danger: #e84118;--rts-danger-bg: rgba(232, 65, 24, .06);--rts-danger-border: rgba(232, 65, 24, .15);--rts-success: #2ecc71;--rts-warning: #f9ca24;--rts-shadow-rgb: 0, 0, 0;--rts-glass-tint: rgba(0, 0, 0, .02)}.rts-call-widget{min-width:250px;max-width:320px;background:linear-gradient(135deg,#ffffff12,#ffffff05);border:1px solid var(--rts-border-med, rgba(255, 255, 255, .12));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:14px;padding:14px;box-shadow:0 8px 32px #00000040;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.rts-call-widget:hover{border-color:#10b98159;box-shadow:0 10px 36px #10b9811f}.rts-call-widget.rts-call-widget-active{border-color:#10b98180;background:linear-gradient(135deg,#10b9811f,#ffffff05)}.rts-call-widget .rts-call-widget-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.rts-call-widget .rts-call-widget-header .rts-call-widget-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;background:#10b98126;border:1px solid rgba(16,185,129,.3);border-radius:20px}.rts-call-widget .rts-call-widget-header .rts-call-widget-badge .rts-call-live-dot{width:7px;height:7px;border-radius:50%;background-color:#10b981;box-shadow:0 0 8px #10b981;animation:rts-call-pulse 1.8s infinite}.rts-call-widget .rts-call-widget-header .rts-call-widget-badge .rts-call-badge-text{font-size:11px;font-weight:700;color:#10b981;text-transform:uppercase;letter-spacing:.5px}.rts-call-widget .rts-call-widget-header .rts-call-widget-icon{font-size:18px;color:var(--rts-text-muted, rgba(255, 255, 255, .5))}.rts-call-widget .rts-call-widget-content{margin-bottom:12px}.rts-call-widget .rts-call-widget-content .rts-call-widget-subtitle{margin:0 0 8px;font-size:13px;color:var(--rts-text-secondary, rgba(255, 255, 255, .7))}.rts-call-widget .rts-call-widget-content .rts-call-widget-subtitle strong{color:var(--rts-text-primary, #fff)}.rts-call-widget .rts-call-widget-content .rts-call-members-section{display:flex;align-items:center;gap:8px;margin-top:6px}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-members-label{font-size:11px;color:var(--rts-text-muted, rgba(255, 255, 255, .5));font-weight:500}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack{display:flex;align-items:center}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item{width:26px;height:26px;border-radius:50%;border:2px solid var(--rts-bg-primary, #1e1e2d);margin-left:-6px;position:relative;overflow:hidden;transition:transform .2s ease,z-index .2s ease}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item:first-child{margin-left:0}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item:hover{transform:translateY(-2px) scale(1.15);z-index:10}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item .rts-call-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item .rts-call-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;font-size:10px;font-weight:700}.rts-call-widget .rts-call-widget-actions .rts-call-action-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.rts-call-widget .rts-call-widget-actions .rts-call-action-btn .material-icons-outlined{font-size:16px}.rts-call-widget .rts-call-widget-actions .rts-join-call-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 14px #10b98159}.rts-call-widget .rts-call-widget-actions .rts-join-call-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #10b98173}.rts-call-widget .rts-call-widget-actions .rts-join-call-btn:active{transform:translateY(0)}.rts-call-widget .rts-call-widget-actions .rts-call-btn-connected{background:#10b98126;border:1px solid rgba(16,185,129,.3);color:#10b981;cursor:default}@keyframes rts-call-pulse{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 6px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CallWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-call-widget', imports: [NgClass], standalone: true, template: "<div class=\"rts-call-widget\">\n  <p> The call has started</p>\n  <button class=\"rts-join-call-btn\"\n          (click)=\"joinCall()\">\n    Join Call\n  </button>\n</div>\n" }]
+            args: [{ selector: 'ngx-call-widget', standalone: true, template: "<div class=\"rts-call-widget\" [class.rts-call-widget-active]=\"isUserInCall\">\n  <div class=\"rts-call-widget-header\">\n    <div class=\"rts-call-widget-badge\">\n      <span class=\"rts-call-live-dot\"></span>\n      <span class=\"rts-call-badge-text\">{{ isUserInCall ? 'Connected' : 'Live Call' }}</span>\n    </div>\n    <span class=\"material-icons-outlined rts-call-widget-icon\">videocam</span>\n  </div>\n\n  <div class=\"rts-call-widget-content\">\n    <p class=\"rts-call-widget-subtitle\">\n      Started by <strong>{{ callerName }}</strong>\n    </p>\n\n    @if (presentMembers.length > 0) {\n      <div class=\"rts-call-members-section\">\n        <span class=\"rts-call-members-label\">In call ({{ presentMembers.length }}):</span>\n        <div class=\"rts-call-avatar-stack\">\n          @for (member of presentMembers; track member.id) {\n            <div class=\"rts-call-avatar-item\" [title]=\"member.name\">\n              @if (member.imageUrl) {\n                <img [src]=\"member.imageUrl\" [alt]=\"member.name\" class=\"rts-call-avatar-img\" />\n              } @else {\n                <div class=\"rts-call-avatar-fallback\">\n                  {{ member.initials }}\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"rts-call-widget-actions\">\n    @if (isUserInCall) {\n      <button class=\"rts-call-action-btn rts-call-btn-connected\" disabled type=\"button\">\n        <span class=\"material-icons-outlined\">check_circle</span>\n        <span>In Call</span>\n      </button>\n    } @else {\n      <button class=\"rts-call-action-btn rts-join-call-btn\"\n              (click)=\"joinCall()\"\n              type=\"button\"\n      >\n        <span class=\"material-icons-outlined\">call</span>\n        <span>Join Call</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".rts-theme-dark{--rts-bg-primary: #0e0e10;--rts-bg-surface: #1a1a1e;--rts-bg-surface-elevated: #242428;--rts-bg-surface-hover: rgba(255, 255, 255, .05);--rts-bg-gradient: linear-gradient(135deg, #1b0533 0%, #0e0e10 60%, #0a1628 100%);--rts-text-primary: #e5e5e7;--rts-text-secondary: #8e8e93;--rts-text-muted: #6a6a7a;--rts-accent: #6c5ce7;--rts-accent-light: #a29bfe;--rts-accent-blue: #3b82f7;--rts-accent-highlight: #bf8bff;--rts-accent-highlight-dim: rgba(191, 139, 255, .15);--rts-border-dim: rgba(255, 255, 255, .05);--rts-border-med: rgba(255, 255, 255, .08);--rts-border-bright: rgba(255, 255, 255, .15);--rts-card-bg-start: rgba(28, 28, 40, .8);--rts-card-bg-end: rgba(20, 20, 30, .9);--rts-danger: #e84118;--rts-danger-bg: rgba(232, 65, 24, .05);--rts-danger-border: rgba(232, 65, 24, .1);--rts-success: #2ecc71;--rts-warning: #f9ca24;--rts-shadow-rgb: 0, 0, 0;--rts-glass-tint: rgba(255, 255, 255, .03)}.rts-theme-light{--rts-bg-primary: #f8f9fa;--rts-bg-surface: #ffffff;--rts-bg-surface-elevated: #f0f0f4;--rts-bg-surface-hover: rgba(0, 0, 0, .04);--rts-bg-gradient: linear-gradient(135deg, #f0ecff 0%, #f8f9fa 60%, #edf4ff 100%);--rts-text-primary: #1a1a2e;--rts-text-secondary: #555570;--rts-text-muted: #8888a0;--rts-accent: #6c5ce7;--rts-accent-light: #a29bfe;--rts-accent-blue: #3b82f7;--rts-accent-highlight: #bf8bff;--rts-accent-highlight-dim: rgba(191, 139, 255, .1);--rts-border-dim: rgba(0, 0, 0, .06);--rts-border-med: rgba(0, 0, 0, .1);--rts-border-bright: rgba(0, 0, 0, .15);--rts-card-bg-start: rgba(255, 255, 255, .95);--rts-card-bg-end: rgba(248, 248, 255, .98);--rts-danger: #e84118;--rts-danger-bg: rgba(232, 65, 24, .06);--rts-danger-border: rgba(232, 65, 24, .15);--rts-success: #2ecc71;--rts-warning: #f9ca24;--rts-shadow-rgb: 0, 0, 0;--rts-glass-tint: rgba(0, 0, 0, .02)}.rts-call-widget{min-width:250px;max-width:320px;background:linear-gradient(135deg,#ffffff12,#ffffff05);border:1px solid var(--rts-border-med, rgba(255, 255, 255, .12));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:14px;padding:14px;box-shadow:0 8px 32px #00000040;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.rts-call-widget:hover{border-color:#10b98159;box-shadow:0 10px 36px #10b9811f}.rts-call-widget.rts-call-widget-active{border-color:#10b98180;background:linear-gradient(135deg,#10b9811f,#ffffff05)}.rts-call-widget .rts-call-widget-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.rts-call-widget .rts-call-widget-header .rts-call-widget-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;background:#10b98126;border:1px solid rgba(16,185,129,.3);border-radius:20px}.rts-call-widget .rts-call-widget-header .rts-call-widget-badge .rts-call-live-dot{width:7px;height:7px;border-radius:50%;background-color:#10b981;box-shadow:0 0 8px #10b981;animation:rts-call-pulse 1.8s infinite}.rts-call-widget .rts-call-widget-header .rts-call-widget-badge .rts-call-badge-text{font-size:11px;font-weight:700;color:#10b981;text-transform:uppercase;letter-spacing:.5px}.rts-call-widget .rts-call-widget-header .rts-call-widget-icon{font-size:18px;color:var(--rts-text-muted, rgba(255, 255, 255, .5))}.rts-call-widget .rts-call-widget-content{margin-bottom:12px}.rts-call-widget .rts-call-widget-content .rts-call-widget-subtitle{margin:0 0 8px;font-size:13px;color:var(--rts-text-secondary, rgba(255, 255, 255, .7))}.rts-call-widget .rts-call-widget-content .rts-call-widget-subtitle strong{color:var(--rts-text-primary, #fff)}.rts-call-widget .rts-call-widget-content .rts-call-members-section{display:flex;align-items:center;gap:8px;margin-top:6px}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-members-label{font-size:11px;color:var(--rts-text-muted, rgba(255, 255, 255, .5));font-weight:500}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack{display:flex;align-items:center}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item{width:26px;height:26px;border-radius:50%;border:2px solid var(--rts-bg-primary, #1e1e2d);margin-left:-6px;position:relative;overflow:hidden;transition:transform .2s ease,z-index .2s ease}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item:first-child{margin-left:0}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item:hover{transform:translateY(-2px) scale(1.15);z-index:10}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item .rts-call-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.rts-call-widget .rts-call-widget-content .rts-call-members-section .rts-call-avatar-stack .rts-call-avatar-item .rts-call-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;font-size:10px;font-weight:700}.rts-call-widget .rts-call-widget-actions .rts-call-action-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.rts-call-widget .rts-call-widget-actions .rts-call-action-btn .material-icons-outlined{font-size:16px}.rts-call-widget .rts-call-widget-actions .rts-join-call-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 14px #10b98159}.rts-call-widget .rts-call-widget-actions .rts-join-call-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #10b98173}.rts-call-widget .rts-call-widget-actions .rts-join-call-btn:active{transform:translateY(0)}.rts-call-widget .rts-call-widget-actions .rts-call-btn-connected{background:#10b98126;border:1px solid rgba(16,185,129,.3);color:#10b981;cursor:default}@keyframes rts-call-pulse{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 6px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], messenger: [{
@@ -1890,6 +2100,8 @@ class MediaWidgetComponent {
         this.hiddenCount = 0;
         this.showAll = false;
         this.downloadingUrl = null;
+        this.loadedImageUrls = new Set();
+        this.erroredImageUrls = new Set();
         this.MAX_GRID = 4;
     }
     ngOnInit() {
@@ -1906,6 +2118,22 @@ class MediaWidgetComponent {
     previewUrl(img) {
         return img.smallVersionUrl || img.url;
     }
+    isImageLoaded(img) {
+        const url = this.previewUrl(img);
+        return this.loadedImageUrls.has(url);
+    }
+    isImageError(img) {
+        const url = this.previewUrl(img);
+        return this.erroredImageUrls.has(url);
+    }
+    onImageLoad(img) {
+        const url = this.previewUrl(img);
+        this.loadedImageUrls.add(url);
+    }
+    onImageError(img) {
+        const url = this.previewUrl(img);
+        this.erroredImageUrls.add(url);
+    }
     async downloadOriginal(event, img) {
         event.stopPropagation();
         event.preventDefault();
@@ -2012,11 +2240,11 @@ class MediaWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MediaWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MediaWidgetComponent, isStandalone: true, selector: "rtsee-media-widget", inputs: { message: "message", messenger: "messenger", chat: "chat", showCost: "showCost" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.id || img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"previewUrl(img)\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <button\n            type=\"button\"\n            class=\"rts-media-btn-download\"\n            [class.rts-downloading]=\"downloadingUrl === img.url\"\n            title=\"Download original image\"\n            aria-label=\"Download original image\"\n            (click)=\"downloadOriginal($event, img)\"\n          >\n            <i class=\"pi\" [ngClass]=\"downloadingUrl === img.url ? 'pi-spin pi-spinner' : 'pi-download'\"></i>\n          </button>\n          <div class=\"rts-media-image-actions\">\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-paint\"\n              title=\"Send image to Illustrator (Review & Iterate)\"\n              (click)=\"sendToIllustrator($event, img)\"\n            >\n              <i class=\"pi pi-palette\"></i>\n              <span>+ paint</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-context\"\n              title=\"Add image to Illustrator context references\"\n              (click)=\"addToContext($event, img)\"\n            >\n              <i class=\"pi pi-plus\"></i>\n              <span>+ context</span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-btn-download{position:absolute;left:8px;bottom:8px;z-index:5;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d1fae5;border:1px solid rgba(52,211,153,.45);border-radius:50%;cursor:pointer;opacity:.85;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-download i{font-size:12px;color:#34d399}.rts-media-btn-download:hover{opacity:1;background:#10b981e6;border-color:#34d399;transform:translateY(-1px) scale(1.08);box-shadow:0 4px 12px #34d39973}.rts-media-btn-download:hover i{color:#fff}.rts-media-btn-download:active{transform:translateY(0) scale(.96)}.rts-media-btn-download.rts-downloading{cursor:progress;opacity:1}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CostDisplayComponent, selector: "rtsee-cost-display", inputs: ["cost"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MediaWidgetComponent, isStandalone: true, selector: "rtsee-media-widget", inputs: { message: "message", messenger: "messenger", chat: "chat", showCost: "showCost" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.id || img.url) {\n        <div class=\"rts-media-image-wrapper\" [class.rts-image-loaded]=\"isImageLoaded(img)\">\n          <!-- Media Placeholder (preview before image loads) -->\n          @if (!isImageLoaded(img)) {\n            <div class=\"rts-media-placeholder\" [class.rts-placeholder-error]=\"isImageError(img)\">\n              <div class=\"rts-media-placeholder-shimmer\"></div>\n              <div class=\"rts-media-placeholder-content\">\n                @if (isImageError(img)) {\n                  <span class=\"material-icons-outlined rts-media-placeholder-icon\">broken_image</span>\n                  <span class=\"rts-media-placeholder-text\">Failed to load</span>\n                } @else {\n                  <div class=\"rts-media-placeholder-icon-wrap\">\n                    <span class=\"material-icons-outlined rts-media-placeholder-icon\">image</span>\n                  </div>\n                  <span class=\"rts-media-placeholder-text\">{{ img.name || 'Loading media preview...' }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <img\n            [src]=\"previewUrl(img)\"\n            [alt]=\"img.name\"\n            class=\"rts-media-image\"\n            [class.rts-media-image-loaded]=\"isImageLoaded(img)\"\n            (load)=\"onImageLoad(img)\"\n            (error)=\"onImageError(img)\"\n            loading=\"lazy\"\n          />\n\n          @if (isImageLoaded(img)) {\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-download\"\n              [class.rts-downloading]=\"downloadingUrl === img.url\"\n              title=\"Download original image\"\n              aria-label=\"Download original image\"\n              (click)=\"downloadOriginal($event, img)\"\n            >\n              <i class=\"pi\" [ngClass]=\"downloadingUrl === img.url ? 'pi-spin pi-spinner' : 'pi-download'\"></i>\n            </button>\n            <div class=\"rts-media-image-actions\">\n              <button\n                type=\"button\"\n                class=\"rts-media-btn-paint\"\n                title=\"Send image to Illustrator (Review & Iterate)\"\n                (click)=\"sendToIllustrator($event, img)\"\n              >\n                <i class=\"pi pi-palette\"></i>\n                <span>+ paint</span>\n              </button>\n              <button\n                type=\"button\"\n                class=\"rts-media-btn-context\"\n                title=\"Add image to Illustrator context references\"\n                (click)=\"addToContext($event, img)\"\n              >\n                <i class=\"pi pi-plus\"></i>\n                <span>+ context</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px;aspect-ratio:16/9;background:#000}.rts-video-player{width:100%;height:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-1 .rts-media-image-wrapper{min-height:220px;aspect-ratio:16/10}.rts-media-grid-1 .rts-media-image-wrapper.rts-image-loaded{min-height:0;aspect-ratio:auto}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-2 .rts-media-image-wrapper{aspect-ratio:1/1;min-height:120px}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-grid-4 .rts-media-image-wrapper{aspect-ratio:1/1;min-height:120px}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e);display:flex;align-items:center;justify-content:center}.rts-media-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2af5,#12121cfa);border:1px solid rgba(255,255,255,.06);border-radius:6px;z-index:2;overflow:hidden;pointer-events:none}.rts-media-placeholder .rts-media-placeholder-shimmer{position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.03) 30%,rgba(168,85,247,.12) 50%,rgba(255,255,255,.03) 70%,transparent 100%);animation:rts-media-shimmer 2.2s infinite ease-in-out}.rts-media-placeholder .rts-media-placeholder-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;max-width:90%}.rts-media-placeholder .rts-media-placeholder-icon-wrap{width:42px;height:42px;border-radius:50%;background:#6c5ce726;border:1px solid rgba(168,85,247,.35);display:flex;align-items:center;justify-content:center;animation:rts-media-pulse 2s infinite ease-in-out;box-shadow:0 4px 16px #6c5ce733}.rts-media-placeholder .rts-media-placeholder-icon{font-size:22px;color:var(--rts-accent-light, #c084fc)}.rts-media-placeholder .rts-media-placeholder-text{font-size:11px;font-weight:500;color:var(--rts-text-muted, #94a3b8);max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.rts-media-placeholder.rts-placeholder-error .rts-media-placeholder-icon-wrap{background:#ef444426;border-color:#ef444459;animation:none;box-shadow:none}.rts-media-placeholder.rts-placeholder-error .rts-media-placeholder-icon{color:#ef4444}.rts-media-placeholder.rts-placeholder-error .rts-media-placeholder-text{color:#f87171}@keyframes rts-media-shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@keyframes rts-media-pulse{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1;box-shadow:0 0 16px #a855f766}}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-btn-download{position:absolute;left:8px;bottom:8px;z-index:5;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d1fae5;border:1px solid rgba(52,211,153,.45);border-radius:50%;cursor:pointer;opacity:.85;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-download i{font-size:12px;color:#34d399}.rts-media-btn-download:hover{opacity:1;background:#10b981e6;border-color:#34d399;transform:translateY(-1px) scale(1.08);box-shadow:0 4px 12px #34d39973}.rts-media-btn-download:hover i{color:#fff}.rts-media-btn-download:active{transform:translateY(0) scale(.96)}.rts-media-btn-download.rts-downloading{cursor:progress;opacity:1}.rts-media-image{width:100%;height:100%;max-height:280px;object-fit:cover;display:block;opacity:0;transition:opacity .25s ease-out,transform .2s ease;cursor:pointer}.rts-media-image.rts-media-image-loaded{opacity:1}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{height:auto;max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CostDisplayComponent, selector: "rtsee-cost-display", inputs: ["cost"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MediaWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-media-widget', standalone: true, imports: [NgClass, CostDisplayComponent], template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.id || img.url) {\n        <div class=\"rts-media-image-wrapper\">\n          <img [src]=\"previewUrl(img)\" [alt]=\"img.name\" class=\"rts-media-image\" loading=\"lazy\" />\n          <button\n            type=\"button\"\n            class=\"rts-media-btn-download\"\n            [class.rts-downloading]=\"downloadingUrl === img.url\"\n            title=\"Download original image\"\n            aria-label=\"Download original image\"\n            (click)=\"downloadOriginal($event, img)\"\n          >\n            <i class=\"pi\" [ngClass]=\"downloadingUrl === img.url ? 'pi-spin pi-spinner' : 'pi-download'\"></i>\n          </button>\n          <div class=\"rts-media-image-actions\">\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-paint\"\n              title=\"Send image to Illustrator (Review & Iterate)\"\n              (click)=\"sendToIllustrator($event, img)\"\n            >\n              <i class=\"pi pi-palette\"></i>\n              <span>+ paint</span>\n            </button>\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-context\"\n              title=\"Add image to Illustrator context references\"\n              (click)=\"addToContext($event, img)\"\n            >\n              <i class=\"pi pi-plus\"></i>\n              <span>+ context</span>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px}.rts-video-player{width:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e)}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-btn-download{position:absolute;left:8px;bottom:8px;z-index:5;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d1fae5;border:1px solid rgba(52,211,153,.45);border-radius:50%;cursor:pointer;opacity:.85;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-download i{font-size:12px;color:#34d399}.rts-media-btn-download:hover{opacity:1;background:#10b981e6;border-color:#34d399;transform:translateY(-1px) scale(1.08);box-shadow:0 4px 12px #34d39973}.rts-media-btn-download:hover i{color:#fff}.rts-media-btn-download:active{transform:translateY(0) scale(.96)}.rts-media-btn-download.rts-downloading{cursor:progress;opacity:1}.rts-media-image{width:100%;height:auto;max-height:280px;object-fit:cover;display:block;transition:transform .2s ease;cursor:pointer}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"] }]
+            args: [{ selector: 'rtsee-media-widget', standalone: true, imports: [NgClass, CostDisplayComponent], template: "<div class=\"rts-media-widget\">\n  <!-- Video player -->\n  @if (message.video) {\n    <div class=\"rts-media-video\">\n      <video\n        controls\n        playsinline\n        preload=\"metadata\"\n        [src]=\"message.video.url\"\n        class=\"rts-video-player\"\n      >\n        Your browser does not support video playback.\n      </video>\n    </div>\n  }\n\n  <!-- Image grid -->\n  @if (hasImages) {\n    <div class=\"rts-media-images\" [ngClass]=\"gridClass\">\n      @for (img of visibleImages; track img.id || img.url) {\n        <div class=\"rts-media-image-wrapper\" [class.rts-image-loaded]=\"isImageLoaded(img)\">\n          <!-- Media Placeholder (preview before image loads) -->\n          @if (!isImageLoaded(img)) {\n            <div class=\"rts-media-placeholder\" [class.rts-placeholder-error]=\"isImageError(img)\">\n              <div class=\"rts-media-placeholder-shimmer\"></div>\n              <div class=\"rts-media-placeholder-content\">\n                @if (isImageError(img)) {\n                  <span class=\"material-icons-outlined rts-media-placeholder-icon\">broken_image</span>\n                  <span class=\"rts-media-placeholder-text\">Failed to load</span>\n                } @else {\n                  <div class=\"rts-media-placeholder-icon-wrap\">\n                    <span class=\"material-icons-outlined rts-media-placeholder-icon\">image</span>\n                  </div>\n                  <span class=\"rts-media-placeholder-text\">{{ img.name || 'Loading media preview...' }}</span>\n                }\n              </div>\n            </div>\n          }\n\n          <img\n            [src]=\"previewUrl(img)\"\n            [alt]=\"img.name\"\n            class=\"rts-media-image\"\n            [class.rts-media-image-loaded]=\"isImageLoaded(img)\"\n            (load)=\"onImageLoad(img)\"\n            (error)=\"onImageError(img)\"\n            loading=\"lazy\"\n          />\n\n          @if (isImageLoaded(img)) {\n            <button\n              type=\"button\"\n              class=\"rts-media-btn-download\"\n              [class.rts-downloading]=\"downloadingUrl === img.url\"\n              title=\"Download original image\"\n              aria-label=\"Download original image\"\n              (click)=\"downloadOriginal($event, img)\"\n            >\n              <i class=\"pi\" [ngClass]=\"downloadingUrl === img.url ? 'pi-spin pi-spinner' : 'pi-download'\"></i>\n            </button>\n            <div class=\"rts-media-image-actions\">\n              <button\n                type=\"button\"\n                class=\"rts-media-btn-paint\"\n                title=\"Send image to Illustrator (Review & Iterate)\"\n                (click)=\"sendToIllustrator($event, img)\"\n              >\n                <i class=\"pi pi-palette\"></i>\n                <span>+ paint</span>\n              </button>\n              <button\n                type=\"button\"\n                class=\"rts-media-btn-context\"\n                title=\"Add image to Illustrator context references\"\n                (click)=\"addToContext($event, img)\"\n              >\n                <i class=\"pi pi-plus\"></i>\n                <span>+ context</span>\n              </button>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Show more / less toggle -->\n  @if (hiddenCount > 0 || showAll) {\n    <button class=\"rts-media-toggle\" (click)=\"toggleShowAll()\">\n      {{ showAll ? 'Show less' : 'Show ' + hiddenCount + ' more' }}\n    </button>\n  }\n\n  <!-- Cost display (optional, disabled when nested inside agentic widget) -->\n  @if (showCost && message.cost) {\n    <div class=\"rts-media-cost\">\n      <rtsee-cost-display [cost]=\"message.cost\"></rtsee-cost-display>\n    </div>\n  }\n</div>\n", styles: [".rts-media-widget{max-width:100%}.rts-media-video{border-radius:8px;overflow:hidden;margin-bottom:6px;aspect-ratio:16/9;background:#000}.rts-video-player{width:100%;height:100%;max-height:360px;border-radius:8px;background:#000;display:block}.rts-media-images{display:grid;gap:4px;border-radius:8px;overflow:hidden;margin-bottom:4px}.rts-media-grid-1{grid-template-columns:1fr}.rts-media-grid-1 .rts-media-image-wrapper{min-height:220px;aspect-ratio:16/10}.rts-media-grid-1 .rts-media-image-wrapper.rts-image-loaded{min-height:0;aspect-ratio:auto}.rts-media-grid-2{grid-template-columns:1fr 1fr}.rts-media-grid-2 .rts-media-image-wrapper{aspect-ratio:1/1;min-height:120px}.rts-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.rts-media-grid-4 .rts-media-image-wrapper{aspect-ratio:1/1;min-height:120px}.rts-media-image-wrapper{position:relative;overflow:hidden;border-radius:6px;background:var(--rts-bg-secondary, #1e1e2e);display:flex;align-items:center;justify-content:center}.rts-media-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2af5,#12121cfa);border:1px solid rgba(255,255,255,.06);border-radius:6px;z-index:2;overflow:hidden;pointer-events:none}.rts-media-placeholder .rts-media-placeholder-shimmer{position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.03) 30%,rgba(168,85,247,.12) 50%,rgba(255,255,255,.03) 70%,transparent 100%);animation:rts-media-shimmer 2.2s infinite ease-in-out}.rts-media-placeholder .rts-media-placeholder-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;max-width:90%}.rts-media-placeholder .rts-media-placeholder-icon-wrap{width:42px;height:42px;border-radius:50%;background:#6c5ce726;border:1px solid rgba(168,85,247,.35);display:flex;align-items:center;justify-content:center;animation:rts-media-pulse 2s infinite ease-in-out;box-shadow:0 4px 16px #6c5ce733}.rts-media-placeholder .rts-media-placeholder-icon{font-size:22px;color:var(--rts-accent-light, #c084fc)}.rts-media-placeholder .rts-media-placeholder-text{font-size:11px;font-weight:500;color:var(--rts-text-muted, #94a3b8);max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.rts-media-placeholder.rts-placeholder-error .rts-media-placeholder-icon-wrap{background:#ef444426;border-color:#ef444459;animation:none;box-shadow:none}.rts-media-placeholder.rts-placeholder-error .rts-media-placeholder-icon{color:#ef4444}.rts-media-placeholder.rts-placeholder-error .rts-media-placeholder-text{color:#f87171}@keyframes rts-media-shimmer{0%{transform:translate(0)}to{transform:translate(200%)}}@keyframes rts-media-pulse{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1;box-shadow:0 0 16px #a855f766}}.rts-media-image-actions{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;gap:6px}.rts-media-btn-paint{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9d5ff;border:1px solid rgba(168,85,247,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-paint i{font-size:11px;color:#c084fc}.rts-media-btn-paint span{line-height:1}.rts-media-btn-paint:hover{background:#9333eae6;color:#fff;border-color:#a855f7;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #a855f773}.rts-media-btn-paint:hover i{color:#fff}.rts-media-btn-paint:active{transform:translateY(0) scale(.98)}.rts-media-btn-context{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#bae6fd;border:1px solid rgba(56,189,248,.45);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-context i{font-size:11px;color:#38bdf8}.rts-media-btn-context span{line-height:1}.rts-media-btn-context:hover{background:#0ea5e9e6;color:#fff;border-color:#38bdf8;transform:translateY(-1px) scale(1.04);box-shadow:0 4px 12px #38bdf873}.rts-media-btn-context:hover i{color:#fff}.rts-media-btn-context:active{transform:translateY(0) scale(.98)}.rts-media-btn-download{position:absolute;left:8px;bottom:8px;z-index:5;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#12121cd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d1fae5;border:1px solid rgba(52,211,153,.45);border-radius:50%;cursor:pointer;opacity:.85;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #00000080}.rts-media-btn-download i{font-size:12px;color:#34d399}.rts-media-btn-download:hover{opacity:1;background:#10b981e6;border-color:#34d399;transform:translateY(-1px) scale(1.08);box-shadow:0 4px 12px #34d39973}.rts-media-btn-download:hover i{color:#fff}.rts-media-btn-download:active{transform:translateY(0) scale(.96)}.rts-media-btn-download.rts-downloading{cursor:progress;opacity:1}.rts-media-image{width:100%;height:100%;max-height:280px;object-fit:cover;display:block;opacity:0;transition:opacity .25s ease-out,transform .2s ease;cursor:pointer}.rts-media-image.rts-media-image-loaded{opacity:1}.rts-media-image:hover{transform:scale(1.02)}.rts-media-grid-1 .rts-media-image{height:auto;max-height:400px;object-fit:contain}.rts-media-toggle{display:block;width:100%;padding:6px 0;border:none;background:none;color:var(--rts-agent-accent, #8b5cf6);font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:opacity .15s ease}.rts-media-toggle:hover{opacity:.8}.rts-media-cost{display:flex;justify-content:flex-end;padding-top:4px}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }], messenger: [{
@@ -2850,7 +3078,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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rts-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rts-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rts-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rts-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]" }] }); }
+    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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-message-container\" #rtsMessageContainer\n     [ngClass]=\"{\n     'rts-message-from-me': message.from.id === messenger.clientId,\n     'rts-message-is-widget': !!message.widget\n     }\">\n  <div class=\"rts-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rts-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rts-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,
@@ -2859,7 +3087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         MessageTimeAndStatusComponent,
                         WidgetDirective,
                         RatingComponent,
-                    ], standalone: true, template: "<div class=\"rts-message-container\" #rtsMessageContainer\n     [ngClass]=\"{'rts-message-from-me': message.from.id === messenger.clientId}\"\n>\n  <div class=\"rts-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rts-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rts-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" }]
+                    ], standalone: true, template: "<div class=\"rts-message-container\" #rtsMessageContainer\n     [ngClass]=\"{\n     'rts-message-from-me': message.from.id === messenger.clientId,\n     'rts-message-is-widget': !!message.widget\n     }\">\n  <div class=\"rts-messenger-message\">\n    @if (message.widget) {\n      <ng-template widgetHost></ng-template>\n    }\n    @if (!message.widget) {\n      <p class=\"rts-messenger-message-text\"\n      >{{ message.text }}</p>\n    }\n    <div class=\"rts-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: [{
@@ -2881,12 +3109,24 @@ class MessagesListComponent {
         this.messagesGroups = [];
         this.firstGroupedMessage = null;
         this.lastGroupedMessage = null;
+        this.shouldStickToBottom = true;
+        this.resizeObserver = null;
+        this.onMediaCapture = null;
+        this.initialScrollInterval = null;
         this.RTSeeChatTypes = RTSeeChatTypes;
-        this.bindScrollFunction = this.scrollToBottom.bind(this);
-        this.bindedGroupFunction = this.groupMessages.bind(this);
+        this.bindScrollFunction = () => {
+            this.shouldStickToBottom = true;
+            this.scrollToBottom();
+        };
+        this.bindedGroupFunction = () => {
+            this.groupMessages();
+            if (this.shouldStickToBottom) {
+                this.scrollToBottom();
+            }
+        };
     }
     onWindowScroll(event) {
-        // Get the vertical scroll position
+        this.checkScrollPosition();
         const verticalOffset = window.pageYOffset ||
             this.document.documentElement.scrollTop ||
             this.document.body.scrollTop ||
@@ -2894,28 +3134,76 @@ class MessagesListComponent {
         if (window.innerWidth >= COMMON_CONSTANTS.mobileBreakpoint) {
             return;
         }
-        // You can add logic here, e.g., show a 'scroll to top' button
         if (verticalOffset < 300) {
             this.onScrolledToTop();
         }
     }
+    onWindowResize() {
+        if (this.shouldStickToBottom) {
+            this.scrollToBottom();
+        }
+    }
     ngOnInit() {
-        this.chat.on(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
-        this.chat.on(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        this.bindChatEvents(this.chat);
         this.groupMessages();
     }
+    ngOnChanges(changes) {
+        if (changes['chat'] && !changes['chat'].firstChange) {
+            const prevChat = changes['chat'].previousValue;
+            this.unbindChatEvents(prevChat);
+            this.bindChatEvents(this.chat);
+            this.groupMessages();
+            this.enforceInitialScroll();
+        }
+    }
     ngAfterViewInit() {
-        if (this.chat.isStandalone) {
+        if (this.chat?.isStandalone) {
             return;
         }
-        this.scrollToBottom();
+        this.enforceInitialScroll();
+        // Observe size changes of the messages list content (e.g. media widgets expanding/collapsing, images loading)
+        if (typeof ResizeObserver !== 'undefined' && this.contentBlock?.nativeElement) {
+            this.resizeObserver = new ResizeObserver(() => {
+                if (this.shouldStickToBottom) {
+                    this.scrollToBottom();
+                }
+            });
+            this.resizeObserver.observe(this.contentBlock.nativeElement);
+        }
+        // Capture media load/error events on all nested img and video elements
+        if (this.scrollContainer?.nativeElement) {
+            this.onMediaCapture = () => {
+                if (this.shouldStickToBottom) {
+                    this.scrollToBottom();
+                }
+            };
+            this.scrollContainer.nativeElement.addEventListener('load', this.onMediaCapture, true);
+            this.scrollContainer.nativeElement.addEventListener('error', this.onMediaCapture, true);
+        }
     }
     onMessageSent() {
+        this.shouldStickToBottom = true;
         this.scrollToBottom();
     }
     ngOnDestroy() {
-        this.chat.off(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
-        this.chat.off(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
+        this.unbindChatEvents(this.chat);
+        if (this.initialScrollInterval) {
+            clearInterval(this.initialScrollInterval);
+            this.initialScrollInterval = null;
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.scrollContainer?.nativeElement && this.onMediaCapture) {
+            this.scrollContainer.nativeElement.removeEventListener('load', this.onMediaCapture, true);
+            this.scrollContainer.nativeElement.removeEventListener('error', this.onMediaCapture, true);
+            this.onMediaCapture = null;
+        }
+    }
+    onContainerScroll(event) {
+        this.checkScrollPosition();
+        this.onScroll();
     }
     onScrolledToTop() {
         if (this.chat.messagesLoadInProgress || this.chat.firstMessageLoaded) {
@@ -2929,30 +3217,99 @@ class MessagesListComponent {
         }
         this.chat.loadRemoteMessages('front');
     }
-    scrollToBottom() {
-        this.groupMessages();
-        if (this.chat.isStandalone) {
+    scrollToBottom(immediate = false) {
+        if (this.chat?.isStandalone) {
             return;
         }
-        setTimeout(() => {
-            if (window.innerWidth < COMMON_CONSTANTS.mobileBreakpoint) {
-                this.scroller.scrollToPosition([0, document.body.scrollHeight]);
-            }
-            if (!this.scrollContainer?.nativeElement?.scrollHeight) {
-                return;
+        const performScroll = () => {
+            if (this.bottomAnchor?.nativeElement) {
+                try {
+                    this.bottomAnchor.nativeElement.scrollIntoView({
+                        block: 'end',
+                        inline: 'nearest',
+                        behavior: 'instant',
+                    });
+                }
+                catch {
+                    // ignore
+                }
             }
-            try {
-                this.scrollContainer.nativeElement.scrollTop =
-                    this.scrollContainer.nativeElement.scrollHeight;
+            if (window.innerWidth < COMMON_CONSTANTS.mobileBreakpoint) {
+                const target = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+                window.scrollTo({ top: target, behavior: 'instant' });
+                this.scroller.scrollToPosition([0, target]);
             }
-            catch (err) {
-                console.log('Failed to Scroll');
+            if (this.scrollContainer?.nativeElement) {
+                const el = this.scrollContainer.nativeElement;
+                el.scrollTop = el.scrollHeight;
             }
-        }, 0);
+        };
+        performScroll();
+        if (!immediate) {
+            requestAnimationFrame(() => {
+                performScroll();
+            });
+            setTimeout(() => {
+                if (this.shouldStickToBottom) {
+                    performScroll();
+                }
+            }, 50);
+        }
     }
     formatDate(message) {
         return this.timeFormatService.formatDate(message.createdAt);
     }
+    checkScrollPosition() {
+        this.shouldStickToBottom = this.isAtBottom();
+    }
+    isAtBottom() {
+        const threshold = 150; // px threshold from bottom
+        if (window.innerWidth < COMMON_CONSTANTS.mobileBreakpoint) {
+            const scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+            const scrollTop = window.pageYOffset ||
+                document.documentElement.scrollTop ||
+                document.body.scrollTop ||
+                0;
+            const clientHeight = window.innerHeight;
+            return scrollHeight - (scrollTop + clientHeight) <= threshold;
+        }
+        else {
+            const el = this.scrollContainer?.nativeElement;
+            if (!el)
+                return true;
+            return el.scrollHeight - (el.scrollTop + el.clientHeight) <= threshold;
+        }
+    }
+    enforceInitialScroll() {
+        this.shouldStickToBottom = true;
+        this.scrollToBottom();
+        if (this.initialScrollInterval) {
+            clearInterval(this.initialScrollInterval);
+        }
+        let ticks = 0;
+        this.initialScrollInterval = setInterval(() => {
+            ticks++;
+            if (this.shouldStickToBottom) {
+                this.scrollToBottom(true);
+            }
+            if (ticks >= 20 || !this.shouldStickToBottom) {
+                clearInterval(this.initialScrollInterval);
+                this.initialScrollInterval = null;
+            }
+        }, 100);
+    }
+    bindChatEvents(chat) {
+        if (!chat)
+            return;
+        chat.on(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
+        chat.on(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+    }
+    unbindChatEvents(chat) {
+        if (!chat)
+            return;
+        chat.off(RTSeeChatEvents.MESSAGE_ADDED, this.bindScrollFunction);
+        chat.off(RTSeeChatEvents.MESSAGES_LIST_CHANGED, this.bindedGroupFunction);
+    }
     groupMessages() {
         if (!this.chat || !this.chat.messages.length) {
             this.messagesGroups.length = 0;
@@ -2999,11 +3356,11 @@ class MessagesListComponent {
         this.lastGroupedMessage = 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=\"rts-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=\"rts-messenger-message-wrapper\" [ngClass]=\"{\n     'rts-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rts-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rts-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rts-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"] }] }); }
+    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)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollBlock"], descendants: true }, { propertyName: "contentBlock", first: true, predicate: ["contentBlock"], descendants: true }, { propertyName: "bottomAnchor", first: true, predicate: ["bottomAnchor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onContainerScroll($event)\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  <div class=\"rts-messages-list-inner\" #contentBlock>\n    @for (messageGroup of messagesGroups; track messageGroup.id) {\n      <div class=\"rts-messenger-message-wrapper\" [ngClass]=\"{\n       'rts-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n      }\">\n        <div class=\"rts-messenger-message-inset\">\n          <img [src]=\"messageGroup.sender.imageUrl\"\n               class=\"rts-messenger-message-sender-image\"\n          >\n        </div>\n\n        <div class=\"rts-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 class=\"rts-messages-list-bottom-anchor\" #bottomAnchor></div>\n  </div>\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, MessageComponent, NgClass], standalone: true, template: "<div class=\"rts-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=\"rts-messenger-message-wrapper\" [ngClass]=\"{\n     'rts-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n    }\">\n      <div class=\"rts-messenger-message-inset\">\n        <img [src]=\"messageGroup.sender.imageUrl\"\n             class=\"rts-messenger-message-sender-image\"\n        >\n      </div>\n\n      <div class=\"rts-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" }]
+            args: [{ selector: 'rtsee-messages-list', imports: [InfiniteScrollDirective, MessageComponent, NgClass], standalone: true, template: "<div class=\"rts-messages-list\"\n     #scrollBlock\n     infiniteScroll\n     [infiniteScrollUpDistance]=\"2\"\n     [infiniteScrollDistance]=\"2\"\n     [infiniteScrollThrottle]=\"50\"\n     [scrollWindow]=\"false\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scroll)=\"onContainerScroll($event)\"\n     [style.padding-bottom]=\"messenger.chatInputHeight + 'px'\"\n>\n  <div class=\"rts-messages-list-inner\" #contentBlock>\n    @for (messageGroup of messagesGroups; track messageGroup.id) {\n      <div class=\"rts-messenger-message-wrapper\" [ngClass]=\"{\n       'rts-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n      }\">\n        <div class=\"rts-messenger-message-inset\">\n          <img [src]=\"messageGroup.sender.imageUrl\"\n               class=\"rts-messenger-message-sender-image\"\n          >\n        </div>\n\n        <div class=\"rts-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 class=\"rts-messages-list-bottom-anchor\" #bottomAnchor></div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimeFormatHelperService }, { type: i2$1.ViewportScroller }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -3014,9 +3371,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollBlock']
+            }], contentBlock: [{
+                type: ViewChild,
+                args: ['contentBlock']
+            }], bottomAnchor: [{
+                type: ViewChild,
+                args: ['bottomAnchor']
             }], onWindowScroll: [{
                 type: HostListener,
                 args: ['window:scroll', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class ChatMemberSuggestionsComponent {
@@ -3246,6 +3612,12 @@ class ChatInputComponent {
     get isGroupChat() {
         return this.chat.type !== RTSeeChatTypes.INDIVIDUAL;
     }
+    startVideoCall() {
+        if (!this.chat) {
+            return;
+        }
+        void this.messenger.initializeVideoCall(this.chat);
+    }
     sendMessage() {
         const text = this.sendMessageForm.get('message')?.value || '';
         const trimmedText = text.trim();
@@ -3420,11 +3792,11 @@ class ChatInputComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatInputComponent, isStandalone: true, selector: "rtsee-chat-input", inputs: { messenger: "messenger", chat: "chat" }, viewQueries: [{ propertyName: "chatInput", first: true, predicate: ["chatInput"], descendants: true }, { propertyName: "messageTextarea", first: true, predicate: ["messageTextarea"], descendants: true }], ngImport: i0, template: "<div #chatInput\n     class=\"rts-chat-input\"\n     [class.rts-chat-input-streaming]=\"chat.agentStreaming\"\n>\n  <rtsee-tool-use-request [chat]=\"chat\"></rtsee-tool-use-request>\n  <rtsee-chat-member-suggestions\n    [suggestions]=\"autocomplete.suggestions\"\n    [selectedIndex]=\"autocomplete.selectedIndex\"\n    [visible]=\"autocomplete.visible\"\n    (memberSelected)=\"onMemberSelected($event)\"\n  ></rtsee-chat-member-suggestions>\n  <rtsee-workflow-suggestions\n    [suggestions]=\"workflowAutocomplete.suggestions\"\n    [selectedIndex]=\"workflowAutocomplete.selectedIndex\"\n    [visible]=\"workflowAutocomplete.visible\"\n    (workflowSelected)=\"onWorkflowSelected($event)\"\n  ></rtsee-workflow-suggestions>\n  @if (agentAccessDenied) {\n    <div class=\"rts-agent-access-denied-banner\">\n      <span class=\"rts-agent-access-denied-icon\">\uD83D\uDD12</span>\n      <span class=\"rts-agent-access-denied-text\">You don't have permission to call agents in this chat.</span>\n      <button class=\"rts-agent-access-denied-dismiss\" (click)=\"dismissAccessDenied()\">Got it!</button>\n    </div>\n  }\n  <div class=\"rts-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rts-chat-input-form\">\n      <textarea #messageTextarea\n                [invalid]=\"false\"\n                [autoResize]=\"true\"\n                (keydown)=\"onKeyDown($event)\"\n                (keyup)=\"onKeyUp($event)\"\n                (input)=\"onInput()\"\n                [attr.disabled]=\"chat.agentStreaming ? '' : null\"\n                formControlName=\"message\"\n                pTextarea\n                [placeholder]=\"chat.agentStreaming ? 'Agent is responding...' : 'Type a message...'\"\n                class=\"rts-chat-input-field\"\n                rows=\"1\"\n                cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  @if (chat.agentStreaming) {\n    <button (click)=\"stopAgent()\"\n            class=\"rts-send-message-button rts-send-message-button-stop\"\n            type=\"button\"\n            title=\"Stop agent response\"\n    >\n      <span class=\"pi pi-stop-circle\"></span>\n    </button>\n  } @else {\n    <button (click)=\"sendMessage()\"\n            class=\"rts-send-message-button\"\n            type=\"submit\"\n    >\n      <span class=\"pi pi-send\"></span>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "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: ChatMemberSuggestionsComponent, selector: "rtsee-chat-member-suggestions", inputs: ["suggestions", "selectedIndex", "visible"], outputs: ["memberSelected"] }, { kind: "component", type: ToolUseRequestComponent, selector: "rtsee-tool-use-request", inputs: ["chat"] }, { kind: "component", type: WorkflowSuggestionsComponent, selector: "rtsee-workflow-suggestions", inputs: ["suggestions", "selectedIndex", "visible"], outputs: ["workflowSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatInputComponent, isStandalone: true, selector: "rtsee-chat-input", inputs: { messenger: "messenger", chat: "chat" }, viewQueries: [{ propertyName: "chatInput", first: true, predicate: ["chatInput"], descendants: true }, { propertyName: "messageTextarea", first: true, predicate: ["messageTextarea"], descendants: true }], ngImport: i0, template: "<div #chatInput\n     class=\"rts-chat-input\"\n     [class.rts-chat-input-streaming]=\"chat.agentStreaming\"\n>\n  <rtsee-tool-use-request [chat]=\"chat\"></rtsee-tool-use-request>\n  <rtsee-chat-member-suggestions\n    [suggestions]=\"autocomplete.suggestions\"\n    [selectedIndex]=\"autocomplete.selectedIndex\"\n    [visible]=\"autocomplete.visible\"\n    (memberSelected)=\"onMemberSelected($event)\"\n  ></rtsee-chat-member-suggestions>\n  <rtsee-workflow-suggestions\n    [suggestions]=\"workflowAutocomplete.suggestions\"\n    [selectedIndex]=\"workflowAutocomplete.selectedIndex\"\n    [visible]=\"workflowAutocomplete.visible\"\n    (workflowSelected)=\"onWorkflowSelected($event)\"\n  ></rtsee-workflow-suggestions>\n  @if (agentAccessDenied) {\n    <div class=\"rts-agent-access-denied-banner\">\n      <span class=\"rts-agent-access-denied-icon\">\uD83D\uDD12</span>\n      <span class=\"rts-agent-access-denied-text\">You don't have permission to call agents in this chat.</span>\n      <button class=\"rts-agent-access-denied-dismiss\" (click)=\"dismissAccessDenied()\">Got it!</button>\n    </div>\n  }\n  <button (click)=\"startVideoCall()\"\n          class=\"rts-start-call-button\"\n          type=\"button\"\n          title=\"Start Video Call\"\n  >\n    <span class=\"material-icons-outlined\">videocam</span>\n  </button>\n  <div class=\"rts-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rts-chat-input-form\">\n      <textarea #messageTextarea\n                [invalid]=\"false\"\n                [autoResize]=\"true\"\n                (keydown)=\"onKeyDown($event)\"\n                (keyup)=\"onKeyUp($event)\"\n                (input)=\"onInput()\"\n                [attr.disabled]=\"chat.agentStreaming ? '' : null\"\n                formControlName=\"message\"\n                pTextarea\n                [placeholder]=\"chat.agentStreaming ? 'Agent is responding...' : 'Type a message...'\"\n                class=\"rts-chat-input-field\"\n                rows=\"1\"\n                cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  @if (chat.agentStreaming) {\n    <button (click)=\"stopAgent()\"\n            class=\"rts-send-message-button rts-send-message-button-stop\"\n            type=\"button\"\n            title=\"Stop agent response\"\n    >\n      <span class=\"pi pi-stop-circle\"></span>\n    </button>\n  } @else {\n    <button (click)=\"sendMessage()\"\n            class=\"rts-send-message-button\"\n            type=\"submit\"\n    >\n      <span class=\"pi pi-send\"></span>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "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: ChatMemberSuggestionsComponent, selector: "rtsee-chat-member-suggestions", inputs: ["suggestions", "selectedIndex", "visible"], outputs: ["memberSelected"] }, { kind: "component", type: ToolUseRequestComponent, selector: "rtsee-tool-use-request", inputs: ["chat"] }, { kind: "component", type: WorkflowSuggestionsComponent, selector: "rtsee-workflow-suggestions", inputs: ["suggestions", "selectedIndex", "visible"], outputs: ["workflowSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-chat-input', imports: [ReactiveFormsModule, Textarea, ChatMemberSuggestionsComponent, ToolUseRequestComponent, WorkflowSuggestionsComponent], standalone: true, template: "<div #chatInput\n     class=\"rts-chat-input\"\n     [class.rts-chat-input-streaming]=\"chat.agentStreaming\"\n>\n  <rtsee-tool-use-request [chat]=\"chat\"></rtsee-tool-use-request>\n  <rtsee-chat-member-suggestions\n    [suggestions]=\"autocomplete.suggestions\"\n    [selectedIndex]=\"autocomplete.selectedIndex\"\n    [visible]=\"autocomplete.visible\"\n    (memberSelected)=\"onMemberSelected($event)\"\n  ></rtsee-chat-member-suggestions>\n  <rtsee-workflow-suggestions\n    [suggestions]=\"workflowAutocomplete.suggestions\"\n    [selectedIndex]=\"workflowAutocomplete.selectedIndex\"\n    [visible]=\"workflowAutocomplete.visible\"\n    (workflowSelected)=\"onWorkflowSelected($event)\"\n  ></rtsee-workflow-suggestions>\n  @if (agentAccessDenied) {\n    <div class=\"rts-agent-access-denied-banner\">\n      <span class=\"rts-agent-access-denied-icon\">\uD83D\uDD12</span>\n      <span class=\"rts-agent-access-denied-text\">You don't have permission to call agents in this chat.</span>\n      <button class=\"rts-agent-access-denied-dismiss\" (click)=\"dismissAccessDenied()\">Got it!</button>\n    </div>\n  }\n  <div class=\"rts-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rts-chat-input-form\">\n      <textarea #messageTextarea\n                [invalid]=\"false\"\n                [autoResize]=\"true\"\n                (keydown)=\"onKeyDown($event)\"\n                (keyup)=\"onKeyUp($event)\"\n                (input)=\"onInput()\"\n                [attr.disabled]=\"chat.agentStreaming ? '' : null\"\n                formControlName=\"message\"\n                pTextarea\n                [placeholder]=\"chat.agentStreaming ? 'Agent is responding...' : 'Type a message...'\"\n                class=\"rts-chat-input-field\"\n                rows=\"1\"\n                cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  @if (chat.agentStreaming) {\n    <button (click)=\"stopAgent()\"\n            class=\"rts-send-message-button rts-send-message-button-stop\"\n            type=\"button\"\n            title=\"Stop agent response\"\n    >\n      <span class=\"pi pi-stop-circle\"></span>\n    </button>\n  } @else {\n    <button (click)=\"sendMessage()\"\n            class=\"rts-send-message-button\"\n            type=\"submit\"\n    >\n      <span class=\"pi pi-send\"></span>\n    </button>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-chat-input', imports: [ReactiveFormsModule, Textarea, ChatMemberSuggestionsComponent, ToolUseRequestComponent, WorkflowSuggestionsComponent], standalone: true, template: "<div #chatInput\n     class=\"rts-chat-input\"\n     [class.rts-chat-input-streaming]=\"chat.agentStreaming\"\n>\n  <rtsee-tool-use-request [chat]=\"chat\"></rtsee-tool-use-request>\n  <rtsee-chat-member-suggestions\n    [suggestions]=\"autocomplete.suggestions\"\n    [selectedIndex]=\"autocomplete.selectedIndex\"\n    [visible]=\"autocomplete.visible\"\n    (memberSelected)=\"onMemberSelected($event)\"\n  ></rtsee-chat-member-suggestions>\n  <rtsee-workflow-suggestions\n    [suggestions]=\"workflowAutocomplete.suggestions\"\n    [selectedIndex]=\"workflowAutocomplete.selectedIndex\"\n    [visible]=\"workflowAutocomplete.visible\"\n    (workflowSelected)=\"onWorkflowSelected($event)\"\n  ></rtsee-workflow-suggestions>\n  @if (agentAccessDenied) {\n    <div class=\"rts-agent-access-denied-banner\">\n      <span class=\"rts-agent-access-denied-icon\">\uD83D\uDD12</span>\n      <span class=\"rts-agent-access-denied-text\">You don't have permission to call agents in this chat.</span>\n      <button class=\"rts-agent-access-denied-dismiss\" (click)=\"dismissAccessDenied()\">Got it!</button>\n    </div>\n  }\n  <button (click)=\"startVideoCall()\"\n          class=\"rts-start-call-button\"\n          type=\"button\"\n          title=\"Start Video Call\"\n  >\n    <span class=\"material-icons-outlined\">videocam</span>\n  </button>\n  <div class=\"rts-send-message\">\n    <form [formGroup]=\"sendMessageForm\" class=\"rts-chat-input-form\">\n      <textarea #messageTextarea\n                [invalid]=\"false\"\n                [autoResize]=\"true\"\n                (keydown)=\"onKeyDown($event)\"\n                (keyup)=\"onKeyUp($event)\"\n                (input)=\"onInput()\"\n                [attr.disabled]=\"chat.agentStreaming ? '' : null\"\n                formControlName=\"message\"\n                pTextarea\n                [placeholder]=\"chat.agentStreaming ? 'Agent is responding...' : 'Type a message...'\"\n                class=\"rts-chat-input-field\"\n                rows=\"1\"\n                cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  @if (chat.agentStreaming) {\n    <button (click)=\"stopAgent()\"\n            class=\"rts-send-message-button rts-send-message-button-stop\"\n            type=\"button\"\n            title=\"Stop agent response\"\n    >\n      <span class=\"pi pi-stop-circle\"></span>\n    </button>\n  } @else {\n    <button (click)=\"sendMessage()\"\n            class=\"rts-send-message-button\"\n            type=\"submit\"\n    >\n      <span class=\"pi pi-send\"></span>\n    </button>\n  }\n</div>\n" }]
         }], propDecorators: { messenger: [{
                 type: Input
             }], chat: [{
@@ -3437,6 +3809,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['messageTextarea']
             }] } });
 
+class InviteLinkComponent {
+    constructor() {
+        this.inviteUrl = '';
+        this.disclaimer = 'Anyone who opens this link can join the chat.';
+        this.copied = false;
+        this.loading = false;
+    }
+    async ngOnInit() {
+        if (!this.inviteUrl && this.chatId && this.messenger) {
+            await this.loadInviteLink();
+        }
+    }
+    async loadInviteLink() {
+        if (!this.chatId || !this.messenger)
+            return;
+        this.loading = true;
+        try {
+            const result = await this.messenger.remoteActions.getChatInvitationLink.send({
+                chatId: this.chatId,
+            });
+            if (result?.invitationLink) {
+                this.inviteUrl = result.invitationLink;
+            }
+        }
+        catch (e) {
+            console.log('Failed to fetch chat invitation link', e);
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    async copyToClipboard() {
+        try {
+            await navigator.clipboard.writeText(this.inviteUrl);
+            this.copied = true;
+            setTimeout(() => {
+                this.copied = false;
+            }, 2000);
+        }
+        catch {
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = this.inviteUrl;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            this.copied = true;
+            setTimeout(() => {
+                this.copied = false;
+            }, 2000);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InviteLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: InviteLinkComponent, isStandalone: true, selector: "rtsee-invite-link", inputs: { inviteUrl: "inviteUrl", chatId: "chatId", messenger: "messenger", disclaimer: "disclaimer" }, ngImport: i0, template: "<div class=\"rts-invite-link\">\n  <div class=\"rts-invite-link-info\">\n    <span class=\"rts-invite-link-icon material-icons-outlined\">link</span>\n    <div class=\"rts-invite-link-info-text\">\n      <h4>Invite Link</h4>\n      <p>{{ disclaimer }}</p>\n    </div>\n  </div>\n\n  @if (loading) {\n    <div class=\"rts-invite-link-loading\">\n      <span class=\"material-icons-outlined rts-spin-icon\">autorenew</span>\n      <span>Generating invite link...</span>\n    </div>\n  } @else {\n    <div class=\"rts-invite-link-url-container\">\n      <p-inputgroup>\n        <input pInputText\n               [value]=\"inviteUrl\"\n               readonly\n               class=\"rts-invite-link-url-input\"\n        />\n        <p-button [icon]=\"copied ? 'pi pi-check' : 'pi pi-copy'\"\n                  [severity]=\"copied ? 'success' : 'primary'\"\n                  (click)=\"copyToClipboard()\"\n                  [label]=\"copied ? 'Copied!' : 'Copy'\"\n        />\n      </p-inputgroup>\n    </div>\n  }\n</div>\n", dependencies: [{ 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: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InviteLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-invite-link', standalone: true, imports: [Button, InputText, InputGroup], template: "<div class=\"rts-invite-link\">\n  <div class=\"rts-invite-link-info\">\n    <span class=\"rts-invite-link-icon material-icons-outlined\">link</span>\n    <div class=\"rts-invite-link-info-text\">\n      <h4>Invite Link</h4>\n      <p>{{ disclaimer }}</p>\n    </div>\n  </div>\n\n  @if (loading) {\n    <div class=\"rts-invite-link-loading\">\n      <span class=\"material-icons-outlined rts-spin-icon\">autorenew</span>\n      <span>Generating invite link...</span>\n    </div>\n  } @else {\n    <div class=\"rts-invite-link-url-container\">\n      <p-inputgroup>\n        <input pInputText\n               [value]=\"inviteUrl\"\n               readonly\n               class=\"rts-invite-link-url-input\"\n        />\n        <p-button [icon]=\"copied ? 'pi pi-check' : 'pi pi-copy'\"\n                  [severity]=\"copied ? 'success' : 'primary'\"\n                  (click)=\"copyToClipboard()\"\n                  [label]=\"copied ? 'Copied!' : 'Copy'\"\n        />\n      </p-inputgroup>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { inviteUrl: [{
+                type: Input
+            }], chatId: [{
+                type: Input
+            }], messenger: [{
+                type: Input
+            }], disclaimer: [{
+                type: Input
+            }] } });
+
 class ViewportObserverDirective {
     constructor(element) {
         this.element = element;
@@ -3477,6 +3918,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class ChatComponent {
+    constructor() {
+        this.showInvite = false;
+    }
+    get isSoleAdmin() {
+        if (!this.chat)
+            return false;
+        const members = this.chat.members || [];
+        if (members.length !== 1)
+            return false;
+        const myClientId = this.messenger?.myPeer?.clientId || this.chat.clientId;
+        const soleMember = members[0];
+        const isMe = soleMember.id === myClientId || soleMember.clientId === myClientId;
+        const isAdmin = soleMember.role === RTSeeChatMemberRoles.ADMIN ||
+            this.chat.creator?.id === myClientId ||
+            this.chat.creator?.clientId === myClientId;
+        return isMe && isAdmin;
+    }
+    toggleInvite() {
+        this.showInvite = !this.showInvite;
+    }
     onInViewPortChange(value) {
         console.log('Received inViewPortChange', value);
         this.chat.isInViewPort = value;
@@ -3503,16 +3964,17 @@ class ChatComponent {
         }
     }
     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", chatData: "chatData", entity: "entity", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rts-chat\"\n     [ngClass]=\"{\n        'rts-chat-standalone': chat.isStandalone,\n        'rts-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rts-chat-footer-container\">\n    <div class=\"rts-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rts-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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatComponent, isStandalone: true, selector: "rtsee-chat", inputs: { chat: "chat", chatData: "chatData", entity: "entity", messenger: "messenger" }, ngImport: i0, template: "<div class=\"rts-chat\"\n     [ngClass]=\"{\n        'rts-chat-standalone': chat.isStandalone,\n        'rts-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  @if (isSoleAdmin) {\n    <div class=\"rts-chat-sole-admin-banner\">\n      <div class=\"rts-chat-sole-admin-header\">\n        <div class=\"rts-chat-sole-admin-badge\">\n          <span class=\"material-icons-outlined\">group_add</span>\n        </div>\n        <div class=\"rts-chat-sole-admin-info\">\n          <h4>You are the only member in this chat</h4>\n          <p>Invite people to start chatting</p>\n        </div>\n        <button class=\"rts-btn rts-btn-primary rts-chat-invite-toggle-btn\"\n                (click)=\"toggleInvite()\"\n                type=\"button\"\n        >\n          <span class=\"material-icons-outlined\">{{ showInvite ? 'expand_less' : 'person_add' }}</span>\n          <span>{{ showInvite ? 'Hide Invite' : 'Invite to Chat' }}</span>\n        </button>\n      </div>\n\n      @if (showInvite) {\n        <div class=\"rts-chat-sole-admin-invite\">\n          <rtsee-invite-link\n            [chatId]=\"chat.id\"\n            [messenger]=\"messenger\"\n          ></rtsee-invite-link>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"rts-chat-footer-container\">\n    <div class=\"rts-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rts-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: "component", type: InviteLinkComponent, selector: "rtsee-invite-link", inputs: ["inviteUrl", "chatId", "messenger", "disclaimer"] }, { 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,
+                        InviteLinkComponent,
                         ViewportObserverDirective,
                         NgClass,
-                    ], standalone: true, template: "<div class=\"rts-chat\"\n     [ngClass]=\"{\n        'rts-chat-standalone': chat.isStandalone,\n        'rts-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  <div class=\"rts-chat-footer-container\">\n    <div class=\"rts-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rts-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rts-chat\"\n     [ngClass]=\"{\n        'rts-chat-standalone': chat.isStandalone,\n        'rts-chat-in-viewport': chat.isInViewPort\n     }\"\n     rtseeViewportObserver\n     (inViewport)=\"onInViewPortChange($event)\"\n>\n  @if (isSoleAdmin) {\n    <div class=\"rts-chat-sole-admin-banner\">\n      <div class=\"rts-chat-sole-admin-header\">\n        <div class=\"rts-chat-sole-admin-badge\">\n          <span class=\"material-icons-outlined\">group_add</span>\n        </div>\n        <div class=\"rts-chat-sole-admin-info\">\n          <h4>You are the only member in this chat</h4>\n          <p>Invite people to start chatting</p>\n        </div>\n        <button class=\"rts-btn rts-btn-primary rts-chat-invite-toggle-btn\"\n                (click)=\"toggleInvite()\"\n                type=\"button\"\n        >\n          <span class=\"material-icons-outlined\">{{ showInvite ? 'expand_less' : 'person_add' }}</span>\n          <span>{{ showInvite ? 'Hide Invite' : 'Invite to Chat' }}</span>\n        </button>\n      </div>\n\n      @if (showInvite) {\n        <div class=\"rts-chat-sole-admin-invite\">\n          <rtsee-invite-link\n            [chatId]=\"chat.id\"\n            [messenger]=\"messenger\"\n          ></rtsee-invite-link>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"rts-chat-footer-container\">\n    <div class=\"rts-chat-footer-container-inner\">\n      <rtsee-chat-input [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-chat-input>\n    </div>\n  </div>\n  <div class=\"rts-chat-body-container\">\n    <rtsee-messages-list [messenger]=\"messenger\" [chat]=\"chat\"></rtsee-messages-list>\n  </div>\n</div>\n" }]
         }], propDecorators: { chat: [{
                 type: Input
             }], chatData: [{
@@ -4413,11 +4875,11 @@ class PresentationHeaderComponent {
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           [routerLink]=\"[presentation.homePage]\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-times rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl || undefined\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-cog-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n", dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationHeaderComponent, isStandalone: true, selector: "rtsee-presentation-header", inputs: { presentation: "presentation" }, ngImport: i0, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           [routerLink]=\"[presentation.homePage]\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-times rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl || undefined\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-cog-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n", dependencies: [{ 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent, RouterLink], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeRoom && !presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentation-room-block\">\n      <rtsee-join-call [room]=\"presentation.activeRoom\"\n                       [presentation]=\"presentation\"\n      ></rtsee-join-call>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           [routerLink]=\"[presentation.homePage]\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-times rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl || undefined\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-cog-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n" }]
+            args: [{ selector: 'rtsee-presentation-header', imports: [Button, NgClass, Chip, JoinCallComponent, RouterLink], standalone: true, template: "<header class=\"rtsee-presentation-header\"\n     [ngClass]=\"{\n        'rtsee-presentation-header-convertable': presentation.activeStory,\n        'rtsee-presentation-header-visible': presentation.activeStory?.headerVisible\n     }\"\n>\n  @if (!presentation.activeStory && !presentation.openedStoryDetails) {\n    <div class=\"rtsee-presentations-header-title\">\n      <div class=\"rtsee-presentations-header-title-overlay\"></div>\n      <div class=\"rtsee-presentations-header-title-content\">\n        <h1>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_TITLE_LABEL]}}</h1>\n        <p class=\"rtsee-presentations-header-title-subtitle\">\n          <span>{{presentation.labels[RTSeeTextLabelKeys.PRESENTATION_SUBTITLE_LABEL]}}</span>\n        </p>\n      </div>\n    </div>\n  }\n\n  @if (presentation.activeStory) {\n    <div class=\"rtsee-presentation-header-active-story-info\">\n      <div class=\"rtsee-presentation-header-active-story-info-close\"\n           [routerLink]=\"[presentation.homePage]\"\n           (click)=\"presentation.disableActiveStory()\"\n      >\n        <i class=\"pi pi-times rtsee-presentation-header-active-story-info-close-icon\"></i>\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-details\">\n        <p-chip [label]=\"presentation.activeStory.name\"\n                [image]=\"presentation.activeStory.imageUrl || undefined\"\n                class=\"rtsee-presentation-header-active-story-name\"\n                alt=\"Story image\" />\n      </div>\n      <div class=\"rtsee-presentation-header-active-story-info-settings\"\n           (click)=\"presentation.settings.expand()\"\n      >\n        <i class=\"pi pi-cog-h rtsee-presentation-header-active-story-info-settings-icon\"></i>\n      </div>\n    </div>\n  }\n  @if (presentation.dashboard && !presentation.activeStory && !presentation.isDashboardOpen && !presentation.openedStoryDetails) {\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.DASHBOARD_BUTTON]\"\n              (click)=\"presentation.toggleDashboardState()\"\n    ></p-button>\n  }\n</header>\n" }]
         }], propDecorators: { presentation: [{
                 type: Input
             }] } });
@@ -5489,7 +5951,7 @@ class PresentationSettingsComponent {
         this.window = window;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PresentationSettingsComponent, isStandalone: true, selector: "rtsee-presentation-settings", inputs: { settings: "settings", presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <rtsee-join-call [room]=\"presentation.selectedRoom\"\n                         [presentation]=\"presentation\"\n        ></rtsee-join-call>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "component", type: JoinCallComponent, selector: "rtsee-join-call", inputs: ["presentation", "room"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PresentationSettingsComponent, isStandalone: true, selector: "rtsee-presentation-settings", inputs: { settings: "settings", presentation: "presentation" }, ngImport: i0, template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: Fieldset, selector: "p-fieldset", inputs: ["legend", "toggleable", "collapsed", "style", "styleClass", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PresentationSettingsComponent, decorators: [{
             type: Component,
@@ -5500,10 +5962,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         Button,
                         Chip,
                         Message,
-                        Tag,
-                        Listbox,
-                        JoinCallComponent,
-                    ], template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n\n  <div class=\"rtsee-presentation-rooms\">\n    <p-fieldset legend=\"Rooms\">\n      <p-listbox [options]=\"presentation.rooms\"\n                 [(ngModel)]=\"presentation.selectedRoom\"\n                 (onChange)=\"presentation.setActiveRoom()\"\n                 class=\"rtsee-presentation-settings-rooms-list\"\n      >\n        <ng-template #item let-room>\n          <div class=\"rtsee-presentation-settings-rooms-list-item\">\n\n            <img [src]=\"room.imageUrl || COMMON_CONSTANTS.defaultProfileImgUrl\"\n                 class=\"rtsee-presentation-settings-rooms-list-item-image\" />\n            <div>{{ room.name }}</div>\n          </div>\n        </ng-template>\n      </p-listbox>\n      @if (presentation.selectedRoom) {\n        <rtsee-join-call [room]=\"presentation.selectedRoom\"\n                         [presentation]=\"presentation\"\n        ></rtsee-join-call>\n      }\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n" }]
+                        Tag
+                    ], template: "<div class=\"rtsee-presentation-settings\">\n  <div class=\"rtsee-presentation-settings-header\">\n    <p-chip label=\"Settings\" />\n    <p-button label=\"Close\"\n              (click)=\"settings.collapse()\"\n              class=\"rtsee-presentations-dashboard-close-btn\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-presentation-sound-settings\">\n    <p-fieldset legend=\"Volume\" class=\"rtsee-presentation-sound-settings-fieldset\">\n      <div class=\"rtsee-presentation-sound-settings-inner\">\n        <div class=\"rtsee-presentation-sound-settings-inner-left\">\n          <p-slider [(ngModel)]=\"settings.volume\"\n                    (onChange)=\"settings.setVolume(settings.volume)\"\n          />\n        </div>\n        <div class=\"rtsee-presentation-sound-settings-inner-right\">\n          <p-tag severity=\"info\"\n                 class=\"rtsee-presentation-sound-value-label\"\n                 [icon]=\"settings.volume ? 'pi pi-volume-up' : 'pi pi-volume-off'\"\n                 [value]=\"settings.volume.toString()\"\n                 [rounded]=\"true\" />\n        </div>\n      </div>\n    </p-fieldset>\n  </div>\n  <div class=\"rtsee-presentation-font-size-settings\">\n    <p-fieldset legend=\"Font Size\">\n      <div class=\"rtsee-presentation-font-size-range\">\n        <p-slider [(ngModel)]=\"settings.fontSizeOption\"\n                  (onChange)=\"settings.setFontSize(settings.fontSizeOption)\"\n                  [min]=\"1\"\n                  [max]=\"10\"\n        />\n      </div>\n      <p-message severity=\"secondary\" class=\"rtsee-presentation-font-size-example\">\n        <span [style.font-size]=\"settings.fontSize + 'rem'\">A long time ago in a galaxy far, far away...</span>\n      </p-message>\n    </p-fieldset>\n  </div>\n</div>\n" }]
         }], propDecorators: { settings: [{
                 type: Input
             }], presentation: [{