@uzum-tech/ui 1.7.2 → 1.8.0

package/dist/index.js

@@ -15201,7 +15201,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -15335,7 +15336,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -15470,7 +15472,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -15609,7 +15612,8 @@
         inputPlaceholder: "\u041D\u0430\u043F\u0438\u0441\u0430\u0442\u044C \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435...",
         typingText: "\u041F\u0435\u0447\u0430\u0442\u0430\u0435\u0442...",
         retryText: "\u041F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C",
-        closeButtonText: "\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u0447\u0430\u0442"
+        closeButtonText: "\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044C \u0447\u0430\u0442",
+        unreadNotificationText: "\u043D\u043E\u0432\u044B\u0445 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439"
       }
     };
 
@@ -15744,7 +15748,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -15881,7 +15886,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -16018,7 +16024,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -16156,7 +16163,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -16290,7 +16298,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -16428,7 +16437,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -16564,7 +16574,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -16698,7 +16709,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -16836,7 +16848,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -16973,7 +16986,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -17111,7 +17125,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -17246,7 +17261,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -17383,7 +17399,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -17517,7 +17534,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -17655,7 +17673,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -17789,7 +17808,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -17924,7 +17944,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -18060,7 +18081,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -18194,7 +18216,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -18328,7 +18351,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -18462,7 +18486,8 @@
         inputPlaceholder: "Type a message...",
         typingText: "Typing...",
         retryText: "Resend",
-        closeButtonText: "Close chat"
+        closeButtonText: "Close chat",
+        unreadNotificationText: "new messages"
       }
     };
 
@@ -58022,41 +58047,6 @@
     })(ChatMessageType || {});
     const chatInjectionKey = createInjectionKey("chat");
 
-    class ChatGlobalState {
-      static {
-        this.instance = null;
-      }
-      constructor() {
-        this.notificationsShown = /* @__PURE__ */new Set();
-        this.openedChats = /* @__PURE__ */new Set();
-      }
-      static getInstance() {
-        if (!ChatGlobalState.instance) {
-          ChatGlobalState.instance = new ChatGlobalState();
-        }
-        return ChatGlobalState.instance;
-      }
-      hasNotificationShown(chatId) {
-        return this.notificationsShown.has(chatId);
-      }
-      markNotificationShown(chatId) {
-        this.notificationsShown.add(chatId);
-      }
-      isChatOpened(chatId) {
-        return this.openedChats.has(chatId);
-      }
-      markChatOpened(chatId) {
-        this.openedChats.add(chatId);
-      }
-      markChatClosed(chatId) {
-        this.openedChats.delete(chatId);
-      }
-      reset() {
-        this.notificationsShown.clear();
-        this.openedChats.clear();
-      }
-    }
-
     var commonVars = {
       gapSmall: "4px 8px",
       gapMedium: "8px 12px",
@@ -59745,83 +59735,609 @@
       }
     });
 
+    var style$12 = cB("chat", `
+  height: 100%;
+  max-height: 100%;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+  box-sizing: border-box;
+  .u-list-item__text {
+    grid-template-columns: 1fr !important;
+  }
+  .u-flex {
+    height: 100%;
+    max-height: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+`, [cB("chat-sidebar", `
+    max-width: 388px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--u-sidebar-background-color);
+    border: 1px solid var(--u-sidebar-border-color);
+    border-radius: 20px;
+    overflow: hidden;
+  `, [cE("header", `
+      flex-shrink: 0;
+    `), cE("header-container", `
+      padding: 16px 16px 4px 16px;
+    `), cE("header-main", `
+      flex: 0 0 48%;
+      min-width: 0;
+    `), cE("header-actions", `
+      flex: 0 0 48%;
+      min-width: 0;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 8px;
+    `), cE("content", `
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+      padding: 16px;
+      padding-top: 8px;
+    `), cE("item", `
+       padding: 12px 16px;
+       width: 100%;
+       cursor: pointer;
+       border-radius: 8px;
+       margin-bottom: 4px;
+       transition: all 0.2s ease;
+       position: relative;
+       `, [c$1(".u-list-item", `
+          min-width: 0;
+        `), c$1(".u-list-item__main", `
+          min-width: 0;
+          flex: 1;
+        `), c$1(".u-list-item__prefix", `
+          flex-shrink: 0;
+        `), c$1(".u-list-item__suffix", `
+          flex-shrink: 0;
+          margin-left: 12px;
+        `), c$1(".u-list-item__text", `
+          grid-template-columns: 1fr !important;
+          min-width: 0 !important;
+          max-width: 100%;
+        `), c$1(".u-list-item__content", `
+          min-width: 0;
+        `), c$1(".u-list-item__title", `
+          min-width: 0;
+        `), c$1(".u-list-item__subtitle", `
+          min-width: 0 !important;
+        `), cM("selected", `
+          background-color: var(--u-sidebar-item-background-color-selected);
+        `, [c$1("&:hover", `
+            background-color: var(--u-sidebar-item-background-color-selected);
+          `)]), cM("typing", `
+          .u-list-item__description {
+            color: var(--u-color-primary) !important;
+            font-style: italic;
+          }
+        `), c$1("&:hover", `
+          background-color: var(--u-sidebar-item-background-color-hover);
+        `, [cM("selected", `
+           background-color: var(--u-sidebar-item-background-color-selected);
+          `)])]), cE("item-title", `
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--u-sidebar-item-text-color);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `), cE("item-subtitle", `
+        font-size: 12px;
+        line-height: 16px;
+        color: var(--u-sidebar-item-subtitle-color);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `, [cM("typing", `
+          color: var(--u-color-primary);
+          font-style: italic;
+        `)]), cE("item-main", `
+        flex: 1;
+        min-width: 0;
+        margin-right: 12px;
+      `), cE("item-title", `
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--u-text-color-base);
+        margin-bottom: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `), cE("item-subtitle", `
+        font-size: 12px;
+        line-height: 16px;
+        color: var(--u-text-color-disabled);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `), cE("item-indicators", `
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 4px;
+        flex-shrink: 0;
+      `), cE("item-time", `
+        font-size: 11px;
+        line-height: 21px;
+        color: var(--u-sidebar-item-time-color);
+        white-space: nowrap;
+      `), cE("item-status sup", `
+        padding: 2px 6px 2px 5px;
+        height: 22px;
+        --u-color: var(--u-unread-notification-background-color);
+      `), cE("item-status-icon", `
+        color: var(--u-sidebar-item-time-color);
+      `, [cM("read", `
+          color: var(--u-unread-notification-background-color);
+        `)]), c$1("&:has(.u-chat-sidebar__item-badge)", `
+      `, [cE("item-title", `
+          font-weight: 600;
+        `), cE("item-subtitle", `
+          color: var(--u-text-color-base);
+          font-weight: 500;
+        `)])]), cB("chat-main", `
+          background-color: var(--u-main-background-color);
+          border: 1px solid var(--u-border-color);
+          border-radius: 20px;
+          width: 100%;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          max-height: 100%;
+          min-height: 0;
+          overflow: hidden;
+        `, [cE("header", `
+            border-bottom: 1px solid var(--u-border-color);
+            width: 100%;
+            padding: 24px 20px 8px 24px;
+            flex-shrink: 0;
+          `), cE("header-title", `
+            margin-top: 9px;
+            color: var(--u-header-title-color);
+          `), cE("header-actions", `
+            padding: 4px;
+          `), cE("unread-notification", `
+            background-color: var(--u-unread-notification-background-color);
+            color: var(--u-unread-notification-text-color);
+            padding: 6px 12px;
+            text-align: center;
+            font-size: 12px;
+            font-weight: 500;
+            margin: 8px 0;
+            display: flex;
+            justify-content: center;
+            width: 100%;
+          `, [c$1("span", `
+              display: inline-block;
+              white-space: nowrap;
+            `)]), cE("body", `
+            flex: 1;
+            min-height: 0;
+            position: relative;
+          `, [c$1(".u-scrollbar-content", `
+              padding: 16px 24px;
+              min-height: 100%;
+              display: flex;
+              flex-direction: column;
+              justify-content: flex-end;
+            `)]), cE("messages-container", `
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            min-height: 100%;
+            width: 100%;
+            justify-content: flex-end;
+          `), cE("date-separator", `
+            display: flex;
+            justify-content: center;
+            margin: 16px 0;
+          `, [c$1("span", `
+              color: var(--u-date-separator-color);
+              padding: 4px 12px;
+              border-radius: 12px;
+              font-size: 12px;
+              font-weight: 500;
+            `)]), cE("message", `
+            display: flex;
+            margin-bottom: 8px;
+            flex-shrink: 0;
+            width: 100%;
+          `, [cM("own", `
+              justify-content: flex-end;
+            `), cM("other", `
+              justify-content: flex-start;
+            `)]), cE("message-wrapper", `
+            max-width: 70%;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            flex-shrink: 0;
+          `), cE("message-bubble", `
+            border-radius: 18px;
+            font-size: 14px;
+            line-height: 20px;
+            word-wrap: break-word;
+            background-color: var(--u-message-bubble-background-color-other);
+            color: var(--u-message-bubble-text-color-other);
+            border-bottom-left-radius: 6px;
+            width: fit-content;
+            display: flex;
+            flex-direction: column;
+          `, [cM("own", `
+              background-color: var(--u-message-bubble-background-color-own);
+              color: var(--u-message-bubble-text-color-own);
+              border-bottom-left-radius: 18px;
+              border-bottom-right-radius: 6px;
+            `), cM("typing", `
+              min-width: 300px;
+              height: 44px;
+              padding: 12px 16px;
+            `), cM("skeleton", `
+              min-width: 376px;
+              height: 44px;
+            `)]), cE("message-text", `
+            padding: 12px 16px;
+          `), cE("message-attachment", `
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 16px;
+            background-color: #f8f9fa;
+            border-radius: 12px;
+            border: 1px solid #e9ecef;
+            margin-top: 4px;
+          `), cE("attachment-icon", `
+            color: #6c757d;
+            flex-shrink: 0;
+          `), cE("attachment-info", `
+            flex: 1;
+            min-width: 0;
+          `), cE("attachment-name", `
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--u-text-color-base);
+            margin-bottom: 2px;
+          `), cE("attachment-size", `
+            font-size: 12px;
+            color: var(--u-text-color-disabled);
+          `), cE("message-meta", `
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 11px;
+            color: var(--u-text-color-disabled);
+            margin-top: 2px;
+          `, [cM("own", `
+              justify-content: flex-end;
+            `), cM("other", `
+              justify-content: flex-start;
+            `), cM("skeleton", `
+              width: 36px;
+              height: 20px;
+              border-radius: 4px;
+            `)]), cE("message-time", `
+            font-size: 11px;
+            color: var(--u-message-time-color);
+          `), cE("message-status", `
+            color: var(--u-color-success);
+            display: flex;
+            align-items: center;
+          `), cE("message-status-icon", `
+            color: var(--u-message-time-color);
+          `, [cM("read", `
+              color: var(--u-unread-notification-background-color);
+            `), cM("retry", `
+              color: var(--u-color-error);
+            `)]), cE("message-retry", `
+            display: flex;
+            align-items: center;
+            gap: 4px;
+          `), cE("message-retry-icon", `
+            color: var(--u-color-error);
+          `), cE("message-retry-text", `
+            color: var(--u-color-error);
+            font-size: 11px;
+            font-weight: 500;
+          `), cE("typing-indicator", `
+            display: flex;
+            justify-content: flex-start;
+            margin-bottom: 8px;
+          `), cE("footer", `
+            border-top: 1px solid var(--u-border-color);
+            padding: 0px 20px;
+            flex-shrink: 0;
+          `), cE("input-container", `
+            width: 100%;
+            padding: 16px 0px;
+          `), cE("input", `
+            flex: 1;
+            margin-right: 4px;
+            --u-color: #F3F4F6 !important;
+            --u-color-focus: #F3F4F6 !important;
+            --u-border: none !important;
+            --u-border-focus: none !important;
+            --u-border-hover: none !important;
+            --u-box-shadow: none !important;
+            --u-box-shadow-focus: none !important;
+          `), cE("attach-btn", `
+            margin-left: 4px;
+            flex-shrink: 0;
+            padding: 0 12px;
+          `)]), c$1("*", `
+    box-sizing: border-box;
+  `), c$1(".u-list-item .u-list-item__text", `
+    grid-template-columns: 1fr !important;
+  `), c$1(".u-upload-file-list .u-upload-file.u-upload-file--text-type", `
+    margin-bottom: 0px;
+  `), c$1(".u-chat-main__message-bubble--own .u-upload-file", `
+    background-color: var(--u-attachment-background-color-own);
+  `), c$1(".u-chat-main__message-bubble--other .u-upload-file", `
+    background-color: var(--u-attachment-background-color-other);
+  `)]);
+
+    const self$6 = vars => {
+      const {
+        borderRadiusLarge,
+        elementsQuaternary,
+        elementsTertiary,
+        textTertiary,
+        textPrimary,
+        textSecondary,
+        surfacePrimary,
+        brandPrimary500,
+        brandPrimary400,
+        transparencySecondary,
+        elementsSecondary,
+        elementsDarkQuinary,
+        staticRed,
+        staticWhite
+      } = vars;
+      return {
+        backgroundColor: surfacePrimary,
+        borderColor: elementsQuaternary,
+        sidebarBackgroundColor: surfacePrimary,
+        sidebarBorderColor: elementsQuaternary,
+        sidebarItemBackgroundColor: "transparent",
+        sidebarItemBackgroundColorHover: elementsTertiary,
+        sidebarItemBackgroundColorSelected: transparencySecondary,
+        sidebarItemTextColor: textPrimary,
+        sidebarItemTextColorSelected: brandPrimary500,
+        sidebarItemSubtitleColor: textSecondary,
+        sidebarItemTimeColor: elementsDarkQuinary,
+        mainBackgroundColor: surfacePrimary,
+        headerBackgroundColor: surfacePrimary,
+        headerBorderColor: elementsQuaternary,
+        headerTitleColor: textPrimary,
+        messageBubbleBackgroundColorOwn: elementsTertiary,
+        messageBubbleBackgroundColorOther: elementsTertiary,
+        messageBubbleTextColorOwn: textPrimary,
+        messageBubbleTextColorOther: textPrimary,
+        messageTimeColor: textTertiary,
+        messageStatusColor: textSecondary,
+        attachmentBackgroundColorOwn: staticWhite,
+        attachmentBackgroundColorOther: staticWhite,
+        footerBackgroundColor: surfacePrimary,
+        footerBorderColor: elementsQuaternary,
+        inputBackgroundColor: surfacePrimary,
+        inputBorderColor: elementsQuaternary,
+        unreadNotificationBackgroundColor: brandPrimary400,
+        unreadNotificationTextColor: elementsSecondary,
+        typingIndicatorColor: textSecondary,
+        dateSeparatorColor: textTertiary,
+        dateSeparatorBackgroundColor: elementsTertiary,
+        borderRadius: borderRadiusLarge,
+        errorColor: staticRed
+      };
+    };
+    const chatLight = createTheme$1({
+      name: "Chat",
+      common: derived,
+      peers: {
+        Input: inputLight,
+        Empty: emptyLight,
+        Select: selectLight,
+        Avatar: avatarLight,
+        Badge: badgeLight,
+        Button: buttonLight,
+        Icon: iconLight,
+        List: listLight,
+        Typography: typographyLight$1
+      },
+      self: self$6
+    });
+
+    const chatDark = createTheme$1({
+      name: "Chat",
+      common: derived$1,
+      peers: {
+        Input: inputDark,
+        Empty: emptyDark$1,
+        Select: selectDark,
+        Avatar: avatarDark,
+        Badge: badgeDark,
+        Button: buttonDark,
+        Icon: iconDark$1,
+        List: listDark$1,
+        Typography: typographyDark
+      },
+      self: vars => {
+        const lightVars = self$6(vars);
+        return {
+          ...lightVars
+        };
+      }
+    });
+
     const statusIconMapper$1 = {
       [MessageStatus.READ]: CheckmarkDoneSharp,
       [MessageStatus.PENDING]: MdTime,
       [MessageStatus.RETRY]: Refresh,
       [MessageStatus.UNREAD]: CheckmarkDoneSharp
     };
