@rtsee/ngx 0.0.102 → 0.0.104

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

@@ -1,104 +1,121 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Chat Thumbnail
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
-@import "../common-variables";
 
-$unread-count-block: 18px;
-$last-message-text-color: #707579;
+$rts-unread-badge-size: 20px;
 
-.rtsee-chat-thumbnail {
+.rts-chat-thumbnail {
   position: relative;
-  height: $rts-user-avatar-d-sm + $rts-offset-sm * 2;
-  padding: $rts-new-offset-xsm $rts-new-offset-xsm $rts-new-offset-sm $rts-new-offset-sm * 2 + $rts-new-user-avatar-d-sm;
+  display: flex;
+  align-items: center;
+  gap: $rtsu-space-sm + $rtsu-space-xs;
+  padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
   cursor: pointer;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+  transition: background-color $rtsu-transition-fast;
   user-select: none;
 
   &:hover {
-    background-color: $rts-new-active-bg-color-light;
+    background-color: var(--rts-bg-surface-hover);
+  }
+
+  &:active {
+    background-color: var(--rts-bg-surface-elevated);
   }
 
-  .rtsee-chat-thumbnail-image {
-    position: absolute;
-    left: $rts-new-offset-sm;
-    top: $rts-offset-sm;
+  // ── Avatar ──
+  .rts-chat-thumbnail-image {
+    flex-shrink: 0;
+    width: $rtsu-avatar-sm;
+    height: $rtsu-avatar-sm;
 
     img {
       border-radius: 50%;
-      overflow: hidden;
-      width: $rts-new-user-avatar-d-sm;
+      width: $rtsu-avatar-sm;
+      height: $rtsu-avatar-sm;
+      object-fit: cover;
+      display: block;
     }
   }
 
-  .rtsee-chat-thumbnail-left {
-    height: $rts-new-user-avatar-d-sm;
+  // ── Content Area ──
+  .rts-chat-thumbnail-left {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: $rtsu-space-2xs;
 
-    .rtsee-chat-thumbnail-name {
+    // ── Name Row ──
+    .rts-chat-thumbnail-name {
       position: relative;
-      height: $rts-new-user-avatar-d-sm * 0.38;
-      line-height: $rts-new-user-avatar-d-sm * 0.38;
+      display: flex;
+      align-items: center;
       margin: 0;
-      font-size: 16px;
-      font-weight: 600;
-      color: #000;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-right: $rts-message-status-width + $rts-offset-sm;
+      font-size: $rtsu-font-size-md;
+      font-weight: $rtsu-font-weight-semibold;
+      color: var(--rts-text-primary);
+      line-height: $rtsu-line-height-snug;
+
+      > span {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: $rtsu-message-status-width + $rtsu-space-sm;
+      }
 
-      .rtsee-chat-thumbnail-status {
-        height: $rts-new-user-avatar-d-sm * 0.33;
+      .rts-chat-thumbnail-status {
         position: absolute;
         right: 0;
         top: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
       }
     }
 
-    .rtsee-chat-thumbnail-last-message {
+    // ── Last Message Preview ──
+    .rts-chat-thumbnail-last-message {
       position: relative;
-      height: $rts-new-user-avatar-d-sm * 0.66;
-      line-height: $rts-new-user-avatar-d-sm * 0.33;
       margin: 0;
-      font-size: $rts-new-small-text-size;
-      font-weight: 400;
-      color: $last-message-text-color;
+      font-size: $rtsu-font-size-sm;
+      font-weight: $rtsu-font-weight-regular;
+      color: var(--rts-text-secondary);
       overflow: hidden;
       text-overflow: ellipsis;
-      white-space: pre-wrap;
-      overflow-wrap: break-word;
-      word-wrap: break-word;
-      -ms-word-break: break-all;
-      word-break: break-all;
-      word-break: break-word;
-      -webkit-hyphens: auto;
-      hyphens: auto;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+      white-space: normal;
+      line-height: $rtsu-line-height-normal;
 
-      &.rtsee-has-unread {
-        padding-right: $unread-count-block + $rts-offset-sm;
+      &.rts-has-unread {
+        padding-right: $rts-unread-badge-size + $rtsu-space-sm;
       }
 
-      .rtsee-messenger-thumbnail-unread {
+      .rts-messenger-thumbnail-unread {
         position: absolute;
         right: 0;
-        top: 4px;
-        height: $unread-count-block;
-        width: $unread-count-block;
-        border-radius: 50%;
-        background-color: $rts-new-primary-color;
-        text-align: center;
-        line-height: 16px;
+        top: 2px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: $rts-unread-badge-size;
+        height: $rts-unread-badge-size;
+        border-radius: $rtsu-radius-pill;
+        background: linear-gradient(135deg, $rtsu-accent-purple 0%, $rtsu-accent-purple-light 100%);
+        padding: 0 5px;
+        box-shadow: $rtsu-shadow-accent-sm;
 
-        .rtsee-messenger-thumbnail-unread-count {
-          font-size: 10px;
+        .rts-messenger-thumbnail-unread-count {
+          font-size: $rtsu-font-size-2xs;
           color: #ffffff;
-          font-weight: 300;
+          font-weight: $rtsu-font-weight-medium;
+          line-height: 1;
         }
       }
     }
   }
-
-
 }

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

@@ -1,57 +1,72 @@
-@import "../common-variables";
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Chat Container
+// ═══════════════════════════════════════════════════════════════════
 @import "./variables";
 
-
-.rtsee-chat {
+.rts-chat {
   height: 100%;
-  background: $rts-new-secondary-bg-color-light;
+  background: var(--rts-bg-primary);
 
-  &.rtsee-chat-standalone {
+  // ── Standalone Mode (embedded in story player etc.) ──
+  &.rts-chat-standalone {
     background: transparent;
 
-    .rtsee-messenger-messages-list {
+    .rts-messages-list {
       overflow: visible;
     }
 
-    .rtsee-chat-footer-container {
+    .rts-chat-footer-container {
       display: none;
     }
 
-    &.rtsee-chat-in-viewport {
-      .rtsee-chat-footer-container {
+    &.rts-chat-in-viewport {
+      .rts-chat-footer-container {
         display: block;
         position: fixed;
-        bottom: $rts-bottom-nav-height;
+        bottom: $rtsu-bottom-nav-height;
         left: 0;
       }
 
-      @media screen and (min-width: $rts-break-md) {
-        .rtsee-chat-footer-container {
+      @media screen and (min-width: $rtsu-break-md) {
+        .rts-chat-footer-container {
           bottom: 0;
-          left: $rts-sidebar-width;
-          width: calc(100% - ($rts-sidebar-width + $video-container-width));
+          left: $rtsu-sidebar-width;
+          width: calc(100% - $rtsu-sidebar-width);
         }
       }
     }
   }
 
-  .rtsee-chat-body-container {
+  // ── Chat Body ──
+  .rts-chat-body-container {
     height: 100%;
   }
 
-  .rtsee-chat-footer-container {
-    position: absolute;
-    padding: $rts-new-offset-xsm;
-    bottom: 0;
+  // ── Chat Footer (input bar) ──
+  .rts-chat-footer-container {
+    position: fixed;
+    padding: $rtsu-space-sm;
+    bottom: $rtsu-bottom-nav-height;
     left: 0;
-    background-color: $rts-secondary-bg-color-light;
     width: 100%;
     z-index: 1;
+    background: linear-gradient(
+      to top,
+      var(--rts-bg-primary) 60%,
+      transparent 100%
+    );
 
-    .rtsee-chat-footer-container-inner {
-      background: $rts-main-bg-color-light;
-      border-radius: 4px;
+    .rts-chat-footer-container-inner {
+      background: var(--rts-bg-surface);
+      border: 1px solid var(--rts-border-med);
+      border-radius: $rtsu-radius-md;
       width: 100%;
+      backdrop-filter: $rtsu-glass-blur;
+    }
+
+    @media screen and (min-width: $rtsu-break-md) {
+      position: absolute;
+      bottom: 0;
     }
   }
 }

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

@@ -1,14 +1,14 @@
-@import "../common-variables";
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Chats List
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables";
 
-.rtsee-chats-list {
-  .rtsee-chat-thumbnail-container {
-  }
+.rts-chats-list {
+  .rts-chat-thumbnail-container {
+    border-bottom: 1px solid var(--rts-border-dim);
 
-  .rtsee-chat-thumbnail-separator {
-    height: 1px;
-    width: 90%;
-    background-color: $rts-main-bg-color-dark;
-    margin: 0 auto;
-    opacity: 0.2;
+    &:last-child {
+      border-bottom: none;
+    }
   }
 }

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

@@ -0,0 +1,383 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Manage Chat Info (create / edit) + Chat Info + Members
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables";
+
+// ── Manage Chat Info (create / edit form panel) ──
+.rts-manage-chat-info {
+  overflow-y: auto;
+  max-height: 100vh;
+  -webkit-overflow-scrolling: touch;
+
+  .rts-form-title {
+    padding-left: $rtsu-space-sm + 44px;
+  }
+
+  .rts-form-description {
+    padding: 0 $rtsu-space-md;
+    padding-left: $rtsu-space-sm + 44px;
+  }
+
+  .rts-manage-chat-info-buttons {
+    display: flex;
+    gap: $rtsu-space-sm;
+    justify-content: flex-end;
+    padding: $rtsu-space-md;
+  }
+
+  .rtsee-form-container {
+    background-color: transparent;
+  }
+
+  .rtsee-form-field-container {
+    padding: 0;
+  }
+
+  .rts-btn-spinner {
+    animation: rts-spin 1s linear infinite;
+    font-size: $rtsu-font-size-md;
+  }
+}
+
+// ── Chat Info Panel ──
+.rts-chat-info {
+  padding: $rtsu-space-md;
+  overflow-y: auto;
+  max-height: calc(100vh - #{$rts-messenger-header-height});
+  -webkit-overflow-scrolling: touch;
+
+  .rts-chat-info-meta {
+    text-align: center;
+    padding-bottom: $rtsu-space-sm;
+  }
+
+  .rts-chat-info-type {
+    font-size: $rtsu-font-size-sm;
+    color: var(--rts-text-secondary);
+    text-transform: capitalize;
+    margin: 0;
+  }
+
+  .rts-chat-info-member-count {
+    font-size: $rtsu-font-size-sm;
+    color: var(--rts-text-muted);
+    margin: $rtsu-space-2xs 0 0;
+  }
+
+  .rts-chat-info-actions {
+    padding: $rtsu-space-sm 0;
+  }
+
+  .rts-divider {
+    border: none;
+    border-top: 1px solid var(--rts-border-dim);
+    margin: $rtsu-space-md 0;
+  }
+
+  .rts-chat-info-danger-zone {
+    padding: $rtsu-space-sm 0;
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Chat Members Component
+// ═══════════════════════════════════════════════════════════════════
+
+.rts-chat-members {
+  .rts-chat-members-title {
+    font-size: $rtsu-font-size-base;
+    font-weight: $rtsu-font-weight-semibold;
+    color: var(--rts-text-primary);
+    margin: 0 0 $rtsu-space-sm;
+  }
+
+  .rts-chat-members-add-btn {
+    margin-top: $rtsu-space-md;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $rtsu-space-xs;
+    border: 1px dashed var(--rts-border-med);
+    border-radius: $rtsu-radius-md;
+    padding: $rtsu-space-sm;
+    color: var(--rts-text-secondary);
+    transition: border-color $rtsu-transition-fast,
+                color $rtsu-transition-fast;
+
+    &:hover {
+      border-color: var(--rts-accent, $rtsu-accent-purple);
+      color: var(--rts-accent, $rtsu-accent-purple);
+    }
+
+    .material-icons-outlined {
+      font-size: 20px;
+    }
+  }
+}
+
+// ── Single Chat Member Row ──
+.rts-chat-member {
+  display: flex;
+  align-items: center;
+  gap: $rtsu-space-sm;
+  padding: $rtsu-space-sm 0;
+  border-bottom: 1px solid var(--rts-border-dim);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.rts-chat-member-inactive {
+  opacity: 0.55;
+
+  .rts-chat-member-avatar {
+    filter: grayscale(100%);
+  }
+}
+
+.rts-chat-member-status-inactive {
+  font-size: $rtsu-font-size-sm;
+  color: var(--rts-text-secondary);
+  text-transform: capitalize;
+  font-style: italic;
+  margin: 0;
+}
+
+.rts-chat-member-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+  flex-shrink: 0;
+  border: 1px solid var(--rts-border-med);
+}
+
+.rts-chat-member-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.rts-chat-member-name {
+  font-size: $rtsu-font-size-base;
+  font-weight: $rtsu-font-weight-medium;
+  color: var(--rts-text-primary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  gap: $rtsu-space-2xs;
+}
+
+.rts-chat-member-agent-badge {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  .material-icons-outlined {
+    font-size: 14px;
+    color: var(--rts-accent, $rtsu-accent-purple);
+    opacity: 0.8;
+  }
+}
+
+.rts-chat-member-role {
+  font-size: $rtsu-font-size-sm;
+  color: var(--rts-text-secondary);
+  text-transform: capitalize;
+  margin: 0;
+}
+
+.rts-chat-member-actions {
+  display: flex;
+  gap: $rtsu-space-xs;
+  flex-shrink: 0;
+}
+
+// ── Remove Confirmation ──
+.rts-chat-member-remove-confirm {
+  background: linear-gradient(
+    135deg,
+    rgba(232, 65, 24, 0.06) 0%,
+    rgba(232, 65, 24, 0.02) 100%
+  );
+  border: 1px solid var(--rts-danger-border, rgba(232, 65, 24, 0.15));
+  border-radius: $rtsu-radius-md;
+  padding: $rtsu-space-md;
+  text-align: center;
+
+  .rts-chat-member-remove-confirm-text {
+    font-size: $rtsu-font-size-base;
+    color: var(--rts-text-primary);
+    margin: 0 0 $rtsu-space-md;
+    line-height: $rtsu-line-height-normal;
+
+    strong {
+      font-weight: $rtsu-font-weight-semibold;
+    }
+  }
+
+  .rts-chat-member-remove-confirm-actions {
+    display: flex;
+    gap: $rtsu-space-sm;
+    justify-content: center;
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// Add Chat Member Component
+// ═══════════════════════════════════════════════════════════════════
+
+.rts-add-chat-member {
+  // ── Person / Agent Toggle ──
+  .rts-add-member-toggle {
+    display: flex;
+    gap: $rtsu-space-2xs;
+    margin-bottom: $rtsu-space-md;
+    background: var(--rts-bg-surface, rgba(28, 28, 40, 0.5));
+    border-radius: $rtsu-radius-md;
+    padding: $rtsu-space-2xs;
+  }
+
+  .rts-add-member-toggle-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $rtsu-space-xs;
+    padding: $rtsu-space-sm;
+    border-radius: $rtsu-radius-sm;
+    background: transparent;
+    color: var(--rts-text-secondary);
+    border: none;
+    cursor: pointer;
+    font-size: $rtsu-font-size-sm;
+    font-weight: $rtsu-font-weight-medium;
+    transition: background $rtsu-transition-fast,
+                color $rtsu-transition-fast;
+
+    .material-icons-outlined {
+      font-size: 18px;
+    }
+
+    &:hover {
+      color: var(--rts-text-primary);
+    }
+  }
+
+  .rts-add-member-toggle-active {
+    background: var(--rts-accent, $rtsu-accent-purple);
+    color: #fff;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  // ── Invitation Link Section ──
+  .rts-invite-link-section {
+    padding: $rtsu-space-sm 0;
+  }
+
+  .rts-invite-link-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $rtsu-space-sm;
+    padding: $rtsu-space-lg 0;
+    color: var(--rts-text-secondary);
+    font-size: $rtsu-font-size-sm;
+  }
+
+  .rts-spin-icon {
+    animation: rts-spin 1s linear infinite;
+  }
+
+  .rts-invite-link-disclaimer {
+    display: flex;
+    align-items: flex-start;
+    gap: $rtsu-space-sm;
+    padding: $rtsu-space-sm;
+    margin-bottom: $rtsu-space-md;
+    background: rgba(108, 92, 231, 0.06);
+    border: 1px solid rgba(108, 92, 231, 0.12);
+    border-radius: $rtsu-radius-md;
+    font-size: $rtsu-font-size-sm;
+    color: var(--rts-text-secondary);
+    line-height: $rtsu-line-height-normal;
+
+    .rts-invite-link-disclaimer-icon {
+      flex-shrink: 0;
+      font-size: 18px;
+      color: var(--rts-accent, $rtsu-accent-purple);
+      margin-top: 1px;
+    }
+  }
+
+  .rts-invite-link-display {
+    display: flex;
+    gap: $rtsu-space-sm;
+  }
+
+  .rts-invite-link-input {
+    flex: 1;
+    min-width: 0;
+    padding: $rtsu-space-sm;
+    border-radius: $rtsu-radius-sm;
+    border: 1px solid var(--rts-border-med);
+    background: var(--rts-bg-surface, rgba(28, 28, 40, 0.5));
+    color: var(--rts-text-primary);
+    font-size: $rtsu-font-size-sm;
+    font-family: monospace;
+    cursor: text;
+  }
+
+  .rts-invite-link-copy-btn {
+    display: flex;
+    align-items: center;
+    gap: $rtsu-space-xs;
+    white-space: nowrap;
+
+    .material-icons-outlined {
+      font-size: 16px;
+    }
+  }
+
+  .rts-invite-link-expires {
+    font-size: $rtsu-font-size-sm;
+    color: var(--rts-text-muted);
+    margin: $rtsu-space-sm 0 0;
+    text-align: right;
+  }
+
+  .rts-invite-link-error {
+    font-size: $rtsu-font-size-sm;
+    color: var(--rts-danger, #e84118);
+    text-align: center;
+    padding: $rtsu-space-md 0;
+  }
+
+  // ── Agent Form ──
+  .rts-add-agent-form {
+    padding: $rtsu-space-sm 0;
+
+    .rtsee-form-container {
+      padding: 0;
+    }
+  }
+
+  // ── Cancel Button ──
+  .rts-add-member-cancel {
+    padding-top: $rtsu-space-md;
+    border-top: 1px solid var(--rts-border-dim);
+    margin-top: $rtsu-space-md;
+  }
+}
+
+@keyframes rts-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

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

@@ -1,3 +1,8 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Theme Index
+// Imports rts-common first, then all messenger component styles
+// ═══════════════════════════════════════════════════════════════════
+
 @import "./messenger";
 @import "./chats-list";
 @import "./chat";
@@ -13,3 +18,5 @@
 @import "./profile";
 @import "./payments";
 @import "./payment-product-snippet";
+@import "./create-chat";
+@import "./invite-link";