@rtsee/ngx 0.0.112 → 0.0.114

package/dist/ngx/index.d.ts

@@ -111,6 +111,16 @@ declare class ProfileComponent {
     messenger: RTSeeMessenger;
     peer?: IPeer;
     constructor(authService: RTSeeAuthService, router: Router);
+    get targetPeer(): {
+        id: string;
+        name?: string;
+        imageUrl?: string;
+    } | undefined;
+    get isOtherUser(): boolean;
+    get displayName(): string;
+    get displayInitials(): string;
+    get displayImageUrl(): string | undefined;
+    get displaySubtitle(): string;
     setLanguage(): void;
     call(): void;
     videoCall(): void;
@@ -608,11 +618,22 @@ declare class ManageChatComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ManageChatComponent, "rtsee-manage-chat", never, { "messenger": { "alias": "messenger"; "required": false; }; "menuState": { "alias": "menuState"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+interface ICallPresentMember {
+    id: string;
+    name: string;
+    imageUrl?: string;
+    initials: string;
+}
 declare class CallWidgetComponent implements OnInit {
     message: RTSeeMessage<IRTSeeCall>;
     messenger: RTSeeMessenger;
     chat: RTSeeChat;
     ngOnInit(): void;
+    get roomId(): string | null;
+    get callerName(): string;
+    get isUserInCall(): boolean;
+    get presentMembers(): ICallPresentMember[];
+    private getInitials;
     joinCall(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CallWidgetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CallWidgetComponent, "ngx-call-widget", never, { "message": { "alias": "message"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; "chat": { "alias": "chat"; "required": false; }; }, {}, never, never, true, never>;
@@ -685,6 +706,9 @@ declare class ChatComponent implements OnInit, OnDestroy {
     chatData?: IRTSeeChat;
     entity?: RTSeeEntity;
     messenger: RTSeeMessenger;
+    showInvite: boolean;
+    get isSoleAdmin(): boolean;
+    toggleInvite(): void;
     onInViewPortChange(value: boolean): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -717,7 +741,7 @@ interface IRTSeeMessageGroup {
     senderVisible: boolean;
     messages: RTSeeMessage[];
 }
-declare class MessagesListComponent implements AfterViewInit, OnDestroy, OnInit {
+declare class MessagesListComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit {
     private timeFormatService;
     private scroller;
     private document;
@@ -726,19 +750,33 @@ declare class MessagesListComponent implements AfterViewInit, OnDestroy, OnInit
     messagesGroups: IRTSeeMessageGroup[];
     firstGroupedMessage: RTSeeMessage | null;
     lastGroupedMessage: RTSeeMessage | null;
+    shouldStickToBottom: boolean;
+    private resizeObserver;
+    private onMediaCapture;
+    private initialScrollInterval;
     chat: RTSeeChat;
     messenger: RTSeeMessenger;
     scrollContainer: ElementRef<HTMLDivElement>;
+    contentBlock: ElementRef<HTMLDivElement>;
+    bottomAnchor: ElementRef<HTMLDivElement>;
     constructor(timeFormatService: TimeFormatHelperService, scroller: ViewportScroller, document: Document);
     onWindowScroll(event: Event): void;
+    onWindowResize(): void;
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     onMessageSent(): void;
     ngOnDestroy(): void;
+    onContainerScroll(event: Event): void;
     onScrolledToTop(): void;
     onScroll(): void;
-    scrollToBottom(): void;
+    scrollToBottom(immediate?: boolean): void;
     formatDate(message: RTSeeMessage): string;
+    private checkScrollPosition;
+    private isAtBottom;
+    private enforceInitialScroll;
+    private bindChatEvents;
+    private unbindChatEvents;
     private groupMessages;
     private saveFirstAndLastGroupedMessages;
     protected readonly RTSeeChatTypes: typeof RTSeeChatTypes;
@@ -784,6 +822,7 @@ declare class ChatInputComponent implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     get isGroupChat(): boolean;
+    startVideoCall(): void;
     sendMessage(): void;
     get anyAutocompleteVisible(): boolean;
     onKeyDown(event: KeyboardEvent): void;
@@ -824,7 +863,8 @@ declare class MessengerHeaderComponent {
     defaultImagesService: DefaultImagesService;
     messenger: RTSeeMessenger;
     isDropdownOpen: boolean;
-    chatImageExpanded: boolean;
+    imageExpandedToSquare: boolean;
+    private lastSquareToggleTime;
     constructor(defaultImagesService: DefaultImagesService);
     openProfile(id: string): void;
     toggleDropdown(): void;
@@ -832,9 +872,15 @@ declare class MessengerHeaderComponent {
     openNewChatDialog(): void;
     closeManageChatDialog(): void;
     onChatSaved(chat: IRTSeeChat): void;
+    onMyAvatarClick(): void;
+    onMyAvatarDblClick(): void;
     onChatImageClick(): void;
+    onChatImageDblClick(): void;
     collapseInfo(): void;
     get isGroupOrChannelChat(): boolean;
+    get headerTitle(): string;
+    get myProfileImageUrl(): string;
+    get chatImageUrl(): string;
     protected readonly RTSeeTextLabelKeys: typeof RTSeeTextLabelKeys;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessengerHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessengerHeaderComponent, "rtsee-messenger-header", never, { "messenger": { "alias": "messenger"; "required": false; }; }, {}, never, never, true, never>;

package/dist/ngx/src/lib/theme/containers/nav.scss

@@ -14,6 +14,8 @@
         display: block;
         width: $nav-item-width;
         height: $nav-item-height;
+        border-radius: 9px;
+        overflow: hidden;
 
         img {
           width: 100%;

package/dist/ngx/src/lib/theme/containers/shell.scss

@@ -25,12 +25,11 @@
       }
     }
 
-    &.rtsee-shell-messenger-active {
-      .rtsee-messenger-container {
-        .rts-messenger {
-          .rts-messenger-header-container {
-            top: $video-container-height;
-          }
+
+    .rtsee-messenger-container {
+      .rts-messenger {
+        .rts-messenger-header-container {
+          top: $video-container-height;
         }
       }
     }
@@ -38,6 +37,14 @@
     @media screen and (min-width: $rts-break-md) {
       padding-top: 0;
 
+      .rtsee-messenger-container {
+        .rts-messenger {
+          .rts-messenger-header-container {
+            top: 0;
+          }
+        }
+      }
+
       .rtsee-presentation-settings {
         top: 0;
         right: $video-container-width;
@@ -151,6 +158,7 @@
 
   .rtsee-events-dashboard-container {
     display: none;
+    padding-bottom: $rts-bottom-nav-height + $rts-offset-md;
   }
 
   .rtsee-presentation-container {

package/dist/ngx/src/lib/theme/containers/variables.scss

@@ -10,7 +10,7 @@ $rts-sidenav-expanded-width: $video-container-width;
 
 
 
-$sidenav-bg-color: #fff;
+$sidenav-bg-color: #000;
 $default-border-color: #e8e8e8;
 $primary-blue: #5b7a9f;
 $sidenav-collapsed-width: $rts-header-height;

package/dist/ngx/src/lib/theme/messenger/chat-input.scss

@@ -5,10 +5,46 @@
 @import "../common-variables";
 
 .rts-chat-input {
+  padding-left: $rts-chat-input-height;
   padding-right: $rts-chat-input-height;
   position: relative;
   overflow: visible;
 
+  .rts-start-call-button {
+    position: absolute;
+    height: $rts-chat-input-height - $rts-offset-md;
+    width: $rts-chat-input-height - $rts-offset-md;
+    line-height: 0;
+    left: $rtsu-space-xs;
+    bottom: $rtsu-space-xs;
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    border: none;
+    outline: none;
+    border-radius: $rtsu-radius-sm;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform $rtsu-transition-fast,
+                box-shadow $rtsu-transition-fast;
+    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
+
+    span {
+      font-size: 20px;
+      line-height: 1;
+    }
+
+    &:hover {
+      transform: scale(1.05);
+      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
   .rts-send-message {
     &::-webkit-scrollbar {
       display: none;

package/dist/ngx/src/lib/theme/messenger/chat.scss

@@ -37,6 +37,96 @@
     }
   }
 
+  // ── Sole Admin Invite Banner ──
+  .rts-chat-sole-admin-banner {
+    margin: $rtsu-space-sm;
+    background: linear-gradient(
+      135deg,
+      rgba(108, 92, 231, 0.12) 0%,
+      rgba(162, 155, 254, 0.05) 100%
+    );
+    border: 1px solid rgba(108, 92, 231, 0.25);
+    border-radius: $rtsu-radius-lg;
+    backdrop-filter: $rtsu-glass-blur;
+    padding: $rtsu-space-sm $rtsu-space-md;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    animation: rts-fade-up 0.4s ease-out both;
+
+    .rts-chat-sole-admin-header {
+      display: flex;
+      align-items: center;
+      gap: $rtsu-space-sm;
+
+      .rts-chat-sole-admin-badge {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: rgba(108, 92, 231, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--rts-accent-light, #a29bfe);
+        flex-shrink: 0;
+
+        .material-icons-outlined {
+          font-size: 20px;
+        }
+      }
+
+      .rts-chat-sole-admin-info {
+        flex: 1;
+
+        h4 {
+          margin: 0;
+          font-size: $rtsu-font-size-sm + 1px;
+          font-weight: $rtsu-font-weight-semibold;
+          color: var(--rts-text-primary);
+        }
+
+        p {
+          margin: 2px 0 0;
+          font-size: $rtsu-font-size-xs;
+          color: var(--rts-text-secondary);
+        }
+      }
+
+      .rts-chat-invite-toggle-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: $rtsu-space-xs;
+        padding: 6px 14px;
+        font-size: $rtsu-font-size-xs + 1px;
+        font-weight: $rtsu-font-weight-semibold;
+        border-radius: $rtsu-radius-sm;
+        white-space: nowrap;
+        background: linear-gradient(
+          135deg,
+          $rtsu-accent-purple 0%,
+          $rtsu-accent-purple-light 100%
+        );
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        transition: transform $rtsu-transition-fast, box-shadow $rtsu-transition-fast;
+
+        .material-icons-outlined {
+          font-size: 16px;
+        }
+
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: $rtsu-shadow-accent-sm;
+        }
+      }
+    }
+
+    .rts-chat-sole-admin-invite {
+      margin-top: $rtsu-space-sm;
+      border-top: 1px solid rgba(108, 92, 231, 0.15);
+      padding-top: $rtsu-space-xs;
+    }
+  }
+
   // ── Chat Body ──
   .rts-chat-body-container {
     height: 100%;

package/dist/ngx/src/lib/theme/messenger/chats-list.scss

@@ -2,8 +2,11 @@
 // MESSENGER — Chats List
 // ═══════════════════════════════════════════════════════════════════
 @import "./variables";
+@import "../common-variables";
 
 .rts-chats-list {
+  padding-bottom: $rtsu-bottom-nav-height + $rts-offset-md;
+
   .rts-chat-thumbnail-container {
     border-bottom: 1px solid var(--rts-border-dim);
 
@@ -11,4 +14,8 @@
       border-bottom: none;
     }
   }
+
+  @media screen and (min-width: $rtsu-break-md) {
+    padding-bottom: 0;
+  }
 }

package/dist/ngx/src/lib/theme/messenger/create-chat.scss

@@ -68,6 +68,77 @@
     padding: $rtsu-space-sm 0;
   }
 
+  .rts-chat-info-call-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $rtsu-space-sm;
+    padding: $rtsu-space-xs 0 $rtsu-space-sm;
+
+    .rts-call-btn {
+      flex: 1;
+      max-width: 140px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: $rtsu-space-xs;
+      padding: 8px 16px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--rts-border-med);
+      border-radius: $rtsu-radius-md;
+      color: var(--rts-text-primary);
+      font-family: $rtsu-font-family;
+      font-size: $rtsu-font-size-sm;
+      font-weight: $rtsu-font-weight-medium;
+      cursor: pointer;
+      transition: background $rtsu-transition-fast,
+                  border-color $rtsu-transition-fast,
+                  transform $rtsu-transition-fast,
+                  box-shadow $rtsu-transition-fast;
+
+      .material-icons-outlined,
+      .pi {
+        font-size: 18px;
+        color: var(--rts-accent-light, #a29bfe);
+        transition: color $rtsu-transition-fast;
+      }
+
+      &:hover {
+        background: rgba(108, 92, 231, 0.15);
+        border-color: rgba(108, 92, 231, 0.4);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
+
+        .material-icons-outlined,
+        .pi {
+          color: #c4b5fd;
+        }
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      &.rts-call-btn-video {
+        .material-icons-outlined,
+        .pi {
+          color: #10b981;
+        }
+
+        &:hover {
+          background: rgba(16, 185, 129, 0.15);
+          border-color: rgba(16, 185, 129, 0.4);
+          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
+
+          .material-icons-outlined,
+          .pi {
+            color: #34d399;
+          }
+        }
+      }
+    }
+  }
+
   .rts-divider {
     border: none;
     border-top: 1px solid var(--rts-border-dim);

package/dist/ngx/src/lib/theme/messenger/message.scss

@@ -28,15 +28,21 @@
   &.rts-message-from-me {
     .rts-messenger-message {
       float: right;
-      background: linear-gradient(
-        135deg,
-        $rtsu-accent-purple 0%,
-        $rtsu-accent-purple-light 100%
-      );
-      color: #fff;
-      border-bottom-right-radius: $rtsu-radius-xs;
-      box-shadow: $rtsu-shadow-accent-sm;
     }
+
+    &:not(.rts-message-is-widget) {
+      .rts-messenger-message {
+        background: linear-gradient(
+            135deg,
+            $rtsu-accent-purple 0%,
+            $rtsu-accent-purple-light 100%
+        );
+        color: #fff;
+        border-bottom-right-radius: $rtsu-radius-xs;
+        box-shadow: $rtsu-shadow-accent-sm;
+      }
+    }
+
   }
 
   // ── Message Bubble ──

package/dist/ngx/src/lib/theme/messenger/messages-list.scss

@@ -73,6 +73,19 @@
   background-color: transparent;
   border-top: 1px solid transparent;
 
+  .rts-messages-list-inner {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  .rts-messages-list-bottom-anchor {
+    height: 1px;
+    width: 100%;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
   .rts-messenger-message-wrapper {
     margin-bottom: $rtsu-space-sm;
     position: relative;
@@ -126,7 +139,8 @@
       }
     }
 
-    &:last-child {
+    &:last-child,
+    &:last-of-type {
       margin-bottom: $rtsu-bottom-nav-height;
     }
   }
@@ -160,7 +174,8 @@
     overscroll-behavior-y: contain;
 
     .rts-messenger-message-wrapper {
-      &:last-child {
+      &:last-child,
+      &:last-of-type {
         margin-bottom: 0;
       }
 

package/dist/ngx/src/lib/theme/messenger/messenger-header.scss

@@ -49,7 +49,7 @@
     }
   }
 
-  // ── My Profile Mode ──
+  // ── My Profile Mode (State 2: Centered circle) ──
   &.rts-messenger-header-my-profile-mode {
     background-color: var(--rts-bg-primary);
     border-bottom-color: var(--rts-border-dim);
@@ -66,12 +66,20 @@
       width: 100%;
       height: auto;
       position: static;
+      display: flex;
+      justify-content: center;
+      padding: $rtsu-space-lg $rtsu-space-md 0;
 
       .rts-messenger-header-avatar {
         padding: 0;
+        width: 160px;
+        height: 160px;
+        flex-shrink: 0;
 
         .rts-messenger-header-avatar-image {
-          border-radius: 0;
+          border-radius: 50%;
+          border: 3px solid var(--rts-border-med);
+          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
         }
       }
     }
@@ -79,6 +87,13 @@
     .rts-messenger-header-right {
       display: none;
     }
+
+    .rts-messenger-header-chat-title {
+      text-align: center;
+      margin: $rtsu-space-sm 0;
+      font-size: $rtsu-font-size-lg;
+      font-weight: $rtsu-font-weight-bold;
+    }
   }
 
   // ── Create Chat Mode ──
@@ -102,7 +117,7 @@
     }
   }
 
-  // ── Chat Info Mode ──
+  // ── Chat Info Mode (State 2: Centered circle) ──
   &.rts-messenger-header-chat-info-mode {
     .rts-messenger-header-right {
       width: 100%;
@@ -110,17 +125,18 @@
       position: static;
       display: flex;
       justify-content: center;
-      padding: $rtsu-space-lg $rtsu-space-md;
+      padding: $rtsu-space-lg $rtsu-space-md 0;
 
       .rts-messenger-header-avatar {
         padding: 0;
-        width: 120px;
-        height: 120px;
+        width: 160px;
+        height: 160px;
         flex-shrink: 0;
 
         .rts-messenger-header-avatar-image {
           border-radius: 50%;
-          border: 2px solid var(--rts-border-med);
+          border: 3px solid var(--rts-border-med);
+          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
         }
       }
     }
@@ -131,12 +147,17 @@
 
     .rts-messenger-header-chat-title {
       text-align: center;
+      margin: $rtsu-space-sm 0;
+      font-size: $rtsu-font-size-lg;
+      font-weight: $rtsu-font-weight-bold;
     }
   }
 
-  // ── Chat Image Expanded (full-width square on second click) ──
+  // ── State 3: Image Expanded to Square (full-width container on double-click) ──
+  &.rts-messenger-header-image-square,
   &.rts-messenger-header-chat-image-expanded {
-    .rts-messenger-header-right {
+    &.rts-messenger-header-my-profile-mode .rts-messenger-header-left,
+    &.rts-messenger-header-chat-info-mode .rts-messenger-header-right {
       padding: 0;
       display: block;
 
@@ -147,6 +168,7 @@
         .rts-messenger-header-avatar-image {
           border-radius: 0;
           border: none;
+          box-shadow: none;
         }
       }
     }
@@ -179,6 +201,9 @@
   .rts-messenger-header-avatar {
     padding: $rtsu-space-sm;
     cursor: pointer;
+    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 
     .rts-messenger-header-avatar-image {
       width: 100%;
@@ -186,7 +211,10 @@
       background-position: center;
       padding-top: 100%;
       border-radius: 50%;
-      transition: border-radius $rtsu-transition-fast;
+      transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                  border 0.35s ease;
 
       &:hover {
         outline: 3px solid rgba(108, 92, 231, 0.3);
@@ -200,6 +228,7 @@
     position: fixed;
     left: $rtsu-space-sm;
     top: $rtsu-space-sm;
+    z-index: 20;
     color: #fff;
     background-color: rgba(0, 0, 0, 0.35);
     backdrop-filter: $rtsu-glass-blur;
@@ -230,8 +259,9 @@
     left: 0;
     width: $rts-messenger-header-height;
     height: $rts-messenger-header-height;
-    transition: width $rtsu-transition-fast,
-                height $rtsu-transition-fast;
+    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .rts-messenger-header-right {
@@ -241,8 +271,9 @@
     right: 0;
     width: $rts-messenger-header-height;
     height: $rts-messenger-header-height;
-    transition: width $rtsu-transition-fast,
-                height $rtsu-transition-fast;
+    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   // ── Center Content ──