-    var ChatSidebar = vue.defineComponent({
-      name: "ChatSidebar",
-      setup(props, { slots }) {
-        return { slots };
+    const chatListItemsProps = {
+      ...useTheme.props,
+      chatItems: {
+        type: Array,
+        default: () => []
       },
-      render() {
-        const { slots } = this;
-        const {
-          mergedClsPrefixRef,
-          chatItemsRef,
-          chatItemsLoadingRef,
-          chatItemsLoadingCountRef,
-          listEmptyPropsRef,
-          selectedChatIdRef,
-          typingChatIdsRef,
-          typingTextRef,
-          listItemAvatarPropsRef,
-          listItemBadgePropsRef,
-          handleChatSelect
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        } = vue.inject(chatInjectionKey);
-        const renderListHeader = () => {
-          return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` }, /* @__PURE__ */ vue.h(
-            UFlex,
-            {
-              align: "center",
-              justify: "space-between",
-              style: { width: "100%" }
-            },
-            /* @__PURE__ */ vue.h(
-              "div",
-              {
-                class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main`
-              },
-              slots.sidebarHeaderMain?.() || /* @__PURE__ */ vue.h(USelect, { round: true })
-            ),
-            /* @__PURE__ */ vue.h(
-              "div",
-              {
-                class: `${mergedClsPrefixRef.value}-chat-sidebar__header-actions`
-              },
-              slots.sidebarHeaderActions?.()
-            )
-          ));
-        };
-        const renderChatItem = (item) => {
-          const isSelected = selectedChatIdRef.value === item.id;
-          const isTyping = typingChatIdsRef.value?.includes(item.id) ?? false;
-          return /* @__PURE__ */ vue.h(
-            UListItem,
-            {
-              key: item.id,
-              showIcon: false,
-              onClick: () => {
-                handleChatSelect(item.id);
-              },
-              class: [
-                `${mergedClsPrefixRef.value}-chat-sidebar__item`,
-                isSelected && `${mergedClsPrefixRef.value}-chat-sidebar__item--selected`,
-                isTyping && `${mergedClsPrefixRef.value}-chat-sidebar__item--typing`
-              ]
-            },
-            {
+      selectedChatId: {
+        type: [String, Number, Symbol],
+        default: void 0
+      },
+      typingChatIds: {
+        type: Array,
+        default: () => []
+      },
+      typingText: {
+        type: String,
+        default: void 0
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      loadingCount: {
+        type: Number,
+        default: 10
+      },
+      emptyProps: {
+        type: Object,
+        default: void 0
+      },
+      avatarProps: {
+        type: Object,
+        default: void 0
+      },
+      badgeProps: {
+        type: Object,
+        default: void 0
+      },
+      onChatSelect: {
+        type: Function,
+        default: void 0
+      },
+      notificationsShown: {
+        type: Object,
+        default: () => /* @__PURE__ */ new Set()
+      }
+    };
+    var UChatListItems = vue.defineComponent({
+      name: "ChatListItems",
+      props: chatListItemsProps,
+      emits: ["chat-select"],
+      setup(props, { slots, emit }) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        const themeRef = useTheme(
+          "Chat",
+          "-chat",
+          style$12,
+          chatLight,
+          props,
+          mergedClsPrefixRef
+        );
+        const { localeRef } = useLocale("Chat");
+        const cssVarsRef = vue.computed(() => {
+          const {
+            common: {
+              cubicBezierEaseInOut,
+              brandPrimary500,
+              staticGreen,
+              staticRed,
+              textPrimary,
+              textSecondary,
+              textTertiary
+            },
+            self: {
+              backgroundColor,
+              borderColor,
+              sidebarBackgroundColor,
+              sidebarBorderColor,
+              sidebarItemBackgroundColor,
+              sidebarItemBackgroundColorHover,
+              sidebarItemBackgroundColorSelected,
+              sidebarItemTextColor,
+              sidebarItemTextColorSelected,
+              sidebarItemSubtitleColor,
+              sidebarItemTimeColor,
+              unreadNotificationBackgroundColor,
+              borderRadius
+            }
+          } = themeRef.value;
+          return {
+            "--u-bezier": cubicBezierEaseInOut,
+            "--u-color-primary": brandPrimary500,
+            "--u-color-success": staticGreen,
+            "--u-color-error": staticRed,
+            "--u-text-color-base": textPrimary,
+            "--u-text-color-secondary": textSecondary,
+            "--u-text-color-disabled": textTertiary,
+            "--u-background-color": backgroundColor,
+            "--u-border-color": borderColor,
+            "--u-sidebar-background-color": sidebarBackgroundColor,
+            "--u-sidebar-border-color": sidebarBorderColor,
+            "--u-sidebar-item-background-color": sidebarItemBackgroundColor,
+            "--u-sidebar-item-background-color-hover": sidebarItemBackgroundColorHover,
+            "--u-sidebar-item-background-color-selected": sidebarItemBackgroundColorSelected,
+            "--u-sidebar-item-text-color": sidebarItemTextColor,
+            "--u-sidebar-item-text-color-selected": sidebarItemTextColorSelected,
+            "--u-sidebar-item-subtitle-color": sidebarItemSubtitleColor,
+            "--u-sidebar-item-time-color": sidebarItemTimeColor,
+            "--u-unread-notification-background-color": unreadNotificationBackgroundColor,
+            "--u-border-radius": borderRadius
+          };
+        });
+        const themeClassHandle = useThemeClass(
+          "chat-list-items",
+          vue.computed(() => ""),
+          cssVarsRef,
+          props
+        );
+        const mergedTypingTextRef = vue.computed(
+          () => props.typingText ?? localeRef.value.typingText
+        );
+        const handleChatSelect = (chatId) => {
+          emit("chat-select", chatId);
+          props.onChatSelect?.(chatId);
+        };
+        const renderChatItem = (item) => {
+          const isSelected = props.selectedChatId === item.id;
+          const isTyping = props.typingChatIds?.includes(item.id) ?? false;
+          return /* @__PURE__ */ vue.h(
+            UListItem,
+            {
+              key: item.id,
+              showIcon: false,
+              onClick: () => {
+                handleChatSelect(item.id);
+              },
+              class: [
+                `${mergedClsPrefixRef.value}-chat-sidebar__item`,
+                isSelected && `${mergedClsPrefixRef.value}-chat-sidebar__item--selected`,
+                isTyping && `${mergedClsPrefixRef.value}-chat-sidebar__item--typing`
+              ]
+            },
+            {
               prefix: () => /* @__PURE__ */ vue.h(
                 UAvatar,
                 {
                   size: "medium",
                   src: typeof item.avatar === "string" ? item.avatar : void 0,
-                  ...listItemAvatarPropsRef.value
+                  ...props.avatarProps
                 },
-                typeof item.avatar === "function" ? item.avatar() : typeof item.title === "string" ? item.title.charAt(0)?.toUpperCase() : "?"
+                {
+                  default: () => typeof item.avatar === "function" ? item.avatar() : typeof item.title === "string" ? item.title.charAt(0)?.toUpperCase() : "?"
+                }
               ),
               header: () => /* @__PURE__ */ vue.h(
                 "span",
@@ -59846,13 +60362,10 @@
                     maxWidth: "100%"
                   }
                 },
-                isTyping ? typingTextRef.value : typeof item.subtitle === "string" ? item.subtitle : typeof item.subtitle === "function" ? item.subtitle() : item.subtitle
+                isTyping ? mergedTypingTextRef.value : typeof item.subtitle === "string" ? item.subtitle : typeof item.subtitle === "function" ? item.subtitle() : item.subtitle
               ),
               suffix: () => {
-                const getChatGlobalState = () => ChatGlobalState.getInstance();
-                const globalState = getChatGlobalState();
-                const wasOpened = globalState.isChatOpened(item.id);
-                const displayUnreadCount = wasOpened ? 0 : item.unreadCount || 0;
+                const displayUnreadCount = item.unreadCount || 0;
                 const hasUnreadIncoming = displayUnreadCount > 0;
                 const lastMessageIsOwn = item.lastMessageIsOwn;
                 return /* @__PURE__ */ vue.h(
@@ -59887,7 +60400,7 @@
                       UBadge,
                       {
                         value: displayUnreadCount,
-                        ...listItemBadgePropsRef.value
+                        ...props.badgeProps
                       }
                     )
                   )
@@ -59896,17 +60409,170 @@
             }
           );
         };
-        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` }, renderListHeader(), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` }, chatItemsLoadingRef.value ? /* @__PURE__ */ vue.h(UList, { loading: true }, Array.from({ length: chatItemsLoadingCountRef.value || 10 }).map(
-          (_, index) => /* @__PURE__ */ vue.h(
-            UListItem,
+        return {
+          mergedClsPrefixRef,
+          renderChatItem,
+          cssVars: cssVarsRef,
+          themeClass: themeClassHandle?.themeClass,
+          onRender: themeClassHandle?.onRender
+        };
+      },
+      render() {
+        this.onRender?.();
+        const { mergedClsPrefixRef, renderChatItem } = this;
+        const content = (() => {
+          if (this.loading) {
+            return /* @__PURE__ */ vue.h(UList, { loading: true }, {
+              default: () => Array.from({ length: this.loadingCount || 10 }).map(
+                (_, index) => /* @__PURE__ */ vue.h(
+                  UListItem,
+                  {
+                    key: index,
+                    avatar: { icon: PersonOutline },
+                    description: { text: "Loading..." },
+                    header: { text: "Loading..." }
+                  }
+                )
+              )
+            });
+          }
+          if (this.chatItems?.length) {
+            return /* @__PURE__ */ vue.h(UList, { showIcon: false }, {
+              default: () => this.chatItems?.map((item) => renderChatItem(item))
+            });
+          }
+          return /* @__PURE__ */ vue.h(UEmpty, { ...this.emptyProps });
+        })();
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [`${mergedClsPrefixRef}-chat`, this.themeClass],
+            style: this.cssVars
+          },
+          /* @__PURE__ */ vue.h(
+            "div",
             {
-              key: index,
-              avatar: { icon: PersonOutline },
-              description: { text: "Loading..." },
-              header: { text: "Loading..." }
-            }
+              class: `${mergedClsPrefixRef}-chat-sidebar`,
+              style: {
+                border: "none",
+                borderRadius: "0",
+                padding: "0",
+                maxWidth: "100%",
+                background: "transparent"
+              }
+            },
+            /* @__PURE__ */ vue.h(
+              "div",
+              {
+                class: `${mergedClsPrefixRef}-chat-sidebar__content`,
+                style: {
+                  padding: "0"
+                }
+              },
+              content
+            )
           )
-        )) : chatItemsRef.value?.length ? /* @__PURE__ */ vue.h(UList, { showIcon: false }, chatItemsRef.value?.map((item) => renderChatItem(item))) : /* @__PURE__ */ vue.h(UEmpty, { ...listEmptyPropsRef.value })));
+        );
+      }
+    });
+
+    var ChatSidebar = vue.defineComponent({
+      name: "ChatSidebar",
+      setup(props, { slots }) {
+        return { slots };
+      },
+      render() {
+        const { slots } = this;
+        const {
+          mergedClsPrefixRef,
+          chatItemsRef,
+          chatItemsLoadingRef,
+          chatItemsLoadingCountRef,
+          listEmptyPropsRef,
+          selectedChatIdRef,
+          typingChatIdsRef,
+          typingTextRef,
+          listItemAvatarPropsRef,
+          listItemBadgePropsRef,
+          notificationsShownSetRef,
+          handleChatSelect
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        } = vue.inject(chatInjectionKey);
+        const renderListHeader = () => {
+          return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__header` }, /* @__PURE__ */ vue.h(
+            UFlex,
+            {
+              align: "center",
+              justify: "space-between",
+              class: `${mergedClsPrefixRef.value}-chat-sidebar__header-container`,
+              style: { width: "100%" }
+            },
+            {
+              default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefixRef.value}-chat-sidebar__header-main`
+                },
+                slots.sidebarHeaderMain?.() || /* @__PURE__ */ vue.h(USelect, { round: true, size: "small" })
+              ), /* @__PURE__ */ vue.h(
+                "div",
+                {
+                  class: `${mergedClsPrefixRef.value}-chat-sidebar__header-actions`
+                },
+                slots.sidebarHeaderActions?.()
+              ))
+            }
+          ));
+        };
+        return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar` }, renderListHeader(), /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-sidebar__content` }, /* @__PURE__ */ vue.h(
+          UChatListItems,
+          {
+            chatItems: chatItemsRef.value,
+            selectedChatId: selectedChatIdRef.value,
+            typingChatIds: typingChatIdsRef.value,
+            typingText: typingTextRef.value,
+            loading: chatItemsLoadingRef.value,
+            loadingCount: chatItemsLoadingCountRef.value,
+            emptyProps: listEmptyPropsRef.value,
+            avatarProps: listItemAvatarPropsRef.value,
+            badgeProps: listItemBadgePropsRef.value,
+            notificationsShown: notificationsShownSetRef.value,
+            onChatSelect: handleChatSelect
+          },
+          {
+            chatItemStatus: slots.chatItemStatus
+          }
+        )));
+      }
+    });
+
+    const scrollbarProps = {
+      ...useTheme.props,
+      trigger: String,
+      xScrollable: Boolean,
+      onScroll: Function,
+      size: Number
+    };
+    const Scrollbar = vue.defineComponent({
+      name: "Scrollbar",
+      props: scrollbarProps,
+      setup() {
+        const scrollbarInstRef = vue.ref(null);
+        const exposedMethods = {
+          scrollTo: (...args) => {
+            scrollbarInstRef.value?.scrollTo(args[0], args[1]);
+          },
+          scrollBy: (...args) => {
+            scrollbarInstRef.value?.scrollBy(args[0], args[1]);
+          }
+        };
+        return {
+          ...exposedMethods,
+          scrollbarInstRef
+        };
+      },
+      render() {
+        return /* @__PURE__ */ vue.h(Scrollbar$1, { ref: "scrollbarInstRef", ...this.$props }, this.$slots);
       }
     });
 
