@rtsee/ngx 0.0.120 → 0.0.122

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, Input, Component, ViewChild, EventEmitter, Output, forwardRef, Directive, HostListener, reflectComponentType, DOCUMENT, Inject, ChangeDetectionStrategy, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import * as i2$1 from '@angular/common';
+import * as i1$3 from '@angular/common';
 import { NgClass, NgIf, NgForOf, DecimalPipe, DatePipe, NgComponentOutlet, SlicePipe, JsonPipe, DOCUMENT as DOCUMENT$1, CommonModule, NgStyle, NgOptimizedImage } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
@@ -14,11 +14,11 @@ import { AuthEndpointsKeys, LS_TOKEN_LABEL, LS_USER_LABEL, DEFAULT_ROUTE_NAMES }
 import * as i2 from '@angular/router';
 import { RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import * as i1$1 from '@angular/common/http';
-import { RTSeeChatMemberRoles, RTSeeIllustratorEvents, RTSeeChatTypes, OzzyTaskStatus, getStoryTranslatorLanguage, STORY_TRANSLATOR_LANGUAGES } from '@rtsee/common';
+import { RTSeeChatMemberRoles, RTSeeIllustratorEvents, RTSeeChatTypes, OzzyTaskStatus, CREATE_STORY_ACTION_NAME, EDIT_STORY_ACTION_NAME, CREATE_SLIDE_ACTION_NAME, EDIT_SLIDE_ACTION_NAME, 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 * as i2$1 from 'primeng/message';
 import { Message, MessageModule } from 'primeng/message';
 import { Textarea } from 'primeng/textarea';
 import { Checkbox } from 'primeng/checkbox';
@@ -31,7 +31,7 @@ import { ImageCropperComponent } from 'ngx-image-cropper';
 import { Tooltip } from 'primeng/tooltip';
 import { Fieldset } from 'primeng/fieldset';
 import { DatePicker } from 'primeng/datepicker';
-import { RTSeeManageChatInfo, RTSeeChatEvents, OzzyClientTaskEvents, OzzyWorkflowClientEvents, RTSeeMentionAutocomplete, RTSeeWorkflowAutocomplete } from '@rtsee/messenger';
+import { RTSeeManageChatInfo, RTSeeChatEvents, OzzyClientTaskActionEvents, OzzyClientTaskEvents, OzzyWorkflowClientEvents, RTSeeMentionAutocomplete, RTSeeWorkflowAutocomplete } from '@rtsee/messenger';
 import { InfiniteScrollDirective, InfiniteScrollModule } from 'ngx-infinite-scroll';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -40,7 +40,7 @@ import { loadStripe } from '@stripe/stripe-js';
 import { Card } from 'primeng/card';
 import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { Toast } from 'primeng/toast';
-import * as i1$3 from 'primeng/api';
+import * as i1$4 from 'primeng/api';
 import { MessageService } from 'primeng/api';
 import Swiper from 'swiper';
 import { Virtual, EffectCards } from 'swiper/modules';
@@ -1280,6 +1280,7 @@ class AddChatMemberComponent {
         }
     }
     async copyLink() {
+        this.messenger?.trackChatMemberInviteClicked?.(this.chatInfo?.chat, this.invitationLink);
         try {
             await navigator.clipboard.writeText(this.invitationLink);
             this.linkCopied = true;
@@ -1403,6 +1404,7 @@ class ChatMembersComponent {
     }
     showAddMember() {
         this.view = 'add';
+        this.messenger?.trackChatMemberInviteClicked?.(this.chatInfo?.chat);
     }
     showEditAgent(memberId) {
         this.editingAgentMemberId = memberId;
@@ -1573,6 +1575,9 @@ class ManageChatInfoComponent {
             },
         });
         this.manageChatInfo.on('saved', (savedChat) => {
+            if (!this.isEditMode) {
+                this.messenger?.trackChatCreated?.(savedChat);
+            }
             this.chatSaved.emit(savedChat);
         });
     }
@@ -1598,6 +1603,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Output
             }] } });
 
+class InviteLinkComponent {
+    constructor() {
+        this.inviteUrl = '';
+        this.disclaimer = '';
+        this.copied = false;
+        this.loading = false;
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
+    async ngOnInit() {
+        if (!this.inviteUrl && this.messenger) {
+            await this.loadInviteLink();
+        }
+    }
+    async loadInviteLink() {
+        if (!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() {
+        const targetChat = this.chatId
+            ? this.messenger?.getChatById?.(this.chatId) || this.messenger?.openedChat
+            : this.messenger?.openedChat;
+        this.messenger?.trackChatMemberInviteClicked?.(targetChat, this.inviteUrl);
+        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>{{ messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_INVITE_LINK_TITLE] || 'Invite Link' }}</h4>\n      <p>{{ disclaimer || (chatId ? messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_INVITE_LINK_DISCLAIMER] : messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_DISCLAIMER]) || 'Anyone who opens this link can join the chat.' }}</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>{{ messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_INVITE_LINK_GENERATING] || '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 ? (messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_COPIED_BUTTON] || 'Copied!') : (messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_COPY_BUTTON] || '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>{{ messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_INVITE_LINK_TITLE] || 'Invite Link' }}</h4>\n      <p>{{ disclaimer || (chatId ? messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_INVITE_LINK_DISCLAIMER] : messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_DISCLAIMER]) || 'Anyone who opens this link can join the chat.' }}</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>{{ messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_INVITE_LINK_GENERATING] || '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 ? (messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_COPIED_BUTTON] || 'Copied!') : (messenger?.labels?.[RTSeeTextLabelKeys.MESSENGER_COPY_BUTTON] || '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 DefaultImagesService {
     constructor() {
         this.PROFILE = 'https://werf-assets.s3.amazonaws.com/default-profile-logo.png';
@@ -1641,6 +1720,13 @@ class MessengerHeaderComponent {
         this.isDropdownOpen = false;
         this.messenger.openManageChatInfo();
     }
+    openInviteUserDialog() {
+        this.isDropdownOpen = false;
+        this.messenger.openInviteUser();
+    }
+    closeInviteUserDialog() {
+        this.messenger.closeInviteUser();
+    }
     closeManageChatDialog() {
         this.messenger.closeManageChatInfo();
     }
@@ -1721,11 +1807,11 @@ class MessengerHeaderComponent {
             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': 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"] }] }); }
+    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 && !messenger.inviteUserOpened,\n       'rts-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\n       'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails || messenger.manageChatInfo || messenger.inviteUserOpened,\n       'rts-messenger-header-create-chat-mode': messenger.manageChatInfo || messenger.inviteUserOpened,\n       'rts-messenger-header-my-profile-mode': messenger.ownProfileOpened,\n       'rts-messenger-header-chat-info-mode': (messenger.openedProfile || messenger.openedChatDetails) && !messenger.ownProfileOpened && !messenger.manageChatInfo && !messenger.inviteUserOpened,\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() : (messenger.inviteUserOpened ? closeInviteUserDialog() : 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)=\"openInviteUserDialog()\"\n            >\n              <span class=\"material-icons-outlined rts-messenger-header-dropdown-icon\">person_add</span>\n              <span>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_BUTTON] }}</span>\n            </button>\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>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_NEW_CHAT_BUTTON] }}</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.inviteUserOpened) {\n      <div class=\"rts-messenger-header-create-chat-container rts-messenger-header-invite-user-container\">\n        <div class=\"rts-create-chat\">\n          <h3 class=\"rts-create-chat-title\">{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_BUTTON] }}</h3>\n          <rtsee-invite-link [messenger]=\"messenger\"\n                             [disclaimer]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_DISCLAIMER]\"\n          ></rtsee-invite-link>\n        </div>\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"] }, { kind: "component", type: InviteLinkComponent, selector: "rtsee-invite-link", inputs: ["inviteUrl", "chatId", "messenger", "disclaimer"] }] }); }
 }
 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': 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" }]
+            args: [{ selector: 'rtsee-messenger-header', imports: [NgClass, ProfileComponent, ChatInfoComponent, ManageChatInfoComponent, InviteLinkComponent], standalone: true, template: "<div class=\"rts-messenger-header\"\n     [ngClass]=\"{\n       'rts-messenger-header-chat-opened': messenger.openedChat && !messenger.manageChatInfo && !messenger.inviteUserOpened,\n       'rts-chat-header-unread': messenger.openedChat && !messenger.unreadMessagesCount,\n       'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails || messenger.manageChatInfo || messenger.inviteUserOpened,\n       'rts-messenger-header-create-chat-mode': messenger.manageChatInfo || messenger.inviteUserOpened,\n       'rts-messenger-header-my-profile-mode': messenger.ownProfileOpened,\n       'rts-messenger-header-chat-info-mode': (messenger.openedProfile || messenger.openedChatDetails) && !messenger.ownProfileOpened && !messenger.manageChatInfo && !messenger.inviteUserOpened,\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() : (messenger.inviteUserOpened ? closeInviteUserDialog() : 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)=\"openInviteUserDialog()\"\n            >\n              <span class=\"material-icons-outlined rts-messenger-header-dropdown-icon\">person_add</span>\n              <span>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_BUTTON] }}</span>\n            </button>\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>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_NEW_CHAT_BUTTON] }}</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.inviteUserOpened) {\n      <div class=\"rts-messenger-header-create-chat-container rts-messenger-header-invite-user-container\">\n        <div class=\"rts-create-chat\">\n          <h3 class=\"rts-create-chat-title\">{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_BUTTON] }}</h3>\n          <rtsee-invite-link [messenger]=\"messenger\"\n                             [disclaimer]=\"messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_DISCLAIMER]\"\n          ></rtsee-invite-link>\n        </div>\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
             }] } });