@@ -60216,7 +60882,7 @@
       }
     });
 
-    var style$12 = c$1([c$1("@keyframes spin-rotate", `
+    var style$11 = c$1([c$1("@keyframes spin-rotate", `
     from {
       transform: rotate(0);
     }
@@ -60315,7 +60981,7 @@
         const themeRef = useTheme(
           "Spin",
           "-spin",
-          style$12,
+          style$11,
           spinLight,
           props,
           mergedClsPrefixRef
@@ -60811,7 +61477,7 @@
     };
     const imageContextKey = createInjectionKey("u-image");
 
-    const self$6 = vars => {
+    const self$5 = vars => {
       const {
         elementsSecondary,
         elementsSenary,
@@ -60831,7 +61497,7 @@
       peers: {
         Tooltip: tooltipLight
       },
-      self: self$6
+      self: self$5
     });
 
     const imageDark = {
@@ -60840,7 +61506,7 @@
       peers: {
         Tooltip: tooltipDark
       },
-      self: self$6
+      self: self$5
     };
 
     const prevIcon = /* @__PURE__ */ vue.h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ vue.h(
@@ -60881,7 +61547,7 @@
       )
     );
 
-    var style$11 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
+    var style$10 = c$1([c$1("body >", [cB("image-container", "position: fixed;")]), cB("image-preview-container", `
     position: fixed;
     left: 0;
     right: 0;
@@ -60957,7 +61623,7 @@
         const themeRef = useTheme(
           "Image",
           "-image",
-          style$11,
+          style$10,
           imageLight,
           props,
           vue.toRef(props, "clsPrefix")
@@ -61815,7 +62481,7 @@
       }
     });
 
-    var style$10 = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
+    var style$$ = c$1([cB("upload", "width: var(--u-upload-width)", [cM("dragger-inside", [cB("upload-trigger", `
         display: block;
       `)]), cM("drag-over", [cB("upload-dragger", `
         border: var(--u-dragger-border-hover);
@@ -62585,7 +63251,7 @@
         const themeRef = useTheme(
           "Upload",
           "-upload",
-          style$10,
+          style$$,
           uploadLight,
           props,
           mergedClsPrefixRef
@@ -62987,122 +63653,7 @@
       }
     });
 
-    var ChatAttachmentComponent = vue.defineComponent({
-      name: "ChatAttachment",
-      props: {
-        message: {
-          type: Object,
-          required: true
-        },
-        attachments: {
-          type: Array,
-          required: true
-        },
-        uploadProps: {
-          type: Object,
-          default: () => ({})
-        },
-        withPadding: {
-          type: Boolean,
-          default: false
-        }
-      },
-      setup(props, { slots }) {
-        const getThumbnailUrl = (att) => {
-          const url = [att.preview, att.thumbnail].find(
-            (value) => typeof value === "string"
-          );
-          return url ?? null;
-        };
-        const renderAttachment = () => {
-          const fileList = props.attachments.map(
-            (att, index) => ({
-              id: `${String(props.message.id)}-attachment-${index}`,
-              name: att.name,
-              status: att.status || "finished",
-              percentage: att.percentage ?? null,
-              url: att.url ?? null,
-              thumbnailUrl: getThumbnailUrl(att),
-              type: att.type ?? null,
-              file: null,
-              batchId: null
-            })
-          );
-          const uploadComponent = /* @__PURE__ */ vue.h(
-            UUpload,
-            {
-              abstract: true,
-              fileList,
-              fileListStyle: props.withPadding ? {
-                display: "flex",
-                flexDirection: "column",
-                gap: "2px",
-                marginTop: "0"
-              } : void 0,
-              showRemoveButton: false,
-              showDownloadButton: props.attachments.some(
-                (att) => att.status === "finished"
-              ),
-              showRetryButton: props.attachments.some(
-                (att) => att.status === "error"
-              ),
-              ...props.uploadProps
-            },
-            /* @__PURE__ */ vue.h(UUploadFileList, null, {
-              "upload-file-title": slots["upload-file-title"] ? ({ file }) => slots["upload-file-title"]?.(file) : void 0,
-              "upload-file-subtitle": slots["upload-file-subtitle"] ? ({ file }) => slots["upload-file-subtitle"]?.(file) : ({ file }) => {
-                const att = props.attachments.find(
-                  (a) => a.name === file.name
-                );
-                return /* @__PURE__ */ vue.h("span", { style: { fontSize: "12px", color: "#999" } }, att?.size || file.file?.size);
-              }
-            })
-          );
-          if (props.withPadding) {
-            return /* @__PURE__ */ vue.h("div", { style: { padding: "2px" } }, uploadComponent);
-          }
-          return uploadComponent;
-        };
-        return () => {
-          if (slots.default) {
-            return slots.default(props.message);
-          }
-          return renderAttachment();
-        };
-      }
-    });
-
-    const scrollbarProps = {
-      ...useTheme.props,
-      trigger: String,
-      xScrollable: Boolean,
-      onScroll: Function,
-      size: Number
-    };
-    const Scrollbar = vue.defineComponent({
-      name: "Scrollbar",
-      props: scrollbarProps,
-      setup() {
-        const scrollbarInstRef = vue.ref(null);
-        const exposedMethods = {
-          scrollTo: (...args) => {
-            scrollbarInstRef.value?.scrollTo(args[0], args[1]);
-          },
-          scrollBy: (...args) => {
-            scrollbarInstRef.value?.scrollBy(args[0], args[1]);
-          }
-        };
-        return {
-          ...exposedMethods,
-          scrollbarInstRef
-        };
-      },
-      render() {
-        return /* @__PURE__ */ vue.h(Scrollbar$1, { ref: "scrollbarInstRef", ...this.$props }, this.$slots);
-      }
-    });
-
-    var style$$ = cB("h", `
+    var style$_ = cB("h", `
   font-size: var(--u-font-size);
   font-weight: var(--u-font-weight);
   margin: var(--u-margin);
@@ -63150,7 +63701,7 @@
           mergedClsPrefixRef,
           inlineThemeDisabled
         } = useConfig(props);
-        const themeRef = useTheme("Typography", "-h", style$$, typographyLight$1, props, mergedClsPrefixRef);
+        const themeRef = useTheme("Typography", "-h", style$_, typographyLight$1, props, mergedClsPrefixRef);
         const cssVarsRef = vue.computed(() => {
           const {
             type
@@ -63214,7 +63765,7 @@
     const UH5 = createHeader("5");
     const UH6 = createHeader("6");
 
-    var style$_ = cB("a", `
+    var style$Z = cB("a", `
   cursor: pointer;
   transition:
     color .3s var(--u-bezier),
@@ -63237,7 +63788,7 @@
         const themeRef = useTheme(
           "Typography",
           "-a",
-          style$_,
+          style$Z,
           typographyLight$1,
           props,
           mergedClsPrefixRef
@@ -63273,7 +63824,7 @@
       }
     });
 
-    var style$Z = cB("p", `
+    var style$Y = cB("p", `
   box-sizing: border-box;
   transition: color .3s var(--u-bezier);
   margin: var(--u-margin);
@@ -63297,7 +63848,7 @@
         const themeRef = useTheme(
           "Typography",
           "-p",
-          style$Z,
+          style$Y,
           typographyLight$1,
           props,
           mergedClsPrefixRef
@@ -63349,7 +63900,7 @@
       }
     });
 
-    var style$Y = cB("blockquote", `
+    var style$X = cB("blockquote", `
   font-size: var(--u-font-size);
   line-height: var(--u-line-height);
   margin: 0;
@@ -63388,7 +63939,7 @@
         const themeRef = useTheme(
           "Typography",
           "-blockquote",
-          style$Y,
+          style$X,
           typographyLight$1,
           props,
           mergedClsPrefixRef
@@ -63437,7 +63988,7 @@
       }
     });
 
-    var style$X = cB("hr", `
+    var style$W = cB("hr", `
   margin: 12px 0;
   transition: border-color .3s var(--u-bezier);
   border-left: none;
@@ -63462,7 +64013,7 @@
         const themeRef = useTheme(
           "Typography",
           "-hr",
-          style$X,
+          style$W,
           typographyLight$1,
           props,
           mergedClsPrefixRef
@@ -63509,7 +64060,7 @@
   `), c$1("&:last-child", `
     margin-bottom: 0;
   `)];
-    var style$W = c$1([cB("ol", {
+    var style$V = c$1([cB("ol", {
       fontSize: "var(--u-font-size)",
       padding: "var(--u-ol-padding)"
     }, [cM("align-text", {
@@ -63539,7 +64090,7 @@
         const themeRef = useTheme(
           "Typography",
           "-xl",
-          style$W,
+          style$V,
           typographyLight$1,
           props,
           mergedClsPrefixRef
@@ -63610,7 +64161,7 @@
         const themeRef = useTheme(
           "Typography",
           "-xl",
-          style$W,
+          style$V,
           typographyLight$1,
           props,
           mergedClsPrefixRef
@@ -63752,194 +64303,268 @@
       }
     });
 
-    const SCROLL_DELAY = 50;
-    const SENDING_DELAY = 100;
-    const getChatGlobalState = () => ChatGlobalState.getInstance();
+    var ChatAttachmentComponent = vue.defineComponent({
+      name: "ChatAttachment",
+      props: {
+        message: {
+          type: Object,
+          required: true
+        },
+        attachments: {
+          type: Array,
+          required: true
+        },
+        uploadProps: {
+          type: Object,
+          default: () => ({})
+        },
+        withPadding: {
+          type: Boolean,
+          default: false
+        }
+      },
+      setup(props, { slots }) {
+        const getThumbnailUrl = (att) => {
+          const url = [att.preview, att.thumbnail].find(
+            (value) => typeof value === "string"
+          );
+          return url ?? null;
+        };
+        const renderAttachment = () => {
+          const fileList = props.attachments.map(
+            (att, index) => ({
+              id: `${String(props.message.id)}-attachment-${index}`,
+              name: att.name,
+              status: att.status || "finished",
+              percentage: att.percentage ?? null,
+              url: att.url ?? null,
+              thumbnailUrl: getThumbnailUrl(att),
+              type: att.type ?? null,
+              file: null,
+              batchId: null
+            })
+          );
+          const uploadComponent = /* @__PURE__ */ vue.h(
+            UUpload,
+            {
+              abstract: true,
+              fileList,
+              fileListStyle: props.withPadding ? {
+                display: "flex",
+                flexDirection: "column",
+                gap: "2px",
+                marginTop: "0"
+              } : void 0,
+              showRemoveButton: false,
+              showDownloadButton: props.attachments.some(
+                (att) => att.status === "finished"
+              ),
+              showRetryButton: props.attachments.some(
+                (att) => att.status === "error"
+              ),
+              ...props.uploadProps
+            },
+            {
+              default: () => /* @__PURE__ */ vue.h(UUploadFileList, null, {
+                "upload-file-title": slots["upload-file-title"] ? ({ file }) => slots["upload-file-title"]?.(file) : void 0,
+                "upload-file-subtitle": slots["upload-file-subtitle"] ? ({ file }) => slots["upload-file-subtitle"]?.(file) : ({ file }) => {
+                  const att = props.attachments.find(
+                    (a) => a.name === file.name
+                  );
+                  return /* @__PURE__ */ vue.h("span", { style: { fontSize: "12px", color: "#999" } }, att?.size || file.file?.size);
+                }
+              })
+            }
+          );
+          if (props.withPadding) {
+            return /* @__PURE__ */ vue.h("div", { style: { padding: "2px" } }, uploadComponent);
+          }
+          return uploadComponent;
+        };
+        return () => {
+          if (slots.default) {
+            return slots.default(props.message);
+          }
+          return renderAttachment();
+        };
+      }
+    });
+
     const statusIconMapper = {
       [MessageStatus.READ]: CheckmarkDoneSharp,
       [MessageStatus.PENDING]: MdTime,
       [MessageStatus.RETRY]: Refresh,
       [MessageStatus.UNREAD]: CheckmarkDoneSharp
     };
-    var ChatMainArea = vue.defineComponent({
-      name: "ChatMainArea",
-      setup(_, { slots }) {
-        const {
-          mergedClsPrefixRef,
-          selectedChatRef,
-          messagesRef,
-          typingChatIdsRef,
-          messagesLoadingRef,
-          messagesLoadingCountRef,
-          headerButtonPropsRef,
-          headerIconPropsRef,
-          messageUploadPropsRef,
-          footerInputPropsRef,
-          footerButtonPropsRef,
-          footerUploadPropsRef,
-          footerIconPropsRef,
-          inputPlaceholderRef,
-          retryTextRef,
-          typingTextRef,
-          closeButtonTextRef,
-          handleMessageSend,
-          handleMessageRetry,
-          onChatClose,
-          onChatShare,
-          onUserProfile
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        } = vue.inject(chatInjectionKey);
-        const messagesBodyRef = vue.ref();
-        const inputRef = vue.ref();
-        const inputValue = vue.ref("");
-        const attachmentFileList = vue.ref([]);
-        const unreadMessagesCount = vue.computed(() => {
-          if (!messagesRef.value) return 0;
-          return messagesRef.value.filter(
-            (msg) => !msg.isOwn && msg.status === MessageStatus.UNREAD
-          ).length;
-        });
-        const showNotificationManually = vue.ref(false);
-        const hasUnreadMessages = vue.ref(false);
-        const unreadCountOnOpen = vue.ref(0);
-        const chatInputs = vue.ref({});
-        vue.watch(
-          selectedChatRef,
-          (newChat, oldChat) => {
-            if (newChat && newChat.id !== oldChat?.id) {
-              inputValue.value = chatInputs.value[newChat.id] || "";
-              unreadCountOnOpen.value = unreadMessagesCount.value;
-              const globalState = getChatGlobalState();
-              globalState.markChatOpened(newChat.id);
-              if (unreadCountOnOpen.value > 0 && !globalState.hasNotificationShown(newChat.id)) {
-                hasUnreadMessages.value = true;
-                showNotificationManually.value = true;
-                globalState.markNotificationShown(newChat.id);
-              } else {
-                hasUnreadMessages.value = false;
-                showNotificationManually.value = false;
-              }
-              void vue.nextTick(() => {
-                scrollToBottom();
-              });
-            }
-          },
-          { immediate: true }
-        );
-        vue.watch(
-          messagesRef,
-          (newMessages, oldMessages) => {
-            if (newMessages && oldMessages && newMessages.length > oldMessages.length) {
-              if (selectedChatRef.value) {
-                const globalState = getChatGlobalState();
-                if (globalState.hasNotificationShown(selectedChatRef.value.id)) {
-                  showNotificationManually.value = false;
-                }
-              }
-              void vue.nextTick(() => {
-                scrollToBottom();
-              });
-            }
-          },
-          { deep: true }
+    const chatMessagesProps = {
+      ...useTheme.props,
+      messages: {
+        type: Array,
+        default: () => []
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      loadingCount: {
+        type: Number,
+        default: 5
+      },
+      typingChatIds: {
+        type: Array,
+        default: () => []
+      },
+      selectedChatId: {
+        type: [String, Number, Symbol],
+        default: void 0
+      },
+      typingText: {
+        type: String,
+        default: void 0
+      },
+      retryText: {
+        type: String,
+        default: void 0
+      },
+      uploadProps: {
+        type: Object,
+        default: void 0
+      },
+      showUnreadNotification: {
+        type: Boolean,
+        default: false
+      },
+      unreadNotificationText: {
+        type: String,
+        default: void 0
+      },
+      unreadNotificationCount: {
+        type: Number,
+        default: void 0
+      },
+      onMessageRetry: {
+        type: Function,
+        default: void 0
+      }
+    };
+    var UChatMessages = vue.defineComponent({
+      name: "ChatMessages",
+      props: chatMessagesProps,
+      emits: ["message-retry"],
+      setup(props, { slots, emit }) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        const themeRef = useTheme(
+          "Chat",
+          "-chat",
+          style$12,
+          chatLight,
+          props,
+          mergedClsPrefixRef
         );
-        vue.watch(unreadMessagesCount, (newCount, oldCount) => {
-          if (selectedChatRef.value) {
-            if (newCount === 0 && oldCount > 0) {
-              showNotificationManually.value = false;
-              hasUnreadMessages.value = false;
+        const { localeRef } = useLocale("Chat");
+        const cssVarsRef = vue.computed(() => {
+          const {
+            common: {
+              cubicBezierEaseInOut,
+              brandPrimary500,
+              staticGreen,
+              staticRed,
+              textPrimary,
+              textSecondary,
+              textTertiary
+            },
+            self: {
+              backgroundColor,
+              borderColor,
+              mainBackgroundColor,
+              headerBackgroundColor,
+              headerBorderColor,
+              headerTitleColor,
+              messageBubbleBackgroundColorOwn,
+              messageBubbleBackgroundColorOther,
+              messageBubbleTextColorOwn,
+              messageBubbleTextColorOther,
+              messageTimeColor,
+              messageStatusColor,
+              attachmentBackgroundColorOwn,
+              attachmentBackgroundColorOther,
+              unreadNotificationBackgroundColor,
+              unreadNotificationTextColor,
+              typingIndicatorColor,
+              dateSeparatorColor,
+              dateSeparatorBackgroundColor,
+              borderRadius,
+              errorColor
             }
-          }
-        });
-        const showUnreadNotification = vue.computed(() => {
-          return hasUnreadMessages.value && showNotificationManually.value;
+          } = themeRef.value;
+          return {
+            "--u-bezier": cubicBezierEaseInOut,
+            "--u-color-primary": brandPrimary500,
+            "--u-color-success": staticGreen,
+            "--u-color-error": errorColor || staticRed,
+            "--u-text-color-base": textPrimary,
+            "--u-text-color-secondary": textSecondary,
+            "--u-text-color-disabled": textTertiary,
+            "--u-background-color": backgroundColor,
+            "--u-border-color": borderColor,
+            "--u-main-background-color": mainBackgroundColor,
+            "--u-header-background-color": headerBackgroundColor,
+            "--u-header-border-color": headerBorderColor,
+            "--u-header-title-color": headerTitleColor,
+            "--u-message-bubble-background-color-own": messageBubbleBackgroundColorOwn,
+            "--u-message-bubble-background-color-other": messageBubbleBackgroundColorOther,
+            "--u-message-bubble-text-color-own": messageBubbleTextColorOwn,
+            "--u-message-bubble-text-color-other": messageBubbleTextColorOther,
+            "--u-message-time-color": messageTimeColor,
+            "--u-message-status-color": messageStatusColor,
+            "--u-attachment-background-color-own": attachmentBackgroundColorOwn,
+            "--u-attachment-background-color-other": attachmentBackgroundColorOther,
+            "--u-unread-notification-background-color": unreadNotificationBackgroundColor,
+            "--u-unread-notification-text-color": unreadNotificationTextColor,
+            "--u-typing-indicator-color": typingIndicatorColor,
+            "--u-date-separator-color": dateSeparatorColor,
+            "--u-date-separator-background-color": dateSeparatorBackgroundColor,
+            "--u-border-radius": borderRadius
+          };
         });
-        vue.onMounted(() => {
-          void vue.nextTick(() => {
-            scrollToBottom();
-          });
+        const themeClassHandle = useThemeClass(
+          "chat-messages",
+          vue.computed(() => ""),
+          cssVarsRef,
+          props
+        );
+        const mergedTypingTextRef = vue.computed(
+          () => props.typingText ?? localeRef.value.typingText
+        );
+        const mergedRetryTextRef = vue.computed(
+          () => props.retryText ?? localeRef.value.retryText
+        );
+        const mergedUnreadNotificationTextRef = vue.computed(
+          () => props.unreadNotificationText ?? localeRef.value.unreadNotificationText
+        );
+        const unreadMessagesCount = vue.computed(() => {
+          if (!props.messages) return 0;
+          return props.messages.filter(
+            (msg) => !msg.isOwn && msg.status === MessageStatus.UNREAD
+          ).length;
         });
-        const scrollToBottom = () => {
-          const el = messagesBodyRef.value;
-          if (!el) return;
-          if ("scrollTo" in el && typeof el.scrollTo === "function") {
-            el.scrollTo({ top: 999999, behavior: "smooth" });
-            return;
-          }
-          if ("$el" in el && el.$el instanceof HTMLElement) {
-            const scrollContainer = el.$el.querySelector(".u-scrollbar-content") || el.$el;
-            scrollContainer.scrollTop = scrollContainer.scrollHeight;
-            return;
-          }
-          if ("scrollTop" in el && "scrollHeight" in el) {
-            el.scrollTop = el.scrollHeight;
-          }
+        const handleMessageRetry = (message) => {
+          emit("message-retry", message);
+          props.onMessageRetry?.(message);
+        };
+        const renderDateSeparator = (date) => {
+          return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` }, /* @__PURE__ */ vue.h("span", null, date));
         };
         const renderUnreadNotification = () => {
-          if (!showUnreadNotification.value) return null;
+          const count = props.unreadNotificationCount ?? unreadMessagesCount.value;
           return /* @__PURE__ */ vue.h(
             "div",
             {
               class: `${mergedClsPrefixRef.value}-chat-main__unread-notification`
             },
-            /* @__PURE__ */ vue.h("span", null, unreadCountOnOpen.value, " \u043D\u043E\u0432\u044B\u0445 \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F")
+            /* @__PURE__ */ vue.h("span", null, count, " ", mergedUnreadNotificationTextRef.value)
           );
         };
-        const renderHeader = () => {
-          return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ vue.h(UFlex, { justify: "space-between", align: "flex-start" }, /* @__PURE__ */ vue.h(
-            UText,
-            {
-              variant: "heading-s-bold",
-              class: `${mergedClsPrefixRef.value}-chat-main__header-title`
-            },
-            selectedChatRef.value?.title || "Select a chat"
-          ), /* @__PURE__ */ vue.h(
-            UFlex,
-            {
-              align: "center",
-              size: "small",
-              class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
-            },
-            resolveSlot(slots.headerActions, () => [
-              /* @__PURE__ */ vue.h(
-                Button,
-                {
-                  secondary: true,
-                  circle: true,
-                  size: "large",
-                  ...headerButtonPropsRef.value,
-                  onClick: () => onChatShare?.value?.()
-                },
-                /* @__PURE__ */ vue.h(UIcon, { size: 20, ...headerIconPropsRef.value }, /* @__PURE__ */ vue.h(ArrowHookUpRight, null))
-              ),
-              /* @__PURE__ */ vue.h(
-                Button,
-                {
-                  secondary: true,
-                  circle: true,
-                  size: "large",
-                  ...headerButtonPropsRef.value,
-                  onClick: () => onUserProfile?.value?.()
-                },
-                /* @__PURE__ */ vue.h(UIcon, { size: 20, ...headerIconPropsRef.value }, /* @__PURE__ */ vue.h(PersonNote, null))
-              ),
-              /* @__PURE__ */ vue.h(
-                Button,
-                {
-                  type: "primary",
-                  size: "large",
-                  round: true,
-                  ...headerButtonPropsRef.value,
-                  onClick: () => onChatClose?.value?.()
-                },
-                closeButtonTextRef.value
-              )
-            ])
-          )));
-        };
-        const renderDateSeparator = (date) => {
-          return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__date-separator` }, /* @__PURE__ */ vue.h("span", null, date));
-        };
         const renderMessage = (message) => {
           const isOwn = message.isOwn;
           const attachments = message.attachment ? Array.isArray(message.attachment) ? message.attachment : [message.attachment] : [];
@@ -63965,7 +64590,7 @@
                 {
                   message,
                   attachments,
-                  uploadProps: messageUploadPropsRef.value,
+                  uploadProps: props.uploadProps,
                   withPadding: true
                 },
                 {
@@ -63986,7 +64611,7 @@
               {
                 message,
                 attachments,
-                uploadProps: messageUploadPropsRef.value
+                uploadProps: props.uploadProps
               },
               {
                 default: slots.messageAttachment,
@@ -64024,7 +64649,7 @@
                   {
                     class: `${mergedClsPrefixRef.value}-chat-main__message-retry-text`
                   },
-                  retryTextRef.value
+                  mergedRetryTextRef.value
                 )
               ) : /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
                 "span",
@@ -64085,7 +64710,7 @@
                 {
                   class: `${mergedClsPrefixRef.value}-chat-main__message-time`
                 },
-                typingTextRef.value
+                mergedTypingTextRef.value
               )
             ))
           );
@@ -64132,46 +64757,121 @@
             ))
           );
         };
-        const renderMessages = () => {
-          if (messagesLoadingRef.value) {
-            return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__messages` }, Array.from({ length: messagesLoadingCountRef.value || 5 }).map(
-              (_2, index) => {
-                const isOwn = index % 2 === 0;
-                return renderSkeletonMessage(isOwn, index);
-              }
-            ));
+        return {
+          mergedClsPrefixRef,
+          renderMessage,
+          renderTypingIndicator,
+          renderSkeletonMessage,
+          renderDateSeparator,
+          renderUnreadNotification,
+          cssVars: cssVarsRef,
+          themeClass: themeClassHandle?.themeClass,
+          onRender: themeClassHandle?.onRender
+        };
+      },
+      render() {
+        this.onRender?.();
+        const {
+          mergedClsPrefixRef,
+          renderMessage,
+          renderTypingIndicator,
+          renderSkeletonMessage,
+          renderDateSeparator,
+          renderUnreadNotification
+        } = this;
+        if (this.loading) {
+          return /* @__PURE__ */ vue.h(
+            "div",
+            {
+              class: [`${mergedClsPrefixRef}-chat`, this.themeClass],
+              style: this.cssVars
+            },
+            /* @__PURE__ */ vue.h(
+              "div",
+              {
+                class: `${mergedClsPrefixRef}-chat-main`,
+                style: {
+                  border: "none",
+                  borderRadius: "0",
+                  padding: "0",
+                  background: "transparent"
+                }
+              },
+              /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef}-chat-main__messages` }, Array.from({ length: this.loadingCount || 5 }).map(
+                (_, index) => {
+                  const isOwn = index % 2 === 0;
+                  return renderSkeletonMessage(isOwn, index);
+                }
+              ))
+            )
+          );
+        }
+        const messagesWithDates = [];
+        let currentDate = "";
+        let unreadNotificationInserted = false;
+        this.messages?.forEach((message, index) => {
+          const messageDate = message.date || "";
+          if (messageDate !== currentDate) {
+            messagesWithDates.push({
+              type: "date-separator",
+              date: messageDate,
+              id: `date-${String(index)}`
+            });
+            currentDate = messageDate;
           }
-          const messagesWithDates = [];
-          let currentDate = "";
-          let unreadNotificationInserted = false;
-          messagesRef.value?.forEach((message, index) => {
-            const messageDate = message.date || "";
-            if (messageDate !== currentDate) {
-              messagesWithDates.push({
-                type: "date-separator",
-                date: messageDate,
-                id: `date-${String(index)}`
-              });
-              currentDate = messageDate;
-            }
-            if (!unreadNotificationInserted && !message.isOwn && message.status === MessageStatus.UNREAD && showUnreadNotification.value) {
-              messagesWithDates.push({
-                type: "unread-notification",
-                id: "unread-notification"
-              });
-              unreadNotificationInserted = true;
-            }
+          if (!unreadNotificationInserted && !message.isOwn && message.status === MessageStatus.UNREAD && this.showUnreadNotification) {
             messagesWithDates.push({
-              type: "message",
-              ...message
+              type: "unread-notification",
+              id: "unread-notification"
             });
+            unreadNotificationInserted = true;
+          }
+          messagesWithDates.push({
+            type: "message",
+            ...message
           });
-          return /* @__PURE__ */ vue.h(
+        });
+        if (!unreadNotificationInserted && this.showUnreadNotification) {
+          const unreadCount = this.unreadNotificationCount || 0;
+          let incomingMessagesFound = 0;
+          let insertIndex = messagesWithDates.length;
+          for (let i = messagesWithDates.length - 1; i >= 0; i--) {
+            const item = messagesWithDates[i];
+            if (item.type === "message") {
+              const message = item;
+              if (!message.isOwn) {
+                incomingMessagesFound++;
+                if (incomingMessagesFound === unreadCount) {
+                  insertIndex = i;
+                  break;
+                }
+              }
+            }
+          }
+          messagesWithDates.splice(insertIndex, 0, {
+            type: "unread-notification",
+            id: "unread-notification"
+          });
+        }
+        const isTyping = this.selectedChatId && this.typingChatIds?.includes(this.selectedChatId);
+        return /* @__PURE__ */ vue.h(
+          "div",
+          {
+            class: [`${mergedClsPrefixRef}-chat`, this.themeClass],
+            style: this.cssVars
+          },
+          /* @__PURE__ */ vue.h(
             "div",
             {
-              class: `${mergedClsPrefixRef.value}-chat-main__messages-container`
+              class: `${mergedClsPrefixRef}-chat-main`,
+              style: {
+                border: "none",
+                borderRadius: "0",
+                padding: "0",
+                background: "transparent"
+              }
             },
-            messagesWithDates.map(
+            /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef}-chat-main__messages-container` }, messagesWithDates.map(
               (item) => {
                 if (item.type === "date-separator") {
                   return renderDateSeparator(item.date ?? "");
@@ -64181,8 +64881,240 @@
                 }
                 return renderMessage(item);
               }
-            ),
-            selectedChatRef.value && typingChatIdsRef.value?.includes(selectedChatRef.value.id) && renderTypingIndicator()
+            ), isTyping && renderTypingIndicator())
+          )
+        );
+      }
+    });
+
+    const SCROLL_DELAY = 50;
+    const SENDING_DELAY = 100;
+    var ChatMainArea = vue.defineComponent({
+      name: "ChatMainArea",
+      setup(_, { slots }) {
+        const {
+          mergedClsPrefixRef,
+          selectedChatRef,
+          messagesRef,
+          typingChatIdsRef,
+          messagesLoadingRef,
+          messagesLoadingCountRef,
+          headerButtonPropsRef,
+          headerIconPropsRef,
+          messageUploadPropsRef,
+          footerInputPropsRef,
+          footerButtonPropsRef,
+          footerUploadPropsRef,
+          footerIconPropsRef,
+          inputPlaceholderRef,
+          retryTextRef,
+          typingTextRef,
+          closeButtonTextRef,
+          unreadNotificationTextRef,
+          notificationsShownSetRef,
+          unreadCountsBeforeReadRef,
+          markNotificationShown,
+          handleMessageSend,
+          handleMessageRetry,
+          onChatClose,
+          onChatShare,
+          onUserProfile
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        } = vue.inject(chatInjectionKey);
+        const messagesBodyRef = vue.ref();
+        const inputRef = vue.ref();
+        const inputValue = vue.ref("");
+        const attachmentFileList = vue.ref([]);
+        const unreadMessagesCount = vue.computed(() => {
+          if (!messagesRef.value) return 0;
+          return messagesRef.value.filter(
+            (msg) => !msg.isOwn && msg.status === MessageStatus.UNREAD
+          ).length;
+        });
+        const showNotificationManually = vue.ref(false);
+        const hasUnreadMessages = vue.ref(false);
+        const unreadCountOnOpen = vue.ref(0);
+        const chatInputs = vue.ref({});
+        const lastMessageId = vue.ref(null);
+        vue.watch(
+          selectedChatRef,
+          (newChat, oldChat) => {
+            if (newChat && newChat.id !== oldChat?.id) {
+              inputValue.value = chatInputs.value[newChat.id] || "";
+              const unreadBeforeRead = unreadCountsBeforeReadRef.value[newChat.id] || 0;
+              unreadCountOnOpen.value = unreadBeforeRead;
+              lastMessageId.value = null;
+              if (unreadBeforeRead > 0 && !notificationsShownSetRef.value.has(newChat.id)) {
+                hasUnreadMessages.value = true;
+                showNotificationManually.value = true;
+                markNotificationShown(newChat.id);
+              } else {
+                hasUnreadMessages.value = false;
+                showNotificationManually.value = false;
+              }
+              void vue.nextTick(() => {
+                scrollToBottom();
+              });
+              setTimeout(() => {
+                scrollToBottom();
+              }, SCROLL_DELAY);
+            }
+          },
+          { immediate: true }
+        );
+        vue.watch(
+          messagesRef,
+          (newMessages) => {
+            if (!newMessages || newMessages.length === 0) {
+              lastMessageId.value = null;
+              return;
+            }
+            const currentLastMessage = newMessages[newMessages.length - 1];
+            const currentLastId = currentLastMessage?.id;
+            if (currentLastId !== lastMessageId.value && lastMessageId.value !== null) {
+              void vue.nextTick(() => {
+                scrollToBottom();
+              });
+              setTimeout(() => {
+                scrollToBottom();
+              }, SCROLL_DELAY);
+              if (currentLastMessage && !currentLastMessage.isOwn && currentLastMessage.status === MessageStatus.UNREAD) {
+                unreadCountOnOpen.value = unreadMessagesCount.value;
+              }
+            }
+            lastMessageId.value = currentLastId ?? null;
+          },
+          { deep: true, flush: "post" }
+        );
+        vue.watch(unreadMessagesCount, (newCount, oldCount) => {
+          if (selectedChatRef.value && newCount === 0 && oldCount > 0) {
+            showNotificationManually.value = false;
+            hasUnreadMessages.value = false;
+            const newSet = new Set(notificationsShownSetRef.value);
+            newSet.delete(selectedChatRef.value.id);
+            notificationsShownSetRef.value = newSet;
+          }
+        });
+        const showUnreadNotification = vue.computed(() => {
+          return hasUnreadMessages.value && showNotificationManually.value;
+        });
+        vue.onMounted(() => {
+          void vue.nextTick(() => {
+            scrollToBottom();
+          });
+          setTimeout(() => {
+            scrollToBottom();
+          }, SCROLL_DELAY);
+        });
+        const scrollToBottom = () => {
+          const el = messagesBodyRef.value;
+          if (!el) return;
+          if ("$el" in el && el.$el instanceof HTMLElement) {
+            const scrollContainer = el.$el.querySelector(".u-scrollbar-content");
+            if (scrollContainer) {
+              scrollContainer.scrollTop = scrollContainer.scrollHeight;
+              return;
+            }
+          }
+          if ("scrollTo" in el && typeof el.scrollTo === "function") {
+            el.scrollTo({ top: 999999, behavior: "auto" });
+            return;
+          }
+          if ("scrollTop" in el && "scrollHeight" in el) {
+            el.scrollTop = el.scrollHeight;
+          }
+        };
+        const renderHeader = () => {
+          return /* @__PURE__ */ vue.h("div", { class: `${mergedClsPrefixRef.value}-chat-main__header` }, /* @__PURE__ */ vue.h(UFlex, { justify: "space-between", align: "flex-start" }, {
+            default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(
+              UText,
+              {
+                variant: "heading-s-bold",
+                class: `${mergedClsPrefixRef.value}-chat-main__header-title`
+              },
+              {
+                default: () => selectedChatRef.value?.title || "Select a chat"
+              }
+            ), /* @__PURE__ */ vue.h(
+              UFlex,
+              {
+                align: "center",
+                size: "small",
+                class: `${mergedClsPrefixRef.value}-chat-main__header-actions`
+              },
+              {
+                default: () => resolveSlot(slots.headerActions, () => [
+                  /* @__PURE__ */ vue.h(
+                    Button,
+                    {
+                      secondary: true,
+                      circle: true,
+                      size: "large",
+                      ...headerButtonPropsRef.value,
+                      onClick: () => onChatShare?.value?.()
+                    },
+                    {
+                      default: () => /* @__PURE__ */ vue.h(UIcon, { size: 20, ...headerIconPropsRef.value }, {
+                        default: () => /* @__PURE__ */ vue.h(ArrowHookUpRight, null)
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ vue.h(
+                    Button,
+                    {
+                      secondary: true,
+                      circle: true,
+                      size: "large",
+                      ...headerButtonPropsRef.value,
+                      onClick: () => onUserProfile?.value?.()
+                    },
+                    {
+                      default: () => /* @__PURE__ */ vue.h(UIcon, { size: 20, ...headerIconPropsRef.value }, {
+                        default: () => /* @__PURE__ */ vue.h(PersonNote, null)
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ vue.h(
+                    Button,
+                    {
+                      type: "primary",
+                      size: "large",
+                      round: true,
+                      ...headerButtonPropsRef.value,
+                      onClick: () => onChatClose?.value?.()
+                    },
+                    {
+                      default: () => closeButtonTextRef.value
+                    }
+                  )
+                ])
+              }
+            ))
+          }));
+        };
+        const renderMessages = () => {
+          return /* @__PURE__ */ vue.h(
+            UChatMessages,
+            {
+              messages: messagesRef.value,
+              loading: messagesLoadingRef.value,
+              loadingCount: messagesLoadingCountRef.value,
+              typingChatIds: typingChatIdsRef.value,
+              selectedChatId: selectedChatRef.value?.id,
+              typingText: typingTextRef.value,
+              retryText: retryTextRef.value,
+              uploadProps: messageUploadPropsRef.value,
+              showUnreadNotification: showUnreadNotification.value,
+              unreadNotificationText: unreadNotificationTextRef.value,
+              unreadNotificationCount: unreadCountOnOpen.value,
+              onMessageRetry: handleMessageRetry
+            },
+            {
+              messageAttachment: slots.messageAttachment,
+              messageAttachmentTitle: slots.messageAttachmentTitle,
+              messageAttachmentSubtitle: slots.messageAttachmentSubtitle,
+              messageStatus: slots.messageStatus
+            }
           );
         };
         const isSending = vue.ref(false);
@@ -64209,12 +65141,8 @@
               inputValue.value = "";
               attachmentFileList.value = [];
               chatInputs.value[selectedChatRef.value.id] = "";
-              const globalState = getChatGlobalState();
-              if (globalState.hasNotificationShown(selectedChatRef.value.id)) {
-                globalState.markNotificationShown(selectedChatRef.value.id);
-                showNotificationManually.value = false;
-                hasUnreadMessages.value = false;
-              }
+              hasUnreadMessages.value = false;
+              showNotificationManually.value = false;
               void vue.nextTick(() => {
                 scrollToBottom();
               });
@@ -64285,58 +65213,72 @@
               onUpdateFileList: handleFileListUpdate,
               ...footerUploadPropsRef.value
             },
-            /* @__PURE__ */ vue.h(
-              UFlex,
-              {
-                align: "center",
-                size: "small",
-                class: `${mergedClsPrefixRef.value}-chat-main__input-container`
-              },
-              /* @__PURE__ */ vue.h(UUploadTrigger, { abstract: true }, {
-                default: ({ handleClick }) => /* @__PURE__ */ vue.h(
-                  Button,
-                  {
-                    secondary: true,
-                    size: "large",
-                    class: `${mergedClsPrefixRef.value}-chat-main__attach-btn`,
-                    ...footerButtonPropsRef.value,
-                    onClick: handleClick
-                  },
-                  /* @__PURE__ */ vue.h(UIcon, { size: 24, ...footerIconPropsRef.value }, /* @__PURE__ */ vue.h(AttachIcon, null))
-                )
-              }),
-              /* @__PURE__ */ vue.h(
-                UInput,
+            {
+              default: () => /* @__PURE__ */ vue.h(
+                UFlex,
                 {
-                  ref: "inputRef",
-                  value: inputValue.value,
-                  placeholder: inputPlaceholderRef.value,
-                  class: `${mergedClsPrefixRef.value}-chat-main__input`,
-                  ...footerInputPropsRef.value,
-                  onUpdateValue: (value) => {
-                    inputValue.value = value;
-                    if (selectedChatRef.value) {
-                      chatInputs.value[selectedChatRef.value.id] = value;
-                    }
-                  },
-                  onKeydown: (e) => {
-                    if (e.key === "Enter" && !e.shiftKey) {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      void handleSendMessage();
+                  align: "center",
+                  size: "small",
+                  class: `${mergedClsPrefixRef.value}-chat-main__input-container`
+                },
+                {
+                  default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, /* @__PURE__ */ vue.h(UUploadTrigger, { abstract: true }, {
+                    default: ({
+                      handleClick
+                    }) => /* @__PURE__ */ vue.h(
+                      Button,
+                      {
+                        secondary: true,
+                        size: "large",
+                        class: `${mergedClsPrefixRef.value}-chat-main__attach-btn`,
+                        ...footerButtonPropsRef.value,
+                        onClick: handleClick
+                      },
+                      {
+                        default: () => /* @__PURE__ */ vue.h(
+                          UIcon,
+                          {
+                            size: 24,
+                            ...footerIconPropsRef.value
+                          },
+                          {
+                            default: () => /* @__PURE__ */ vue.h(AttachIcon, null)
+                          }
+                        )
+                      }
+                    )
+                  }), /* @__PURE__ */ vue.h(
+                    UInput,
+                    {
+                      ref: "inputRef",
+                      value: inputValue.value,
+                      placeholder: inputPlaceholderRef.value,
+                      class: `${mergedClsPrefixRef.value}-chat-main__input`,
+                      ...footerInputPropsRef.value,
+                      onUpdateValue: (value) => {
+                        inputValue.value = value;
+                        if (selectedChatRef.value) {
+                          chatInputs.value[selectedChatRef.value.id] = value;
+                        }
+                      },
+                      onKeydown: (e) => {
+                        if (e.key === "Enter" && !e.shiftKey) {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          void handleSendMessage();
+                        }
+                      }
                     }
-                  }
+                  ))
                 }
               )
-            )
+            }
           ));
         };
         return {
           renderHeader,
           renderMessages,
           renderFooter,
-          renderUnreadNotification,
-          showUnreadNotification,
           messagesBodyRef,
           inputRef,
           inputValue,
@@ -64352,451 +65294,10 @@
             ref: "messagesBodyRef",
             class: `${mergedClsPrefixRef.value}-chat-main__body`
           },
-          this.renderMessages()
-        ), this.renderFooter());
-      }
-    });
-
-    var style$V = cB("chat", `
-  height: 100%;
-  max-height: 100%;
-  min-height: 0;
-  display: flex;
-  overflow: hidden;
-  box-sizing: border-box;
-  .u-list-item__text {
-    grid-template-columns: 1fr !important;
-  }
-  .u-flex {
-    height: 100%;
-    max-height: 100%;
-    min-height: 0;
-    overflow: hidden;
-  }
-`, [cB("chat-sidebar", `
-    max-width: 388px;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--u-sidebar-background-color);
-    border: 1px solid var(--u-sidebar-border-color);
-    border-radius: 20px;
-    overflow: hidden;
-  `, [cE("header", `
-      padding: 16px 16px 0 16px;
-      flex-shrink: 0;
-    `), cE("header-main", `
-      flex: 0 0 48%;
-      min-width: 0;
-    `), cE("header-actions", `
-      flex: 0 0 48%;
-      min-width: 0;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      gap: 8px;
-    `), cE("content", `
-      flex: 1;
-      overflow-y: auto;
-      min-height: 0;
-      padding: 16px;
-      padding-top: 12px;
-    `), cE("item", `
-       padding: 12px 16px;
-       width: 100%;
-       cursor: pointer;
-       border-radius: 8px;
-       margin-bottom: 4px;
-       transition: all 0.2s ease;
-       position: relative;
-       `, [c$1(".u-list-item", `
-          min-width: 0;
-        `), c$1(".u-list-item__main", `
-          min-width: 0;
-          flex: 1;
-        `), c$1(".u-list-item__prefix", `
-          flex-shrink: 0;
-        `), c$1(".u-list-item__suffix", `
-          flex-shrink: 0;
-          margin-left: 12px;
-        `), c$1(".u-list-item__text", `
-          grid-template-columns: 1fr !important;
-          min-width: 0 !important;
-          max-width: 100%;
-        `), c$1(".u-list-item__content", `
-          min-width: 0;
-        `), c$1(".u-list-item__title", `
-          min-width: 0;
-        `), c$1(".u-list-item__subtitle", `
-          min-width: 0 !important;
-        `), cM("selected", `
-          background-color: var(--u-sidebar-item-background-color-selected);
-        `, [c$1("&:hover", `
-            background-color: var(--u-sidebar-item-background-color-selected);
-          `)]), cM("typing", `
-          .u-list-item__description {
-            color: var(--u-color-primary) !important;
-            font-style: italic;
+          {
+            default: () => this.renderMessages()
           }
-        `), c$1("&:hover", `
-          background-color: var(--u-sidebar-item-background-color-hover);
-        `, [cM("selected", `
-           background-color: var(--u-sidebar-item-background-color-selected);
-          `)])]), cE("item-title", `
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        color: var(--u-sidebar-item-text-color);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `), cE("item-subtitle", `
-        font-size: 12px;
-        line-height: 16px;
-        color: var(--u-sidebar-item-subtitle-color);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `, [cM("typing", `
-          color: var(--u-color-primary);
-          font-style: italic;
-        `)]), cE("item-main", `
-        flex: 1;
-        min-width: 0;
-        margin-right: 12px;
-      `), cE("item-title", `
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 20px;
-        color: var(--u-text-color-base);
-        margin-bottom: 2px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `), cE("item-subtitle", `
-        font-size: 12px;
-        line-height: 16px;
-        color: var(--u-text-color-disabled);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `), cE("item-indicators", `
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        gap: 4px;
-        flex-shrink: 0;
-      `), cE("item-time", `
-        font-size: 11px;
-        line-height: 21px;
-        color: var(--u-sidebar-item-time-color);
-        white-space: nowrap;
-      `), cE("item-status sup", `
-        padding: 2px 6px 2px 5px;
-        height: 22px;
-        --u-color: var(--u-unread-notification-background-color);
-      `), cE("item-status-icon", `
-        color: var(--u-sidebar-item-time-color);
-      `, [cM("read", `
-          color: var(--u-unread-notification-background-color);
-        `)]), c$1("&:has(.u-chat-sidebar__item-badge)", `
-      `, [cE("item-title", `
-          font-weight: 600;
-        `), cE("item-subtitle", `
-          color: var(--u-text-color-base);
-          font-weight: 500;
-        `)])]), cB("chat-main", `
-          background-color: var(--u-main-background-color);
-          border: 1px solid var(--u-border-color);
-          border-radius: 20px;
-          width: 100%;
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          max-height: 100%;
-          min-height: 0;
-          overflow: hidden;
-        `, [cE("header", `
-            border-bottom: 1px solid var(--u-border-color);
-            width: 100%;
-            padding: 24px 20px 8px 24px;
-            flex-shrink: 0;
-          `), cE("header-title", `
-            margin-top: 9px;
-            color: var(--u-header-title-color);
-          `), cE("header-actions", `
-            padding: 4px;
-          `), cE("unread-notification", `
-            background-color: var(--u-unread-notification-background-color);
-            color: var(--u-unread-notification-text-color);
-            padding: 6px 12px;
-            text-align: center;
-            font-size: 12px;
-            font-weight: 500;
-            margin: 8px 0;
-            display: flex;
-            justify-content: center;
-            width: 100%;
-          `, [c$1("span", `
-              display: inline-block;
-              white-space: nowrap;
-            `)]), cE("body", `
-            flex: 1;
-            min-height: 0;
-            position: relative;
-          `, [c$1(".u-scrollbar-content", `
-              padding: 16px 24px;
-              min-height: 100%;
-              display: flex;
-              flex-direction: column;
-              justify-content: flex-end;
-            `)]), cE("messages-container", `
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            min-height: 100%;
-            width: 100%;
-            justify-content: flex-end;
-          `), cE("date-separator", `
-            display: flex;
-            justify-content: center;
-            margin: 16px 0;
-          `, [c$1("span", `
-              color: var(--u-date-separator-color);
-              padding: 4px 12px;
-              border-radius: 12px;
-              font-size: 12px;
-              font-weight: 500;
-            `)]), cE("message", `
-            display: flex;
-            margin-bottom: 8px;
-            flex-shrink: 0;
-            width: 100%;
-          `, [cM("own", `
-              justify-content: flex-end;
-            `), cM("other", `
-              justify-content: flex-start;
-            `)]), cE("message-wrapper", `
-            max-width: 70%;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-            flex-shrink: 0;
-          `), cE("message-bubble", `
-            border-radius: 18px;
-            font-size: 14px;
-            line-height: 20px;
-            word-wrap: break-word;
-            background-color: var(--u-message-bubble-background-color-other);
-            color: var(--u-message-bubble-text-color-other);
-            border-bottom-left-radius: 6px;
-            width: fit-content;
-            display: flex;
-            flex-direction: column;
-          `, [cM("own", `
-              background-color: var(--u-message-bubble-background-color-own);
-              color: var(--u-message-bubble-text-color-own);
-              border-bottom-left-radius: 18px;
-              border-bottom-right-radius: 6px;
-            `), cM("typing", `
-              min-width: 300px;
-              height: 44px;
-              padding: 12px 16px;
-            `), cM("skeleton", `
-              min-width: 376px;
-              height: 44px;
-            `)]), cE("message-text", `
-            padding: 12px 16px;
-          `), cE("message-attachment", `
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 12px 16px;
-            background-color: #f8f9fa;
-            border-radius: 12px;
-            border: 1px solid #e9ecef;
-            margin-top: 4px;
-          `), cE("attachment-icon", `
-            color: #6c757d;
-            flex-shrink: 0;
-          `), cE("attachment-info", `
-            flex: 1;
-            min-width: 0;
-          `), cE("attachment-name", `
-            font-size: 14px;
-            font-weight: 500;
-            color: var(--u-text-color-base);
-            margin-bottom: 2px;
-          `), cE("attachment-size", `
-            font-size: 12px;
-            color: var(--u-text-color-disabled);
-          `), cE("message-meta", `
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            font-size: 11px;
-            color: var(--u-text-color-disabled);
-            margin-top: 2px;
-          `, [cM("own", `
-              justify-content: flex-end;
-            `), cM("other", `
-              justify-content: flex-start;
-            `), cM("skeleton", `
-              width: 36px;
-              height: 20px;
-              border-radius: 4px;
-            `)]), cE("message-time", `
-            font-size: 11px;
-            color: var(--u-message-time-color);
-          `), cE("message-status", `
-            color: var(--u-color-success);
-            display: flex;
-            align-items: center;
-          `), cE("message-status-icon", `
-            color: var(--u-message-time-color);
-          `, [cM("read", `
-              color: var(--u-unread-notification-background-color);
-            `), cM("retry", `
-              color: var(--u-color-error);
-            `)]), cE("message-retry", `
-            display: flex;
-            align-items: center;
-            gap: 4px;
-          `), cE("message-retry-icon", `
-            color: var(--u-color-error);
-          `), cE("message-retry-text", `
-            color: var(--u-color-error);
-            font-size: 11px;
-            font-weight: 500;
-          `), cE("typing-indicator", `
-            display: flex;
-            justify-content: flex-start;
-            margin-bottom: 8px;
-          `), cE("footer", `
-            border-top: 1px solid var(--u-border-color);
-            padding: 0px 20px;
-            flex-shrink: 0;
-          `), cE("input-container", `
-            width: 100%;
-            padding: 16px 0px;
-          `), cE("input", `
-            flex: 1;
-            margin-right: 4px;
-            --u-color: #F3F4F6 !important;
-            --u-color-focus: #F3F4F6 !important;
-            --u-border: none !important;
-            --u-border-focus: none !important;
-            --u-border-hover: none !important;
-            --u-box-shadow: none !important;
-            --u-box-shadow-focus: none !important;
-          `), cE("attach-btn", `
-            margin-left: 4px;
-            flex-shrink: 0;
-            padding: 0 12px;
-          `)]), c$1("*", `
-    box-sizing: border-box;
-  `), c$1(".u-list-item .u-list-item__text", `
-    grid-template-columns: 1fr !important;
-  `), c$1(".u-upload-file-list .u-upload-file.u-upload-file--text-type", `
-    margin-bottom: 0px;
-  `), c$1(".u-chat-main__message-bubble--own .u-upload-file", `
-    background-color: var(--u-attachment-background-color-own);
-  `), c$1(".u-chat-main__message-bubble--other .u-upload-file", `
-    background-color: var(--u-attachment-background-color-other);
-  `)]);
-
-    const self$5 = vars => {
-      const {
-        borderRadiusLarge,
-        elementsQuaternary,
-        elementsTertiary,
-        textTertiary,
-        textPrimary,
-        textSecondary,
-        surfacePrimary,
-        brandPrimary500,
-        brandPrimary400,
-        transparencySecondary,
-        elementsSecondary,
-        elementsDarkQuinary,
-        staticRed,
-        staticWhite
-      } = vars;
-      return {
-        backgroundColor: surfacePrimary,
-        borderColor: elementsQuaternary,
-        sidebarBackgroundColor: surfacePrimary,
-        sidebarBorderColor: elementsQuaternary,
-        sidebarItemBackgroundColor: "transparent",
-        sidebarItemBackgroundColorHover: elementsTertiary,
-        sidebarItemBackgroundColorSelected: transparencySecondary,
-        sidebarItemTextColor: textPrimary,
-        sidebarItemTextColorSelected: brandPrimary500,
-        sidebarItemSubtitleColor: textSecondary,
-        sidebarItemTimeColor: elementsDarkQuinary,
-        mainBackgroundColor: surfacePrimary,
-        headerBackgroundColor: surfacePrimary,
-        headerBorderColor: elementsQuaternary,
-        headerTitleColor: textPrimary,
-        messageBubbleBackgroundColorOwn: elementsTertiary,
-        messageBubbleBackgroundColorOther: elementsTertiary,
-        messageBubbleTextColorOwn: textPrimary,
-        messageBubbleTextColorOther: textPrimary,
-        messageTimeColor: textTertiary,
-        messageStatusColor: textSecondary,
-        attachmentBackgroundColorOwn: staticWhite,
-        attachmentBackgroundColorOther: staticWhite,
-        footerBackgroundColor: surfacePrimary,
-        footerBorderColor: elementsQuaternary,
-        inputBackgroundColor: surfacePrimary,
-        inputBorderColor: elementsQuaternary,
-        unreadNotificationBackgroundColor: brandPrimary400,
-        unreadNotificationTextColor: elementsSecondary,
-        typingIndicatorColor: textSecondary,
-        dateSeparatorColor: textTertiary,
-        dateSeparatorBackgroundColor: elementsTertiary,
-        borderRadius: borderRadiusLarge,
-        errorColor: staticRed
-      };
-    };
-    const chatLight = createTheme$1({
-      name: "Chat",
-      common: derived,
-      peers: {
-        Input: inputLight,
-        Empty: emptyLight,
-        Select: selectLight,
-        Avatar: avatarLight,
-        Badge: badgeLight,
-        Button: buttonLight,
-        Icon: iconLight,
-        List: listLight,
-        Typography: typographyLight$1
-      },
-      self: self$5
-    });
-
-    const chatDark = createTheme$1({
-      name: "Chat",
-      common: derived$1,
-      peers: {
-        Input: inputDark,
-        Empty: emptyDark$1,
-        Select: selectDark,
-        Avatar: avatarDark,
-        Badge: badgeDark,
-        Button: buttonDark,
-        Icon: iconDark$1,
-        List: listDark$1,
-        Typography: typographyDark
-      },
-      self: vars => {
-        const lightVars = self$5(vars);
-        return {
-          ...lightVars
-        };
+        ), this.renderFooter());
       }
     });
 
@@ -64914,6 +65415,10 @@
         type: String,
         default: void 0
       },
+      unreadNotificationText: {
+        type: String,
+        default: void 0
+      },
       chatItemsLoading: {
         type: Boolean,
         default: false
@@ -64999,12 +65504,17 @@
         const themeRef = useTheme(
           "Chat",
           "-chat",
-          style$V,
+          style$12,
           chatLight,
           props,
           mergedClsPrefixRef
         );
         const { localeRef } = useLocale("Chat");
+        const notificationsShownSet = vue.ref(/* @__PURE__ */ new Set());
+        const markNotificationShown = (chatId) => {
+          notificationsShownSet.value.add(chatId);
+          notificationsShownSet.value = new Set(notificationsShownSet.value);
+        };
         const cssVarsRef = vue.computed(() => {
           const {
             common: { cubicBezierEaseInOut },
@@ -65112,10 +65622,37 @@
           }
           return [];
         });
+        const lastUnreadCounts = vue.ref({});
+        vue.watch(
+          () => props.chatItems,
+          (chatItems) => {
+            if (!chatItems) return;
+            chatItems.forEach((chatItem) => {
+              const chatId = chatItem.id;
+              const currentUnreadCount = chatItem.unreadCount || 0;
+              const lastUnreadCount = lastUnreadCounts.value[chatId] || 0;
+              if (currentUnreadCount > lastUnreadCount) {
+                const newSet = new Set(notificationsShownSet.value);
+                newSet.delete(chatId);
+                notificationsShownSet.value = newSet;
+              }
+              lastUnreadCounts.value[chatId] = currentUnreadCount;
+            });
+          },
+          { deep: true, immediate: true }
+        );
+        const unreadCountsBeforeRead = vue.ref({});
         const handleChatSelect = (chatId) => {
+          const previousChatId = uncontrolledSelectedChatIdRef.value;
+          if (previousChatId !== void 0 && previousChatId !== chatId) {
+            emit("mark-messages-read", previousChatId);
+          }
+          const selectedItem = props.chatItems?.find((item) => item.id === chatId);
+          const unreadCountBeforeRead = selectedItem?.unreadCount || 0;
+          unreadCountsBeforeRead.value[chatId] = unreadCountBeforeRead;
           uncontrolledSelectedChatIdRef.value = chatId;
           emit("update:selectedChatId", chatId);
-          const selectedItem = props.chatItems?.find((item) => item.id === chatId);
+          emit("mark-messages-read", chatId);
           if (selectedItem) {
             props.onChatSelect?.(chatId, selectedItem);
           }
@@ -65166,6 +65703,9 @@
         const mergedCloseButtonTextRef = vue.computed(
           () => props.closeButtonText ?? localeRef.value.closeButtonText
         );
+        const mergedUnreadNotificationTextRef = vue.computed(
+          () => props.unreadNotificationText ?? localeRef.value.unreadNotificationText
+        );
         vue.provide(chatInjectionKey, {
           mergedClsPrefixRef,
           chatItemsRef: vue.toRef(props, "chatItems"),
@@ -65197,6 +65737,10 @@
           retryTextRef: mergedRetryTextRef,
           typingTextRef: mergedTypingTextRef,
           closeButtonTextRef: mergedCloseButtonTextRef,
+          unreadNotificationTextRef: mergedUnreadNotificationTextRef,
+          notificationsShownSetRef: notificationsShownSet,
+          unreadCountsBeforeReadRef: unreadCountsBeforeRead,
+          markNotificationShown,
           handleChatSelect,
           handleMessageSend,
           handleMessageRetry,
@@ -65233,16 +65777,18 @@
               ...this.cssVars
             }
           },
-          /* @__PURE__ */ vue.h(UFlex, { wrap: false, size: [20, 20], style: { width: "100%" } }, resolveSlot($slots.sidebar, () => [
-            /* @__PURE__ */ vue.h(ChatSidebar, null, {
-              sidebarHeaderMain: $slots.sidebarHeaderMain,
-              sidebarHeaderActions: $slots.sidebarHeaderActions
-            })
-          ]), resolveSlot($slots.default, () => [
-            /* @__PURE__ */ vue.h(ChatMainArea, null, {
-              headerActions: $slots.headerActions
-            })
-          ]))
+          /* @__PURE__ */ vue.h(UFlex, { wrap: false, size: [20, 20], style: { width: "100%" } }, {
+            default: () => /* @__PURE__ */ vue.h(vue.Fragment, null, resolveSlot($slots.sidebar, () => [
+              /* @__PURE__ */ vue.h(ChatSidebar, null, {
+                sidebarHeaderMain: $slots.sidebarHeaderMain,
+                sidebarHeaderActions: $slots.sidebarHeaderActions
+              })
+            ]), resolveSlot($slots.default, () => [
+              /* @__PURE__ */ vue.h(ChatMainArea, null, {
+                headerActions: $slots.headerActions
+              })
+            ]))
+          })
         );
       }
     });