@@ -1885,15 +1971,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class ChatsListComponent {
+    constructor() {
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
     ngOnInit() {
         // console.log(this.chats);
     }
+    onInviteUserClick() {
+        this.messenger.openInviteUser();
+    }
+    onCreateGroupClick() {
+        this.messenger.openManageChatInfo();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: ChatsListComponent, isStandalone: true, selector: "rtsee-chats-list", inputs: { messenger: "messenger", chats: "chats" }, ngImport: i0, template: "<div class=\"rts-chats-list\">\n  <div class=\"rts-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n    <rtsee-chat-thumbnail [chat]=\"chat.thumbnail\" [messenger]=\"messenger\"></rtsee-chat-thumbnail>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChatThumbnailComponent, selector: "rtsee-chat-thumbnail", inputs: ["chat", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatsListComponent, isStandalone: true, selector: "rtsee-chats-list", inputs: { messenger: "messenger", chats: "chats" }, ngImport: i0, template: "<div class=\"rts-chats-list\">\n  @if (chats && chats.length) {\n    <div class=\"rts-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n      <rtsee-chat-thumbnail [chat]=\"chat.thumbnail\" [messenger]=\"messenger\"></rtsee-chat-thumbnail>\n    </div>\n  } @else if (!messenger.loadingChatsInProgress) {\n    <div class=\"rts-chats-list-empty\">\n      <span class=\"material-icons-outlined rts-chats-list-empty-icon\">forum</span>\n      <p class=\"rts-chats-list-empty-disclaimer\">\n        {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_NO_CHATS_DISCLAIMER] }}\n      </p>\n      <div class=\"rts-chats-list-empty-actions\">\n        <button type=\"button\"\n                class=\"rts-btn rts-btn-primary rts-chats-list-empty-btn\"\n                (click)=\"onInviteUserClick()\"\n        >\n          <span class=\"material-icons-outlined\">person_add</span>\n          <span>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_BUTTON] }}</span>\n        </button>\n        <button type=\"button\"\n                class=\"rts-btn rts-btn-secondary rts-chats-list-empty-btn\"\n                (click)=\"onCreateGroupClick()\"\n        >\n          <span class=\"material-icons-outlined\">group_add</span>\n          <span>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_CREATE_GROUP_BUTTON] }}</span>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChatThumbnailComponent, selector: "rtsee-chat-thumbnail", inputs: ["chat", "messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-chats-list', imports: [NgForOf, ChatThumbnailComponent], standalone: true, template: "<div class=\"rts-chats-list\">\n  <div class=\"rts-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n    <rtsee-chat-thumbnail [chat]=\"chat.thumbnail\" [messenger]=\"messenger\"></rtsee-chat-thumbnail>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-chats-list', imports: [NgForOf, ChatThumbnailComponent], standalone: true, template: "<div class=\"rts-chats-list\">\n  @if (chats && chats.length) {\n    <div class=\"rts-chat-thumbnail-container\" *ngFor=\"let chat of chats; let last = last;\">\n      <rtsee-chat-thumbnail [chat]=\"chat.thumbnail\" [messenger]=\"messenger\"></rtsee-chat-thumbnail>\n    </div>\n  } @else if (!messenger.loadingChatsInProgress) {\n    <div class=\"rts-chats-list-empty\">\n      <span class=\"material-icons-outlined rts-chats-list-empty-icon\">forum</span>\n      <p class=\"rts-chats-list-empty-disclaimer\">\n        {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_NO_CHATS_DISCLAIMER] }}\n      </p>\n      <div class=\"rts-chats-list-empty-actions\">\n        <button type=\"button\"\n                class=\"rts-btn rts-btn-primary rts-chats-list-empty-btn\"\n                (click)=\"onInviteUserClick()\"\n        >\n          <span class=\"material-icons-outlined\">person_add</span>\n          <span>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_USER_BUTTON] }}</span>\n        </button>\n        <button type=\"button\"\n                class=\"rts-btn rts-btn-secondary rts-chats-list-empty-btn\"\n                (click)=\"onCreateGroupClick()\"\n        >\n          <span class=\"material-icons-outlined\">group_add</span>\n          <span>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_CREATE_GROUP_BUTTON] }}</span>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { messenger: [{
                 type: Input
             }], chats: [{
@@ -1961,11 +2056,11 @@ class RatingComponent {
         this.init();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RatingComponent, isStandalone: true, selector: "rtsee-rating", inputs: { config: "config", rate: "rate" }, ngImport: i0, template: "<div\n  class=\"rtsee-rating\"\n  data-ugc=\"true\"\n  rel=\"ugc\"\n  itemprop=\"reviewRating\"\n  itemscope\n  itemtype=\"https://schema.org/Rating\"\n>\n  <meta itemprop=\"bestRating\" content=\"5\" />\n  <meta itemprop=\"worstRating\" content=\"1\" />\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\"\n          [ngClass]=\"{\n            'rtsee-rating-star-full': star === 'full',\n            'rtsee-rating-star-half': star === 'half',\n            'rtsee-rating-star-empty': star === 'empty',\n            'rtsee-rating-star-clickable': mutable\n          }\"\n          (click)=\"onStarClicked($index)\"\n    >\u2605</span>\n  }\n  @if (rateValue) {\n    <span class=\"rtsee-rating-number\" itemprop=\"ratingValue\">{{ rateValue | number:'1.1-1' }}</span>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RatingComponent, isStandalone: true, selector: "rtsee-rating", inputs: { config: "config", rate: "rate" }, ngImport: i0, template: "<div\n  class=\"rtsee-rating\"\n  data-ugc=\"true\"\n  rel=\"ugc\"\n  [attr.itemprop]=\"!mutable ? 'reviewRating' : null\"\n  [attr.itemscope]=\"!mutable ? '' : null\"\n  [attr.itemtype]=\"!mutable ? 'https://schema.org/Rating' : null\"\n>\n  @if (!mutable) {\n    <meta itemprop=\"bestRating\" content=\"5\" />\n    <meta itemprop=\"worstRating\" content=\"1\" />\n  }\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\"\n          [ngClass]=\"{\n            'rtsee-rating-star-full': star === 'full',\n            'rtsee-rating-star-half': star === 'half',\n            'rtsee-rating-star-empty': star === 'empty',\n            'rtsee-rating-star-clickable': mutable\n          }\"\n          (click)=\"onStarClicked($index)\"\n    >\u2605</span>\n  }\n  @if (rateValue) {\n    <span class=\"rtsee-rating-number\" [attr.itemprop]=\"!mutable ? 'ratingValue' : null\">{{ rateValue | number:'1.1-1' }}</span>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RatingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-rating', imports: [NgClass, DecimalPipe], template: "<div\n  class=\"rtsee-rating\"\n  data-ugc=\"true\"\n  rel=\"ugc\"\n  itemprop=\"reviewRating\"\n  itemscope\n  itemtype=\"https://schema.org/Rating\"\n>\n  <meta itemprop=\"bestRating\" content=\"5\" />\n  <meta itemprop=\"worstRating\" content=\"1\" />\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\"\n          [ngClass]=\"{\n            'rtsee-rating-star-full': star === 'full',\n            'rtsee-rating-star-half': star === 'half',\n            'rtsee-rating-star-empty': star === 'empty',\n            'rtsee-rating-star-clickable': mutable\n          }\"\n          (click)=\"onStarClicked($index)\"\n    >\u2605</span>\n  }\n  @if (rateValue) {\n    <span class=\"rtsee-rating-number\" itemprop=\"ratingValue\">{{ rateValue | number:'1.1-1' }}</span>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-rating', imports: [NgClass, DecimalPipe], template: "<div\n  class=\"rtsee-rating\"\n  data-ugc=\"true\"\n  rel=\"ugc\"\n  [attr.itemprop]=\"!mutable ? 'reviewRating' : null\"\n  [attr.itemscope]=\"!mutable ? '' : null\"\n  [attr.itemtype]=\"!mutable ? 'https://schema.org/Rating' : null\"\n>\n  @if (!mutable) {\n    <meta itemprop=\"bestRating\" content=\"5\" />\n    <meta itemprop=\"worstRating\" content=\"1\" />\n  }\n  @for (star of stars; track $index) {\n    <span class=\"rtsee-rating-star\"\n          [ngClass]=\"{\n            'rtsee-rating-star-full': star === 'full',\n            'rtsee-rating-star-half': star === 'half',\n            'rtsee-rating-star-empty': star === 'empty',\n            'rtsee-rating-star-clickable': mutable\n          }\"\n          (click)=\"onStarClicked($index)\"\n    >\u2605</span>\n  }\n  @if (rateValue) {\n    <span class=\"rtsee-rating-number\" [attr.itemprop]=\"!mutable ? 'ratingValue' : null\">{{ rateValue | number:'1.1-1' }}</span>\n  }\n</div>\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], rate: [{
@@ -2444,6 +2539,808 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Full client-side representation of a single OzzyTaskAction.
+ * Displays input, logs, output, and/or errors of the action.
+ */
+class RTSeeTaskActionComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.copied = null;
+        this.subscribedAction = null;
+        this.onChangedBound = () => this.onActionChanged();
+    }
+    ngOnInit() {
+        this.subscribe();
+        this.ensureLoaded();
+    }
+    ngOnChanges(changes) {
+        if (changes['action'] && !changes['action'].firstChange) {
+            this.subscribe();
+            this.ensureLoaded();
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe();
+    }
+    get statusLabel() {
+        switch (this.action?.status) {
+            case OzzyTaskStatus.IN_PROGRESS:
+                return 'Running';
+            case OzzyTaskStatus.SUCCESS:
+                return 'Completed';
+            case OzzyTaskStatus.FAIL:
+                return 'Failed';
+            default:
+                return 'Ready';
+        }
+    }
+    get statusClass() {
+        switch (this.action?.status) {
+            case OzzyTaskStatus.IN_PROGRESS:
+                return 'rts-task-action-status-running';
+            case OzzyTaskStatus.SUCCESS:
+                return 'rts-task-action-status-success';
+            case OzzyTaskStatus.FAIL:
+                return 'rts-task-action-status-fail';
+            default:
+                return 'rts-task-action-status-ready';
+        }
+    }
+    get inputJson() {
+        return this.toJson(this.action?.input);
+    }
+    get outputJson() {
+        return this.toJson(this.action?.output);
+    }
+    get hasOutput() {
+        return this.action?.output !== undefined && this.action?.output !== null;
+    }
+    get hasLogs() {
+        return !!(this.action?.logs?.length || this.action?.liveText);
+    }
+    async copy(kind) {
+        try {
+            await navigator.clipboard.writeText(kind === 'input' ? this.inputJson : this.outputJson);
+            this.copied = kind;
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                this.copied = null;
+                this.cdr.detectChanges();
+            }, 1500);
+        }
+        catch (e) {
+            console.log('Failed to copy', e);
+        }
+    }
+    trackLog(index, log) {
+        return `${index}-${log.level}`;
+    }
+    ensureLoaded() {
+        if (this.action && !this.action.loaded && !this.action.isRunning) {
+            void this.action.load();
+        }
+    }
+    toJson(value) {
+        if (value === undefined || value === null) {
+            return '';
+        }
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    subscribe() {
+        if (this.subscribedAction === this.action) {
+            return;
+        }
+        this.unsubscribe();
+        if (this.action) {
+            this.subscribedAction = this.action;
+            this.action.on(OzzyClientTaskActionEvents.CHANGED, this.onChangedBound);
+        }
+    }
+    unsubscribe() {
+        this.subscribedAction?.off(OzzyClientTaskActionEvents.CHANGED, this.onChangedBound);
+        this.subscribedAction = null;
+    }
+    onActionChanged() {
+        this.cdr.detectChanges();
+        const el = this.logsContainer?.nativeElement;
+        if (el) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeTaskActionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeTaskActionComponent, isStandalone: true, selector: "rtsee-task-action", inputs: { action: "action" }, viewQueries: [{ propertyName: "logsContainer", first: true, predicate: ["logsContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-task-action\" [ngClass]=\"statusClass\">\n  @if (action) {\n    <div class=\"rts-task-action-header\">\n      <div class=\"rts-task-action-identity\">\n        <span class=\"rts-task-action-icon\">\u26A1</span>\n        <div class=\"rts-task-action-titles\">\n          <span class=\"rts-task-action-name\">{{ action.name || 'Action' }}</span>\n          <span class=\"rts-task-action-id\" [title]=\"action.id\">#{{ action.id }}</span>\n        </div>\n      </div>\n      <span class=\"rts-task-action-status\">\n        <span class=\"rts-task-action-status-dot\"></span>\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Input -->\n    <div class=\"rts-task-action-section\">\n      <div class=\"rts-task-action-section-head\">\n        <span class=\"rts-task-action-section-label\">Input</span>\n        @if (inputJson) {\n          <button type=\"button\" class=\"rts-task-action-copy\" (click)=\"copy('input')\">\n            {{ copied === 'input' ? 'Copied' : 'Copy' }}\n          </button>\n        }\n      </div>\n      @if (inputJson) {\n        <pre class=\"rts-task-action-code\"><code>{{ inputJson }}</code></pre>\n      } @else if (action.loading) {\n        <div class=\"rts-task-action-placeholder\">Loading\u2026</div>\n      } @else {\n        <div class=\"rts-task-action-placeholder\">No input</div>\n      }\n    </div>\n\n    <!-- Logs -->\n    @if (hasLogs || action.isRunning || action.loading) {\n      <div class=\"rts-task-action-section\">\n        <div class=\"rts-task-action-section-head\">\n          <span class=\"rts-task-action-section-label\">Logs</span>\n          @if (action.isRunning) {\n            <span class=\"rts-task-action-live\">LIVE</span>\n          }\n        </div>\n        <div #logsContainer class=\"rts-task-action-terminal\">\n          @for (log of action.logs; track $index) {\n            <div class=\"rts-task-action-log\" [ngClass]=\"'rts-task-action-log-' + log.level\">\n              <span class=\"rts-task-action-log-time\">{{ log.createdAt | date: 'HH:mm:ss' }}</span>\n              <span class=\"rts-task-action-log-level\">{{ log.level }}</span>\n              <span class=\"rts-task-action-log-message\">{{ log.message }}</span>\n            </div>\n          }\n          @if (action.liveText) {\n            <div class=\"rts-task-action-live-text\">{{ action.liveText }}@if (action.isRunning) {<span class=\"rts-task-action-cursor\"></span>}</div>\n          } @else if (action.isRunning && !action.logs.length) {\n            <div class=\"rts-task-action-log rts-task-action-log-info\">\n              <span class=\"rts-task-action-log-message\">Waiting for logs\u2026</span>\n            </div>\n          } @else if (action.loading && !action.logs.length) {\n            <div class=\"rts-task-action-log rts-task-action-log-info\">\n              <span class=\"rts-task-action-log-message\">Loading logs\u2026</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Output -->\n    @if (hasOutput) {\n      <div class=\"rts-task-action-section rts-task-action-section-output\">\n        <div class=\"rts-task-action-section-head\">\n          <span class=\"rts-task-action-section-label\">Output</span>\n          <button type=\"button\" class=\"rts-task-action-copy\" (click)=\"copy('output')\">\n            {{ copied === 'output' ? 'Copied' : 'Copy' }}\n          </button>\n        </div>\n        <pre class=\"rts-task-action-code\"><code>{{ outputJson }}</code></pre>\n      </div>\n    }\n\n    @if (action.errors.length) {\n      <div class=\"rts-task-action-errors\">\n        @for (error of action.errors; track $index) {\n          <div class=\"rts-task-action-error\">{{ error.message }}</div>\n        }\n      </div>\n    }\n\n    @if (action.requestError) {\n      <div class=\"rts-task-action-errors\">\n        <div class=\"rts-task-action-error\">{{ action.requestError }}</div>\n      </div>\n    }\n  } @else {\n    <div class=\"rts-task-action-placeholder\">Action is not available yet.</div>\n  }\n</div>\n", styles: [":host{display:block;--rts-task-action-accent: #8b5cf6;--rts-task-action-accent-2: #6366f1;--rts-task-action-success: #10b981;--rts-task-action-fail: #f43f5e;--rts-task-action-warn: #f59e0b}.rts-task-action{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;background:var(--rts-bg-secondary, #fff);border:1px solid rgba(139,92,246,.22);font-size:12.5px}.rts-task-action-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-task-action-identity{display:flex;align-items:center;gap:8px;min-width:0}.rts-task-action-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border-radius:6px;color:#fff;font-size:12px;background:linear-gradient(135deg,var(--rts-task-action-accent-2),var(--rts-task-action-accent))}.rts-task-action-titles{display:flex;flex-direction:column;min-width:0}.rts-task-action-name{font-weight:600;color:var(--rts-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-task-action-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.rts-task-action-status{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;color:var(--rts-task-action-accent);background:#8b5cf61f}.rts-task-action-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.rts-task-action-status-running .rts-task-action-status-dot{animation:rts-task-action-pulse 1s ease-in-out infinite}.rts-task-action-status-success .rts-task-action-status{color:var(--rts-task-action-success);background:#10b9811f}.rts-task-action-status-fail .rts-task-action-status{color:var(--rts-task-action-fail);background:#f43f5e1f}.rts-task-action-section{display:flex;flex-direction:column;gap:4px}.rts-task-action-section-head{display:flex;align-items:center;justify-content:space-between}.rts-task-action-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-task-action-copy{border:none;background:transparent;color:var(--rts-task-action-accent);font-size:11px;cursor:pointer;padding:0 2px}.rts-task-action-copy:hover{text-decoration:underline}.rts-task-action-live{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--rts-task-action-fail);animation:rts-task-action-pulse 1.2s ease-in-out infinite}.rts-task-action-code,.rts-task-action-terminal{margin:0;padding:8px 10px;border-radius:7px;background:#0f1020;color:#e4e4f0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;max-height:180px;overflow:auto;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(139,92,246,.18)}.rts-task-action-section-output .rts-task-action-code{border-color:#10b98159}.rts-task-action-log{display:flex;gap:8px;align-items:baseline}.rts-task-action-log-time{color:#6b6f8a;flex-shrink:0}.rts-task-action-log-level{flex-shrink:0;min-width:34px;text-transform:uppercase;font-size:9.5px;font-weight:700;color:#a78bfa}.rts-task-action-log-warn .rts-task-action-log-level{color:var(--rts-task-action-warn)}.rts-task-action-log-error .rts-task-action-log-level,.rts-task-action-log-error .rts-task-action-log-message{color:#fb7185}.rts-task-action-live-text{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(139,92,246,.25);color:#c4b5fd;white-space:pre-wrap}.rts-task-action-cursor{display:inline-block;width:6px;height:12px;margin-left:1px;vertical-align:text-bottom;background:#a78bfa;animation:rts-task-action-blink .8s step-end infinite}.rts-task-action-placeholder{font-size:11.5px;color:var(--rts-text-secondary, #8a8fa3);font-style:italic}.rts-task-action-errors{display:flex;flex-direction:column;gap:4px}.rts-task-action-error{padding:6px 10px;border-radius:6px;font-size:11.5px;color:var(--rts-task-action-fail);background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}@keyframes rts-task-action-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes rts-task-action-blink{0%,to{opacity:1}50%{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeTaskActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-task-action', standalone: true, imports: [NgClass, DatePipe], template: "<div class=\"rts-task-action\" [ngClass]=\"statusClass\">\n  @if (action) {\n    <div class=\"rts-task-action-header\">\n      <div class=\"rts-task-action-identity\">\n        <span class=\"rts-task-action-icon\">\u26A1</span>\n        <div class=\"rts-task-action-titles\">\n          <span class=\"rts-task-action-name\">{{ action.name || 'Action' }}</span>\n          <span class=\"rts-task-action-id\" [title]=\"action.id\">#{{ action.id }}</span>\n        </div>\n      </div>\n      <span class=\"rts-task-action-status\">\n        <span class=\"rts-task-action-status-dot\"></span>\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Input -->\n    <div class=\"rts-task-action-section\">\n      <div class=\"rts-task-action-section-head\">\n        <span class=\"rts-task-action-section-label\">Input</span>\n        @if (inputJson) {\n          <button type=\"button\" class=\"rts-task-action-copy\" (click)=\"copy('input')\">\n            {{ copied === 'input' ? 'Copied' : 'Copy' }}\n          </button>\n        }\n      </div>\n      @if (inputJson) {\n        <pre class=\"rts-task-action-code\"><code>{{ inputJson }}</code></pre>\n      } @else if (action.loading) {\n        <div class=\"rts-task-action-placeholder\">Loading\u2026</div>\n      } @else {\n        <div class=\"rts-task-action-placeholder\">No input</div>\n      }\n    </div>\n\n    <!-- Logs -->\n    @if (hasLogs || action.isRunning || action.loading) {\n      <div class=\"rts-task-action-section\">\n        <div class=\"rts-task-action-section-head\">\n          <span class=\"rts-task-action-section-label\">Logs</span>\n          @if (action.isRunning) {\n            <span class=\"rts-task-action-live\">LIVE</span>\n          }\n        </div>\n        <div #logsContainer class=\"rts-task-action-terminal\">\n          @for (log of action.logs; track $index) {\n            <div class=\"rts-task-action-log\" [ngClass]=\"'rts-task-action-log-' + log.level\">\n              <span class=\"rts-task-action-log-time\">{{ log.createdAt | date: 'HH:mm:ss' }}</span>\n              <span class=\"rts-task-action-log-level\">{{ log.level }}</span>\n              <span class=\"rts-task-action-log-message\">{{ log.message }}</span>\n            </div>\n          }\n          @if (action.liveText) {\n            <div class=\"rts-task-action-live-text\">{{ action.liveText }}@if (action.isRunning) {<span class=\"rts-task-action-cursor\"></span>}</div>\n          } @else if (action.isRunning && !action.logs.length) {\n            <div class=\"rts-task-action-log rts-task-action-log-info\">\n              <span class=\"rts-task-action-log-message\">Waiting for logs\u2026</span>\n            </div>\n          } @else if (action.loading && !action.logs.length) {\n            <div class=\"rts-task-action-log rts-task-action-log-info\">\n              <span class=\"rts-task-action-log-message\">Loading logs\u2026</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Output -->\n    @if (hasOutput) {\n      <div class=\"rts-task-action-section rts-task-action-section-output\">\n        <div class=\"rts-task-action-section-head\">\n          <span class=\"rts-task-action-section-label\">Output</span>\n          <button type=\"button\" class=\"rts-task-action-copy\" (click)=\"copy('output')\">\n            {{ copied === 'output' ? 'Copied' : 'Copy' }}\n          </button>\n        </div>\n        <pre class=\"rts-task-action-code\"><code>{{ outputJson }}</code></pre>\n      </div>\n    }\n\n    @if (action.errors.length) {\n      <div class=\"rts-task-action-errors\">\n        @for (error of action.errors; track $index) {\n          <div class=\"rts-task-action-error\">{{ error.message }}</div>\n        }\n      </div>\n    }\n\n    @if (action.requestError) {\n      <div class=\"rts-task-action-errors\">\n        <div class=\"rts-task-action-error\">{{ action.requestError }}</div>\n      </div>\n    }\n  } @else {\n    <div class=\"rts-task-action-placeholder\">Action is not available yet.</div>\n  }\n</div>\n", styles: [":host{display:block;--rts-task-action-accent: #8b5cf6;--rts-task-action-accent-2: #6366f1;--rts-task-action-success: #10b981;--rts-task-action-fail: #f43f5e;--rts-task-action-warn: #f59e0b}.rts-task-action{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;background:var(--rts-bg-secondary, #fff);border:1px solid rgba(139,92,246,.22);font-size:12.5px}.rts-task-action-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-task-action-identity{display:flex;align-items:center;gap:8px;min-width:0}.rts-task-action-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border-radius:6px;color:#fff;font-size:12px;background:linear-gradient(135deg,var(--rts-task-action-accent-2),var(--rts-task-action-accent))}.rts-task-action-titles{display:flex;flex-direction:column;min-width:0}.rts-task-action-name{font-weight:600;color:var(--rts-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-task-action-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.rts-task-action-status{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;color:var(--rts-task-action-accent);background:#8b5cf61f}.rts-task-action-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.rts-task-action-status-running .rts-task-action-status-dot{animation:rts-task-action-pulse 1s ease-in-out infinite}.rts-task-action-status-success .rts-task-action-status{color:var(--rts-task-action-success);background:#10b9811f}.rts-task-action-status-fail .rts-task-action-status{color:var(--rts-task-action-fail);background:#f43f5e1f}.rts-task-action-section{display:flex;flex-direction:column;gap:4px}.rts-task-action-section-head{display:flex;align-items:center;justify-content:space-between}.rts-task-action-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-task-action-copy{border:none;background:transparent;color:var(--rts-task-action-accent);font-size:11px;cursor:pointer;padding:0 2px}.rts-task-action-copy:hover{text-decoration:underline}.rts-task-action-live{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--rts-task-action-fail);animation:rts-task-action-pulse 1.2s ease-in-out infinite}.rts-task-action-code,.rts-task-action-terminal{margin:0;padding:8px 10px;border-radius:7px;background:#0f1020;color:#e4e4f0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;max-height:180px;overflow:auto;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(139,92,246,.18)}.rts-task-action-section-output .rts-task-action-code{border-color:#10b98159}.rts-task-action-log{display:flex;gap:8px;align-items:baseline}.rts-task-action-log-time{color:#6b6f8a;flex-shrink:0}.rts-task-action-log-level{flex-shrink:0;min-width:34px;text-transform:uppercase;font-size:9.5px;font-weight:700;color:#a78bfa}.rts-task-action-log-warn .rts-task-action-log-level{color:var(--rts-task-action-warn)}.rts-task-action-log-error .rts-task-action-log-level,.rts-task-action-log-error .rts-task-action-log-message{color:#fb7185}.rts-task-action-live-text{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(139,92,246,.25);color:#c4b5fd;white-space:pre-wrap}.rts-task-action-cursor{display:inline-block;width:6px;height:12px;margin-left:1px;vertical-align:text-bottom;background:#a78bfa;animation:rts-task-action-blink .8s step-end infinite}.rts-task-action-placeholder{font-size:11.5px;color:var(--rts-text-secondary, #8a8fa3);font-style:italic}.rts-task-action-errors{display:flex;flex-direction:column;gap:4px}.rts-task-action-error{padding:6px 10px;border-radius:6px;font-size:11.5px;color:var(--rts-task-action-fail);background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}@keyframes rts-task-action-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes rts-task-action-blink{0%,to{opacity:1}50%{opacity:0}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { action: [{
+                type: Input
+            }], logsContainer: [{
+                type: ViewChild,
+                args: ['logsContainer']
+            }] } });
+
+class DefaultTaskActionThumbnailComponent {
+    constructor() {
+        this.expanded = false;
+    }
+    get statusClass() {
+        switch (this.action?.status) {
+            case OzzyTaskStatus.SUCCESS:
+                return 'rts-action-thumb-status-success';
+            case OzzyTaskStatus.FAIL:
+                return 'rts-action-thumb-status-fail';
+            case OzzyTaskStatus.IN_PROGRESS:
+                return 'rts-action-thumb-status-running';
+            default:
+                return 'rts-action-thumb-status-ready';
+        }
+    }
+    onToggle() {
+        this.toggleExpand?.();
+    }
+    onButtonClick(event) {
+        event.stopPropagation();
+        this.toggleExpand?.();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DefaultTaskActionThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: DefaultTaskActionThumbnailComponent, isStandalone: true, selector: "rtsee-default-task-action-thumbnail", inputs: { action: "action", task: "task", expanded: "expanded", toggleExpand: "toggleExpand" }, ngImport: i0, template: `
+    <div class="rts-action-thumb-default" [ngClass]="statusClass" (click)="onToggle()">
+      <div class="rts-action-thumb-left">
+        <span class="rts-action-thumb-dot"></span>
+        <span class="rts-action-thumb-name" [title]="action?.name || 'Action'">
+          {{ action?.name || 'Action' }}
+        </span>
+      </div>
+      <button type="button"
+              class="rts-action-thumb-expand"
+              (click)="onButtonClick($event)"
+              [title]="expanded ? 'Collapse action details' : 'Expand action details'"
+      >
+        {{ expanded ? 'Hide' : 'Expand' }}
+        <span class="pi" [ngClass]="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></span>
+      </button>
+    </div>
+  `, isInline: true, styles: [".rts-action-thumb-default{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;background:#8b5cf60f;border:1px solid rgba(139,92,246,.18);cursor:pointer;transition:background .15s ease,border-color .15s ease}.rts-action-thumb-default:hover{background:#8b5cf61c;border-color:#8b5cf652}.rts-action-thumb-left{display:flex;align-items:center;gap:8px;min-width:0}.rts-action-thumb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#8b5cf6}.rts-action-thumb-status-success .rts-action-thumb-dot{background:#10b981}.rts-action-thumb-status-fail .rts-action-thumb-dot{background:#f43f5e}.rts-action-thumb-status-running .rts-action-thumb-dot{background:#8b5cf6;animation:rts-thumb-pulse 1s ease-in-out infinite}.rts-action-thumb-name{font-size:12px;font-weight:600;color:var(--rts-text-primary, #1f2430);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-action-thumb-expand{display:inline-flex;align-items:center;gap:4px;border:none;background:#8b5cf61f;color:#8b5cf6;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer;flex-shrink:0}.rts-action-thumb-expand:hover{background:#8b5cf638}@keyframes rts-thumb-pulse{0%,to{opacity:1}50%{opacity:.35}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DefaultTaskActionThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-default-task-action-thumbnail', standalone: true, imports: [NgClass], template: `
+    <div class="rts-action-thumb-default" [ngClass]="statusClass" (click)="onToggle()">
+      <div class="rts-action-thumb-left">
+        <span class="rts-action-thumb-dot"></span>
+        <span class="rts-action-thumb-name" [title]="action?.name || 'Action'">
+          {{ action?.name || 'Action' }}
+        </span>
+      </div>
+      <button type="button"
+              class="rts-action-thumb-expand"
+              (click)="onButtonClick($event)"
+              [title]="expanded ? 'Collapse action details' : 'Expand action details'"
+      >
+        {{ expanded ? 'Hide' : 'Expand' }}
+        <span class="pi" [ngClass]="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></span>
+      </button>
+    </div>
+  `, styles: [".rts-action-thumb-default{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;background:#8b5cf60f;border:1px solid rgba(139,92,246,.18);cursor:pointer;transition:background .15s ease,border-color .15s ease}.rts-action-thumb-default:hover{background:#8b5cf61c;border-color:#8b5cf652}.rts-action-thumb-left{display:flex;align-items:center;gap:8px;min-width:0}.rts-action-thumb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#8b5cf6}.rts-action-thumb-status-success .rts-action-thumb-dot{background:#10b981}.rts-action-thumb-status-fail .rts-action-thumb-dot{background:#f43f5e}.rts-action-thumb-status-running .rts-action-thumb-dot{background:#8b5cf6;animation:rts-thumb-pulse 1s ease-in-out infinite}.rts-action-thumb-name{font-size:12px;font-weight:600;color:var(--rts-text-primary, #1f2430);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-action-thumb-expand{display:inline-flex;align-items:center;gap:4px;border:none;background:#8b5cf61f;color:#8b5cf6;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer;flex-shrink:0}.rts-action-thumb-expand:hover{background:#8b5cf638}@keyframes rts-thumb-pulse{0%,to{opacity:1}50%{opacity:.35}}\n"] }]
+        }], propDecorators: { action: [{
+                type: Input
+            }], task: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], toggleExpand: [{
+                type: Input
+            }] } });
+
+/**
+ * Custom task-action thumbnail widget for Story creation / update actions.
+ * Displays story-name, recommendedAge, friendlyUrl, and 2-line truncated
+ * description, moralMeaning, and history with full text tooltip on hover.
+ */
+class StoryTaskActionThumbnailComponent {
+    constructor() {
+        this.expanded = false;
+    }
+    get storyData() {
+        return {
+            ...(this.action?.input || {}),
+            ...(this.action?.output || {}),
+        };
+    }
+    get storyName() {
+        return this.storyData.name || this.action?.name || 'Story';
+    }
+    get recommendedAge() {
+        return this.storyData.recommendedAge || '';
+    }
+    get friendlyUrl() {
+        return this.storyData.friendlyUrl || '';
+    }
+    get description() {
+        return this.storyData.description || '';
+    }
+    get moralMeaning() {
+        return this.storyData.moralMeaning || '';
+    }
+    get history() {
+        return this.storyData.history || '';
+    }
+    get statusClass() {
+        switch (this.action?.status) {
+            case OzzyTaskStatus.SUCCESS:
+                return 'rts-story-thumb-status-success';
+            case OzzyTaskStatus.FAIL:
+                return 'rts-story-thumb-status-fail';
+            case OzzyTaskStatus.IN_PROGRESS:
+                return 'rts-story-thumb-status-running';
+            default:
+                return 'rts-story-thumb-status-ready';
+        }
+    }
+    onToggle() {
+        this.toggleExpand?.();
+    }
+    onButtonClick(event) {
+        event.stopPropagation();
+        this.toggleExpand?.();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryTaskActionThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryTaskActionThumbnailComponent, isStandalone: true, selector: "rtsee-story-task-action-thumbnail", inputs: { action: "action", task: "task", expanded: "expanded", toggleExpand: "toggleExpand" }, ngImport: i0, template: `
+    <div class="rts-story-thumb" [ngClass]="statusClass" (click)="onToggle()">
+      <div class="rts-story-thumb-header">
+        <div class="rts-story-thumb-title-wrap">
+          <span class="rts-story-thumb-dot"></span>
+          <span class="rts-story-thumb-badge">Story</span>
+          <span class="rts-story-thumb-name" [title]="storyName">{{ storyName }}</span>
+          @if (recommendedAge) {
+            <span class="rts-story-thumb-age" [title]="'Recommended age: ' + recommendedAge">
+              {{ recommendedAge }}
+            </span>
+          }
+          @if (friendlyUrl) {
+            <span class="rts-story-thumb-url" [title]="friendlyUrl">/{{ friendlyUrl }}</span>
+          }
+        </div>
+        <button type="button"
+                class="rts-story-thumb-expand"
+                (click)="onButtonClick($event)"
+                [title]="expanded ? 'Collapse action details' : 'Expand action details'"
+        >
+          {{ expanded ? 'Hide' : 'Expand' }}
+          <span class="pi" [ngClass]="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></span>
+        </button>
+      </div>
+
+      @if (description || moralMeaning || history) {
+        <div class="rts-story-thumb-fields">
+          @if (description) {
+            <div class="rts-story-thumb-field">
+              <span class="rts-story-thumb-field-label">Description</span>
+              <p class="rts-story-thumb-truncated" [title]="description">{{ description }}</p>
+            </div>
+          }
+          @if (moralMeaning) {
+            <div class="rts-story-thumb-field">
+              <span class="rts-story-thumb-field-label">Moral Meaning</span>
+              <p class="rts-story-thumb-truncated" [title]="moralMeaning">{{ moralMeaning }}</p>
+            </div>
+          }
+          @if (history) {
+            <div class="rts-story-thumb-field">
+              <span class="rts-story-thumb-field-label">History</span>
+              <p class="rts-story-thumb-truncated" [title]="history">{{ history }}</p>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".rts-story-thumb{display:flex;flex-direction:column;gap:6px;padding:9px 11px;border-radius:9px;background:#6366f10f;border:1px solid rgba(99,102,241,.22);cursor:pointer;transition:background .15s ease,border-color .15s ease}.rts-story-thumb:hover{background:#6366f11c;border-color:#6366f15c}.rts-story-thumb-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-story-thumb-title-wrap{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}.rts-story-thumb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#8b5cf6}.rts-story-thumb-status-success .rts-story-thumb-dot{background:#10b981}.rts-story-thumb-status-fail .rts-story-thumb-dot{background:#f43f5e}.rts-story-thumb-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:4px;background:#6366f126;color:#6366f1;flex-shrink:0}.rts-story-thumb-name{font-size:12.5px;font-weight:700;color:var(--rts-text-primary, #1f2430);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.rts-story-thumb-age{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;background:#10b98124;color:#10b981;flex-shrink:0}.rts-story-thumb-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.rts-story-thumb-expand{display:inline-flex;align-items:center;gap:4px;border:none;background:#8b5cf61f;color:#8b5cf6;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer;flex-shrink:0}.rts-story-thumb-expand:hover{background:#8b5cf638}.rts-story-thumb-fields{display:flex;flex-direction:column;gap:5px;padding-top:2px}.rts-story-thumb-field{display:flex;flex-direction:column;gap:1px}.rts-story-thumb-field-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-thumb-truncated{margin:0;font-size:11.5px;line-height:1.4;color:var(--rts-text-primary, #1f2430);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryTaskActionThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-story-task-action-thumbnail', standalone: true, imports: [NgClass], template: `
+    <div class="rts-story-thumb" [ngClass]="statusClass" (click)="onToggle()">
+      <div class="rts-story-thumb-header">
+        <div class="rts-story-thumb-title-wrap">
+          <span class="rts-story-thumb-dot"></span>
+          <span class="rts-story-thumb-badge">Story</span>
+          <span class="rts-story-thumb-name" [title]="storyName">{{ storyName }}</span>
+          @if (recommendedAge) {
+            <span class="rts-story-thumb-age" [title]="'Recommended age: ' + recommendedAge">
+              {{ recommendedAge }}
+            </span>
+          }
+          @if (friendlyUrl) {
+            <span class="rts-story-thumb-url" [title]="friendlyUrl">/{{ friendlyUrl }}</span>
+          }
+        </div>
+        <button type="button"
+                class="rts-story-thumb-expand"
+                (click)="onButtonClick($event)"
+                [title]="expanded ? 'Collapse action details' : 'Expand action details'"
+        >
+          {{ expanded ? 'Hide' : 'Expand' }}
+          <span class="pi" [ngClass]="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></span>
+        </button>
+      </div>
+
+      @if (description || moralMeaning || history) {
+        <div class="rts-story-thumb-fields">
+          @if (description) {
+            <div class="rts-story-thumb-field">
+              <span class="rts-story-thumb-field-label">Description</span>
+              <p class="rts-story-thumb-truncated" [title]="description">{{ description }}</p>
+            </div>
+          }
+          @if (moralMeaning) {
+            <div class="rts-story-thumb-field">
+              <span class="rts-story-thumb-field-label">Moral Meaning</span>
+              <p class="rts-story-thumb-truncated" [title]="moralMeaning">{{ moralMeaning }}</p>
+            </div>
+          }
+          @if (history) {
+            <div class="rts-story-thumb-field">
+              <span class="rts-story-thumb-field-label">History</span>
+              <p class="rts-story-thumb-truncated" [title]="history">{{ history }}</p>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".rts-story-thumb{display:flex;flex-direction:column;gap:6px;padding:9px 11px;border-radius:9px;background:#6366f10f;border:1px solid rgba(99,102,241,.22);cursor:pointer;transition:background .15s ease,border-color .15s ease}.rts-story-thumb:hover{background:#6366f11c;border-color:#6366f15c}.rts-story-thumb-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-story-thumb-title-wrap{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}.rts-story-thumb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#8b5cf6}.rts-story-thumb-status-success .rts-story-thumb-dot{background:#10b981}.rts-story-thumb-status-fail .rts-story-thumb-dot{background:#f43f5e}.rts-story-thumb-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:4px;background:#6366f126;color:#6366f1;flex-shrink:0}.rts-story-thumb-name{font-size:12.5px;font-weight:700;color:var(--rts-text-primary, #1f2430);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.rts-story-thumb-age{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;background:#10b98124;color:#10b981;flex-shrink:0}.rts-story-thumb-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.rts-story-thumb-expand{display:inline-flex;align-items:center;gap:4px;border:none;background:#8b5cf61f;color:#8b5cf6;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer;flex-shrink:0}.rts-story-thumb-expand:hover{background:#8b5cf638}.rts-story-thumb-fields{display:flex;flex-direction:column;gap:5px;padding-top:2px}.rts-story-thumb-field{display:flex;flex-direction:column;gap:1px}.rts-story-thumb-field-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--rts-text-secondary, #8a8fa3)}.rts-story-thumb-truncated{margin:0;font-size:11.5px;line-height:1.4;color:var(--rts-text-primary, #1f2430);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}\n"] }]
+        }], propDecorators: { action: [{
+                type: Input
+            }], task: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], toggleExpand: [{
+                type: Input
+            }] } });
+
+/**
+ * Custom task-action thumbnail widget for Slide creation / update actions.
+ * Displays slide number and 2 first truncated lines of slide text with full text tooltip on hover.
+ */
+class SlideTaskActionThumbnailComponent {
+    constructor() {
+        this.expanded = false;
+    }
+    get slideData() {
+        return {
+            ...(this.action?.input || {}),
+            ...(this.action?.output || {}),
+        };
+    }
+    get slideNumber() {
+        return this.slideData.slideNumber ?? '-';
+    }
+    get slideText() {
+        return this.slideData.text || '';
+    }
+    get statusClass() {
+        switch (this.action?.status) {
+            case OzzyTaskStatus.SUCCESS:
+                return 'rts-slide-thumb-status-success';
+            case OzzyTaskStatus.FAIL:
+                return 'rts-slide-thumb-status-fail';
+            case OzzyTaskStatus.IN_PROGRESS:
+                return 'rts-slide-thumb-status-running';
+            default:
+                return 'rts-slide-thumb-status-ready';
+        }
+    }
+    onToggle() {
+        this.toggleExpand?.();
+    }
+    onButtonClick(event) {
+        event.stopPropagation();
+        this.toggleExpand?.();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideTaskActionThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SlideTaskActionThumbnailComponent, isStandalone: true, selector: "rtsee-slide-task-action-thumbnail", inputs: { action: "action", task: "task", expanded: "expanded", toggleExpand: "toggleExpand" }, ngImport: i0, template: `
+    <div class="rts-slide-thumb" [ngClass]="statusClass" (click)="onToggle()">
+      <div class="rts-slide-thumb-header">
+        <div class="rts-slide-thumb-title-wrap">
+          <span class="rts-slide-thumb-dot"></span>
+          <span class="rts-slide-thumb-number">Slide #{{ slideNumber }}</span>
+          <span class="rts-slide-thumb-action-name">{{ action?.name }}</span>
+        </div>
+        <button type="button"
+                class="rts-slide-thumb-expand"
+                (click)="onButtonClick($event)"
+                [title]="expanded ? 'Collapse action details' : 'Expand action details'"
+        >
+          {{ expanded ? 'Hide' : 'Expand' }}
+          <span class="pi" [ngClass]="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></span>
+        </button>
+      </div>
+
+      @if (slideText) {
+        <p class="rts-slide-thumb-text" [title]="slideText">{{ slideText }}</p>
+      }
+    </div>
+  `, isInline: true, styles: [".rts-slide-thumb{display:flex;flex-direction:column;gap:5px;padding:8px 11px;border-radius:8px;background:#8b5cf60d;border:1px solid rgba(139,92,246,.18);cursor:pointer;transition:background .15s ease,border-color .15s ease}.rts-slide-thumb:hover{background:#8b5cf61a;border-color:#8b5cf652}.rts-slide-thumb-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-slide-thumb-title-wrap{display:flex;align-items:center;gap:6px;min-width:0}.rts-slide-thumb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#8b5cf6}.rts-slide-thumb-status-success .rts-slide-thumb-dot{background:#10b981}.rts-slide-thumb-status-fail .rts-slide-thumb-dot{background:#f43f5e}.rts-slide-thumb-number{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:#8b5cf626;color:#8b5cf6;flex-shrink:0}.rts-slide-thumb-action-name{font-size:11px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-slide-thumb-expand{display:inline-flex;align-items:center;gap:4px;border:none;background:#8b5cf61f;color:#8b5cf6;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer;flex-shrink:0}.rts-slide-thumb-expand:hover{background:#8b5cf638}.rts-slide-thumb-text{margin:0;font-size:12px;line-height:1.45;color:var(--rts-text-primary, #1f2430);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SlideTaskActionThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-slide-task-action-thumbnail', standalone: true, imports: [NgClass], template: `
+    <div class="rts-slide-thumb" [ngClass]="statusClass" (click)="onToggle()">
+      <div class="rts-slide-thumb-header">
+        <div class="rts-slide-thumb-title-wrap">
+          <span class="rts-slide-thumb-dot"></span>
+          <span class="rts-slide-thumb-number">Slide #{{ slideNumber }}</span>
+          <span class="rts-slide-thumb-action-name">{{ action?.name }}</span>
+        </div>
+        <button type="button"
+                class="rts-slide-thumb-expand"
+                (click)="onButtonClick($event)"
+                [title]="expanded ? 'Collapse action details' : 'Expand action details'"
+        >
+          {{ expanded ? 'Hide' : 'Expand' }}
+          <span class="pi" [ngClass]="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></span>
+        </button>
+      </div>
+
+      @if (slideText) {
+        <p class="rts-slide-thumb-text" [title]="slideText">{{ slideText }}</p>
+      }
+    </div>
+  `, styles: [".rts-slide-thumb{display:flex;flex-direction:column;gap:5px;padding:8px 11px;border-radius:8px;background:#8b5cf60d;border:1px solid rgba(139,92,246,.18);cursor:pointer;transition:background .15s ease,border-color .15s ease}.rts-slide-thumb:hover{background:#8b5cf61a;border-color:#8b5cf652}.rts-slide-thumb-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-slide-thumb-title-wrap{display:flex;align-items:center;gap:6px;min-width:0}.rts-slide-thumb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:#8b5cf6}.rts-slide-thumb-status-success .rts-slide-thumb-dot{background:#10b981}.rts-slide-thumb-status-fail .rts-slide-thumb-dot{background:#f43f5e}.rts-slide-thumb-number{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:#8b5cf626;color:#8b5cf6;flex-shrink:0}.rts-slide-thumb-action-name{font-size:11px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-slide-thumb-expand{display:inline-flex;align-items:center;gap:4px;border:none;background:#8b5cf61f;color:#8b5cf6;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer;flex-shrink:0}.rts-slide-thumb-expand:hover{background:#8b5cf638}.rts-slide-thumb-text{margin:0;font-size:12px;line-height:1.45;color:var(--rts-text-primary, #1f2430);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}\n"] }]
+        }], propDecorators: { action: [{
+                type: Input
+            }], task: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], toggleExpand: [{
+                type: Input
+            }] } });
+
+class DefaultTaskActionPromptComponent {
+    constructor() {
+        this.expanded = false;
+        this.responseValue = '';
+        this.submitting = false;
+    }
+    get promptDataJson() {
+        if (this.prompt?.data === undefined || this.prompt?.data === null) {
+            return '';
+        }
+        try {
+            return JSON.stringify(this.prompt.data, null, 2);
+        }
+        catch {
+            return String(this.prompt.data);
+        }
+    }
+    onToggle() {
+        this.toggleExpand?.();
+    }
+    onButtonClick(event) {
+        event.stopPropagation();
+        this.toggleExpand?.();
+    }
+    async submit() {
+        if (!this.task || !this.prompt || this.submitting) {
+            return;
+        }
+        this.submitting = true;
+        try {
+            await this.task.respondToPrompt(this.prompt.id, this.responseValue);
+        }
+        finally {
+            this.submitting = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: DefaultTaskActionPromptComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: DefaultTaskActionPromptComponent, isStandalone: true, selector: "rtsee-default-task-action-prompt", inputs: { prompt: "prompt", task: "task", expanded: "expanded", toggleExpand: "toggleExpand" }, ngImport: i0, template: `
+    <div class="rts-prompt-default">
+      <div class="rts-prompt-header" (click)="onToggle()">
+        <div class="rts-prompt-left">
+          <span class="rts-prompt-badge">Prompt</span>
+          <span class="rts-prompt-name" [title]="prompt?.name || 'Prompt'">
+            {{ prompt?.name || 'Prompt' }}
+          </span>
+        </div>
+        <button type="button"
+                class="rts-prompt-expand"
+                (click)="onButtonClick($event)"
+        >
+          {{ expanded ? 'Hide' : 'Expand' }}
+          <span class="pi" [ngClass]="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></span>
+        </button>
+      </div>
+
+      @if (expanded && prompt) {
+        <div class="rts-prompt-body">
+          @if (promptDataJson) {
+            <pre class="rts-prompt-code"><code>{{ promptDataJson }}</code></pre>
+          }
+          @if (!prompt.resolved) {
+            <div class="rts-prompt-Controls">
+              <input type="text"
+                     class="rts-prompt-input"
+                     [(ngModel)]="responseValue"
+                     placeholder="Provide response…"
+              />
+              <button type="button"
+                      class="rts-prompt-submit"
+                      [disabled]="submitting"
+                      (click)="submit()"
+              >
+                Send
+              </button>
+            </div>
+          } @else {
+            <div class="rts-prompt-resolved">Prompt answered.</div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".rts-prompt-default{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:8px;background:#f59e0b14;border:1px solid rgba(245,158,11,.28)}.rts-prompt-header{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}.rts-prompt-left{display:flex;align-items:center;gap:6px;min-width:0}.rts-prompt-badge{font-size:10px;font-weight:700;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:#f59e0b33;color:#d97706}.rts-prompt-name{font-size:12px;font-weight:600;color:var(--rts-text-primary, #1f2430);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-prompt-expand{display:inline-flex;align-items:center;gap:4px;border:none;background:#f59e0b29;color:#d97706;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer}.rts-prompt-body{display:flex;flex-direction:column;gap:6px;padding-top:4px}.rts-prompt-code{margin:0;padding:8px 10px;border-radius:6px;background:#0f1020;color:#e4e4f0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;max-height:140px;overflow:auto;white-space:pre-wrap}.rts-prompt-Controls{display:flex;gap:6px}.rts-prompt-input{flex:1;padding:5px 8px;border-radius:6px;border:1px solid rgba(139,92,246,.3);font-size:12px;background:var(--rts-bg-primary, #fff);color:var(--rts-text-primary, #1f2430)}.rts-prompt-submit{padding:5px 12px;border:none;border-radius:6px;background:#8b5cf6;color:#fff;font-size:11.5px;font-weight:600;cursor:pointer}.rts-prompt-resolved{font-size:11px;color:#10b981;font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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.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: DefaultTaskActionPromptComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-default-task-action-prompt', standalone: true, imports: [NgClass, FormsModule], template: `
+    <div class="rts-prompt-default">
+      <div class="rts-prompt-header" (click)="onToggle()">
+        <div class="rts-prompt-left">
+          <span class="rts-prompt-badge">Prompt</span>
+          <span class="rts-prompt-name" [title]="prompt?.name || 'Prompt'">
+            {{ prompt?.name || 'Prompt' }}
+          </span>
+        </div>
+        <button type="button"
+                class="rts-prompt-expand"
+                (click)="onButtonClick($event)"
+        >
+          {{ expanded ? 'Hide' : 'Expand' }}
+          <span class="pi" [ngClass]="expanded ? 'pi-chevron-up' : 'pi-chevron-down'"></span>
+        </button>
+      </div>
+
+      @if (expanded && prompt) {
+        <div class="rts-prompt-body">
+          @if (promptDataJson) {
+            <pre class="rts-prompt-code"><code>{{ promptDataJson }}</code></pre>
+          }
+          @if (!prompt.resolved) {
+            <div class="rts-prompt-Controls">
+              <input type="text"
+                     class="rts-prompt-input"
+                     [(ngModel)]="responseValue"
+                     placeholder="Provide response…"
+              />
+              <button type="button"
+                      class="rts-prompt-submit"
+                      [disabled]="submitting"
+                      (click)="submit()"
+              >
+                Send
+              </button>
+            </div>
+          } @else {
+            <div class="rts-prompt-resolved">Prompt answered.</div>
+          }
+        </div>
+      }
+    </div>
+  `, styles: [".rts-prompt-default{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:8px;background:#f59e0b14;border:1px solid rgba(245,158,11,.28)}.rts-prompt-header{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}.rts-prompt-left{display:flex;align-items:center;gap:6px;min-width:0}.rts-prompt-badge{font-size:10px;font-weight:700;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:#f59e0b33;color:#d97706}.rts-prompt-name{font-size:12px;font-weight:600;color:var(--rts-text-primary, #1f2430);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-prompt-expand{display:inline-flex;align-items:center;gap:4px;border:none;background:#f59e0b29;color:#d97706;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;cursor:pointer}.rts-prompt-body{display:flex;flex-direction:column;gap:6px;padding-top:4px}.rts-prompt-code{margin:0;padding:8px 10px;border-radius:6px;background:#0f1020;color:#e4e4f0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;max-height:140px;overflow:auto;white-space:pre-wrap}.rts-prompt-Controls{display:flex;gap:6px}.rts-prompt-input{flex:1;padding:5px 8px;border-radius:6px;border:1px solid rgba(139,92,246,.3);font-size:12px;background:var(--rts-bg-primary, #fff);color:var(--rts-text-primary, #1f2430)}.rts-prompt-submit{padding:5px 12px;border:none;border-radius:6px;background:#8b5cf6;color:#fff;font-size:11.5px;font-weight:600;cursor:pointer}.rts-prompt-resolved{font-size:11px;color:#10b981;font-weight:600}\n"] }]
+        }], propDecorators: { prompt: [{
+                type: Input
+            }], task: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], toggleExpand: [{
+                type: Input
+            }] } });
+
+/**
+ * Registry of custom client-side widgets for task-action-thumbnails and task-action-prompts.
+ * Falls back to DefaultTaskActionThumbnailComponent / DefaultTaskActionPromptComponent.
+ */
+class TaskActionWidgetsService {
+    constructor() {
+        this.thumbnailsMap = [
+            { name: CREATE_STORY_ACTION_NAME, component: StoryTaskActionThumbnailComponent },
+            { name: EDIT_STORY_ACTION_NAME, component: StoryTaskActionThumbnailComponent },
+            { name: CREATE_SLIDE_ACTION_NAME, component: SlideTaskActionThumbnailComponent },
+            { name: EDIT_SLIDE_ACTION_NAME, component: SlideTaskActionThumbnailComponent },
+        ];
+        this.promptsMap = [];
+    }
+    registerThumbnail(widget) {
+        this.thumbnailsMap = [
+            ...this.thumbnailsMap.filter((e) => e.name !== widget.name),
+            widget,
+        ];
+    }
+    registerPrompt(widget) {
+        this.promptsMap = [
+            ...this.promptsMap.filter((e) => e.name !== widget.name),
+            widget,
+        ];
+    }
+    getThumbnailComponentByName(name) {
+        if (!name) {
+            return DefaultTaskActionThumbnailComponent;
+        }
+        return (this.thumbnailsMap.find((e) => e.name === name)?.component ||
+            DefaultTaskActionThumbnailComponent);
+    }
+    getPromptComponentByName(name) {
+        if (!name) {
+            return DefaultTaskActionPromptComponent;
+        }
+        return (this.promptsMap.find((e) => e.name === name)?.component ||
+            DefaultTaskActionPromptComponent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TaskActionWidgetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TaskActionWidgetsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TaskActionWidgetsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Minified thumbnail representation of an OzzyClientTaskAction.
+ * Renders the registered custom thumbnail widget (or DefaultTaskActionThumbnailComponent)
+ * and expands into the full RTSeeTaskActionComponent view on toggle.
+ */
+class TaskActionThumbnailComponent {
+    constructor(cdr, actionWidgets) {
+        this.cdr = cdr;
+        this.actionWidgets = actionWidgets;
+        this.expanded = false;
+        this.subscribedAction = null;
+        this.onChangedBound = () => this.cdr.detectChanges();
+        this.toggleExpandBound = () => this.toggleExpand();
+    }
+    ngOnInit() {
+        this.subscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes['action'] && !changes['action'].firstChange) {
+            this.subscribe();
+        }
+    }
+    ngOnDestroy() {
+        this.unsubscribe();
+    }
+    get thumbnailComponent() {
+        return this.actionWidgets.getThumbnailComponentByName(this.action?.name);
+    }
+    get thumbnailInputs() {
+        return {
+            action: this.action,
+            task: this.task,
+            expanded: this.expanded,
+            toggleExpand: this.toggleExpandBound,
+        };
+    }
+    toggleExpand() {
+        this.expanded = !this.expanded;
+        if (this.expanded && this.action && !this.action.loaded && !this.action.isRunning) {
+            void this.action.load();
+        }
+        this.cdr.detectChanges();
+    }
+    subscribe() {
+        if (this.subscribedAction === this.action) {
+            return;
+        }
+        this.unsubscribe();
+        if (this.action) {
+            this.subscribedAction = this.action;
+            this.action.on(OzzyClientTaskActionEvents.CHANGED, this.onChangedBound);
+        }
+    }
+    unsubscribe() {
+        this.subscribedAction?.off(OzzyClientTaskActionEvents.CHANGED, this.onChangedBound);
+        this.subscribedAction = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TaskActionThumbnailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TaskActionWidgetsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TaskActionThumbnailComponent, isStandalone: true, selector: "rtsee-task-action-thumbnail, task-action-thumbnail", inputs: { action: "action", task: "task" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="rts-action-thumbnail-host">
+      @if (action) {
+        <ng-container
+          *ngComponentOutlet="thumbnailComponent; inputs: thumbnailInputs"
+        ></ng-container>
+
+        @if (expanded) {
+          <div class="rts-action-thumbnail-expanded">
+            <rtsee-task-action [action]="action"></rtsee-task-action>
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.rts-action-thumbnail-host{display:flex;flex-direction:column;gap:6px}.rts-action-thumbnail-expanded{padding-left:8px;border-left:2px solid rgba(139,92,246,.35)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: RTSeeTaskActionComponent, selector: "rtsee-task-action", inputs: ["action"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TaskActionThumbnailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-task-action-thumbnail, task-action-thumbnail', standalone: true, imports: [NgComponentOutlet, RTSeeTaskActionComponent], template: `
+    <div class="rts-action-thumbnail-host">
+      @if (action) {
+        <ng-container
+          *ngComponentOutlet="thumbnailComponent; inputs: thumbnailInputs"
+        ></ng-container>
+
+        @if (expanded) {
+          <div class="rts-action-thumbnail-expanded">
+            <rtsee-task-action [action]="action"></rtsee-task-action>
+          </div>
+        }
+      }
+    </div>
+  `, styles: [":host{display:block}.rts-action-thumbnail-host{display:flex;flex-direction:column;gap:6px}.rts-action-thumbnail-expanded{padding-left:8px;border-left:2px solid rgba(139,92,246,.35)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TaskActionWidgetsService }], propDecorators: { action: [{
+                type: Input
+            }], task: [{
+                type: Input
+            }] } });
+
+/**
+ * Host component for a task action prompt.
+ * Renders the registered custom prompt widget (or DefaultTaskActionPromptComponent).
+ */
+class TaskActionPromptComponent {
+    constructor(cdr, actionWidgets) {
+        this.cdr = cdr;
+        this.actionWidgets = actionWidgets;
+        this.expanded = false;
+        this.toggleExpandBound = () => this.toggleExpand();
+    }
+    get promptComponent() {
+        return this.actionWidgets.getPromptComponentByName(this.prompt?.name);
+    }
+    get promptInputs() {
+        return {
+            prompt: this.prompt,
+            task: this.task,
+            expanded: this.expanded,
+            toggleExpand: this.toggleExpandBound,
+        };
+    }
+    toggleExpand() {
+        this.expanded = !this.expanded;
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TaskActionPromptComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TaskActionWidgetsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TaskActionPromptComponent, isStandalone: true, selector: "rtsee-task-action-prompt, task-action-prompt", inputs: { prompt: "prompt", task: "task" }, ngImport: i0, template: `
+    @if (prompt) {
+      <ng-container
+        *ngComponentOutlet="promptComponent; inputs: promptInputs"
+      ></ng-container>
+    }
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TaskActionPromptComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-task-action-prompt, task-action-prompt', standalone: true, imports: [NgComponentOutlet], template: `
+    @if (prompt) {
+      <ng-container
+        *ngComponentOutlet="promptComponent; inputs: promptInputs"
+      ></ng-container>
+    }
+  `, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TaskActionWidgetsService }], propDecorators: { prompt: [{
+                type: Input
+            }], task: [{
+                type: Input
+            }] } });
+
 /**
  * Default client-side representation of a server-side OzzyTask.
  * Can be used directly (`[task]`) or as a message widget (`message.data.taskId`).
@@ -2462,10 +3359,12 @@ class RTSeeTaskComponent {
             this.task = this.messenger.ozzy.getTask(this.message.data.taskId);
         }
         this.subscribe();
+        this.ensureActions();
     }
     ngOnChanges(changes) {
         if (changes['task'] && !changes['task'].firstChange) {
             this.subscribe();
+            this.ensureActions();
         }
     }
     ngOnDestroy() {
@@ -2504,12 +3403,27 @@ class RTSeeTaskComponent {
     get hasOutput() {
         return this.task?.output !== undefined && this.task?.output !== null;
     }
-    get hasLogs() {
-        return !!(this.task?.logs?.length || this.task?.liveText);
+    get hasActions() {
+        return !!(this.task?.actions?.length || this.task?.actionsLoading);
+    }
+    get hasPrompts() {
+        return !!(this.task?.prompts?.length);
     }
     execute() {
         void this.task?.execute();
     }
+    loadMoreActions() {
+        void this.task?.loadMoreActions();
+    }
+    onActionsScroll(event) {
+        const el = event.target;
+        if (!el || !this.task?.hasMoreActions || this.task.actionsLoading) {
+            return;
+        }
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 40) {
+            void this.task.loadMoreActions();
+        }
+    }
     async copy(kind) {
         try {
             await navigator.clipboard.writeText(kind === 'input' ? this.inputJson : this.outputJson);
@@ -2524,8 +3438,19 @@ class RTSeeTaskComponent {
             console.log('Failed to copy', e);
         }
     }
-    trackLog(index, log) {
-        return `${index}-${log.level}`;
+    trackAction(_index, action) {
+        return action.id;
+    }
+    trackPrompt(_index, prompt) {
+        return prompt.id;
+    }
+    ensureActions() {
+        if (!this.task) {
+            return;
+        }
+        if (this.task.status !== OzzyTaskStatus.CREATED) {
+            this.task.ensureActionsLoaded();
+        }
     }
     toJson(value) {
         if (value === undefined || value === null) {
@@ -2553,18 +3478,21 @@ class RTSeeTaskComponent {
         this.subscribedTask = null;
     }
     onTaskChanged() {
+        this.ensureActions();
         this.cdr.detectChanges();
-        const el = this.logsContainer?.nativeElement;
-        if (el) {
-            el.scrollTop = el.scrollHeight;
+        if (this.task?.isRunning) {
+            const el = this.actionsContainer?.nativeElement;
+            if (el) {
+                el.scrollTop = el.scrollHeight;
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeTaskComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeTaskComponent, isStandalone: true, selector: "rtsee-task", inputs: { task: "task", message: "message", messenger: "messenger", chat: "chat", allowExecute: "allowExecute" }, viewQueries: [{ propertyName: "logsContainer", first: true, predicate: ["logsContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-task\" [ngClass]=\"statusClass\">\n  @if (task) {\n    <div class=\"rts-task-header\">\n      <div class=\"rts-task-identity\">\n        <span class=\"rts-task-icon\">\u2699</span>\n        <div class=\"rts-task-titles\">\n          <span class=\"rts-task-name\">{{ task.name || 'Task' }}</span>\n          <span class=\"rts-task-id\" [title]=\"task.id\">#{{ task.id }}</span>\n        </div>\n      </div>\n      <span class=\"rts-task-status\">\n        <span class=\"rts-task-status-dot\"></span>\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Input -->\n    <div class=\"rts-task-section\">\n      <div class=\"rts-task-section-head\">\n        <span class=\"rts-task-section-label\">Input</span>\n        @if (inputJson) {\n          <button type=\"button\" class=\"rts-task-copy\" (click)=\"copy('input')\">\n            {{ copied === 'input' ? 'Copied' : 'Copy' }}\n          </button>\n        }\n      </div>\n      @if (inputJson) {\n        <pre class=\"rts-task-code\"><code>{{ inputJson }}</code></pre>\n      } @else if (task.loading) {\n        <div class=\"rts-task-placeholder\">Loading\u2026</div>\n      } @else {\n        <div class=\"rts-task-placeholder\">No input</div>\n      }\n    </div>\n\n    @if (allowExecute) {\n      <div class=\"rts-task-actions\">\n        <button type=\"button\"\n                class=\"rts-task-execute\"\n                [disabled]=\"!task.canExecute\"\n                (click)=\"execute()\"\n        >\n          @if (task.isRunning || task.executeInProgress) {\n            <span class=\"rts-task-spinner\"></span> Executing\u2026\n          } @else if (task.isFailed) {\n            <span class=\"pi pi-refresh\"></span> Retry\n          } @else if (task.isFinished) {\n            <span class=\"pi pi-check\"></span> Executed\n          } @else {\n            <span class=\"pi pi-play\"></span> Execute\n          }\n        </button>\n      </div>\n    }\n\n    <!-- Logs -->\n    @if (hasLogs || task.isRunning) {\n      <div class=\"rts-task-section\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">Logs</span>\n          @if (task.isRunning) {\n            <span class=\"rts-task-live\">LIVE</span>\n          }\n        </div>\n        <div #logsContainer class=\"rts-task-terminal\">\n          @for (log of task.logs; track $index) {\n            <div class=\"rts-task-log\" [ngClass]=\"'rts-task-log-' + log.level\">\n              <span class=\"rts-task-log-time\">{{ log.createdAt | date: 'HH:mm:ss' }}</span>\n              <span class=\"rts-task-log-level\">{{ log.level }}</span>\n              <span class=\"rts-task-log-message\">{{ log.message }}</span>\n            </div>\n          }\n          @if (task.liveText) {\n            <div class=\"rts-task-live-text\">{{ task.liveText }}@if (task.isRunning) {<span class=\"rts-task-cursor\"></span>}</div>\n          } @else if (task.isRunning && !task.logs.length) {\n            <div class=\"rts-task-log rts-task-log-info\">\n              <span class=\"rts-task-log-message\">Waiting for logs\u2026</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Output -->\n    @if (hasOutput) {\n      <div class=\"rts-task-section rts-task-section-output\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">Output</span>\n          <button type=\"button\" class=\"rts-task-copy\" (click)=\"copy('output')\">\n            {{ copied === 'output' ? 'Copied' : 'Copy' }}\n          </button>\n        </div>\n        <pre class=\"rts-task-code\"><code>{{ outputJson }}</code></pre>\n      </div>\n    }\n\n    @if (task.errors.length) {\n      <div class=\"rts-task-errors\">\n        @for (error of task.errors; track $index) {\n          <div class=\"rts-task-error\">{{ error.message }}</div>\n        }\n      </div>\n    }\n\n    @if (task.requestError) {\n      <div class=\"rts-task-errors\">\n        <div class=\"rts-task-error\">{{ task.requestError }}</div>\n      </div>\n    }\n  } @else {\n    <div class=\"rts-task-placeholder\">Task is not available yet.</div>\n  }\n</div>\n", styles: [":host{display:block;--rts-task-accent: #8b5cf6;--rts-task-accent-2: #6366f1;--rts-task-success: #10b981;--rts-task-fail: #f43f5e;--rts-task-warn: #f59e0b}.rts-task{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(var(--rts-bg-secondary, #fff),var(--rts-bg-secondary, #fff)) padding-box,linear-gradient(135deg,#6366f173,#8b5cf626 60%,#a78bfa59) border-box;border:1px solid transparent;box-shadow:0 6px 24px -12px #6366f159;min-width:260px;max-width:100%;font-size:13px;transition:box-shadow .25s ease}.rts-task.rts-task-status-running{animation:rts-task-glow 2.2s ease-in-out infinite}@keyframes rts-task-glow{0%,to{box-shadow:0 6px 24px -12px #6366f159}50%{box-shadow:0 6px 28px -8px #8b5cf699}}.rts-task-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-task-identity{display:flex;align-items:center;gap:8px;min-width:0}.rts-task-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:8px;color:#fff;font-size:14px;background:linear-gradient(135deg,var(--rts-task-accent-2),var(--rts-task-accent))}.rts-task-status-running .rts-task-icon{animation:rts-task-spin 2.4s linear infinite}.rts-task-titles{display:flex;flex-direction:column;min-width:0}.rts-task-name{font-weight:600;color:var(--rts-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-task-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.rts-task-status{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;color:var(--rts-task-accent);background:#8b5cf61f}.rts-task-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.rts-task-status-running .rts-task-status-dot{animation:rts-task-pulse 1s ease-in-out infinite}.rts-task-status-success .rts-task-status{color:var(--rts-task-success);background:#10b9811f}.rts-task-status-fail .rts-task-status{color:var(--rts-task-fail);background:#f43f5e1f}.rts-task-section{display:flex;flex-direction:column;gap:4px;animation:rts-task-fade-in .3s ease}.rts-task-section-head{display:flex;align-items:center;justify-content:space-between}.rts-task-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-task-copy{border:none;background:transparent;color:var(--rts-task-accent);font-size:11px;cursor:pointer;padding:0 2px}.rts-task-copy:hover{text-decoration:underline}.rts-task-live{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--rts-task-fail);animation:rts-task-pulse 1.2s ease-in-out infinite}.rts-task-code,.rts-task-terminal{margin:0;padding:10px 12px;border-radius:8px;background:#0f1020;color:#e4e4f0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(139,92,246,.18)}.rts-task-section-output .rts-task-code{border-color:#10b98159}.rts-task-log{display:flex;gap:8px;align-items:baseline}.rts-task-log-time{color:#6b6f8a;flex-shrink:0}.rts-task-log-level{flex-shrink:0;min-width:34px;text-transform:uppercase;font-size:9.5px;font-weight:700;color:#a78bfa}.rts-task-log-warn .rts-task-log-level{color:var(--rts-task-warn)}.rts-task-log-error .rts-task-log-level,.rts-task-log-error .rts-task-log-message{color:#fb7185}.rts-task-live-text{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(139,92,246,.25);color:#c4b5fd;white-space:pre-wrap}.rts-task-cursor{display:inline-block;width:6px;height:12px;margin-left:1px;vertical-align:text-bottom;background:#a78bfa;animation:rts-task-blink .8s step-end infinite}.rts-task-actions{display:flex;justify-content:flex-end}.rts-task-execute{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:none;border-radius:8px;color:#fff;font-weight:600;font-size:12px;cursor:pointer;background:linear-gradient(135deg,var(--rts-task-accent-2),var(--rts-task-accent));box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.rts-task-execute:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px -4px #6366f1bf}.rts-task-execute:disabled{cursor:default;opacity:.6;box-shadow:none}.rts-task-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-task-spin .8s linear infinite}.rts-task-placeholder{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);font-style:italic}.rts-task-errors{display:flex;flex-direction:column;gap:4px}.rts-task-error{padding:6px 10px;border-radius:6px;font-size:12px;color:var(--rts-task-fail);background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}@keyframes rts-task-spin{to{transform:rotate(360deg)}}@keyframes rts-task-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes rts-task-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes rts-task-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeTaskComponent, isStandalone: true, selector: "rtsee-task", inputs: { task: "task", message: "message", messenger: "messenger", chat: "chat", allowExecute: "allowExecute" }, viewQueries: [{ propertyName: "actionsContainer", first: true, predicate: ["actionsContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rts-task\" [ngClass]=\"statusClass\">\n  @if (task) {\n    <div class=\"rts-task-header\">\n      <div class=\"rts-task-identity\">\n        <span class=\"rts-task-icon\">\u2699</span>\n        <div class=\"rts-task-titles\">\n          <span class=\"rts-task-name\">{{ task.name || 'Task' }}</span>\n          <span class=\"rts-task-id\" [title]=\"task.id\">#{{ task.id }}</span>\n        </div>\n      </div>\n      <span class=\"rts-task-status\">\n        <span class=\"rts-task-status-dot\"></span>\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Input -->\n    <div class=\"rts-task-section\">\n      <div class=\"rts-task-section-head\">\n        <span class=\"rts-task-section-label\">Input</span>\n        @if (inputJson) {\n          <button type=\"button\" class=\"rts-task-copy\" (click)=\"copy('input')\">\n            {{ copied === 'input' ? 'Copied' : 'Copy' }}\n          </button>\n        }\n      </div>\n      @if (inputJson) {\n        <pre class=\"rts-task-code\"><code>{{ inputJson }}</code></pre>\n      } @else if (task.loading) {\n        <div class=\"rts-task-placeholder\">Loading\u2026</div>\n      } @else {\n        <div class=\"rts-task-placeholder\">No input</div>\n      }\n    </div>\n\n    @if (allowExecute) {\n      <div class=\"rts-task-actions\">\n        <button type=\"button\"\n                class=\"rts-task-execute\"\n                [disabled]=\"!task.canExecute\"\n                (click)=\"execute()\"\n        >\n          @if (task.isRunning || task.executeInProgress) {\n            <span class=\"rts-task-spinner\"></span> Executing\u2026\n          } @else if (task.isFailed) {\n            <span class=\"pi pi-refresh\"></span> Retry\n          } @else if (task.isFinished) {\n            <span class=\"pi pi-check\"></span> Executed\n          } @else {\n            <span class=\"pi pi-play\"></span> Execute\n          }\n        </button>\n      </div>\n    }\n\n    <!-- Prompts -->\n    @if (hasPrompts) {\n      <div class=\"rts-task-section\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">Prompts</span>\n        </div>\n        <div class=\"rts-task-prompts-list\">\n          @for (prompt of task.prompts; track prompt.id) {\n            <rtsee-task-action-prompt\n              [prompt]=\"prompt\"\n              [task]=\"task\"\n            ></rtsee-task-action-prompt>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Actions (replaces Logs list) -->\n    @if (hasActions || task.isRunning) {\n      <div class=\"rts-task-section\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">\n            Actions @if (task.actionsTotal) { ({{ task.actions.length }}/{{ task.actionsTotal }}) }\n          </span>\n          @if (task.isRunning) {\n            <span class=\"rts-task-live\">LIVE</span>\n          }\n        </div>\n        <div #actionsContainer class=\"rts-task-actions-list\" (scroll)=\"onActionsScroll($event)\">\n          @for (action of task.actions; track action.id) {\n            <rtsee-task-action-thumbnail\n              [action]=\"action\"\n              [task]=\"task\"\n            ></rtsee-task-action-thumbnail>\n          }\n          @if (task.isRunning && !task.actions.length) {\n            <div class=\"rts-task-placeholder\">Starting actions\u2026</div>\n          }\n          @if (task.actionsLoading) {\n            <div class=\"rts-task-placeholder\">Loading actions\u2026</div>\n          }\n          @if (task.hasMoreActions && !task.actionsLoading) {\n            <button type=\"button\" class=\"rts-task-load-more\" (click)=\"loadMoreActions()\">\n              Load more actions ({{ task.actions.length }}/{{ task.actionsTotal }})\n            </button>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Output -->\n    @if (hasOutput) {\n      <div class=\"rts-task-section rts-task-section-output\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">Output</span>\n          <button type=\"button\" class=\"rts-task-copy\" (click)=\"copy('output')\">\n            {{ copied === 'output' ? 'Copied' : 'Copy' }}\n          </button>\n        </div>\n        <pre class=\"rts-task-code\"><code>{{ outputJson }}</code></pre>\n      </div>\n    }\n\n    @if (task.errors.length) {\n      <div class=\"rts-task-errors\">\n        @for (error of task.errors; track $index) {\n          <div class=\"rts-task-error\">{{ error.message }}</div>\n        }\n      </div>\n    }\n\n    @if (task.requestError) {\n      <div class=\"rts-task-errors\">\n        <div class=\"rts-task-error\">{{ task.requestError }}</div>\n      </div>\n    }\n  } @else {\n    <div class=\"rts-task-placeholder\">Task is not available yet.</div>\n  }\n</div>\n", styles: [":host{display:block;--rts-task-accent: #8b5cf6;--rts-task-accent-2: #6366f1;--rts-task-success: #10b981;--rts-task-fail: #f43f5e;--rts-task-warn: #f59e0b}.rts-task{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(var(--rts-bg-secondary, #fff),var(--rts-bg-secondary, #fff)) padding-box,linear-gradient(135deg,#6366f173,#8b5cf626 60%,#a78bfa59) border-box;border:1px solid transparent;box-shadow:0 6px 24px -12px #6366f159;min-width:260px;max-width:100%;font-size:13px;transition:box-shadow .25s ease}.rts-task.rts-task-status-running{animation:rts-task-glow 2.2s ease-in-out infinite}@keyframes rts-task-glow{0%,to{box-shadow:0 6px 24px -12px #6366f159}50%{box-shadow:0 6px 28px -8px #8b5cf699}}.rts-task-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-task-identity{display:flex;align-items:center;gap:8px;min-width:0}.rts-task-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:8px;color:#fff;font-size:14px;background:linear-gradient(135deg,var(--rts-task-accent-2),var(--rts-task-accent))}.rts-task-status-running .rts-task-icon{animation:rts-task-spin 2.4s linear infinite}.rts-task-titles{display:flex;flex-direction:column;min-width:0}.rts-task-name{font-weight:600;color:var(--rts-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-task-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.rts-task-status{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;color:var(--rts-task-accent);background:#8b5cf61f}.rts-task-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.rts-task-status-running .rts-task-status-dot{animation:rts-task-pulse 1s ease-in-out infinite}.rts-task-status-success .rts-task-status{color:var(--rts-task-success);background:#10b9811f}.rts-task-status-fail .rts-task-status{color:var(--rts-task-fail);background:#f43f5e1f}.rts-task-section{display:flex;flex-direction:column;gap:4px;animation:rts-task-fade-in .3s ease}.rts-task-section-head{display:flex;align-items:center;justify-content:space-between}.rts-task-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-task-copy{border:none;background:transparent;color:var(--rts-task-accent);font-size:11px;cursor:pointer;padding:0 2px}.rts-task-copy:hover{text-decoration:underline}.rts-task-live{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--rts-task-fail);animation:rts-task-pulse 1.2s ease-in-out infinite}.rts-task-code,.rts-task-terminal{margin:0;padding:10px 12px;border-radius:8px;background:#0f1020;color:#e4e4f0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(139,92,246,.18)}.rts-task-section-output .rts-task-code{border-color:#10b98159}.rts-task-actions-list,.rts-task-prompts-list{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto;padding:2px}.rts-task-load-more{align-self:center;margin-top:4px;padding:5px 12px;border-radius:6px;border:1px solid rgba(139,92,246,.3);background:#8b5cf614;color:var(--rts-task-accent);font-size:11px;font-weight:600;cursor:pointer}.rts-task-load-more:hover{background:#8b5cf629}.rts-task-log{display:flex;gap:8px;align-items:baseline}.rts-task-log-time{color:#6b6f8a;flex-shrink:0}.rts-task-log-level{flex-shrink:0;min-width:34px;text-transform:uppercase;font-size:9.5px;font-weight:700;color:#a78bfa}.rts-task-log-warn .rts-task-log-level{color:var(--rts-task-warn)}.rts-task-log-error .rts-task-log-level,.rts-task-log-error .rts-task-log-message{color:#fb7185}.rts-task-live-text{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(139,92,246,.25);color:#c4b5fd;white-space:pre-wrap}.rts-task-cursor{display:inline-block;width:6px;height:12px;margin-left:1px;vertical-align:text-bottom;background:#a78bfa;animation:rts-task-blink .8s step-end infinite}.rts-task-actions{display:flex;justify-content:flex-end}.rts-task-execute{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:none;border-radius:8px;color:#fff;font-weight:600;font-size:12px;cursor:pointer;background:linear-gradient(135deg,var(--rts-task-accent-2),var(--rts-task-accent));box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.rts-task-execute:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px -4px #6366f1bf}.rts-task-execute:disabled{cursor:default;opacity:.6;box-shadow:none}.rts-task-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-task-spin .8s linear infinite}.rts-task-placeholder{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);font-style:italic}.rts-task-errors{display:flex;flex-direction:column;gap:4px}.rts-task-error{padding:6px 10px;border-radius:6px;font-size:12px;color:var(--rts-task-fail);background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}@keyframes rts-task-spin{to{transform:rotate(360deg)}}@keyframes rts-task-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes rts-task-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes rts-task-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TaskActionThumbnailComponent, selector: "rtsee-task-action-thumbnail, task-action-thumbnail", inputs: ["action", "task"] }, { kind: "component", type: TaskActionPromptComponent, selector: "rtsee-task-action-prompt, task-action-prompt", inputs: ["prompt", "task"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeTaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-task', standalone: true, imports: [NgClass, DatePipe], template: "<div class=\"rts-task\" [ngClass]=\"statusClass\">\n  @if (task) {\n    <div class=\"rts-task-header\">\n      <div class=\"rts-task-identity\">\n        <span class=\"rts-task-icon\">\u2699</span>\n        <div class=\"rts-task-titles\">\n          <span class=\"rts-task-name\">{{ task.name || 'Task' }}</span>\n          <span class=\"rts-task-id\" [title]=\"task.id\">#{{ task.id }}</span>\n        </div>\n      </div>\n      <span class=\"rts-task-status\">\n        <span class=\"rts-task-status-dot\"></span>\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Input -->\n    <div class=\"rts-task-section\">\n      <div class=\"rts-task-section-head\">\n        <span class=\"rts-task-section-label\">Input</span>\n        @if (inputJson) {\n          <button type=\"button\" class=\"rts-task-copy\" (click)=\"copy('input')\">\n            {{ copied === 'input' ? 'Copied' : 'Copy' }}\n          </button>\n        }\n      </div>\n      @if (inputJson) {\n        <pre class=\"rts-task-code\"><code>{{ inputJson }}</code></pre>\n      } @else if (task.loading) {\n        <div class=\"rts-task-placeholder\">Loading\u2026</div>\n      } @else {\n        <div class=\"rts-task-placeholder\">No input</div>\n      }\n    </div>\n\n    @if (allowExecute) {\n      <div class=\"rts-task-actions\">\n        <button type=\"button\"\n                class=\"rts-task-execute\"\n                [disabled]=\"!task.canExecute\"\n                (click)=\"execute()\"\n        >\n          @if (task.isRunning || task.executeInProgress) {\n            <span class=\"rts-task-spinner\"></span> Executing\u2026\n          } @else if (task.isFailed) {\n            <span class=\"pi pi-refresh\"></span> Retry\n          } @else if (task.isFinished) {\n            <span class=\"pi pi-check\"></span> Executed\n          } @else {\n            <span class=\"pi pi-play\"></span> Execute\n          }\n        </button>\n      </div>\n    }\n\n    <!-- Logs -->\n    @if (hasLogs || task.isRunning) {\n      <div class=\"rts-task-section\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">Logs</span>\n          @if (task.isRunning) {\n            <span class=\"rts-task-live\">LIVE</span>\n          }\n        </div>\n        <div #logsContainer class=\"rts-task-terminal\">\n          @for (log of task.logs; track $index) {\n            <div class=\"rts-task-log\" [ngClass]=\"'rts-task-log-' + log.level\">\n              <span class=\"rts-task-log-time\">{{ log.createdAt | date: 'HH:mm:ss' }}</span>\n              <span class=\"rts-task-log-level\">{{ log.level }}</span>\n              <span class=\"rts-task-log-message\">{{ log.message }}</span>\n            </div>\n          }\n          @if (task.liveText) {\n            <div class=\"rts-task-live-text\">{{ task.liveText }}@if (task.isRunning) {<span class=\"rts-task-cursor\"></span>}</div>\n          } @else if (task.isRunning && !task.logs.length) {\n            <div class=\"rts-task-log rts-task-log-info\">\n              <span class=\"rts-task-log-message\">Waiting for logs\u2026</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Output -->\n    @if (hasOutput) {\n      <div class=\"rts-task-section rts-task-section-output\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">Output</span>\n          <button type=\"button\" class=\"rts-task-copy\" (click)=\"copy('output')\">\n            {{ copied === 'output' ? 'Copied' : 'Copy' }}\n          </button>\n        </div>\n        <pre class=\"rts-task-code\"><code>{{ outputJson }}</code></pre>\n      </div>\n    }\n\n    @if (task.errors.length) {\n      <div class=\"rts-task-errors\">\n        @for (error of task.errors; track $index) {\n          <div class=\"rts-task-error\">{{ error.message }}</div>\n        }\n      </div>\n    }\n\n    @if (task.requestError) {\n      <div class=\"rts-task-errors\">\n        <div class=\"rts-task-error\">{{ task.requestError }}</div>\n      </div>\n    }\n  } @else {\n    <div class=\"rts-task-placeholder\">Task is not available yet.</div>\n  }\n</div>\n", styles: [":host{display:block;--rts-task-accent: #8b5cf6;--rts-task-accent-2: #6366f1;--rts-task-success: #10b981;--rts-task-fail: #f43f5e;--rts-task-warn: #f59e0b}.rts-task{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(var(--rts-bg-secondary, #fff),var(--rts-bg-secondary, #fff)) padding-box,linear-gradient(135deg,#6366f173,#8b5cf626 60%,#a78bfa59) border-box;border:1px solid transparent;box-shadow:0 6px 24px -12px #6366f159;min-width:260px;max-width:100%;font-size:13px;transition:box-shadow .25s ease}.rts-task.rts-task-status-running{animation:rts-task-glow 2.2s ease-in-out infinite}@keyframes rts-task-glow{0%,to{box-shadow:0 6px 24px -12px #6366f159}50%{box-shadow:0 6px 28px -8px #8b5cf699}}.rts-task-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-task-identity{display:flex;align-items:center;gap:8px;min-width:0}.rts-task-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:8px;color:#fff;font-size:14px;background:linear-gradient(135deg,var(--rts-task-accent-2),var(--rts-task-accent))}.rts-task-status-running .rts-task-icon{animation:rts-task-spin 2.4s linear infinite}.rts-task-titles{display:flex;flex-direction:column;min-width:0}.rts-task-name{font-weight:600;color:var(--rts-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-task-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.rts-task-status{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;color:var(--rts-task-accent);background:#8b5cf61f}.rts-task-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.rts-task-status-running .rts-task-status-dot{animation:rts-task-pulse 1s ease-in-out infinite}.rts-task-status-success .rts-task-status{color:var(--rts-task-success);background:#10b9811f}.rts-task-status-fail .rts-task-status{color:var(--rts-task-fail);background:#f43f5e1f}.rts-task-section{display:flex;flex-direction:column;gap:4px;animation:rts-task-fade-in .3s ease}.rts-task-section-head{display:flex;align-items:center;justify-content:space-between}.rts-task-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-task-copy{border:none;background:transparent;color:var(--rts-task-accent);font-size:11px;cursor:pointer;padding:0 2px}.rts-task-copy:hover{text-decoration:underline}.rts-task-live{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--rts-task-fail);animation:rts-task-pulse 1.2s ease-in-out infinite}.rts-task-code,.rts-task-terminal{margin:0;padding:10px 12px;border-radius:8px;background:#0f1020;color:#e4e4f0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(139,92,246,.18)}.rts-task-section-output .rts-task-code{border-color:#10b98159}.rts-task-log{display:flex;gap:8px;align-items:baseline}.rts-task-log-time{color:#6b6f8a;flex-shrink:0}.rts-task-log-level{flex-shrink:0;min-width:34px;text-transform:uppercase;font-size:9.5px;font-weight:700;color:#a78bfa}.rts-task-log-warn .rts-task-log-level{color:var(--rts-task-warn)}.rts-task-log-error .rts-task-log-level,.rts-task-log-error .rts-task-log-message{color:#fb7185}.rts-task-live-text{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(139,92,246,.25);color:#c4b5fd;white-space:pre-wrap}.rts-task-cursor{display:inline-block;width:6px;height:12px;margin-left:1px;vertical-align:text-bottom;background:#a78bfa;animation:rts-task-blink .8s step-end infinite}.rts-task-actions{display:flex;justify-content:flex-end}.rts-task-execute{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:none;border-radius:8px;color:#fff;font-weight:600;font-size:12px;cursor:pointer;background:linear-gradient(135deg,var(--rts-task-accent-2),var(--rts-task-accent));box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.rts-task-execute:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px -4px #6366f1bf}.rts-task-execute:disabled{cursor:default;opacity:.6;box-shadow:none}.rts-task-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-task-spin .8s linear infinite}.rts-task-placeholder{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);font-style:italic}.rts-task-errors{display:flex;flex-direction:column;gap:4px}.rts-task-error{padding:6px 10px;border-radius:6px;font-size:12px;color:var(--rts-task-fail);background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}@keyframes rts-task-spin{to{transform:rotate(360deg)}}@keyframes rts-task-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes rts-task-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes rts-task-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}\n"] }]
+            args: [{ selector: 'rtsee-task', standalone: true, imports: [NgClass, TaskActionThumbnailComponent, TaskActionPromptComponent], template: "<div class=\"rts-task\" [ngClass]=\"statusClass\">\n  @if (task) {\n    <div class=\"rts-task-header\">\n      <div class=\"rts-task-identity\">\n        <span class=\"rts-task-icon\">\u2699</span>\n        <div class=\"rts-task-titles\">\n          <span class=\"rts-task-name\">{{ task.name || 'Task' }}</span>\n          <span class=\"rts-task-id\" [title]=\"task.id\">#{{ task.id }}</span>\n        </div>\n      </div>\n      <span class=\"rts-task-status\">\n        <span class=\"rts-task-status-dot\"></span>\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Input -->\n    <div class=\"rts-task-section\">\n      <div class=\"rts-task-section-head\">\n        <span class=\"rts-task-section-label\">Input</span>\n        @if (inputJson) {\n          <button type=\"button\" class=\"rts-task-copy\" (click)=\"copy('input')\">\n            {{ copied === 'input' ? 'Copied' : 'Copy' }}\n          </button>\n        }\n      </div>\n      @if (inputJson) {\n        <pre class=\"rts-task-code\"><code>{{ inputJson }}</code></pre>\n      } @else if (task.loading) {\n        <div class=\"rts-task-placeholder\">Loading\u2026</div>\n      } @else {\n        <div class=\"rts-task-placeholder\">No input</div>\n      }\n    </div>\n\n    @if (allowExecute) {\n      <div class=\"rts-task-actions\">\n        <button type=\"button\"\n                class=\"rts-task-execute\"\n                [disabled]=\"!task.canExecute\"\n                (click)=\"execute()\"\n        >\n          @if (task.isRunning || task.executeInProgress) {\n            <span class=\"rts-task-spinner\"></span> Executing\u2026\n          } @else if (task.isFailed) {\n            <span class=\"pi pi-refresh\"></span> Retry\n          } @else if (task.isFinished) {\n            <span class=\"pi pi-check\"></span> Executed\n          } @else {\n            <span class=\"pi pi-play\"></span> Execute\n          }\n        </button>\n      </div>\n    }\n\n    <!-- Prompts -->\n    @if (hasPrompts) {\n      <div class=\"rts-task-section\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">Prompts</span>\n        </div>\n        <div class=\"rts-task-prompts-list\">\n          @for (prompt of task.prompts; track prompt.id) {\n            <rtsee-task-action-prompt\n              [prompt]=\"prompt\"\n              [task]=\"task\"\n            ></rtsee-task-action-prompt>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Actions (replaces Logs list) -->\n    @if (hasActions || task.isRunning) {\n      <div class=\"rts-task-section\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">\n            Actions @if (task.actionsTotal) { ({{ task.actions.length }}/{{ task.actionsTotal }}) }\n          </span>\n          @if (task.isRunning) {\n            <span class=\"rts-task-live\">LIVE</span>\n          }\n        </div>\n        <div #actionsContainer class=\"rts-task-actions-list\" (scroll)=\"onActionsScroll($event)\">\n          @for (action of task.actions; track action.id) {\n            <rtsee-task-action-thumbnail\n              [action]=\"action\"\n              [task]=\"task\"\n            ></rtsee-task-action-thumbnail>\n          }\n          @if (task.isRunning && !task.actions.length) {\n            <div class=\"rts-task-placeholder\">Starting actions\u2026</div>\n          }\n          @if (task.actionsLoading) {\n            <div class=\"rts-task-placeholder\">Loading actions\u2026</div>\n          }\n          @if (task.hasMoreActions && !task.actionsLoading) {\n            <button type=\"button\" class=\"rts-task-load-more\" (click)=\"loadMoreActions()\">\n              Load more actions ({{ task.actions.length }}/{{ task.actionsTotal }})\n            </button>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Output -->\n    @if (hasOutput) {\n      <div class=\"rts-task-section rts-task-section-output\">\n        <div class=\"rts-task-section-head\">\n          <span class=\"rts-task-section-label\">Output</span>\n          <button type=\"button\" class=\"rts-task-copy\" (click)=\"copy('output')\">\n            {{ copied === 'output' ? 'Copied' : 'Copy' }}\n          </button>\n        </div>\n        <pre class=\"rts-task-code\"><code>{{ outputJson }}</code></pre>\n      </div>\n    }\n\n    @if (task.errors.length) {\n      <div class=\"rts-task-errors\">\n        @for (error of task.errors; track $index) {\n          <div class=\"rts-task-error\">{{ error.message }}</div>\n        }\n      </div>\n    }\n\n    @if (task.requestError) {\n      <div class=\"rts-task-errors\">\n        <div class=\"rts-task-error\">{{ task.requestError }}</div>\n      </div>\n    }\n  } @else {\n    <div class=\"rts-task-placeholder\">Task is not available yet.</div>\n  }\n</div>\n", styles: [":host{display:block;--rts-task-accent: #8b5cf6;--rts-task-accent-2: #6366f1;--rts-task-success: #10b981;--rts-task-fail: #f43f5e;--rts-task-warn: #f59e0b}.rts-task{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(var(--rts-bg-secondary, #fff),var(--rts-bg-secondary, #fff)) padding-box,linear-gradient(135deg,#6366f173,#8b5cf626 60%,#a78bfa59) border-box;border:1px solid transparent;box-shadow:0 6px 24px -12px #6366f159;min-width:260px;max-width:100%;font-size:13px;transition:box-shadow .25s ease}.rts-task.rts-task-status-running{animation:rts-task-glow 2.2s ease-in-out infinite}@keyframes rts-task-glow{0%,to{box-shadow:0 6px 24px -12px #6366f159}50%{box-shadow:0 6px 28px -8px #8b5cf699}}.rts-task-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.rts-task-identity{display:flex;align-items:center;gap:8px;min-width:0}.rts-task-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:8px;color:#fff;font-size:14px;background:linear-gradient(135deg,var(--rts-task-accent-2),var(--rts-task-accent))}.rts-task-status-running .rts-task-icon{animation:rts-task-spin 2.4s linear infinite}.rts-task-titles{display:flex;flex-direction:column;min-width:0}.rts-task-name{font-weight:600;color:var(--rts-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rts-task-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--rts-text-secondary, #8a8fa3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.rts-task-status{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;color:var(--rts-task-accent);background:#8b5cf61f}.rts-task-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.rts-task-status-running .rts-task-status-dot{animation:rts-task-pulse 1s ease-in-out infinite}.rts-task-status-success .rts-task-status{color:var(--rts-task-success);background:#10b9811f}.rts-task-status-fail .rts-task-status{color:var(--rts-task-fail);background:#f43f5e1f}.rts-task-section{display:flex;flex-direction:column;gap:4px;animation:rts-task-fade-in .3s ease}.rts-task-section-head{display:flex;align-items:center;justify-content:space-between}.rts-task-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rts-text-secondary, #8a8fa3)}.rts-task-copy{border:none;background:transparent;color:var(--rts-task-accent);font-size:11px;cursor:pointer;padding:0 2px}.rts-task-copy:hover{text-decoration:underline}.rts-task-live{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--rts-task-fail);animation:rts-task-pulse 1.2s ease-in-out infinite}.rts-task-code,.rts-task-terminal{margin:0;padding:10px 12px;border-radius:8px;background:#0f1020;color:#e4e4f0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(139,92,246,.18)}.rts-task-section-output .rts-task-code{border-color:#10b98159}.rts-task-actions-list,.rts-task-prompts-list{display:flex;flex-direction:column;gap:6px;max-height:360px;overflow-y:auto;padding:2px}.rts-task-load-more{align-self:center;margin-top:4px;padding:5px 12px;border-radius:6px;border:1px solid rgba(139,92,246,.3);background:#8b5cf614;color:var(--rts-task-accent);font-size:11px;font-weight:600;cursor:pointer}.rts-task-load-more:hover{background:#8b5cf629}.rts-task-log{display:flex;gap:8px;align-items:baseline}.rts-task-log-time{color:#6b6f8a;flex-shrink:0}.rts-task-log-level{flex-shrink:0;min-width:34px;text-transform:uppercase;font-size:9.5px;font-weight:700;color:#a78bfa}.rts-task-log-warn .rts-task-log-level{color:var(--rts-task-warn)}.rts-task-log-error .rts-task-log-level,.rts-task-log-error .rts-task-log-message{color:#fb7185}.rts-task-live-text{margin-top:6px;padding-top:6px;border-top:1px dashed rgba(139,92,246,.25);color:#c4b5fd;white-space:pre-wrap}.rts-task-cursor{display:inline-block;width:6px;height:12px;margin-left:1px;vertical-align:text-bottom;background:#a78bfa;animation:rts-task-blink .8s step-end infinite}.rts-task-actions{display:flex;justify-content:flex-end}.rts-task-execute{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:none;border-radius:8px;color:#fff;font-weight:600;font-size:12px;cursor:pointer;background:linear-gradient(135deg,var(--rts-task-accent-2),var(--rts-task-accent));box-shadow:0 4px 14px -4px #6366f199;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease}.rts-task-execute:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px -4px #6366f1bf}.rts-task-execute:disabled{cursor:default;opacity:.6;box-shadow:none}.rts-task-spinner{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rts-task-spin .8s linear infinite}.rts-task-placeholder{font-size:12px;color:var(--rts-text-secondary, #8a8fa3);font-style:italic}.rts-task-errors{display:flex;flex-direction:column;gap:4px}.rts-task-error{padding:6px 10px;border-radius:6px;font-size:12px;color:var(--rts-task-fail);background:#f43f5e14;border:1px solid rgba(244,63,94,.25)}@keyframes rts-task-spin{to{transform:rotate(360deg)}}@keyframes rts-task-pulse{0%,to{opacity:1}50%{opacity:.35}}@keyframes rts-task-blink{0%,to{opacity:1}50%{opacity:0}}@keyframes rts-task-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { task: [{
                 type: Input
             }], message: [{
@@ -2575,9 +3503,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], allowExecute: [{
                 type: Input
-            }], logsContainer: [{
+            }], actionsContainer: [{
                 type: ViewChild,
-                args: ['logsContainer']
+                args: ['actionsContainer']
             }] } });
 
 /**
@@ -3581,17 +4509,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class MessagesListComponent {
-    constructor(timeFormatService, scroller, document) {
+    constructor(timeFormatService, scroller, hostRef, document) {
         this.timeFormatService = timeFormatService;
         this.scroller = scroller;
+        this.hostRef = hostRef;
         this.document = document;
         this.messagesGroups = [];
         this.firstGroupedMessage = null;
         this.lastGroupedMessage = null;
         this.shouldStickToBottom = true;
+        this.isWindowScroll = false;
         this.resizeObserver = null;
         this.onMediaCapture = null;
         this.initialScrollInterval = null;
+        this.lastContainerScrollTop = 0;
+        this.lastWindowScrollTop = 0;
+        this.isFramed = false;
         this.RTSeeChatTypes = RTSeeChatTypes;
         this.bindScrollFunction = () => {
             this.shouldStickToBottom = true;
@@ -3604,29 +4537,66 @@ class MessagesListComponent {
             }
         };
     }
+    get isStandalone() {
+        return Boolean(this.chat?.isStandalone);
+    }
     onWindowScroll(event) {
-        this.checkScrollPosition();
+        this.updateScrollMode();
+        if (!this.isWindowScroll) {
+            return;
+        }
         const verticalOffset = window.pageYOffset ||
             this.document.documentElement.scrollTop ||
             this.document.body.scrollTop ||
             0;
-        if (window.innerWidth >= COMMON_CONSTANTS.mobileBreakpoint) {
+        const scrollingUp = verticalOffset < this.lastWindowScrollTop;
+        const scrollingDown = verticalOffset > this.lastWindowScrollTop;
+        this.lastWindowScrollTop = verticalOffset;
+        if (this.isStandalone) {
+            const el = this.contentBlock?.nativeElement || this.scrollContainer?.nativeElement;
+            if (!el || el.getClientRects().length === 0) {
+                return;
+            }
+            const rect = el.getBoundingClientRect();
+            const viewportHeight = window.innerHeight || this.document.documentElement.clientHeight || 0;
+            if (scrollingDown && rect.bottom - viewportHeight < 300) {
+                this.onScroll();
+            }
+            else if (scrollingUp && rect.top > -300 && rect.top <= 300) {
+                this.onScrolledToTop();
+            }
+            return;
+        }
+        if (!this.isShellMobileChatActive()) {
             return;
         }
-        if (verticalOffset < 300) {
+        this.checkScrollPosition();
+        if (scrollingUp && verticalOffset < 300) {
             this.onScrolledToTop();
         }
+        else if (scrollingDown) {
+            const scrollHeight = Math.max(this.document.documentElement.scrollHeight, this.document.body.scrollHeight);
+            const clientHeight = window.innerHeight;
+            if (scrollHeight - (verticalOffset + clientHeight) < 300) {
+                this.onScroll();
+            }
+        }
     }
     onWindowResize() {
+        this.updateScrollMode();
         if (this.shouldStickToBottom) {
             this.scrollToBottom();
         }
     }
     ngOnInit() {
+        this.updateScrollMode();
         this.bindChatEvents(this.chat);
         this.groupMessages();
     }
     ngOnChanges(changes) {
+        if (changes['chat'] || changes['isFramed']) {
+            this.updateScrollMode();
+        }
         if (changes['chat'] && !changes['chat'].firstChange) {
             const prevChat = changes['chat'].previousValue;
             this.unbindChatEvents(prevChat);
@@ -3636,7 +4606,8 @@ class MessagesListComponent {
         }
     }
     ngAfterViewInit() {
-        if (this.chat?.isStandalone) {
+        this.updateScrollMode();
+        if (this.isStandalone) {
             return;
         }
         this.enforceInitialScroll();
@@ -3681,8 +4652,25 @@ class MessagesListComponent {
         }
     }
     onContainerScroll(event) {
+        this.updateScrollMode();
+        if (this.isWindowScroll) {
+            return;
+        }
         this.checkScrollPosition();
-        this.onScroll();
+        const el = this.scrollContainer?.nativeElement;
+        if (!el) {
+            return;
+        }
+        const scrollTop = el.scrollTop;
+        const scrollingUp = scrollTop < this.lastContainerScrollTop;
+        const scrollingDown = scrollTop > this.lastContainerScrollTop;
+        this.lastContainerScrollTop = scrollTop;
+        if (scrollingUp && scrollTop < 300) {
+            this.onScrolledToTop();
+        }
+        else if (scrollingDown && el.scrollHeight - (scrollTop + el.clientHeight) < 300) {
+            this.onScroll();
+        }
     }
     onScrolledToTop() {
         if (this.chat.messagesLoadInProgress || this.chat.firstMessageLoaded) {
@@ -3691,36 +4679,26 @@ class MessagesListComponent {
         this.chat.loadRemoteMessages('back');
     }
     onScroll() {
-        if (this.chat.messagesLoadInProgress) {
+        if (this.chat.messagesLoadInProgress || this.chat.lastMessageLoaded) {
             return;
         }
         this.chat.loadRemoteMessages('front');
     }
     scrollToBottom(immediate = false) {
-        if (this.chat?.isStandalone) {
+        if (this.isStandalone) {
             return;
         }
+        this.updateScrollMode();
         const performScroll = () => {
-            if (this.bottomAnchor?.nativeElement) {
-                try {
-                    this.bottomAnchor.nativeElement.scrollIntoView({
-                        block: 'end',
-                        inline: 'nearest',
-                        behavior: 'instant',
-                    });
-                }
-                catch {
-                    // ignore
-                }
-            }
-            if (window.innerWidth < COMMON_CONSTANTS.mobileBreakpoint) {
-                const target = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+            if (this.isShellMobileChatActive()) {
+                const target = Math.max(this.document.documentElement.scrollHeight, this.document.body.scrollHeight);
                 window.scrollTo({ top: target, behavior: 'instant' });
                 this.scroller.scrollToPosition([0, target]);
             }
-            if (this.scrollContainer?.nativeElement) {
+            else if (!this.isWindowScroll && this.scrollContainer?.nativeElement) {
                 const el = this.scrollContainer.nativeElement;
                 el.scrollTop = el.scrollHeight;
+                this.lastContainerScrollTop = el.scrollTop;
             }
         };
         performScroll();
@@ -3743,11 +4721,11 @@ class MessagesListComponent {
     }
     isAtBottom() {
         const threshold = 150; // px threshold from bottom
-        if (window.innerWidth < COMMON_CONSTANTS.mobileBreakpoint) {
-            const scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+        if (this.isShellMobileChatActive()) {
+            const scrollHeight = Math.max(this.document.documentElement.scrollHeight, this.document.body.scrollHeight);
             const scrollTop = window.pageYOffset ||
-                document.documentElement.scrollTop ||
-                document.body.scrollTop ||
+                this.document.documentElement.scrollTop ||
+                this.document.body.scrollTop ||
                 0;
             const clientHeight = window.innerHeight;
             return scrollHeight - (scrollTop + clientHeight) <= threshold;
@@ -3759,6 +4737,36 @@ class MessagesListComponent {
             return el.scrollHeight - (el.scrollTop + el.clientHeight) <= threshold;
         }
     }
+    isMobileViewport() {
+        return (typeof window !== 'undefined' &&
+            window.innerWidth < COMMON_CONSTANTS.mobileBreakpoint);
+    }
+    isShellMobileChatActive() {
+        if (this.isStandalone || this.isFramed || !this.isMobileViewport()) {
+            return false;
+        }
+        const el = this.scrollContainer?.nativeElement || this.hostRef?.nativeElement;
+        if (!el) {
+            return false;
+        }
+        const shell = typeof el.closest === 'function' ? el.closest('.rtsee-shell') : null;
+        if (shell && !shell.classList.contains('rtsee-shell-messenger-active')) {
+            return false;
+        }
+        return el.getClientRects().length > 0;
+    }
+    computeIsWindowScroll() {
+        if (this.isStandalone) {
+            return true;
+        }
+        if (this.isFramed) {
+            return false;
+        }
+        return this.isMobileViewport();
+    }
+    updateScrollMode() {
+        this.isWindowScroll = this.computeIsWindowScroll();
+    }
     enforceInitialScroll() {
         this.shouldStickToBottom = true;
         this.scrollToBottom();
@@ -3834,19 +4842,21 @@ class MessagesListComponent {
         this.firstGroupedMessage = this.chat.messages[0];
         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)", "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\n        class=\"rts-messenger-message-wrapper\"\n        data-ugc=\"true\"\n        rel=\"ugc\"\n        [ngClass]=\"{\n          'rts-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n        }\"\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\n          class=\"rts-messenger-message-sender-name\"\n          itemprop=\"author\"\n          itemscope\n          itemtype=\"https://schema.org/Person\"\n        >\n          <p itemprop=\"name\">{{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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessagesListComponent, deps: [{ token: TimeFormatHelperService }, { token: i1$3.ViewportScroller }, { token: i0.ElementRef }, { 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", isFramed: "isFramed" }, 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]=\"isWindowScroll\"\n     [infiniteScrollContainer]=\"isWindowScroll ? null : scrollBlock\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scrolled)=\"onScroll()\"\n     (scroll)=\"onContainerScroll($event)\"\n     [ngClass]=\"{\n       'rts-messages-list-scrollable': !isWindowScroll\n     }\"\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\n        class=\"rts-messenger-message-wrapper\"\n        data-ugc=\"true\"\n        rel=\"ugc\"\n        [ngClass]=\"{\n          'rts-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n        }\"\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\n          class=\"rts-messenger-message-sender-name\"\n          itemprop=\"author\"\n          itemscope\n          itemtype=\"https://schema.org/Person\"\n        >\n          <p itemprop=\"name\">{{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)=\"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\n        class=\"rts-messenger-message-wrapper\"\n        data-ugc=\"true\"\n        rel=\"ugc\"\n        [ngClass]=\"{\n          'rts-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n        }\"\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\n          class=\"rts-messenger-message-sender-name\"\n          itemprop=\"author\"\n          itemscope\n          itemtype=\"https://schema.org/Person\"\n        >\n          <p itemprop=\"name\">{{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: [{
+            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]=\"isWindowScroll\"\n     [infiniteScrollContainer]=\"isWindowScroll ? null : scrollBlock\"\n     (scrolledUp)=\"onScrolledToTop()\"\n     (scrolled)=\"onScroll()\"\n     (scroll)=\"onContainerScroll($event)\"\n     [ngClass]=\"{\n       'rts-messages-list-scrollable': !isWindowScroll\n     }\"\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\n        class=\"rts-messenger-message-wrapper\"\n        data-ugc=\"true\"\n        rel=\"ugc\"\n        [ngClass]=\"{\n          'rts-messenger-message-wrapper-with-sender': messageGroup.senderVisible\n        }\"\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\n          class=\"rts-messenger-message-sender-name\"\n          itemprop=\"author\"\n          itemscope\n          itemtype=\"https://schema.org/Person\"\n        >\n          <p itemprop=\"name\">{{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: i1$3.ViewportScroller }, { type: i0.ElementRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }], propDecorators: { chat: [{
                 type: Input
             }], messenger: [{
                 type: Input
+            }], isFramed: [{
+                type: Input
             }], scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollBlock']
@@ -4288,75 +5298,6 @@ 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;
@@ -4398,6 +5339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class ChatComponent {
     constructor() {
+        this.isFramed = false;
         this.showInvite = false;
     }
     get isSoleAdmin() {
@@ -4443,7 +5385,7 @@ 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: "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"] }] }); }
+    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", isFramed: "isFramed" }, ngImport: i0, template: "<div class=\"rts-chat\"\n     [ngClass]=\"{\n        'rts-chat-standalone': chat.isStandalone,\n        'rts-chat-in-viewport': chat.isInViewPort,\n        'rts-chat-framed': isFramed\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\" [isFramed]=\"isFramed\"></rtsee-messages-list>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessagesListComponent, selector: "rtsee-messages-list", inputs: ["chat", "messenger", "isFramed"] }, { 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,
@@ -4453,7 +5395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         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  @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" }]
+                    ], standalone: true, template: "<div class=\"rts-chat\"\n     [ngClass]=\"{\n        'rts-chat-standalone': chat.isStandalone,\n        'rts-chat-in-viewport': chat.isInViewPort,\n        'rts-chat-framed': isFramed\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\" [isFramed]=\"isFramed\"></rtsee-messages-list>\n  </div>\n</div>\n" }]
         }], propDecorators: { chat: [{
                 type: Input
             }], chatData: [{
@@ -4462,6 +5404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], messenger: [{
                 type: Input
+            }], isFramed: [{
+                type: Input
             }] } });
 
 class ManageProfileComponent {
@@ -4833,11 +5777,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }] } });
 
 class MessengerComponent {
+    constructor() {
+        this.isFramed = false;
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
+    }
     onScroll() {
         void this.messenger.loadChats();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger" }, ngImport: i0, template: "<div class=\"rts-messenger rts-theme-dark\" [ngClass]=\"{\n  'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rts-messenger-folded': messenger.folded,\n  'rts-messenger-overlay-window': messenger.isOverlayPageOpened\n}\">\n  @if (messenger.manageProfile) {\n    <div class=\"rts-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\n  }\n\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\n\n  <div class=\"rts-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rts-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ManageProfileComponent, selector: "rtsee-manage-profile", inputs: ["messenger", "manageProfile"] }, { kind: "component", type: PaymentPageComponent, selector: "rtsee-payment-page", inputs: ["messenger", "theme"] }, { kind: "component", type: PaymentValidationPageComponent, selector: "rtsee-payment-validation-page", inputs: ["messenger", "theme"] }, { kind: "component", type: ManagePlanComponent, selector: "rtsee-manage-plan", inputs: ["messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MessengerComponent, isStandalone: true, selector: "rtsee-messenger", inputs: { messenger: "messenger", isFramed: "isFramed" }, ngImport: i0, template: "<div class=\"rts-messenger rts-theme-dark\" [ngClass]=\"{\n  'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails || messenger.manageChatInfo || messenger.inviteUserOpened,\n  'rts-messenger-folded': messenger.folded,\n  'rts-messenger-overlay-window': messenger.isOverlayPageOpened,\n  'rts-messenger-framed': isFramed\n}\">\n  @if (messenger.pendingInviteToken) {\n    <div class=\"rts-invite-popup-modal\">\n      <div class=\"rts-invite-popup-content\">\n        <span class=\"material-icons-outlined rts-invite-popup-icon\">mail_outline</span>\n        <div class=\"rts-invite-popup-text\">\n          @if (messenger.pendingInviteInfo?.inviter?.name) {\n            <strong>{{ messenger.pendingInviteInfo?.inviter?.name }}</strong>\n            <span> {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_POPUP_TEXT] }}</span>\n            @if (messenger.pendingInviteInfo?.chat?.name) {\n              <span class=\"rts-invite-popup-chat-name\"> ({{ messenger.pendingInviteInfo?.chat?.name }})</span>\n            }\n          } @else {\n            <span>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_POPUP_GENERIC_TEXT] }}</span>\n          }\n        </div>\n      </div>\n      <div class=\"rts-invite-popup-actions\">\n        <button type=\"button\"\n                class=\"rts-btn rts-btn-secondary rts-invite-popup-btn\"\n                [disabled]=\"messenger.inviteJoinInProgress\"\n                (click)=\"messenger.ignoreChatInvitation()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_IGNORE_BUTTON] }}\n        </button>\n        <button type=\"button\"\n                class=\"rts-btn rts-btn-primary rts-invite-popup-btn\"\n                [disabled]=\"messenger.inviteJoinInProgress\"\n                (click)=\"messenger.acceptChatInvitation()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_JOIN_BUTTON] }}\n        </button>\n      </div>\n    </div>\n  }\n  @if (messenger.manageProfile) {\n    <div class=\"rts-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\n  }\n\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\n  <div class=\"rts-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\" [isFramed]=\"isFramed\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n  <div class=\"rts-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: MessengerHeaderComponent, selector: "rtsee-messenger-header", inputs: ["messenger"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChatsListComponent, selector: "rtsee-chats-list", inputs: ["messenger", "chats"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger", "isFramed"] }, { kind: "component", type: PreloaderComponent, selector: "rtsee-preloader", inputs: ["diameter", "color"] }, { kind: "component", type: ProfileComponent, selector: "rtsee-profile", inputs: ["messenger", "peer"] }, { kind: "component", type: ManageProfileComponent, selector: "rtsee-manage-profile", inputs: ["messenger", "manageProfile"] }, { kind: "component", type: PaymentPageComponent, selector: "rtsee-payment-page", inputs: ["messenger", "theme"] }, { kind: "component", type: PaymentValidationPageComponent, selector: "rtsee-payment-validation-page", inputs: ["messenger", "theme"] }, { kind: "component", type: ManagePlanComponent, selector: "rtsee-manage-plan", inputs: ["messenger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MessengerComponent, decorators: [{
             type: Component,
@@ -4855,9 +5803,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         PaymentPageComponent,
                         PaymentValidationPageComponent,
                         ManagePlanComponent,
-                    ], standalone: true, template: "<div class=\"rts-messenger rts-theme-dark\" [ngClass]=\"{\n  'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails,\n  'rts-messenger-folded': messenger.folded,\n  'rts-messenger-overlay-window': messenger.isOverlayPageOpened\n}\">\n  @if (messenger.manageProfile) {\n    <div class=\"rts-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\n  }\n\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\n\n  <div class=\"rts-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n  <div class=\"rts-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rts-messenger rts-theme-dark\" [ngClass]=\"{\n  'rts-messenger-header-expanded': messenger.openedProfile || messenger.openedChatDetails || messenger.manageChatInfo || messenger.inviteUserOpened,\n  'rts-messenger-folded': messenger.folded,\n  'rts-messenger-overlay-window': messenger.isOverlayPageOpened,\n  'rts-messenger-framed': isFramed\n}\">\n  @if (messenger.pendingInviteToken) {\n    <div class=\"rts-invite-popup-modal\">\n      <div class=\"rts-invite-popup-content\">\n        <span class=\"material-icons-outlined rts-invite-popup-icon\">mail_outline</span>\n        <div class=\"rts-invite-popup-text\">\n          @if (messenger.pendingInviteInfo?.inviter?.name) {\n            <strong>{{ messenger.pendingInviteInfo?.inviter?.name }}</strong>\n            <span> {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_POPUP_TEXT] }}</span>\n            @if (messenger.pendingInviteInfo?.chat?.name) {\n              <span class=\"rts-invite-popup-chat-name\"> ({{ messenger.pendingInviteInfo?.chat?.name }})</span>\n            }\n          } @else {\n            <span>{{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_POPUP_GENERIC_TEXT] }}</span>\n          }\n        </div>\n      </div>\n      <div class=\"rts-invite-popup-actions\">\n        <button type=\"button\"\n                class=\"rts-btn rts-btn-secondary rts-invite-popup-btn\"\n                [disabled]=\"messenger.inviteJoinInProgress\"\n                (click)=\"messenger.ignoreChatInvitation()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_IGNORE_BUTTON] }}\n        </button>\n        <button type=\"button\"\n                class=\"rts-btn rts-btn-primary rts-invite-popup-btn\"\n                [disabled]=\"messenger.inviteJoinInProgress\"\n                (click)=\"messenger.acceptChatInvitation()\"\n        >\n          {{ messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_JOIN_BUTTON] }}\n        </button>\n      </div>\n    </div>\n  }\n  @if (messenger.manageProfile) {\n    <div class=\"rts-manage-profile\">\n      <rtsee-manage-profile [manageProfile]=\"messenger.manageProfile\"\n                            [messenger]=\"messenger\"\n      ></rtsee-manage-profile>\n    </div>\n  }\n\n  @if (messenger.isPaymentPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-payment-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-page>\n    </div>\n  }\n\n  @if (messenger.isPaymentValidationPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-payment-validation-page [messenger]=\"messenger\" theme=\"dark\"></rtsee-payment-validation-page>\n    </div>\n  }\n\n  @if (messenger.isManagePlanPageOpened) {\n    <div class=\"rts-payment-page-container\">\n      <rtsee-manage-plan [messenger]=\"messenger\"></rtsee-manage-plan>\n    </div>\n  }\n  <div class=\"rts-messenger-body-container\"\n       infiniteScroll\n       [infiniteScrollDistance]=\"2\"\n       [infiniteScrollThrottle]=\"50\"\n       [scrollWindow]=\"false\"\n       (scrolled)=\"onScroll()\"\n  >\n    @if (messenger.openedChat) {\n      <rtsee-chat [messenger]=\"messenger\" [chat]=\"messenger.openedChat\" [isFramed]=\"isFramed\"></rtsee-chat>\n    } @else if (!messenger.openedChat) {\n      <rtsee-chats-list [chats]=\"messenger.chats\" [messenger]=\"messenger\"></rtsee-chats-list>\n    } @else if (messenger.openedProfile) {\n      <rtsee-profile></rtsee-profile>\n    }\n    @if (messenger.loadingChatsInProgress) {\n      <rtsee-preloader [diameter]=\"50\" ></rtsee-preloader>\n    }\n  </div>\n  <div class=\"rts-messenger-header-container\">\n    <rtsee-messenger-header [messenger]=\"messenger\"\n    ></rtsee-messenger-header>\n  </div>\n</div>\n" }]
         }], propDecorators: { messenger: [{
                 type: Input
+            }], isFramed: [{
+                type: Input
             }] } });
 
 class BaseEventWidgetComponent {
@@ -5087,6 +6037,245 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             args: [{ selector: 'rtsee-slide-number-changed-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget slide-number-changed-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge slide-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\"\n        >view_carousel</span\n      >\n      <span class=\"widget-badge-label\">\n        Slide {{ slideNumber }}\n        @if (totalSlides) {\n          / {{ totalSlides }}\n        }\n      </span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently viewing slide' : 'Time spent on this slide'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"slideText\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder slide-placeholder\">\n          <span class=\"material-icons-outlined\">image</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"slideText\">{{ slideText }}</span>\n      @if (storyName) {\n        @if (storyUrl) {\n          <a\n            [href]=\"storyUrl\"\n            target=\"_blank\"\n            class=\"widget-story-link\"\n            [title]=\"storyName\"\n          >\n            <span class=\"widget-story-name\">{{ storyName }}</span>\n            <span class=\"material-icons-outlined external-icon\"\n              >open_in_new</span\n            >\n          </a>\n        } @else {\n          <span class=\"widget-story-name\">{{ storyName }}</span>\n        }\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
+class ProfileOpenedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get userName() {
+        const raw = this.event?.payload?.text ||
+            this.event?.payload?.data?.name ||
+            'User Profile';
+        return String(raw).replace(/\*/g, ' ').trim();
+    }
+    get imageUrl() {
+        return (this.event?.payload?.url ||
+            this.event?.payload?.imageUrl ||
+            this.event?.payload?.data?.imageUrl ||
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileOpenedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ProfileOpenedWidgetComponent, isStandalone: true, selector: "rtsee-profile-opened-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget profile-opened-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge profile-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">person</span>\n      <span class=\"widget-badge-label\">Profile Opened</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"userName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder profile-placeholder\">\n          <span class=\"material-icons-outlined\">person</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"userName\">{{ userName }}</span>\n      <span class=\"widget-subtitle\">Viewing profile</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ProfileOpenedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-profile-opened-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget profile-opened-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge profile-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">person</span>\n      <span class=\"widget-badge-label\">Profile Opened</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"userName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder profile-placeholder\">\n          <span class=\"material-icons-outlined\">person</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"userName\">{{ userName }}</span>\n      <span class=\"widget-subtitle\">Viewing profile</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class ChatOpenedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get chatName() {
+        const raw = this.event?.payload?.text ||
+            this.event?.payload?.data?.chatName ||
+            'Chat';
+        return String(raw).replace(/\*/g, ' ').trim();
+    }
+    get imageUrl() {
+        return (this.event?.payload?.imageUrl ||
+            this.event?.payload?.url ||
+            this.event?.payload?.data?.imageUrl ||
+            null);
+    }
+    get chatTypeLabel() {
+        const type = this.event?.payload?.data?.chatType;
+        if (type === 'channel')
+            return 'Channel conversation';
+        if (type === 'group')
+            return 'Group conversation';
+        return 'Active conversation';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatOpenedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatOpenedWidgetComponent, isStandalone: true, selector: "rtsee-chat-opened-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget chat-opened-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge chat-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">forum</span>\n      <span class=\"widget-badge-label\">Chat Opened</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"chatName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder chat-placeholder\">\n          <span class=\"material-icons-outlined\">chat_bubble_outline</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"chatName\">{{ chatName }}</span>\n      <span class=\"widget-subtitle\">{{ chatTypeLabel }}</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatOpenedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-chat-opened-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget chat-opened-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge chat-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">forum</span>\n      <span class=\"widget-badge-label\">Chat Opened</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"chatName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder chat-placeholder\">\n          <span class=\"material-icons-outlined\">chat_bubble_outline</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"chatName\">{{ chatName }}</span>\n      <span class=\"widget-subtitle\">{{ chatTypeLabel }}</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class ChatCreatedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get chatName() {
+        const raw = this.event?.payload?.text ||
+            this.event?.payload?.data?.chatName ||
+            'New Chat';
+        return String(raw).replace(/\*/g, ' ').trim();
+    }
+    get imageUrl() {
+        return (this.event?.payload?.imageUrl ||
+            this.event?.payload?.data?.imageUrl ||
+            null);
+    }
+    get chatTypeLabel() {
+        const type = this.event?.payload?.data?.chatType || this.event?.payload?.url;
+        if (type === 'channel')
+            return 'Created channel';
+        if (type === 'group')
+            return 'Created group chat';
+        return 'Created new chat';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatCreatedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatCreatedWidgetComponent, isStandalone: true, selector: "rtsee-chat-created-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget chat-created-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge created-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">add_comment</span>\n      <span class=\"widget-badge-label\">Chat Created</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"chatName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder created-placeholder\">\n          <span class=\"material-icons-outlined\">group_add</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"chatName\">{{ chatName }}</span>\n      <span class=\"widget-subtitle\">{{ chatTypeLabel }}</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatCreatedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-chat-created-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget chat-created-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge created-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">add_comment</span>\n      <span class=\"widget-badge-label\">Chat Created</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"chatName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder created-placeholder\">\n          <span class=\"material-icons-outlined\">group_add</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"chatName\">{{ chatName }}</span>\n      <span class=\"widget-subtitle\">{{ chatTypeLabel }}</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class ChatMemberInviteClickedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get chatName() {
+        const raw = this.event?.payload?.text ||
+            this.event?.payload?.data?.chatName ||
+            'Chat';
+        return String(raw).replace(/\*/g, ' ').trim();
+    }
+    get imageUrl() {
+        return (this.event?.payload?.imageUrl ||
+            this.event?.payload?.data?.imageUrl ||
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatMemberInviteClickedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatMemberInviteClickedWidgetComponent, isStandalone: true, selector: "rtsee-chat-member-invite-clicked-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget chat-member-invite-clicked-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge invite-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">person_add</span>\n      <span class=\"widget-badge-label\">Member Invite</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"chatName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder invite-placeholder\">\n          <span class=\"material-icons-outlined\">link</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"chatName\">{{ chatName }}</span>\n      <span class=\"widget-subtitle\">Invitation link</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatMemberInviteClickedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-chat-member-invite-clicked-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget chat-member-invite-clicked-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge invite-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">person_add</span>\n      <span class=\"widget-badge-label\">Member Invite</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"chatName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder invite-placeholder\">\n          <span class=\"material-icons-outlined\">link</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"chatName\">{{ chatName }}</span>\n      <span class=\"widget-subtitle\">Invitation link</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class ChatAgentCreatedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get agentName() {
+        const raw = this.event?.payload?.text ||
+            this.event?.payload?.data?.agentName ||
+            'AI Agent';
+        return String(raw).replace(/\*/g, ' ').trim();
+    }
+    get chatName() {
+        const raw = this.event?.payload?.data?.chatName ||
+            this.event?.payload?.url ||
+            '';
+        const cleaned = String(raw).replace(/\*/g, ' ').trim();
+        return cleaned ? `Added to ${cleaned}` : 'AI Agent added to chat';
+    }
+    get imageUrl() {
+        return (this.event?.payload?.imageUrl ||
+            this.event?.payload?.data?.imageUrl ||
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatAgentCreatedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatAgentCreatedWidgetComponent, isStandalone: true, selector: "rtsee-chat-agent-created-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget chat-agent-created-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge agent-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">smart_toy</span>\n      <span class=\"widget-badge-label\">Agent Created</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"agentName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder agent-placeholder\">\n          <span class=\"material-icons-outlined\">smart_toy</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"agentName\">{{ agentName }}</span>\n      <span class=\"widget-subtitle\" [title]=\"chatName\">{{ chatName }}</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatAgentCreatedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-chat-agent-created-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget chat-agent-created-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge agent-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">smart_toy</span>\n      <span class=\"widget-badge-label\">Agent Created</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"agentName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder agent-placeholder\">\n          <span class=\"material-icons-outlined\">smart_toy</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"agentName\">{{ agentName }}</span>\n      <span class=\"widget-subtitle\" [title]=\"chatName\">{{ chatName }}</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class ChatMessageSentWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get chatName() {
+        const raw = this.event?.payload?.text ||
+            this.event?.payload?.data?.chatName ||
+            'Chat';
+        return String(raw).replace(/\*/g, ' ').trim();
+    }
+    get imageUrl() {
+        return (this.event?.payload?.imageUrl ||
+            this.event?.payload?.data?.imageUrl ||
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatMessageSentWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ChatMessageSentWidgetComponent, isStandalone: true, selector: "rtsee-chat-message-sent-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget chat-message-sent-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge message-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">send</span>\n      <span class=\"widget-badge-label\">Message Sent</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"chatName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder message-placeholder\">\n          <span class=\"material-icons-outlined\">chat</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"chatName\">{{ chatName }}</span>\n      <span class=\"widget-subtitle\">Sent a message</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ChatMessageSentWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-chat-message-sent-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget chat-message-sent-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge message-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">send</span>\n      <span class=\"widget-badge-label\">Message Sent</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media avatar-media\">\n      @if (imageUrl) {\n        <img\n          [src]=\"imageUrl\"\n          [alt]=\"chatName\"\n          class=\"widget-thumbnail-image\"\n        />\n      } @else {\n        <div class=\"widget-thumbnail-placeholder message-placeholder\">\n          <span class=\"material-icons-outlined\">chat</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"chatName\">{{ chatName }}</span>\n      <span class=\"widget-subtitle\">Sent a message</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class ApplicationEventWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get eventAction() {
+        const key = this.event?.widget || this.event?.name || '';
+        if (key.includes('deleted'))
+            return 'deleted';
+        if (key.includes('updated'))
+            return 'updated';
+        return 'created';
+    }
+    get badgeLabel() {
+        if (this.eventAction === 'deleted')
+            return 'App Deleted';
+        if (this.eventAction === 'updated')
+            return 'App Updated';
+        return 'App Created';
+    }
+    get badgeIcon() {
+        if (this.eventAction === 'deleted')
+            return 'delete_outline';
+        if (this.eventAction === 'updated')
+            return 'edit';
+        return 'add_box';
+    }
+    get badgeClass() {
+        if (this.eventAction === 'deleted')
+            return 'app-deleted-badge';
+        if (this.eventAction === 'updated')
+            return 'app-updated-badge';
+        return 'app-created-badge';
+    }
+    get placeholderClass() {
+        if (this.eventAction === 'deleted')
+            return 'app-deleted-placeholder';
+        if (this.eventAction === 'updated')
+            return 'app-updated-placeholder';
+        return 'app-created-placeholder';
+    }
+    get appName() {
+        return (this.event?.payload?.text ||
+            this.event?.payload?.data?.name ||
+            'Application');
+    }
+    get appUrl() {
+        return (this.event?.payload?.url ||
+            this.event?.payload?.data?.url ||
+            null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ApplicationEventWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ApplicationEventWidgetComponent, isStandalone: true, selector: "rtsee-application-event-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget application-event-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge\" [ngClass]=\"badgeClass\">\n      <span class=\"material-icons-outlined widget-badge-icon\">{{ badgeIcon }}</span>\n      <span class=\"widget-badge-label\">{{ badgeLabel }}</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      <div class=\"widget-thumbnail-placeholder\" [ngClass]=\"placeholderClass\">\n        <span class=\"material-icons-outlined\">apps</span>\n      </div>\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"appName\">{{ appName }}</span>\n      @if (appUrl) {\n        <a\n          [href]=\"appUrl\"\n          target=\"_blank\"\n          class=\"widget-story-link\"\n          [title]=\"appUrl\"\n        >\n          <span class=\"widget-story-name\">{{ appUrl }}</span>\n          <span class=\"material-icons-outlined external-icon\">open_in_new</span>\n        </a>\n      } @else {\n        <span class=\"widget-subtitle\">Application settings</span>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ApplicationEventWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-application-event-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget application-event-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge\" [ngClass]=\"badgeClass\">\n      <span class=\"material-icons-outlined widget-badge-icon\">{{ badgeIcon }}</span>\n      <span class=\"widget-badge-label\">{{ badgeLabel }}</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      <div class=\"widget-thumbnail-placeholder\" [ngClass]=\"placeholderClass\">\n        <span class=\"material-icons-outlined\">apps</span>\n      </div>\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"appName\">{{ appName }}</span>\n      @if (appUrl) {\n        <a\n          [href]=\"appUrl\"\n          target=\"_blank\"\n          class=\"widget-story-link\"\n          [title]=\"appUrl\"\n        >\n          <span class=\"widget-story-name\">{{ appUrl }}</span>\n          <span class=\"material-icons-outlined external-icon\">open_in_new</span>\n        </a>\n      } @else {\n        <span class=\"widget-subtitle\">Application settings</span>\n      }\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
+class RequestDemoClickedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd) {
+        super(cd);
+    }
+    get title() {
+        return this.event?.payload?.text || 'Request A Demo';
+    }
+    get pageUrl() {
+        return this.event?.payload?.url || null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RequestDemoClickedWidgetComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: RequestDemoClickedWidgetComponent, isStandalone: true, selector: "rtsee-request-demo-clicked-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"rtsee-event-widget request-demo-clicked-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge demo-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">campaign</span>\n      <span class=\"widget-badge-label\">Demo Requested</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      <div class=\"widget-thumbnail-placeholder demo-placeholder\">\n        <span class=\"material-icons-outlined\">event_available</span>\n      </div>\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"title\">{{ title }}</span>\n      <span class=\"widget-subtitle\">Opened demo request modal</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RequestDemoClickedWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rtsee-request-demo-clicked-widget', standalone: true, imports: [CommonModule], template: "<div class=\"rtsee-event-widget request-demo-clicked-widget\">\n  <div class=\"widget-header\">\n    <div class=\"widget-badge demo-badge\">\n      <span class=\"material-icons-outlined widget-badge-icon\">campaign</span>\n      <span class=\"widget-badge-label\">Demo Requested</span>\n    </div>\n    <div\n      class=\"widget-timer\"\n      [class.live]=\"isLive\"\n      [title]=\"isLive ? 'Currently active' : 'Time spent before next event'\"\n    >\n      <span class=\"material-icons-outlined widget-timer-icon\">timer</span>\n      <span class=\"widget-timer-text\">{{ durationText }}</span>\n    </div>\n  </div>\n\n  <div class=\"widget-body\">\n    <div class=\"widget-media\">\n      <div class=\"widget-thumbnail-placeholder demo-placeholder\">\n        <span class=\"material-icons-outlined\">event_available</span>\n      </div>\n    </div>\n\n    <div class=\"widget-info\">\n      <span class=\"widget-title\" [title]=\"title\">{{ title }}</span>\n      <span class=\"widget-subtitle\">Opened demo request modal</span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
 class EventsWidgetsService {
     constructor() {
         this.widgetsMap = [
@@ -5102,10 +6291,53 @@ class EventsWidgetsService {
                 name: 'slide-number-changed',
                 component: SlideNumberChangedWidgetComponent,
             },
+            {
+                name: 'profile-opened',
+                component: ProfileOpenedWidgetComponent,
+            },
+            {
+                name: 'chat-opened',
+                component: ChatOpenedWidgetComponent,
+            },
+            {
+                name: 'chat-created',
+                component: ChatCreatedWidgetComponent,
+            },
+            {
+                name: 'chat-member-invite-clicked',
+                component: ChatMemberInviteClickedWidgetComponent,
+            },
+            {
+                name: 'chat-agent-created',
+                component: ChatAgentCreatedWidgetComponent,
+            },
+            {
+                name: 'chat-message-sent',
+                component: ChatMessageSentWidgetComponent,
+            },
+            {
+                name: 'application-created',
+                component: ApplicationEventWidgetComponent,
+            },
+            {
+                name: 'application-updated',
+                component: ApplicationEventWidgetComponent,
+            },
+            {
+                name: 'application-deleted',
+                component: ApplicationEventWidgetComponent,
+            },
+            {
+                name: 'request-demo-clicked',
+                component: RequestDemoClickedWidgetComponent,
+            },
         ];
     }
     getWidgetComponentByName(name) {
         /* eslint-disable */
+        if (!name) {
+            return null;
+        }
         const mapping = this.widgetsMap.find((e) => e.name === name);
         if (!mapping) {
             return null;
@@ -5131,9 +6363,24 @@ class EventThumbnailComponent {
         this.cd = cd;
         this.timeInAgoFormat = '';
     }
+    get widgetName() {
+        return this.event?.widget || this.event?.name;
+    }
+    get hasWidget() {
+        return !!this.widgetsService.getWidgetComponentByName(this.widgetName);
+    }
+    get hasDetails() {
+        const payload = this.event?.payload;
+        if (!payload) {
+            return false;
+        }
+        const hasDataEntries = typeof payload.data === 'object' &&
+            payload.data !== null &&
+            Object.keys(payload.data).length > 0;
+        return !!(hasDataEntries || payload.url || payload.text);
+    }
     ngOnInit() {
-        const eventData = this.event.payload?.data || this.event.data;
-        if (eventData) {
+        if (this.hasDetails) {
             this.generateTooltip();
         }
         this.timeInAgoFormat = this.timeFormatService.toAgo(this.event.createdAt);
@@ -5142,27 +6389,30 @@ class EventThumbnailComponent {
         }, 20000);
     }
     generateTooltip() {
-        /* eslint-disable */
-        let tooltip = '';
-        const eventData = this.event.payload?.data || this.event.data;
-        if (typeof eventData !== 'object' || !eventData) {
+        const payload = this.event?.payload;
+        if (!payload) {
             return;
         }
-        try {
-            for (const key in eventData) {
-                if (eventData.hasOwnProperty(key)) {
-                    if (tooltip) {
-                        tooltip += '\n';
-                    }
-                    tooltip += key + ' -> ' + eventData[key];
+        const entries = new Map();
+        const payloadData = payload.data;
+        if (typeof payloadData === 'object' && payloadData !== null) {
+            Object.entries(payloadData).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    entries.set(key, value);
                 }
-            }
-            this.tooltip = tooltip;
+            });
         }
-        catch (e) {
-            console.log('Failed to generate a tooltip');
+        if (payload.url && !entries.has('url')) {
+            entries.set('url', payload.url);
         }
-        /* eslint-enable */
+        if (payload.text && !entries.has('text')) {
+            entries.set('text', payload.text);
+        }
+        const lines = [];
+        entries.forEach((value, key) => {
+            lines.push(`${key} -> ${String(value)}`);
+        });
+        this.tooltip = lines.join('\n');
     }
     ngOnChanges(changes) {
         if (this.componentRef) {
@@ -5177,12 +6427,8 @@ class EventThumbnailComponent {
     }
     ngAfterViewInit() {
         this.cd.detectChanges();
-        /* eslint-disable */
-        if (this.event.widget) {
-            const widget = this.widgetsService.getWidgetComponentByName(this.event.widget);
-            if (!widget) {
-                return;
-            }
+        const widget = this.widgetsService.getWidgetComponentByName(this.widgetName);
+        if (widget && this.widgetHost) {
             const viewContainerRef = this.widgetHost.viewContainerRef;
             viewContainerRef.clear();
             const componentToShow = this.componentFactoryResolver.resolveComponentFactory(widget);
@@ -5191,14 +6437,13 @@ class EventThumbnailComponent {
             this.componentRef.instance.session = this.session;
             this.componentRef.changeDetectorRef.detectChanges();
         }
-        /* eslint-enable */
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EventThumbnailComponent, deps: [{ token: EventsWidgetsService }, { token: i0.ComponentFactoryResolver }, { token: TimeFormatHelperService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EventThumbnailComponent, isStandalone: true, selector: "rtsee-event-thumbnail", inputs: { event: "event", session: "session" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div\n      class=\"rtsee-events-dashboard-default-event-thumbnail\"\n      [ngClass]=\"{\n        'rtsee-events-dashboard-default-event-thumbnail-with-data':\n          event.payload?.data || event.data,\n      }\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">\n        {{ event.name }}\n      </div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (event.payload?.data || event.data) {\n          <div\n            class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n            [title]=\"tooltip\"\n          >\n            <span\n              class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n              >info</span\n            >\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EventThumbnailComponent, isStandalone: true, selector: "rtsee-event-thumbnail", inputs: { event: "event", session: "session" }, viewQueries: [{ propertyName: "widgetHost", first: true, predicate: WidgetDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (hasWidget) {\n    <ng-template widgetHost></ng-template>\n  } @else {\n    <div\n      class=\"rtsee-events-dashboard-default-event-thumbnail\"\n      [ngClass]=\"{\n        'rtsee-events-dashboard-default-event-thumbnail-with-data': hasDetails,\n      }\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">\n        {{ event.name }}\n      </div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (hasDetails && tooltip) {\n          <div\n            class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n            [title]=\"tooltip\"\n          >\n            <span\n              class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n              >info</span\n            >\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: WidgetDirective, selector: "[widgetHost]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EventThumbnailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-event-thumbnail', imports: [WidgetDirective, NgClass], standalone: true, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (event.widget) {\n    <ng-template widgetHost></ng-template>\n  } @else if (!event.widget) {\n    <div\n      class=\"rtsee-events-dashboard-default-event-thumbnail\"\n      [ngClass]=\"{\n        'rtsee-events-dashboard-default-event-thumbnail-with-data':\n          event.payload?.data || event.data,\n      }\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">\n        {{ event.name }}\n      </div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (event.payload?.data || event.data) {\n          <div\n            class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n            [title]=\"tooltip\"\n          >\n            <span\n              class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n              >info</span\n            >\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-event-thumbnail', imports: [WidgetDirective, NgClass], standalone: true, template: "<div class=\"rtsee-events-dashboard-event-thumbnail\">\n  @if (hasWidget) {\n    <ng-template widgetHost></ng-template>\n  } @else {\n    <div\n      class=\"rtsee-events-dashboard-default-event-thumbnail\"\n      [ngClass]=\"{\n        'rtsee-events-dashboard-default-event-thumbnail-with-data': hasDetails,\n      }\"\n    >\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-name\">\n        {{ event.name }}\n      </div>\n      <div class=\"rtsee-events-dashboard-default-event-thumbnail-info\">\n        @if (hasDetails && tooltip) {\n          <div\n            class=\"rtsee-events-dashboard-default-event-thumbnail-details\"\n            [title]=\"tooltip\"\n          >\n            <span\n              class=\"rtsee-events-dashboard-default-event-thumbnail-details-icon material-icons-outlined\"\n              >info</span\n            >\n          </div>\n        }\n        <div class=\"rtsee-events-dashboard-default-event-thumbnail-time\">\n          <span>{{ timeInAgoFormat }}</span>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: EventsWidgetsService }, { type: i0.ComponentFactoryResolver }, { type: TimeFormatHelperService }, { type: i0.ChangeDetectorRef }], propDecorators: { event: [{
                 type: Input
             }], session: [{
@@ -5337,13 +6582,13 @@ class JoinCallComponent {
             this.recentlyCopied = false;
         }, 2000);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: JoinCallComponent, deps: [{ token: i1$3.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: JoinCallComponent, deps: [{ token: i1$4.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: JoinCallComponent, isStandalone: true, selector: "rtsee-join-call", inputs: { presentation: "presentation", room: "room" }, providers: [MessageService], ngImport: i0, template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.START_A_CALL_BUTTON]\"\n              (click)=\"presentation.emitJoinRoomCallEvent()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-share-call-link\">\n    <div class=\"rtsee-share-call-explain-section\">\n      <div class=\"rtsee-share-call-explain-section-icon\">\n        <span class=\"pi pi-link rtsee-link-icon\"></span>\n      </div>\n      <div class=\"rtsee-share-call-explain-section-text\">\n        <span>Anyone can join your storytelling session using this link.</span>\n      </div>\n    </div>\n    <div class=\"rtsee-share-call-link-section\">\n      <p-toast position=\"bottom-center\" />\n      <p-button [icon]=\"recentlyCopied ? 'pi pi-check' : 'pi pi-copy'\"\n                severity=\"secondary\"\n                class=\"rtsee-share-call-link-copy-btn\"\n                [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + room.id\"\n                (cdkCopyToClipboardCopied)=\"copyClicked()\"\n      ></p-button>\n      <p-message severity=\"info\"\n                 class=\"rtsee-share-call-link-text\"\n      >{{ window.location.origin + '?room_id=' + room.id }}</p-message>\n    </div>\n  </div>\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: CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { 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: Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: JoinCallComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-join-call', imports: [Button, CdkCopyToClipboard, Message, Toast], providers: [MessageService], template: "<div class=\"rtsee-join-call\">\n  <div class=\"rtsee-join-call-button\">\n    <p-button [label]=\"presentation.labels[RTSeeTextLabelKeys.START_A_CALL_BUTTON]\"\n              (click)=\"presentation.emitJoinRoomCallEvent()\"\n    ></p-button>\n  </div>\n  <div class=\"rtsee-share-call-link\">\n    <div class=\"rtsee-share-call-explain-section\">\n      <div class=\"rtsee-share-call-explain-section-icon\">\n        <span class=\"pi pi-link rtsee-link-icon\"></span>\n      </div>\n      <div class=\"rtsee-share-call-explain-section-text\">\n        <span>Anyone can join your storytelling session using this link.</span>\n      </div>\n    </div>\n    <div class=\"rtsee-share-call-link-section\">\n      <p-toast position=\"bottom-center\" />\n      <p-button [icon]=\"recentlyCopied ? 'pi pi-check' : 'pi pi-copy'\"\n                severity=\"secondary\"\n                class=\"rtsee-share-call-link-copy-btn\"\n                [cdkCopyToClipboard]=\"window.location.origin + '?room_id=' + room.id\"\n                (cdkCopyToClipboardCopied)=\"copyClicked()\"\n      ></p-button>\n      <p-message severity=\"info\"\n                 class=\"rtsee-share-call-link-text\"\n      >{{ window.location.origin + '?room_id=' + room.id }}</p-message>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.MessageService }], propDecorators: { presentation: [{
+        }], ctorParameters: () => [{ type: i1$4.MessageService }], propDecorators: { presentation: [{
                 type: Input
             }], room: [{
                 type: Input
@@ -5982,7 +7227,7 @@ class IllustratorComponent {
         return item.id || `agent-${index}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IllustratorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: IllustratorComponent, isStandalone: true, selector: "rtsee-illustrator", inputs: { illustrator: "illustrator" }, ngImport: i0, template: "<div class=\"rtsee-illustrator-container\" [ngClass]=\"{ 'rtsee-illustrator--expanded': illustrator.expanded }\">\n  <!-- Collapsed Bottom Bar -->\n  @if (!illustrator.expanded) {\n    <div class=\"rtsee-illustrator-collapsed-bar\" (click)=\"toggleExpand()\">\n      <div class=\"rtsee-illustrator-collapsed-info\">\n        <div class=\"rtsee-illustrator-badge-icon\">\n          <i class=\"pi pi-palette\"></i>\n        </div>\n        <div class=\"rtsee-illustrator-collapsed-title\">\n          <span class=\"rtsee-illustrator-brand-text\">NanoBanana Illustrator</span>\n          @if (illustrator.activeAgent) {\n            <span class=\"rtsee-illustrator-agent-pill\">\n              <i class=\"pi pi-bolt\"></i>\n              {{ illustrator.activeAgent.name }}\n            </span>\n          } @else {\n            <span class=\"rtsee-illustrator-agent-pill rtsee-illustrator-agent-pill--waiting\">\n              <i class=\"pi pi-spin pi-spinner\"></i>\n              Waiting for Chat Agent...\n            </span>\n          }\n        </div>\n      </div>\n\n      <div class=\"rtsee-illustrator-collapsed-meta\">\n        @if (illustrator.reviewingGeneratedImage && illustrator.currentGeneratedImageUrl) {\n          <span class=\"rtsee-illustrator-collapsed-review-pill\">\n            <img [src]=\"illustrator.currentGeneratedImageUrl\" alt=\"Draft\" class=\"rtsee-illustrator-collapsed-thumb\" />\n            <span>\u2728 Reviewing Draft</span>\n          </span>\n        }\n        @if (illustrator.contextImages.length > 0) {\n          <span class=\"rtsee-illustrator-context-count\">\n            <i class=\"pi pi-images\"></i>\n            {{ illustrator.activeContextImages.length }} / {{ illustrator.contextImages.length }} context refs\n          </span>\n        }\n        @if (illustrator.prompt) {\n          <span class=\"rtsee-illustrator-prompt-preview\">\n            \"{{ illustrator.prompt.length > 50 ? (illustrator.prompt | slice:0:50) + '\u2026' : illustrator.prompt }}\"\n          </span>\n        }\n        <button type=\"button\" class=\"rtsee-illustrator-expand-btn\" aria-label=\"Expand Illustrator\">\n          <i class=\"pi pi-chevron-up\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Expanded Drawer -->\n  @if (illustrator.expanded) {\n    <div class=\"rtsee-illustrator-expanded-panel\">\n      <!-- Header -->\n      <header class=\"rtsee-illustrator-header\">\n        <div class=\"rtsee-illustrator-title-group\">\n          <div class=\"rtsee-illustrator-icon-circle\">\n            <i class=\"pi pi-palette\"></i>\n          </div>\n          <div>\n            <h3 class=\"rtsee-illustrator-heading\">NanoBanana Illustrator</h3>\n            <p class=\"rtsee-illustrator-subheading\">Generate enchanted fairy tale visuals with rich contextual styling</p>\n          </div>\n        </div>\n\n        <div class=\"rtsee-illustrator-header-controls\">\n          <!-- Agent Picker -->\n          <div class=\"rtsee-illustrator-agent-select-wrapper\">\n            <label class=\"rtsee-illustrator-agent-label\" for=\"rtsee-illustrator-agent-select\">\n              <i class=\"pi pi-sparkles\"></i> Agent:\n            </label>\n            @if (illustrator.agents.length > 0) {\n              <select\n                id=\"rtsee-illustrator-agent-select\"\n                class=\"rtsee-illustrator-select\"\n                [value]=\"illustrator.activeAgentId || ''\"\n                (change)=\"onSelectAgent($event)\"\n              >\n                @for (agent of illustrator.agents; track trackByAgentId($index, agent)) {\n                  <option [value]=\"agent.id\">\n                    {{ agent.name }} {{ agent.model ? '(' + agent.model + ')' : '' }}\n                  </option>\n                }\n              </select>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"rtsee-illustrator-btn-mini\"\n                (click)=\"refreshAgents()\"\n                title=\"Query active agents from RTSeeChat\"\n              >\n                <i class=\"pi pi-refresh\"></i>\n                <span>Connect RTSeeChat</span>\n              </button>\n            }\n          </div>\n\n          <!-- Config Toggle Button -->\n          <button\n            type=\"button\"\n            class=\"rtsee-illustrator-header-btn\"\n            [ngClass]=\"{ 'rtsee-illustrator-header-btn--active': illustrator.configExpanded }\"\n            (click)=\"toggleConfig()\"\n            title=\"Toggle NanoBanana Configuration\"\n          >\n            <i class=\"pi pi-sliders-h\"></i>\n            <span>Config</span>\n            <i class=\"pi\" [ngClass]=\"illustrator.configExpanded ? 'pi-chevron-up' : 'pi-chevron-down'\"></i>\n          </button>\n\n          <!-- Collapse Drawer Button -->\n          <button\n            type=\"button\"\n            class=\"rtsee-illustrator-header-btn rtsee-illustrator-header-btn--close\"\n            (click)=\"toggleExpand()\"\n            aria-label=\"Collapse Illustrator\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        </div>\n      </header>\n\n      <!-- Collapsible Config Section -->\n      @if (illustrator.configExpanded) {\n        <div class=\"rtsee-illustrator-config-panel\">\n          <div class=\"rtsee-illustrator-config-grid\">\n            <!-- Aspect Ratio -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-aspect-ratio\">\n                <i class=\"pi pi-stop\"></i> Aspect Ratio (Default 1:1)\n              </label>\n              <select\n                id=\"cfg-aspect-ratio\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.aspectRatio\"\n              >\n                @for (ratio of aspectRatios; track ratio) {\n                  <option [value]=\"ratio\">{{ ratio }}{{ ratio === '1:1' ? ' (Square - Fairy Tale Default)' : '' }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Style Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-style\">\n                <i class=\"pi pi-paint-brush\"></i> Illustration Style\n              </label>\n              <select\n                id=\"cfg-style\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.style\"\n              >\n                @for (s of styles; track s) {\n                  <option [value]=\"s\">{{ s }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Mood Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-mood\">\n                <i class=\"pi pi-heart\"></i> Mood & Atmosphere\n              </label>\n              <select\n                id=\"cfg-mood\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.mood\"\n              >\n                @for (m of moods; track m) {\n                  <option [value]=\"m\">{{ m }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Lighting Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-lighting\">\n                <i class=\"pi pi-sun\"></i> Lighting\n              </label>\n              <select\n                id=\"cfg-lighting\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.lighting\"\n              >\n                @for (l of lightings; track l) {\n                  <option [value]=\"l\">{{ l }}</option>\n                }\n              </select>\n            </div>\n          </div>\n\n          <!-- Negative Prompt -->\n          <div class=\"rtsee-illustrator-config-item rtsee-illustrator-config-item--full\">\n            <label class=\"rtsee-illustrator-field-label\" for=\"cfg-negative-prompt\">\n              <i class=\"pi pi-ban\"></i> Negative Prompt (What to exclude)\n            </label>\n            <input\n              id=\"cfg-negative-prompt\"\n              type=\"text\"\n              class=\"rtsee-illustrator-input\"\n              [(ngModel)]=\"illustrator.config.negativePrompt\"\n              placeholder=\"e.g. modern items, cars, text, watermark, blurry...\"\n            />\n          </div>\n        </div>\n      }\n\n      <!-- Context Images Section -->\n      @if (illustrator.contextImages.length > 0) {\n        <div class=\"rtsee-illustrator-context-section\">\n          <div class=\"rtsee-illustrator-section-header\">\n            <span class=\"rtsee-illustrator-section-title\">\n              <i class=\"pi pi-images\"></i> Story Context References ({{ illustrator.activeContextImages.length }} of {{ illustrator.contextImages.length }} active)\n            </span>\n            <button\n              type=\"button\"\n              class=\"rtsee-illustrator-btn-text\"\n              (click)=\"illustrator.clearContext()\"\n              title=\"Clear all context references\"\n            >\n              <i class=\"pi pi-trash\"></i> Clear All\n            </button>\n          </div>\n\n          <div class=\"rtsee-illustrator-context-cards\">\n            @for (img of illustrator.contextImages; track trackByImageId($index, img)) {\n              <div class=\"rtsee-illustrator-context-card\" [ngClass]=\"{ 'rtsee-illustrator-context-card--inactive': !img.active }\">\n                <!-- Thumbnail & Active Checkbox -->\n                <div class=\"rtsee-illustrator-card-thumb-col\">\n                  <div class=\"rtsee-illustrator-card-thumb-wrapper\">\n                    @if (img.imageUrl) {\n                      <img [src]=\"img.imageUrl\" [alt]=\"img.title\" class=\"rtsee-illustrator-card-img\" />\n                    } @else {\n                      <div class=\"rtsee-illustrator-card-no-img\">\n                        <i class=\"pi pi-image\"></i>\n                      </div>\n                    }\n                  </div>\n                  <label class=\"rtsee-illustrator-checkbox-label\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"img.active !== false\"\n                      (change)=\"toggleActive(img)\"\n                    />\n                    <span>Active</span>\n                  </label>\n                </div>\n\n                <!-- Editable Fields -->\n                <div class=\"rtsee-illustrator-card-fields\">\n                  <div class=\"rtsee-illustrator-card-header\">\n                    <span class=\"rtsee-illustrator-source-badge\">{{ img.sourceType || 'reference' }}</span>\n                    <input\n                      type=\"text\"\n                      class=\"rtsee-illustrator-card-title-input\"\n                      [(ngModel)]=\"img.title\"\n                      placeholder=\"Reference title...\"\n                    />\n                    <button\n                      type=\"button\"\n                      class=\"rtsee-illustrator-card-remove-btn\"\n                      (click)=\"removeImage(img.id)\"\n                      aria-label=\"Remove image from context\"\n                      title=\"Remove from context\"\n                    >\n                      <i class=\"pi pi-times\"></i>\n                    </button>\n                  </div>\n\n                  <div class=\"rtsee-illustrator-card-inputs-grid\">\n                    <div class=\"rtsee-illustrator-input-group\">\n                      <label class=\"rtsee-illustrator-input-sublabel\">Visual Description (Style / Appearance):</label>\n                      <textarea\n                        class=\"rtsee-illustrator-card-textarea\"\n                        rows=\"2\"\n                        [(ngModel)]=\"img.visualDescription\"\n                        placeholder=\"Key visual features, colors, clothing, texture, lighting...\"\n                      ></textarea>\n                    </div>\n                    <div class=\"rtsee-illustrator-input-group\">\n                      <label class=\"rtsee-illustrator-input-sublabel\">Context / Role Description:</label>\n                      <textarea\n                        class=\"rtsee-illustrator-card-textarea\"\n                        rows=\"2\"\n                        [(ngModel)]=\"img.description\"\n                        placeholder=\"Context or lore in this fairy tale scene...\"\n                      ></textarea>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Generation Error Banner -->\n      @if (illustrator.generationError) {\n        <div class=\"rtsee-illustrator-error-banner\">\n          <i class=\"pi pi-exclamation-triangle\"></i>\n          <span class=\"rtsee-illustrator-error-text\">{{ illustrator.generationError }}</span>\n          <button type=\"button\" class=\"rtsee-illustrator-error-close\" (click)=\"illustrator.generationError = null\" aria-label=\"Dismiss error\">\n            <i class=\"pi pi-times\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Reviewing Generated Image Mode -->\n      @if (illustrator.reviewingGeneratedImage && illustrator.currentGeneratedImageUrl) {\n        <div class=\"rtsee-illustrator-review-panel\">\n          <div class=\"rtsee-illustrator-review-header\">\n            <div class=\"rtsee-illustrator-review-title\">\n              <span class=\"rtsee-illustrator-review-badge\">\n                <i class=\"pi pi-sparkles\"></i> Reviewing Generated Image\n              </span>\n              <span class=\"rtsee-illustrator-review-sub\">Review the result, request iterative modifications, or discard.</span>\n            </div>\n            <div class=\"rtsee-illustrator-review-quick-actions\">\n              <p-button\n                label=\"Accept & Keep\"\n                icon=\"pi pi-check\"\n                severity=\"success\"\n                (click)=\"acceptGeneratedImage()\"\n              />\n              <p-button\n                label=\"Discard\"\n                icon=\"pi pi-trash\"\n                severity=\"danger\"\n                [text]=\"true\"\n                (click)=\"discardGeneratedImage()\"\n              />\n            </div>\n          </div>\n\n          <!-- Image Preview -->\n          <div class=\"rtsee-illustrator-preview-box\">\n            <img [src]=\"illustrator.currentGeneratedImageUrl\" alt=\"Generated fairy tale illustration\" class=\"rtsee-illustrator-preview-img\" />\n            <a [href]=\"illustrator.currentGeneratedImageUrl\" target=\"_blank\" rel=\"noopener\" class=\"rtsee-illustrator-preview-zoom-btn\" title=\"Open full image in new tab\">\n              <i class=\"pi pi-external-link\"></i> Full View\n            </a>\n          </div>\n\n          <!-- Iteration Modification Controls -->\n          <div class=\"rtsee-illustrator-iteration-box\">\n            <div class=\"rtsee-illustrator-iteration-info\">\n              <span class=\"rtsee-illustrator-iteration-tag\">\n                <i class=\"pi pi-refresh\"></i> Request Modifications & Iterate\n              </span>\n              <span class=\"rtsee-illustrator-iteration-context-hint\">\n                <i class=\"pi pi-info-circle\"></i>\n                All active context references ({{ illustrator.activeContextImages.length }}) are sent to NanoBanana alongside this base picture.\n              </span>\n            </div>\n\n            <textarea\n              class=\"rtsee-illustrator-prompt-textarea rtsee-illustrator-prompt-textarea--iteration\"\n              rows=\"3\"\n              [(ngModel)]=\"illustrator.iterationPrompt\"\n              placeholder=\"Describe modifications to apply to this picture (e.g. 'Make the wizard's cloak sapphire blue with silver runes, add glowing fireflies, soften the background trees')...\"\n              (keydown.meta.enter)=\"submitIteration()\"\n              (keydown.control.enter)=\"submitIteration()\"\n            ></textarea>\n\n            <div class=\"rtsee-illustrator-prompt-footer\">\n              <span class=\"rtsee-illustrator-tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                Press <strong>\u2318+Enter</strong> to iterate on this picture.\n              </span>\n\n              <div class=\"rtsee-illustrator-actions\">\n                <p-button\n                  label=\"Discard\"\n                  icon=\"pi pi-trash\"\n                  severity=\"danger\"\n                  [text]=\"true\"\n                  (click)=\"discardGeneratedImage()\"\n                />\n                <p-button\n                  label=\"Iterate & Regenerate\"\n                  icon=\"pi pi-refresh\"\n                  [loading]=\"illustrator.submitting\"\n                  [disabled]=\"!illustrator.canSubmit\"\n                  (click)=\"submitIteration()\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Prompt Input & Submit Action (Standard Mode) -->\n        <div class=\"rtsee-illustrator-prompt-section\">\n          <div class=\"rtsee-illustrator-prompt-box\">\n            <textarea\n              class=\"rtsee-illustrator-prompt-textarea\"\n              rows=\"3\"\n              [(ngModel)]=\"illustrator.prompt\"\n              placeholder=\"Describe the fairy tale illustration to generate (e.g. 'A cozy cottage tucked deep inside the emerald moss woods, magical amber lanterns glowing warmly from the windows, soft fireflies in the air')...\"\n              (keydown.meta.enter)=\"submitPrompt()\"\n              (keydown.control.enter)=\"submitPrompt()\"\n            ></textarea>\n\n            <div class=\"rtsee-illustrator-prompt-footer\">\n              <span class=\"rtsee-illustrator-tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                Press <strong>\u2318+Enter</strong> to submit. Context characters, artifacts, locations & slides are sent to NanoBanana.\n              </span>\n\n              <div class=\"rtsee-illustrator-actions\">\n                <p-button\n                  label=\"Generate Illustration\"\n                  icon=\"pi pi-sparkles\"\n                  [loading]=\"illustrator.submitting\"\n                  [disabled]=\"!illustrator.canSubmit\"\n                  (click)=\"submitPrompt()\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "pipe", type: i2$1.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: IllustratorComponent, isStandalone: true, selector: "rtsee-illustrator", inputs: { illustrator: "illustrator" }, ngImport: i0, template: "<div class=\"rtsee-illustrator-container\" [ngClass]=\"{ 'rtsee-illustrator--expanded': illustrator.expanded }\">\n  <!-- Collapsed Bottom Bar -->\n  @if (!illustrator.expanded) {\n    <div class=\"rtsee-illustrator-collapsed-bar\" (click)=\"toggleExpand()\">\n      <div class=\"rtsee-illustrator-collapsed-info\">\n        <div class=\"rtsee-illustrator-badge-icon\">\n          <i class=\"pi pi-palette\"></i>\n        </div>\n        <div class=\"rtsee-illustrator-collapsed-title\">\n          <span class=\"rtsee-illustrator-brand-text\">NanoBanana Illustrator</span>\n          @if (illustrator.activeAgent) {\n            <span class=\"rtsee-illustrator-agent-pill\">\n              <i class=\"pi pi-bolt\"></i>\n              {{ illustrator.activeAgent.name }}\n            </span>\n          } @else {\n            <span class=\"rtsee-illustrator-agent-pill rtsee-illustrator-agent-pill--waiting\">\n              <i class=\"pi pi-spin pi-spinner\"></i>\n              Waiting for Chat Agent...\n            </span>\n          }\n        </div>\n      </div>\n\n      <div class=\"rtsee-illustrator-collapsed-meta\">\n        @if (illustrator.reviewingGeneratedImage && illustrator.currentGeneratedImageUrl) {\n          <span class=\"rtsee-illustrator-collapsed-review-pill\">\n            <img [src]=\"illustrator.currentGeneratedImageUrl\" alt=\"Draft\" class=\"rtsee-illustrator-collapsed-thumb\" />\n            <span>\u2728 Reviewing Draft</span>\n          </span>\n        }\n        @if (illustrator.contextImages.length > 0) {\n          <span class=\"rtsee-illustrator-context-count\">\n            <i class=\"pi pi-images\"></i>\n            {{ illustrator.activeContextImages.length }} / {{ illustrator.contextImages.length }} context refs\n          </span>\n        }\n        @if (illustrator.prompt) {\n          <span class=\"rtsee-illustrator-prompt-preview\">\n            \"{{ illustrator.prompt.length > 50 ? (illustrator.prompt | slice:0:50) + '\u2026' : illustrator.prompt }}\"\n          </span>\n        }\n        <button type=\"button\" class=\"rtsee-illustrator-expand-btn\" aria-label=\"Expand Illustrator\">\n          <i class=\"pi pi-chevron-up\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Expanded Drawer -->\n  @if (illustrator.expanded) {\n    <div class=\"rtsee-illustrator-expanded-panel\">\n      <!-- Header -->\n      <header class=\"rtsee-illustrator-header\">\n        <div class=\"rtsee-illustrator-title-group\">\n          <div class=\"rtsee-illustrator-icon-circle\">\n            <i class=\"pi pi-palette\"></i>\n          </div>\n          <div>\n            <h3 class=\"rtsee-illustrator-heading\">NanoBanana Illustrator</h3>\n            <p class=\"rtsee-illustrator-subheading\">Generate enchanted fairy tale visuals with rich contextual styling</p>\n          </div>\n        </div>\n\n        <div class=\"rtsee-illustrator-header-controls\">\n          <!-- Agent Picker -->\n          <div class=\"rtsee-illustrator-agent-select-wrapper\">\n            <label class=\"rtsee-illustrator-agent-label\" for=\"rtsee-illustrator-agent-select\">\n              <i class=\"pi pi-sparkles\"></i> Agent:\n            </label>\n            @if (illustrator.agents.length > 0) {\n              <select\n                id=\"rtsee-illustrator-agent-select\"\n                class=\"rtsee-illustrator-select\"\n                [value]=\"illustrator.activeAgentId || ''\"\n                (change)=\"onSelectAgent($event)\"\n              >\n                @for (agent of illustrator.agents; track trackByAgentId($index, agent)) {\n                  <option [value]=\"agent.id\">\n                    {{ agent.name }} {{ agent.model ? '(' + agent.model + ')' : '' }}\n                  </option>\n                }\n              </select>\n            } @else {\n              <button\n                type=\"button\"\n                class=\"rtsee-illustrator-btn-mini\"\n                (click)=\"refreshAgents()\"\n                title=\"Query active agents from RTSeeChat\"\n              >\n                <i class=\"pi pi-refresh\"></i>\n                <span>Connect RTSeeChat</span>\n              </button>\n            }\n          </div>\n\n          <!-- Config Toggle Button -->\n          <button\n            type=\"button\"\n            class=\"rtsee-illustrator-header-btn\"\n            [ngClass]=\"{ 'rtsee-illustrator-header-btn--active': illustrator.configExpanded }\"\n            (click)=\"toggleConfig()\"\n            title=\"Toggle NanoBanana Configuration\"\n          >\n            <i class=\"pi pi-sliders-h\"></i>\n            <span>Config</span>\n            <i class=\"pi\" [ngClass]=\"illustrator.configExpanded ? 'pi-chevron-up' : 'pi-chevron-down'\"></i>\n          </button>\n\n          <!-- Collapse Drawer Button -->\n          <button\n            type=\"button\"\n            class=\"rtsee-illustrator-header-btn rtsee-illustrator-header-btn--close\"\n            (click)=\"toggleExpand()\"\n            aria-label=\"Collapse Illustrator\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        </div>\n      </header>\n\n      <!-- Collapsible Config Section -->\n      @if (illustrator.configExpanded) {\n        <div class=\"rtsee-illustrator-config-panel\">\n          <div class=\"rtsee-illustrator-config-grid\">\n            <!-- Aspect Ratio -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-aspect-ratio\">\n                <i class=\"pi pi-stop\"></i> Aspect Ratio (Default 1:1)\n              </label>\n              <select\n                id=\"cfg-aspect-ratio\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.aspectRatio\"\n              >\n                @for (ratio of aspectRatios; track ratio) {\n                  <option [value]=\"ratio\">{{ ratio }}{{ ratio === '1:1' ? ' (Square - Fairy Tale Default)' : '' }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Style Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-style\">\n                <i class=\"pi pi-paint-brush\"></i> Illustration Style\n              </label>\n              <select\n                id=\"cfg-style\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.style\"\n              >\n                @for (s of styles; track s) {\n                  <option [value]=\"s\">{{ s }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Mood Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-mood\">\n                <i class=\"pi pi-heart\"></i> Mood & Atmosphere\n              </label>\n              <select\n                id=\"cfg-mood\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.mood\"\n              >\n                @for (m of moods; track m) {\n                  <option [value]=\"m\">{{ m }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- Lighting Preset -->\n            <div class=\"rtsee-illustrator-config-item\">\n              <label class=\"rtsee-illustrator-field-label\" for=\"cfg-lighting\">\n                <i class=\"pi pi-sun\"></i> Lighting\n              </label>\n              <select\n                id=\"cfg-lighting\"\n                class=\"rtsee-illustrator-select\"\n                [(ngModel)]=\"illustrator.config.lighting\"\n              >\n                @for (l of lightings; track l) {\n                  <option [value]=\"l\">{{ l }}</option>\n                }\n              </select>\n            </div>\n          </div>\n\n          <!-- Negative Prompt -->\n          <div class=\"rtsee-illustrator-config-item rtsee-illustrator-config-item--full\">\n            <label class=\"rtsee-illustrator-field-label\" for=\"cfg-negative-prompt\">\n              <i class=\"pi pi-ban\"></i> Negative Prompt (What to exclude)\n            </label>\n            <input\n              id=\"cfg-negative-prompt\"\n              type=\"text\"\n              class=\"rtsee-illustrator-input\"\n              [(ngModel)]=\"illustrator.config.negativePrompt\"\n              placeholder=\"e.g. modern items, cars, text, watermark, blurry...\"\n            />\n          </div>\n        </div>\n      }\n\n      <!-- Context Images Section -->\n      @if (illustrator.contextImages.length > 0) {\n        <div class=\"rtsee-illustrator-context-section\">\n          <div class=\"rtsee-illustrator-section-header\">\n            <span class=\"rtsee-illustrator-section-title\">\n              <i class=\"pi pi-images\"></i> Story Context References ({{ illustrator.activeContextImages.length }} of {{ illustrator.contextImages.length }} active)\n            </span>\n            <button\n              type=\"button\"\n              class=\"rtsee-illustrator-btn-text\"\n              (click)=\"illustrator.clearContext()\"\n              title=\"Clear all context references\"\n            >\n              <i class=\"pi pi-trash\"></i> Clear All\n            </button>\n          </div>\n\n          <div class=\"rtsee-illustrator-context-cards\">\n            @for (img of illustrator.contextImages; track trackByImageId($index, img)) {\n              <div class=\"rtsee-illustrator-context-card\" [ngClass]=\"{ 'rtsee-illustrator-context-card--inactive': !img.active }\">\n                <!-- Thumbnail & Active Checkbox -->\n                <div class=\"rtsee-illustrator-card-thumb-col\">\n                  <div class=\"rtsee-illustrator-card-thumb-wrapper\">\n                    @if (img.imageUrl) {\n                      <img [src]=\"img.imageUrl\" [alt]=\"img.title\" class=\"rtsee-illustrator-card-img\" />\n                    } @else {\n                      <div class=\"rtsee-illustrator-card-no-img\">\n                        <i class=\"pi pi-image\"></i>\n                      </div>\n                    }\n                  </div>\n                  <label class=\"rtsee-illustrator-checkbox-label\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"img.active !== false\"\n                      (change)=\"toggleActive(img)\"\n                    />\n                    <span>Active</span>\n                  </label>\n                </div>\n\n                <!-- Editable Fields -->\n                <div class=\"rtsee-illustrator-card-fields\">\n                  <div class=\"rtsee-illustrator-card-header\">\n                    <span class=\"rtsee-illustrator-source-badge\">{{ img.sourceType || 'reference' }}</span>\n                    <input\n                      type=\"text\"\n                      class=\"rtsee-illustrator-card-title-input\"\n                      [(ngModel)]=\"img.title\"\n                      placeholder=\"Reference title...\"\n                    />\n                    <button\n                      type=\"button\"\n                      class=\"rtsee-illustrator-card-remove-btn\"\n                      (click)=\"removeImage(img.id)\"\n                      aria-label=\"Remove image from context\"\n                      title=\"Remove from context\"\n                    >\n                      <i class=\"pi pi-times\"></i>\n                    </button>\n                  </div>\n\n                  <div class=\"rtsee-illustrator-card-inputs-grid\">\n                    <div class=\"rtsee-illustrator-input-group\">\n                      <label class=\"rtsee-illustrator-input-sublabel\">Visual Description (Style / Appearance):</label>\n                      <textarea\n                        class=\"rtsee-illustrator-card-textarea\"\n                        rows=\"2\"\n                        [(ngModel)]=\"img.visualDescription\"\n                        placeholder=\"Key visual features, colors, clothing, texture, lighting...\"\n                      ></textarea>\n                    </div>\n                    <div class=\"rtsee-illustrator-input-group\">\n                      <label class=\"rtsee-illustrator-input-sublabel\">Context / Role Description:</label>\n                      <textarea\n                        class=\"rtsee-illustrator-card-textarea\"\n                        rows=\"2\"\n                        [(ngModel)]=\"img.description\"\n                        placeholder=\"Context or lore in this fairy tale scene...\"\n                      ></textarea>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      <!-- Generation Error Banner -->\n      @if (illustrator.generationError) {\n        <div class=\"rtsee-illustrator-error-banner\">\n          <i class=\"pi pi-exclamation-triangle\"></i>\n          <span class=\"rtsee-illustrator-error-text\">{{ illustrator.generationError }}</span>\n          <button type=\"button\" class=\"rtsee-illustrator-error-close\" (click)=\"illustrator.generationError = null\" aria-label=\"Dismiss error\">\n            <i class=\"pi pi-times\"></i>\n          </button>\n        </div>\n      }\n\n      <!-- Reviewing Generated Image Mode -->\n      @if (illustrator.reviewingGeneratedImage && illustrator.currentGeneratedImageUrl) {\n        <div class=\"rtsee-illustrator-review-panel\">\n          <div class=\"rtsee-illustrator-review-header\">\n            <div class=\"rtsee-illustrator-review-title\">\n              <span class=\"rtsee-illustrator-review-badge\">\n                <i class=\"pi pi-sparkles\"></i> Reviewing Generated Image\n              </span>\n              <span class=\"rtsee-illustrator-review-sub\">Review the result, request iterative modifications, or discard.</span>\n            </div>\n            <div class=\"rtsee-illustrator-review-quick-actions\">\n              <p-button\n                label=\"Accept & Keep\"\n                icon=\"pi pi-check\"\n                severity=\"success\"\n                (click)=\"acceptGeneratedImage()\"\n              />\n              <p-button\n                label=\"Discard\"\n                icon=\"pi pi-trash\"\n                severity=\"danger\"\n                [text]=\"true\"\n                (click)=\"discardGeneratedImage()\"\n              />\n            </div>\n          </div>\n\n          <!-- Image Preview -->\n          <div class=\"rtsee-illustrator-preview-box\">\n            <img [src]=\"illustrator.currentGeneratedImageUrl\" alt=\"Generated fairy tale illustration\" class=\"rtsee-illustrator-preview-img\" />\n            <a [href]=\"illustrator.currentGeneratedImageUrl\" target=\"_blank\" rel=\"noopener\" class=\"rtsee-illustrator-preview-zoom-btn\" title=\"Open full image in new tab\">\n              <i class=\"pi pi-external-link\"></i> Full View\n            </a>\n          </div>\n\n          <!-- Iteration Modification Controls -->\n          <div class=\"rtsee-illustrator-iteration-box\">\n            <div class=\"rtsee-illustrator-iteration-info\">\n              <span class=\"rtsee-illustrator-iteration-tag\">\n                <i class=\"pi pi-refresh\"></i> Request Modifications & Iterate\n              </span>\n              <span class=\"rtsee-illustrator-iteration-context-hint\">\n                <i class=\"pi pi-info-circle\"></i>\n                All active context references ({{ illustrator.activeContextImages.length }}) are sent to NanoBanana alongside this base picture.\n              </span>\n            </div>\n\n            <textarea\n              class=\"rtsee-illustrator-prompt-textarea rtsee-illustrator-prompt-textarea--iteration\"\n              rows=\"3\"\n              [(ngModel)]=\"illustrator.iterationPrompt\"\n              placeholder=\"Describe modifications to apply to this picture (e.g. 'Make the wizard's cloak sapphire blue with silver runes, add glowing fireflies, soften the background trees')...\"\n              (keydown.meta.enter)=\"submitIteration()\"\n              (keydown.control.enter)=\"submitIteration()\"\n            ></textarea>\n\n            <div class=\"rtsee-illustrator-prompt-footer\">\n              <span class=\"rtsee-illustrator-tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                Press <strong>\u2318+Enter</strong> to iterate on this picture.\n              </span>\n\n              <div class=\"rtsee-illustrator-actions\">\n                <p-button\n                  label=\"Discard\"\n                  icon=\"pi pi-trash\"\n                  severity=\"danger\"\n                  [text]=\"true\"\n                  (click)=\"discardGeneratedImage()\"\n                />\n                <p-button\n                  label=\"Iterate & Regenerate\"\n                  icon=\"pi pi-refresh\"\n                  [loading]=\"illustrator.submitting\"\n                  [disabled]=\"!illustrator.canSubmit\"\n                  (click)=\"submitIteration()\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Prompt Input & Submit Action (Standard Mode) -->\n        <div class=\"rtsee-illustrator-prompt-section\">\n          <div class=\"rtsee-illustrator-prompt-box\">\n            <textarea\n              class=\"rtsee-illustrator-prompt-textarea\"\n              rows=\"3\"\n              [(ngModel)]=\"illustrator.prompt\"\n              placeholder=\"Describe the fairy tale illustration to generate (e.g. 'A cozy cottage tucked deep inside the emerald moss woods, magical amber lanterns glowing warmly from the windows, soft fireflies in the air')...\"\n              (keydown.meta.enter)=\"submitPrompt()\"\n              (keydown.control.enter)=\"submitPrompt()\"\n            ></textarea>\n\n            <div class=\"rtsee-illustrator-prompt-footer\">\n              <span class=\"rtsee-illustrator-tip\">\n                <i class=\"pi pi-info-circle\"></i>\n                Press <strong>\u2318+Enter</strong> to submit. Context characters, artifacts, locations & slides are sent to NanoBanana.\n              </span>\n\n              <div class=\"rtsee-illustrator-actions\">\n                <p-button\n                  label=\"Generate Illustration\"\n                  icon=\"pi pi-sparkles\"\n                  [loading]=\"illustrator.submitting\"\n                  [disabled]=\"!illustrator.canSubmit\"\n                  (click)=\"submitPrompt()\"\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "pipe", type: i1$3.SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: IllustratorComponent, decorators: [{
             type: Component,
@@ -6562,7 +7807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class RtseeEntityCommentsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityCommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityCommentsComponent, isStandalone: true, selector: "rtsee-entity-comments", inputs: { messenger: "messenger", chat: "chat", entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-entity-comments\" data-ugc=\"true\" rel=\"ugc\" aria-label=\"User comments\">\n  @if (messenger && chat) {\n    <rtsee-chat [messenger]=\"messenger\"\n                [chatData]=\"chat\"\n                [entity]=\"entity\"\n    ></rtsee-chat>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RtseeEntityCommentsComponent, isStandalone: true, selector: "rtsee-entity-comments", inputs: { messenger: "messenger", chat: "chat", entity: "entity" }, ngImport: i0, template: "<div class=\"rtsee-entity-comments\" data-ugc=\"true\" rel=\"ugc\" aria-label=\"User comments\">\n  @if (messenger && chat) {\n    <rtsee-chat [messenger]=\"messenger\"\n                [chatData]=\"chat\"\n                [entity]=\"entity\"\n    ></rtsee-chat>\n  }\n</div>\n", dependencies: [{ kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger", "isFramed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RtseeEntityCommentsComponent, decorators: [{
             type: Component,
@@ -6622,12 +7867,14 @@ class RateInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RateInputComponent, isStandalone: true, selector: "rtsee-rate-input", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"rtsee-rate-input\">\n  <div class=\"rtsee-rate-input-header\">\n    <h3 class=\"rtsee-rate-input-name\">{{ config.name }}</h3>\n    @if (config.description) {\n      <p class=\"rtsee-rate-input-description\">{{ config.description }}</p>\n    }\n  </div>\n  <div class=\"rtsee-rate-form-container\">\n    <form [formGroup]=\"sendRateForm\" class=\"rtsee-rate-form\">\n      <textarea\n        [invalid]=\"false\"\n        [autoResize]=\"true\"\n        formControlName=\"comment\"\n        pTextarea\n        placeholder=\"Your comment here...\"\n        class=\"rtsee-rate-comment-field\"\n        rows=\"1\"\n        cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <div class=\"rtsee-rate-select-container\">\n    <rtsee-rating [config]=\"config\"></rtsee-rating>\n    @if (!config.rate?.value && showMissingRateError) {\n      <p-message severity=\"error\">Please add your rate!</p-message>\n    }\n  </div>\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: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RateInputComponent, isStandalone: true, selector: "rtsee-rate-input", inputs: { showMissingRateError: "showMissingRateError", config: "config" }, ngImport: i0, template: "<div class=\"rtsee-rate-input\">\n  <div class=\"rtsee-rate-input-header\">\n    <h3 class=\"rtsee-rate-input-name\">{{ config.name }}</h3>\n    @if (config.description) {\n      <p class=\"rtsee-rate-input-description\">{{ config.description }}</p>\n    }\n  </div>\n  <div class=\"rtsee-rate-form-container\">\n    <form [formGroup]=\"sendRateForm\" class=\"rtsee-rate-form\">\n      <textarea\n        [invalid]=\"false\"\n        [autoResize]=\"true\"\n        formControlName=\"comment\"\n        pTextarea\n        placeholder=\"Your comment here...\"\n        class=\"rtsee-rate-comment-field\"\n        rows=\"1\"\n        cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <div class=\"rtsee-rate-select-container\">\n    <rtsee-rating [config]=\"config\"></rtsee-rating>\n    @if (!config.rate?.value && showMissingRateError) {\n      <p-message severity=\"error\">Please add your rate!</p-message>\n    }\n  </div>\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: RatingComponent, selector: "rtsee-rating", inputs: ["config", "rate"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RateInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-rate-input', imports: [ReactiveFormsModule, Textarea, RatingComponent, Message], standalone: true, template: "<div class=\"rtsee-rate-input\">\n  <div class=\"rtsee-rate-input-header\">\n    <h3 class=\"rtsee-rate-input-name\">{{ config.name }}</h3>\n    @if (config.description) {\n      <p class=\"rtsee-rate-input-description\">{{ config.description }}</p>\n    }\n  </div>\n  <div class=\"rtsee-rate-form-container\">\n    <form [formGroup]=\"sendRateForm\" class=\"rtsee-rate-form\">\n      <textarea\n        [invalid]=\"false\"\n        [autoResize]=\"true\"\n        formControlName=\"comment\"\n        pTextarea\n        placeholder=\"Your comment here...\"\n        class=\"rtsee-rate-comment-field\"\n        rows=\"1\"\n        cols=\"30\"\n      ></textarea>\n    </form>\n  </div>\n  <div class=\"rtsee-rate-select-container\">\n    <rtsee-rating [config]=\"config\"></rtsee-rating>\n    @if (!config.rate?.value && showMissingRateError) {\n      <p-message severity=\"error\">Please add your rate!</p-message>\n    }\n  </div>\n</div>\n" }]
-        }], propDecorators: { config: [{
+        }], propDecorators: { showMissingRateError: [{
+                type: Input
+            }], config: [{
                 type: Input
             }] } });
 
@@ -6673,6 +7920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 class RaterComponent {
     constructor() {
         this.isEditing = false;
+        this.showMissingRateError = false;
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     ngOnInit() {
@@ -6688,6 +7936,13 @@ class RaterComponent {
         const rates = this.rater.configsWithRates
             .map((config) => config.rate)
             .filter((r) => !!r);
+        const hasInvalidRate = rates.length === 0 ||
+            rates.some((r) => typeof r.value !== 'number' || !Number.isFinite(r.value) || r.value <= 0);
+        if (hasInvalidRate) {
+            this.showMissingRateError = true;
+            return;
+        }
+        this.showMissingRateError = false;
         if (this.rater.userRateGroup) {
             await this.rater.editRateGroup({
                 ...this.rater.userRateGroup,
@@ -6712,6 +7967,7 @@ class RaterComponent {
         }
     }
     startEdit() {
+        this.showMissingRateError = false;
         this.isEditing = true;
     }
     async getRatingConfigurations() {
@@ -6724,11 +7980,11 @@ class RaterComponent {
         return rates;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RaterComponent, isStandalone: true, selector: "rtsee-rater", inputs: { entity: "entity", rater: "rater" }, ngImport: i0, template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_UPDATE]\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update rts-action-button\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_DELETE]\"\n          class=\"rtsee-rater-btn-delete rts-action-button\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_SEND]\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send rts-action-button\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\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: RateInputComponent, selector: "rtsee-rate-input", inputs: ["config"] }, { kind: "component", type: RateItemComponent, selector: "rtsee-rate-item", inputs: ["group", "rater", "showActions"], outputs: ["edit", "delete"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RaterComponent, isStandalone: true, selector: "rtsee-rater", inputs: { entity: "entity", rater: "rater" }, ngImport: i0, template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input\n        [config]=\"config\"\n        [showMissingRateError]=\"showMissingRateError\"\n      ></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_UPDATE]\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update rts-action-button\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_DELETE]\"\n          class=\"rtsee-rater-btn-delete rts-action-button\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_SEND]\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send rts-action-button\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\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: RateInputComponent, selector: "rtsee-rate-input", inputs: ["showMissingRateError", "config"] }, { kind: "component", type: RateItemComponent, selector: "rtsee-rate-item", inputs: ["group", "rater", "showActions"], outputs: ["edit", "delete"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RaterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-rater', imports: [Button, RateInputComponent, RateItemComponent, NgClass], template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input [config]=\"config\"></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_UPDATE]\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update rts-action-button\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_DELETE]\"\n          class=\"rtsee-rater-btn-delete rts-action-button\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_SEND]\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send rts-action-button\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'rtsee-rater', imports: [Button, RateInputComponent, RateItemComponent, NgClass], template: "<div class=\"rtsee-rater\" [ngClass]=\"{'rtsee-rater-view-mode': rater.userRateGroup && !isEditing}\">\n  @if (rater.userRateGroup && !isEditing) {\n    <rtsee-rate-item\n      [group]=\"rater.userRateGroup\"\n      [rater]=\"rater\"\n      [showActions]=\"true\"\n      (edit)=\"startEdit()\"\n      (delete)=\"deleteRate()\"\n    ></rtsee-rate-item>\n  } @else {\n    <div class=\"rtsee-rater-user-header\">\n      @if (rater.peer?.imageUrl) {\n        <img\n          class=\"rtsee-rater-avatar\"\n          [src]=\"rater.peer?.imageUrl\"\n          alt=\"User avatar\"\n        />\n      } @else {\n        <div class=\"rtsee-rater-avatar-fallback\">\n          {{ (rater.peer?.name || \"?\").substring(0, 1) }}\n        </div>\n      }\n      <div class=\"rtsee-rater-user-info\">\n        <span class=\"rtsee-rater-user-name\">{{\n          rater.peer?.name || \"Anonymous\"\n        }}</span>\n        <span class=\"rtsee-rater-user-status\">Rating publicly</span>\n      </div>\n    </div>\n    <hr class=\"rtsee-rater-divider\" />\n    @for (config of rater.configsWithRates; track config.id) {\n      <rtsee-rate-input\n        [config]=\"config\"\n        [showMissingRateError]=\"showMissingRateError\"\n      ></rtsee-rate-input>\n    }\n    <div class=\"rtsee-rater-actions\">\n      @if (rater.userRateGroup) {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'success'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_UPDATE]\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-update rts-action-button\"\n        >\n          <span class=\"pi pi-check\"></span>\n        </p-button>\n        <p-button\n          (click)=\"deleteRate()\"\n          [severity]=\"'danger'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_DELETE]\"\n          class=\"rtsee-rater-btn-delete rts-action-button\"\n        >\n          <span class=\"pi pi-trash\"></span>\n        </p-button>\n      } @else {\n        <p-button\n          (click)=\"sendRate()\"\n          [severity]=\"'primary'\"\n          [label]=\"rater.messenger.labels[RTSeeTextLabelKeys.RATER_SEND]\"\n          type=\"submit\"\n          class=\"rtsee-rater-btn-send rts-action-button\"\n        >\n          <span class=\"pi pi-send\"></span>\n        </p-button>\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { entity: [{
                 type: Input
             }], rater: [{
@@ -7017,11 +8273,11 @@ class StoryDetailsComponent {
         return stars;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div\n  class=\"rtsee-story-details\"\n  itemscope\n  itemtype=\"https://schema.org/ShortStory\"\n>\n  @if (story.imageUrl) {\n    <meta itemprop=\"image\" [attr.content]=\"story.imageUrl\" />\n  }\n  @if (story.languageKey) {\n    <meta itemprop=\"inLanguage\" [attr.content]=\"story.languageKey === 'ua' ? 'uk' : 'en'\" />\n  }\n  @if (story.totalSlides) {\n    <meta itemprop=\"numberOfPages\" [attr.content]=\"story.totalSlides\" />\n  }\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length && false) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\" itemprop=\"name\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div\n            class=\"rtsee-story-details-cover-rating\"\n            itemprop=\"aggregateRating\"\n            itemscope\n            itemtype=\"https://schema.org/AggregateRating\"\n          >\n            <meta itemprop=\"bestRating\" content=\"5\" />\n            <meta itemprop=\"worstRating\" content=\"1\" />\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\" itemprop=\"ratingValue\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <meta itemprop=\"ratingCount\" [attr.content]=\"story.ratesCount\" />\n              <span class=\"rtsee-story-details-rating-count\">\n                <span>(</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span itemprop=\"reviewCount\">{{ story.ratesCount }}</span>\n                <span>)</span>\n              </span\n              >\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <!-- Reading panel: what the user is about to read + the main CTA -->\n    <section class=\"rtsee-story-details-reading-panel\" aria-label=\"{{ story.name }}\">\n      @if (story.totalSlides) {\n        <rtsee-story-slides-preview\n          [story]=\"story\"\n          [slidesLabel]=\"presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL]\"\n          [minuteLabel]=\"presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL]\"\n        ></rtsee-story-slides-preview>\n      }\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\n        icon=\"pi pi-book\"\n        iconPos=\"left\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </section>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"description\">\n          {{ story.description }}\n        </p>\n      </article>\n\n      @if (story.history) {\n        <article class=\"rtsee-story-details-glass-card\">\n          <div class=\"rtsee-story-details-glass-card-header\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <polyline points=\"12 6 12 12 14 14\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_HISTORY_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"backstory\">\n            {{ story.history }}\n          </p>\n        </article>\n      }\n\n      @if (story.moralMeaning) {\n        <article class=\"rtsee-story-details-glass-card\">\n          <div class=\"rtsee-story-details-glass-card-header\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_MORAL_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"teaches\">\n            {{ story.moralMeaning }}\n          </p>\n        </article>\n      }\n    </div>\n\n    <!-- Author -->\n    @if (story.author) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-author-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M12 20h9\" />\n            <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-author-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.STORY_AUTHOR_LABEL] }}\n          </h2>\n        </header>\n        <div class=\"rtsee-story-details-elements-featured\">\n          <rtsee-story-element-thumbnail\n            [name]=\"story.author.name\"\n            [description]=\"story.author.description\"\n            [imageUrl]=\"story.author.imageUrl\"\n            itemProp=\"author\"\n            schemaType=\"Person\"\n            [horizontal]=\"true\"\n            [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n            [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n          ></rtsee-story-element-thumbnail>\n        </div>\n      </section>\n    }\n\n    <!-- Characters -->\n    @if (story.characters.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-characters-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" />\n            <circle cx=\"9\" cy=\"7\" r=\"4\" />\n            <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\" />\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-characters-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.CHARACTERS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (character of story.characters; track character.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"character.name\"\n                [description]=\"character.description\"\n                [imageUrl]=\"character.imageUrl\"\n                itemProp=\"character\"\n                schemaType=\"Person\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Artifacts -->\n    @if (story.artifacts.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-artifacts-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 3h12l4 6-10 13L2 9z\" />\n            <path d=\"M11 3 8 9l4 13 4-13-3-6\" />\n            <path d=\"M2 9h20\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-artifacts-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.ARTIFACTS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (artifact of story.artifacts; track artifact.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"artifact.name\"\n                [description]=\"artifact.description\"\n                [imageUrl]=\"artifact.imageUrl\"\n                itemProp=\"mentions\"\n                schemaType=\"Thing\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Places -->\n    @if (story.locations.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-places-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" />\n            <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-places-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.LOCATIONS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (place of story.locations; track place.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"place.name\"\n                [description]=\"place.description\"\n                [imageUrl]=\"place.imageUrl\"\n                itemProp=\"contentLocation\"\n                schemaType=\"Place\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StoryElementThumbnailComponent, selector: "rtsee-story-element-thumbnail", inputs: ["name", "description", "imageUrl", "itemProp", "schemaType", "horizontal", "showMoreLabel", "showLessLabel"] }, { kind: "component", type: StorySlidesPreviewComponent, selector: "rtsee-story-slides-preview", inputs: ["story", "slidesLabel", "minuteLabel", "count"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: StoryDetailsComponent, isStandalone: true, selector: "rtsee-story-details", inputs: { story: "story", presentation: "presentation", messenger: "messenger" }, ngImport: i0, template: "<div\n  class=\"rtsee-story-details\"\n  itemscope\n  itemtype=\"https://schema.org/Book\"\n>\n  @if (story.imageUrl) {\n    <meta itemprop=\"image\" [attr.content]=\"story.imageUrl\" />\n  }\n  @if (story.languageKey) {\n    <meta itemprop=\"inLanguage\" [attr.content]=\"story.languageKey === 'ua' ? 'uk' : 'en'\" />\n  }\n  @if (story.totalSlides) {\n    <meta itemprop=\"numberOfPages\" [attr.content]=\"story.totalSlides\" />\n  }\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length && false) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\" itemprop=\"name\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating && story.rating > 0) {\n          <div\n            class=\"rtsee-story-details-cover-rating\"\n            itemprop=\"aggregateRating\"\n            itemscope\n            itemtype=\"https://schema.org/AggregateRating\"\n          >\n            <meta itemprop=\"bestRating\" content=\"5\" />\n            <meta itemprop=\"worstRating\" content=\"1\" />\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\" itemprop=\"ratingValue\">{{\n              story.rating\n            }}</span>\n            <meta itemprop=\"ratingCount\" [attr.content]=\"story.ratesCount || 1\" />\n            <span class=\"rtsee-story-details-rating-count\">\n              <span>(</span>\n              <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n              <span>&nbsp;</span>\n              <span itemprop=\"reviewCount\">{{ story.ratesCount || 1 }}</span>\n              <span>)</span>\n            </span\n            >\n          </div>\n        }\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <!-- Reading panel: what the user is about to read + the main CTA -->\n    <section class=\"rtsee-story-details-reading-panel\" aria-label=\"{{ story.name }}\">\n      @if (story.totalSlides) {\n        <rtsee-story-slides-preview\n          [story]=\"story\"\n          [slidesLabel]=\"presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL]\"\n          [minuteLabel]=\"presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL]\"\n        ></rtsee-story-slides-preview>\n      }\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\n        icon=\"pi pi-book\"\n        iconPos=\"left\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </section>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"description\">\n          {{ story.description }}\n        </p>\n      </article>\n\n      @if (story.history) {\n        <article class=\"rtsee-story-details-glass-card\">\n          <div class=\"rtsee-story-details-glass-card-header\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <polyline points=\"12 6 12 12 14 14\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_HISTORY_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"backstory\">\n            {{ story.history }}\n          </p>\n        </article>\n      }\n\n      @if (story.moralMeaning) {\n        <article class=\"rtsee-story-details-glass-card\">\n          <div class=\"rtsee-story-details-glass-card-header\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_MORAL_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"teaches\">\n            {{ story.moralMeaning }}\n          </p>\n        </article>\n      }\n    </div>\n\n    <!-- Author -->\n    @if (story.author) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-author-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M12 20h9\" />\n            <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-author-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.STORY_AUTHOR_LABEL] }}\n          </h2>\n        </header>\n        <div class=\"rtsee-story-details-elements-featured\">\n          <rtsee-story-element-thumbnail\n            [name]=\"story.author.name\"\n            [description]=\"story.author.description\"\n            [imageUrl]=\"story.author.imageUrl\"\n            itemProp=\"author\"\n            schemaType=\"Person\"\n            [horizontal]=\"true\"\n            [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n            [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n          ></rtsee-story-element-thumbnail>\n        </div>\n      </section>\n    }\n\n    <!-- Characters -->\n    @if (story.characters.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-characters-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" />\n            <circle cx=\"9\" cy=\"7\" r=\"4\" />\n            <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\" />\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-characters-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.CHARACTERS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (character of story.characters; track character.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"character.name\"\n                [description]=\"character.description\"\n                [imageUrl]=\"character.imageUrl\"\n                itemProp=\"character\"\n                schemaType=\"Person\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Artifacts -->\n    @if (story.artifacts.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-artifacts-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 3h12l4 6-10 13L2 9z\" />\n            <path d=\"M11 3 8 9l4 13 4-13-3-6\" />\n            <path d=\"M2 9h20\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-artifacts-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.ARTIFACTS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (artifact of story.artifacts; track artifact.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"artifact.name\"\n                [description]=\"artifact.description\"\n                [imageUrl]=\"artifact.imageUrl\"\n                itemProp=\"mentions\"\n                schemaType=\"Thing\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Places -->\n    @if (story.locations.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-places-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" />\n            <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-places-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.LOCATIONS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (place of story.locations; track place.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"place.name\"\n                [description]=\"place.description\"\n                [imageUrl]=\"place.imageUrl\"\n                itemProp=\"contentLocation\"\n                schemaType=\"Place\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ChatComponent, selector: "rtsee-chat", inputs: ["chat", "chatData", "entity", "messenger", "isFramed"] }, { kind: "component", type: RtseeEntityPreviewComponent, selector: "rtsee-entity-preview", inputs: ["entity", "messenger"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: StoryElementThumbnailComponent, selector: "rtsee-story-element-thumbnail", inputs: ["name", "description", "imageUrl", "itemProp", "schemaType", "horizontal", "showMoreLabel", "showLessLabel"] }, { kind: "component", type: StorySlidesPreviewComponent, selector: "rtsee-story-slides-preview", inputs: ["story", "slidesLabel", "minuteLabel", "count"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: StoryDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent, RouterLink, StoryElementThumbnailComponent, StorySlidesPreviewComponent], template: "<div\n  class=\"rtsee-story-details\"\n  itemscope\n  itemtype=\"https://schema.org/ShortStory\"\n>\n  @if (story.imageUrl) {\n    <meta itemprop=\"image\" [attr.content]=\"story.imageUrl\" />\n  }\n  @if (story.languageKey) {\n    <meta itemprop=\"inLanguage\" [attr.content]=\"story.languageKey === 'ua' ? 'uk' : 'en'\" />\n  }\n  @if (story.totalSlides) {\n    <meta itemprop=\"numberOfPages\" [attr.content]=\"story.totalSlides\" />\n  }\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length && false) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\" itemprop=\"name\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating !== null) {\n          <div\n            class=\"rtsee-story-details-cover-rating\"\n            itemprop=\"aggregateRating\"\n            itemscope\n            itemtype=\"https://schema.org/AggregateRating\"\n          >\n            <meta itemprop=\"bestRating\" content=\"5\" />\n            <meta itemprop=\"worstRating\" content=\"1\" />\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\" itemprop=\"ratingValue\">{{\n              story.rating\n            }}</span>\n            @if (story.ratesCount !== null) {\n              <meta itemprop=\"ratingCount\" [attr.content]=\"story.ratesCount\" />\n              <span class=\"rtsee-story-details-rating-count\">\n                <span>(</span>\n                <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n                <span>&nbsp;</span>\n                <span itemprop=\"reviewCount\">{{ story.ratesCount }}</span>\n                <span>)</span>\n              </span\n              >\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <!-- Reading panel: what the user is about to read + the main CTA -->\n    <section class=\"rtsee-story-details-reading-panel\" aria-label=\"{{ story.name }}\">\n      @if (story.totalSlides) {\n        <rtsee-story-slides-preview\n          [story]=\"story\"\n          [slidesLabel]=\"presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL]\"\n          [minuteLabel]=\"presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL]\"\n        ></rtsee-story-slides-preview>\n      }\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\n        icon=\"pi pi-book\"\n        iconPos=\"left\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </section>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"description\">\n          {{ story.description }}\n        </p>\n      </article>\n\n      @if (story.history) {\n        <article class=\"rtsee-story-details-glass-card\">\n          <div class=\"rtsee-story-details-glass-card-header\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <polyline points=\"12 6 12 12 14 14\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_HISTORY_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"backstory\">\n            {{ story.history }}\n          </p>\n        </article>\n      }\n\n      @if (story.moralMeaning) {\n        <article class=\"rtsee-story-details-glass-card\">\n          <div class=\"rtsee-story-details-glass-card-header\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_MORAL_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"teaches\">\n            {{ story.moralMeaning }}\n          </p>\n        </article>\n      }\n    </div>\n\n    <!-- Author -->\n    @if (story.author) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-author-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M12 20h9\" />\n            <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-author-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.STORY_AUTHOR_LABEL] }}\n          </h2>\n        </header>\n        <div class=\"rtsee-story-details-elements-featured\">\n          <rtsee-story-element-thumbnail\n            [name]=\"story.author.name\"\n            [description]=\"story.author.description\"\n            [imageUrl]=\"story.author.imageUrl\"\n            itemProp=\"author\"\n            schemaType=\"Person\"\n            [horizontal]=\"true\"\n            [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n            [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n          ></rtsee-story-element-thumbnail>\n        </div>\n      </section>\n    }\n\n    <!-- Characters -->\n    @if (story.characters.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-characters-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" />\n            <circle cx=\"9\" cy=\"7\" r=\"4\" />\n            <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\" />\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-characters-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.CHARACTERS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (character of story.characters; track character.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"character.name\"\n                [description]=\"character.description\"\n                [imageUrl]=\"character.imageUrl\"\n                itemProp=\"character\"\n                schemaType=\"Person\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Artifacts -->\n    @if (story.artifacts.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-artifacts-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 3h12l4 6-10 13L2 9z\" />\n            <path d=\"M11 3 8 9l4 13 4-13-3-6\" />\n            <path d=\"M2 9h20\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-artifacts-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.ARTIFACTS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (artifact of story.artifacts; track artifact.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"artifact.name\"\n                [description]=\"artifact.description\"\n                [imageUrl]=\"artifact.imageUrl\"\n                itemProp=\"mentions\"\n                schemaType=\"Thing\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Places -->\n    @if (story.locations.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-places-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" />\n            <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-places-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.LOCATIONS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (place of story.locations; track place.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"place.name\"\n                [description]=\"place.description\"\n                [imageUrl]=\"place.imageUrl\"\n                itemProp=\"contentLocation\"\n                schemaType=\"Place\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-story-details', imports: [Chip, Tag, Button, ChatComponent, RtseeEntityPreviewComponent, RouterLink, StoryElementThumbnailComponent, StorySlidesPreviewComponent], template: "<div\n  class=\"rtsee-story-details\"\n  itemscope\n  itemtype=\"https://schema.org/Book\"\n>\n  @if (story.imageUrl) {\n    <meta itemprop=\"image\" [attr.content]=\"story.imageUrl\" />\n  }\n  @if (story.languageKey) {\n    <meta itemprop=\"inLanguage\" [attr.content]=\"story.languageKey === 'ua' ? 'uk' : 'en'\" />\n  }\n  @if (story.totalSlides) {\n    <meta itemprop=\"numberOfPages\" [attr.content]=\"story.totalSlides\" />\n  }\n  <section\n    class=\"rtsee-story-details-cover\"\n    [style.background-image]=\"'url(' + story.imageUrl + ')'\"\n  >\n    <button\n      class=\"rtsee-story-details-btn-close\"\n      [routerLink]=\"[presentation.homePage]\"\n      (click)=\"presentation.closeStoryDetails()\"\n      aria-label=\"Close\"\n    >\n      <span class=\"pi pi-times\"></span>\n    </button>\n    <div class=\"rtsee-story-details-cover-overlay\"></div>\n    <div class=\"rtsee-story-details-cover-content\">\n      <div class=\"rtsee-story-details-cover-badges\">\n        @if (story.categories?.length && false) {\n          @for (category of story.categories; track category.id) {\n            <span class=\"rtsee-story-details-tag-pill\">\n              {{ category.name }}\n            </span>\n          }\n        }\n        @if (story.tags?.length) {\n          @for (tag of story.tags; track tag.id) {\n            <span\n              class=\"rtsee-story-details-tag-pill rtsee-story-details-tag-pill-label\"\n            >\n              @if (tag.symbol) {\n                <span class=\"symbol\">{{ tag.symbol }}</span>\n              }\n               {{ tag.name }}\n            </span>\n          }\n        }\n      </div>\n\n      <h1 class=\"rtsee-story-details-cover-title\" itemprop=\"name\">{{ story.name }}</h1>\n\n      <div class=\"rtsee-story-details-cover-meta\">\n        @if (story.rating && story.rating > 0) {\n          <div\n            class=\"rtsee-story-details-cover-rating\"\n            itemprop=\"aggregateRating\"\n            itemscope\n            itemtype=\"https://schema.org/AggregateRating\"\n          >\n            <meta itemprop=\"bestRating\" content=\"5\" />\n            <meta itemprop=\"worstRating\" content=\"1\" />\n            <span class=\"rtsee-story-details-stars\">\n              @for (star of getStarArray(story.rating); track $index) {\n                <span\n                  class=\"rtsee-story-details-star\"\n                  [class.rtsee-story-details-star-full]=\"star === 'full'\"\n                  [class.rtsee-story-details-star-half]=\"star === 'half'\"\n                  [class.rtsee-story-details-star-empty]=\"star === 'empty'\"\n                >\n                  @if (star === \"full\") {\n                    \u2605\n                  } @else if (star === \"half\") {\n                    \u2605\n                  } @else {\n                    \u2606\n                  }\n                </span>\n              }\n            </span>\n            <span class=\"rtsee-story-details-rating-number\" itemprop=\"ratingValue\">{{\n              story.rating\n            }}</span>\n            <meta itemprop=\"ratingCount\" [attr.content]=\"story.ratesCount || 1\" />\n            <span class=\"rtsee-story-details-rating-count\">\n              <span>(</span>\n              <span>{{ presentation.labels[RTSeeTextLabelKeys.FEEDBACKS_LABEL] }}:</span>\n              <span>&nbsp;</span>\n              <span itemprop=\"reviewCount\">{{ story.ratesCount || 1 }}</span>\n              <span>)</span>\n            </span\n            >\n          </div>\n        }\n      </div>\n    </div>\n  </section>\n\n  <!-- CONTENT AREA -->\n  <div class=\"rtsee-story-details-content-wrapper\">\n    <!-- Reading panel: what the user is about to read + the main CTA -->\n    <section class=\"rtsee-story-details-reading-panel\" aria-label=\"{{ story.name }}\">\n      @if (story.totalSlides) {\n        <rtsee-story-slides-preview\n          [story]=\"story\"\n          [slidesLabel]=\"presentation.labels[RTSeeTextLabelKeys.STORY_PAGES_LABEL]\"\n          [minuteLabel]=\"presentation.labels[RTSeeTextLabelKeys.MINUTE_LABEL]\"\n        ></rtsee-story-slides-preview>\n      }\n      <p-button\n        (click)=\"presentation.setActiveStory(story)\"\n        [severity]=\"'primary'\"\n        [label]=\"story.preselectedSlideNumber ? presentation.labels[RTSeeTextLabelKeys.CONTINUE_READING_BUTTON] : presentation.labels[RTSeeTextLabelKeys.START_READING_BUTTON]\"\n        icon=\"pi pi-book\"\n        iconPos=\"left\"\n        class=\"rtsee-story-details-start-reading rts-action-button\"\n      >\n      </p-button>\n    </section>\n    <div class=\"rtsee-story-details-content-grid\">\n      <!-- Description Card -->\n      <article class=\"rtsee-story-details-glass-card\">\n        <div class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\" />\n            <path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\" />\n          </svg>\n          <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_ABOUT_LABEL]}}</h2>\n        </div>\n        <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"description\">\n          {{ story.description }}\n        </p>\n      </article>\n\n      @if (story.history) {\n        <article class=\"rtsee-story-details-glass-card\">\n          <div class=\"rtsee-story-details-glass-card-header\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\n              <polyline points=\"12 6 12 12 14 14\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_HISTORY_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"backstory\">\n            {{ story.history }}\n          </p>\n        </article>\n      }\n\n      @if (story.moralMeaning) {\n        <article class=\"rtsee-story-details-glass-card\">\n          <div class=\"rtsee-story-details-glass-card-header\">\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"20\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n            </svg>\n            <h2>{{presentation.labels[RTSeeTextLabelKeys.STORY_MORAL_LABEL]}}</h2>\n          </div>\n          <p class=\"rtsee-story-details-glass-card-text\" itemprop=\"teaches\">\n            {{ story.moralMeaning }}\n          </p>\n        </article>\n      }\n    </div>\n\n    <!-- Author -->\n    @if (story.author) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-author-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M12 20h9\" />\n            <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-author-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.STORY_AUTHOR_LABEL] }}\n          </h2>\n        </header>\n        <div class=\"rtsee-story-details-elements-featured\">\n          <rtsee-story-element-thumbnail\n            [name]=\"story.author.name\"\n            [description]=\"story.author.description\"\n            [imageUrl]=\"story.author.imageUrl\"\n            itemProp=\"author\"\n            schemaType=\"Person\"\n            [horizontal]=\"true\"\n            [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n            [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n          ></rtsee-story-element-thumbnail>\n        </div>\n      </section>\n    }\n\n    <!-- Characters -->\n    @if (story.characters.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-characters-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" />\n            <circle cx=\"9\" cy=\"7\" r=\"4\" />\n            <path d=\"M23 21v-2a4 4 0 0 0-3-3.87\" />\n            <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-characters-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.CHARACTERS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (character of story.characters; track character.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"character.name\"\n                [description]=\"character.description\"\n                [imageUrl]=\"character.imageUrl\"\n                itemProp=\"character\"\n                schemaType=\"Person\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Artifacts -->\n    @if (story.artifacts.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-artifacts-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M6 3h12l4 6-10 13L2 9z\" />\n            <path d=\"M11 3 8 9l4 13 4-13-3-6\" />\n            <path d=\"M2 9h20\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-artifacts-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.ARTIFACTS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (artifact of story.artifacts; track artifact.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"artifact.name\"\n                [description]=\"artifact.description\"\n                [imageUrl]=\"artifact.imageUrl\"\n                itemProp=\"mentions\"\n                schemaType=\"Thing\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    <!-- Places -->\n    @if (story.locations.length) {\n      <section\n        class=\"rtsee-story-details-elements\"\n        aria-labelledby=\"rtsee-story-details-places-heading\"\n      >\n        <header class=\"rtsee-story-details-glass-card-header\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\" />\n            <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          </svg>\n          <h2 id=\"rtsee-story-details-places-heading\">\n            {{ presentation.labels[RTSeeTextLabelKeys.LOCATIONS_LABEL] }}\n          </h2>\n        </header>\n        <ul class=\"rtsee-story-details-elements-grid\" role=\"list\">\n          @for (place of story.locations; track place.id) {\n            <li class=\"rtsee-story-details-elements-item\">\n              <rtsee-story-element-thumbnail\n                [name]=\"place.name\"\n                [description]=\"place.description\"\n                [imageUrl]=\"place.imageUrl\"\n                itemProp=\"contentLocation\"\n                schemaType=\"Place\"\n                [showMoreLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_MORE_LABEL]\"\n                [showLessLabel]=\"presentation.labels[RTSeeTextLabelKeys.SHOW_LESS_LABEL]\"\n              ></rtsee-story-element-thumbnail>\n            </li>\n          }\n        </ul>\n      </section>\n    }\n\n    @if (messenger) {\n      <rtsee-entity-preview\n        [entity]=\"story\"\n        [messenger]=\"messenger\"\n      ></rtsee-entity-preview>\n    }\n\n    @if (story.categories?.length && false) {\n      <div class=\"rtsee-story-details-categories\">\n        @for (category of story.categories; track category.id) {\n          <p-tag [value]=\"category.name\"></p-tag>\n        }\n      </div>\n    }\n\n    @if (story.tags?.length && false) {\n      <div class=\"rtsee-story-details-labels\">\n        @for (tag of story.tags; track tag.id) {\n          <p-chip class=\"rtsee-story-details-label\">\n            @if (tag.symbol) {\n              <span class=\"rtsee-story-details-label-left\">{{\n                  tag.symbol\n                }}</span>\n            }\n            <span class=\"rtsee-story-details-label-right\">{{\n              tag.name\n            }}</span>\n          </p-chip>\n        }\n      </div>\n    }\n\n    <div class=\"rtsee-story-details-description-history\"></div>\n    @if (story.isPublished && false) {\n      <div class=\"rtsee-story-details-feedback\">\n        <p>feedback here</p>\n      </div>\n    } @else if (messenger && story.discussion && false) {\n      <div class=\"rtsee-story-details-votes\">\n        <p class=\"rtsee-story-details-comments-label\">Comments</p>\n        <rtsee-chat\n          [messenger]=\"messenger\"\n          [chatData]=\"story.discussion\"\n        ></rtsee-chat>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { story: [{
                 type: Input
             }], presentation: [{
@@ -7127,6 +8383,7 @@ class RTSeeContainerComponent {
         this.isSidenavExpanded = true;
         this.isSidenavContent = false;
         this.isSidenavFullScreen = false;
+        this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
     }
     ngOnInit() {
         this.authService.init(this.auth);
@@ -7163,7 +8420,7 @@ class RTSeeContainerComponent {
         this.isSidenavFullScreen = rtseeRoute.fullScreen || false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, deps: [{ token: RTSeeAuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen,\n     'rtsee-lang-eng': rtsee.messenger && rtsee.messenger.currentLanguage === 'eng',\n     'rtsee-lang-ua': rtsee.messenger && rtsee.messenger.currentLanguage === 'ua'\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation", "messenger"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RTSeeContainerComponent, isStandalone: true, selector: "rtsee-container", inputs: { rtsee: "rtsee", navigationConfig: "navigationConfig", auth: "auth" }, ngImport: i0, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen,\n     'rtsee-lang-eng': rtsee.messenger && rtsee.messenger.currentLanguage === 'eng',\n     'rtsee-lang-ua': rtsee.messenger && rtsee.messenger.currentLanguage === 'ua'\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger && rtsee.messenger.pendingInviteToken && rtsee.activeTab !== 'messenger') {\n        <div class=\"rtsee-mobile-invite-popup-wrapper rts-theme-dark\">\n          <div class=\"rts-invite-popup-modal\">\n            <div class=\"rts-invite-popup-content\">\n              <span class=\"material-icons-outlined rts-invite-popup-icon\">mail_outline</span>\n              <div class=\"rts-invite-popup-text\">\n                @if (rtsee.messenger.pendingInviteInfo?.inviter?.name) {\n                  <strong>{{ rtsee.messenger.pendingInviteInfo?.inviter?.name }}</strong>\n                  <span> {{ rtsee.messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_POPUP_TEXT] }}</span>\n                  @if (rtsee.messenger.pendingInviteInfo?.chat?.name) {\n                    <span class=\"rts-invite-popup-chat-name\"> ({{ rtsee.messenger.pendingInviteInfo?.chat?.name }})</span>\n                  }\n                } @else {\n                  <span>{{ rtsee.messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_POPUP_GENERIC_TEXT] }}</span>\n                }\n              </div>\n            </div>\n            <div class=\"rts-invite-popup-actions\">\n              <button type=\"button\"\n                      class=\"rts-btn rts-btn-secondary rts-invite-popup-btn\"\n                      [disabled]=\"rtsee.messenger.inviteJoinInProgress\"\n                      (click)=\"rtsee.messenger.ignoreChatInvitation()\"\n              >\n                {{ rtsee.messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_IGNORE_BUTTON] }}\n              </button>\n              <button type=\"button\"\n                      class=\"rts-btn rts-btn-primary rts-invite-popup-btn\"\n                      [disabled]=\"rtsee.messenger.inviteJoinInProgress\"\n                      (click)=\"rtsee.messenger.acceptChatInvitation()\"\n              >\n                {{ rtsee.messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_JOIN_BUTTON] }}\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RTSeeConferenceComponent, selector: "rtsee-conference", inputs: ["rtSee"] }, { kind: "component", type: MessengerComponent, selector: "rtsee-messenger", inputs: ["messenger", "isFramed"] }, { kind: "component", type: RtseeEventsDashboardComponent, selector: "rtsee-events-dashboard", inputs: ["eventsDashboard"] }, { kind: "component", type: PresentationComponent, selector: "rtsee-presentation", inputs: ["presentation", "messenger"] }, { kind: "component", type: RtseeNavComponent, selector: "rtsee-nav", inputs: ["config", "rtsee"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RTSeeContainerComponent, decorators: [{
             type: Component,
@@ -7174,7 +8431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         RtseeEventsDashboardComponent,
                         PresentationComponent,
                         RtseeNavComponent,
-                    ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen,\n     'rtsee-lang-eng': rtsee.messenger && rtsee.messenger.currentLanguage === 'eng',\n     'rtsee-lang-ua': rtsee.messenger && rtsee.messenger.currentLanguage === 'ua'\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"rtsee-shell\"\n     [ngClass]=\"{\n     'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,\n     'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',\n     'rtsee-shell-dashboard-active': rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard',\n     'rtsee-shell-presentation-active': rtsee.presentation && rtsee.activeTab === 'presentation',\n     'rtsee-shell-side-nav-expanded': isSidenavExpanded,\n     'rtsee-shell-side-nav-is-content': isSidenavContent,\n     'rtsee-shell-side-nav-full-screen': isSidenavFullScreen,\n     'rtsee-lang-eng': rtsee.messenger && rtsee.messenger.currentLanguage === 'eng',\n     'rtsee-lang-ua': rtsee.messenger && rtsee.messenger.currentLanguage === 'ua'\n     }\"\n>\n  <div class=\"rtsee-nav-block\">\n    <rtsee-nav [config]=\"navigationConfig\" [rtsee]=\"rtsee\"></rtsee-nav>\n  </div>\n\n  <div class=\"rtsee-shell-panel\">\n    <div class=\"rtsee-shell-panel-inner\">\n      @if (rtsee.conference && rtsee.conference.isInActiveCall) {\n        <div class=\"rtsee-conference-container\">\n          <rtsee-conference [rtSee]=\"rtsee.conference\"\n          ></rtsee-conference>\n        </div>\n      }\n\n      @if (rtsee.messenger && rtsee.messenger.pendingInviteToken && rtsee.activeTab !== 'messenger') {\n        <div class=\"rtsee-mobile-invite-popup-wrapper rts-theme-dark\">\n          <div class=\"rts-invite-popup-modal\">\n            <div class=\"rts-invite-popup-content\">\n              <span class=\"material-icons-outlined rts-invite-popup-icon\">mail_outline</span>\n              <div class=\"rts-invite-popup-text\">\n                @if (rtsee.messenger.pendingInviteInfo?.inviter?.name) {\n                  <strong>{{ rtsee.messenger.pendingInviteInfo?.inviter?.name }}</strong>\n                  <span> {{ rtsee.messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_POPUP_TEXT] }}</span>\n                  @if (rtsee.messenger.pendingInviteInfo?.chat?.name) {\n                    <span class=\"rts-invite-popup-chat-name\"> ({{ rtsee.messenger.pendingInviteInfo?.chat?.name }})</span>\n                  }\n                } @else {\n                  <span>{{ rtsee.messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_POPUP_GENERIC_TEXT] }}</span>\n                }\n              </div>\n            </div>\n            <div class=\"rts-invite-popup-actions\">\n              <button type=\"button\"\n                      class=\"rts-btn rts-btn-secondary rts-invite-popup-btn\"\n                      [disabled]=\"rtsee.messenger.inviteJoinInProgress\"\n                      (click)=\"rtsee.messenger.ignoreChatInvitation()\"\n              >\n                {{ rtsee.messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_IGNORE_BUTTON] }}\n              </button>\n              <button type=\"button\"\n                      class=\"rts-btn rts-btn-primary rts-invite-popup-btn\"\n                      [disabled]=\"rtsee.messenger.inviteJoinInProgress\"\n                      (click)=\"rtsee.messenger.acceptChatInvitation()\"\n              >\n                {{ rtsee.messenger.labels[RTSeeTextLabelKeys.MESSENGER_INVITE_JOIN_BUTTON] }}\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      @if (rtsee.messenger) {\n        <div class=\"rtsee-messenger-container\">\n          <rtsee-messenger [messenger]=\"rtsee.messenger\"\n          ></rtsee-messenger>\n        </div>\n      }\n\n      @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {\n        <div class=\"rtsee-events-dashboard-container\">\n          <rtsee-events-dashboard [eventsDashboard]=\"rtsee.eventsDashboard\"\n          ></rtsee-events-dashboard>\n        </div>\n      }\n\n      @if (rtsee.presentation && rtsee.presentation.isActive) {\n        <div class=\"rtsee-presentation-container\">\n          <rtsee-presentation [presentation]=\"rtsee.presentation\"\n                              [messenger]=\"rtsee.messenger\"\n          ></rtsee-presentation>\n        </div>\n      }\n    </div>\n  </div>\n\n  <div class=\"rtsee-content\">\n      <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: RTSeeAuthService }, { type: i2.Router }], propDecorators: { rtsee: [{
                 type: Input
             }], navigationConfig: [{
@@ -8091,7 +9348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class PrivacyPolicyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PrivacyPolicyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PrivacyPolicyComponent, isStandalone: true, selector: "rtsee-privacy-policy", ngImport: i0, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card rts-glass-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <h1>Terms of Use & Privacy Policy</h1>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$2.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: PrivacyPolicyComponent, isStandalone: true, selector: "rtsee-privacy-policy", ngImport: i0, template: "<div class=\"privacy-policy-container\">\n    <div class=\"policy-card rts-glass-card\">\n        <div class=\"header-section\">\n            <div class=\"header-content\">\n                <h1>Terms of Use & Privacy Policy</h1>\n            </div>\n        </div>\n\n        <div class=\"content-section\">\n            <p-message severity=\"info\" [closable]=\"false\" class=\"info-banner\">\n                <ng-template pTemplate>\n                    <div class=\"p-message-content\">\n                        <p class=\"last-updated\"><strong>Last Updated:</strong> December 2024</p>\n                        <p>By using our services, you agree to the terms and conditions outlined in this document. Please read this Privacy Policy and Terms of Use carefully before using our platform.</p>\n                    </div>\n                </ng-template>\n            </p-message>\n\n            <h2>1. Acceptance of Terms</h2>\n            <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.</p>\n\n            <h2>2. Privacy Policy</h2>\n\n            <h3>2.1 Information We Collect</h3>\n            <p>We collect information you provide directly to us, such as when you create an account, use our services, or contact us for support. This may include:</p>\n            <ul>\n                <li><strong>Personal Information:</strong> Name, email address, phone number, and other contact details</li>\n                <li><strong>Account Information:</strong> Username, password, and profile information</li>\n                <li><strong>Usage Data:</strong> Information about how you use our services, including pages visited, time spent, and features used</li>\n                <li><strong>Device Information:</strong> IP address, browser type, operating system, and device identifiers</li>\n                <li><strong>Cookies and Tracking:</strong> We use cookies and similar technologies to enhance your experience</li>\n            </ul>\n\n            <h3>2.2 How We Use Your Information</h3>\n            <p>We use the information we collect to:</p>\n            <ul>\n                <li>Provide, maintain, and improve our services</li>\n                <li>Process transactions and send related information</li>\n                <li>Send technical notices, updates, security alerts, and support messages</li>\n                <li>Respond to your comments, questions, and requests</li>\n                <li>Monitor and analyze trends, usage, and activities</li>\n                <li>Personalize and improve your experience</li>\n                <li>Detect, investigate, and prevent fraudulent transactions and other illegal activities</li>\n            </ul>\n\n            <h3>2.3 Information Sharing and Disclosure</h3>\n            <p>We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except in the following circumstances:</p>\n            <ul>\n                <li><strong>Service Providers:</strong> We may share information with trusted third-party service providers who assist us in operating our platform</li>\n                <li><strong>Legal Requirements:</strong> We may disclose information when required by law or to protect our rights and safety</li>\n                <li><strong>Business Transfers:</strong> In connection with any merger, sale of assets, or acquisition of all or a portion of our business</li>\n                <li><strong>Consent:</strong> We may share information with your explicit consent</li>\n            </ul>\n\n            <h3>2.4 Data Security</h3>\n            <p>We implement appropriate technical and organizational security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction. However, no method of transmission over the internet or electronic storage is 100% secure.</p>\n\n            <h3>2.5 Data Retention</h3>\n            <p>We retain your personal information for as long as necessary to provide our services and fulfill the purposes outlined in this privacy policy, unless a longer retention period is required or permitted by law.</p>\n\n            <h3>2.6 Your Rights</h3>\n            <p>Depending on your location, you may have certain rights regarding your personal information, including:</p>\n            <ul>\n                <li>The right to access and receive a copy of your personal information</li>\n                <li>The right to rectify or update your personal information</li>\n                <li>The right to erase your personal information</li>\n                <li>The right to restrict or object to the processing of your personal information</li>\n                <li>The right to data portability</li>\n                <li>The right to withdraw consent at any time</li>\n            </ul>\n\n            <h2>3. Terms of Service</h2>\n\n            <h3>3.1 User Accounts</h3>\n            <p>To access certain features of our service, you may be required to create an account. You are responsible for:</p>\n            <ul>\n                <li>Maintaining the confidentiality of your account credentials</li>\n                <li>All activities that occur under your account</li>\n                <li>Notifying us immediately of any unauthorized use of your account</li>\n                <li>Providing accurate and up-to-date information</li>\n            </ul>\n\n            <h3>3.2 Acceptable Use</h3>\n            <p>You agree not to use our service for any unlawful purpose or any purpose prohibited under this clause. You may not use our service in any manner that could damage, disable, overburden, or impair our servers or networks.</p>\n\n            <h3>3.3 Prohibited Activities</h3>\n            <p>The following activities are prohibited:</p>\n            <ul>\n                <li>Violating any applicable laws or regulations</li>\n                <li>Transmitting or procuring the sending of any unsolicited or unauthorized advertising</li>\n                <li>Attempting to gain unauthorized access to any portion of our service</li>\n                <li>Interfering with or disrupting the service or servers connected to the service</li>\n                <li>Using any automated system to access the service for any purpose</li>\n                <li>Impersonating any person or entity or misrepresenting your affiliation with a person or entity</li>\n            </ul>\n\n            <h3>3.4 Intellectual Property</h3>\n            <p>The service and its original content, features, and functionality are and will remain the exclusive property of our company and its licensors. The service is protected by copyright, trademark, and other laws.</p>\n\n            <h3>3.5 Termination</h3>\n            <p>We may terminate or suspend your account and bar access to the service immediately, without prior notice or liability, under our sole discretion, for any reason whatsoever, including without limitation if you breach the Terms.</p>\n\n            <h3>3.6 Disclaimer</h3>\n            <p>The information on this service is provided on an \"as is\" basis. To the fullest extent permitted by law, this company excludes all representations, warranties, conditions and terms relating to our service and the use of this service.</p>\n\n            <h3>3.7 Limitation of Liability</h3>\n            <p>In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates, be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from your use of the service.</p>\n\n            <h2>4. Cookies and Tracking Technologies</h2>\n            <p>We use cookies and similar tracking technologies to track activity on our service and hold certain information. Cookies are files with a small amount of data which may include an anonymous unique identifier. You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.</p>\n\n            <h2>5. Third-Party Services</h2>\n            <p>Our service may contain links to third-party websites or services that are not owned or controlled by us. We have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party websites or services.</p>\n\n            <h2>6. Children's Privacy</h2>\n            <p>Our service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from children under 13. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact us.</p>\n\n            <h2>7. International Data Transfers</h2>\n            <p>Your information may be transferred to and processed in countries other than your own. We ensure that such transfers comply with applicable data protection laws and implement appropriate safeguards to protect your personal information.</p>\n\n            <h2>8. Changes to This Policy</h2>\n            <p>We reserve the right to update or change our Privacy Policy and Terms of Use at any time. We will notify you of any changes by posting the new Privacy Policy and Terms of Use on this page and updating the \"Last Updated\" date.</p>\n\n            <div class=\"contact-section\">\n                <h2>9. Contact Information</h2>\n                <p>If you have any questions about this Privacy Policy and Terms of Use, please contact us:</p>\n                <ul>\n                    <li><strong>Email:</strong> [Your Email Address]</li>\n                    <li><strong>Address:</strong> [Your Company Address]</li>\n                    <li><strong>Phone:</strong> [Your Contact Number]</li>\n                </ul>\n            </div>\n\n            <div class=\"footer-section\">\n                <p>This document was last updated on December 2024</p>\n            </div>\n        </div>\n    </div>\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i2$1.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PrivacyPolicyComponent, decorators: [{
             type: Component,
@@ -8439,5 +9696,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseEventWidgetComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent, TranslationsPanelComponent };
+export { ApplicationEventWidgetComponent, BaseEventWidgetComponent, ChatAgentCreatedWidgetComponent, ChatCreatedWidgetComponent, ChatMemberInviteClickedWidgetComponent, ChatMessageSentWidgetComponent, ChatOpenedWidgetComponent, DefaultTaskActionPromptComponent, DefaultTaskActionThumbnailComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, ProfileOpenedWidgetComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskActionComponent, RTSeeTaskComponent, RequestDemoClickedWidgetComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, SlideTaskActionThumbnailComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent, StoryTaskActionThumbnailComponent, TaskActionPromptComponent, TaskActionThumbnailComponent, TaskActionWidgetsService, TranslationsPanelComponent };
 //# sourceMappingURL=rtsee-ngx.mjs.map