@@ -74520,7 +75066,7 @@
     var root = freeGlobal || freeSelf || Function('return this')();
 
     /** Built-in value references. */
-    var Symbol = root.Symbol;
+    var Symbol$1 = root.Symbol;
 
     /** Used for built-in method references. */
     var objectProto$s = Object.prototype;
@@ -74536,7 +75082,7 @@
     var nativeObjectToString$3 = objectProto$s.toString;
 
     /** Built-in value references. */
-    var symToStringTag$1 = Symbol ? Symbol.toStringTag : undefined;
+    var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
     /**
      * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
@@ -74589,7 +75135,7 @@
       undefinedTag = '[object Undefined]';
 
     /** Built-in value references. */
-    var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+    var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
     /**
      * The base implementation of `getTag` without fallbacks for buggy environments.
@@ -74726,7 +75272,7 @@
     var INFINITY$5 = 1 / 0;
 
     /** Used to convert symbols to primitives and strings. */
-    var symbolProto$2 = Symbol ? Symbol.prototype : undefined,
+    var symbolProto$2 = Symbol$1 ? Symbol$1.prototype : undefined,
       symbolToString = symbolProto$2 ? symbolProto$2.toString : undefined;
 
     /**
@@ -77986,7 +78532,7 @@
     }
 
     /** Built-in value references. */
-    var spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined;
+    var spreadableSymbol = Symbol$1 ? Symbol$1.isConcatSpreadable : undefined;
 
     /**
      * Checks if `value` is a flattenable `arguments` object or array.
@@ -79678,7 +80224,7 @@
     }
 
     /** Used to convert symbols to primitives and strings. */
-    var symbolProto$1 = Symbol ? Symbol.prototype : undefined,
+    var symbolProto$1 = Symbol$1 ? Symbol$1.prototype : undefined,
       symbolValueOf$1 = symbolProto$1 ? symbolProto$1.valueOf : undefined;
 
     /**
@@ -80411,7 +80957,7 @@
       dataViewTag = '[object DataView]';
 
     /** Used to convert symbols to primitives and strings. */
-    var symbolProto = Symbol ? Symbol.prototype : undefined,
+    var symbolProto = Symbol$1 ? Symbol$1.prototype : undefined,
       symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
 
     /**
@@ -86168,7 +86714,7 @@
       setTag$1 = '[object Set]';
 
     /** Built-in value references. */
-    var symIterator$1 = Symbol ? Symbol.iterator : undefined;
+    var symIterator$1 = Symbol$1 ? Symbol$1.iterator : undefined;
 
     /**
      * Converts `value` to an array.
@@ -91773,7 +92319,7 @@
     var hasOwnProperty = objectProto.hasOwnProperty;
 
     /** Built-in value references. */
-    var symIterator = Symbol ? Symbol.iterator : undefined;
+    var symIterator = Symbol$1 ? Symbol$1.iterator : undefined;
 
     /* Built-in method references for those with the same name as other `lodash` methods. */
     var nativeMax = Math.max,
@@ -128833,6 +129379,8 @@
         UCarouselItem: UCarouselItem,
         UCascader: Cascader,
         UChat: Chat,
+        UChatListItems: UChatListItems,
+        UChatMessages: UChatMessages,
         UCheckbox: UCheckbox,
         UCheckboxGroup: UCheckboxGroup,
         UCode: UCode,
@@ -129097,7 +129645,7 @@
         watermarkProps: watermarkProps
     });
 
-    var version = "1.7.2";
+    var version = "1.8.0";
 
     function create({
       componentPrefix = "U",
@@ -129926,6 +130474,8 @@
     exports.UCarouselItem = UCarouselItem;
     exports.UCascader = Cascader;
     exports.UChat = Chat;
+    exports.UChatListItems = UChatListItems;
+    exports.UChatMessages = UChatMessages;
     exports.UCheckbox = UCheckbox;
     exports.UCheckboxGroup = UCheckboxGroup;
     exports.UCode = UCode;