@blocklet/discuss-kit-ux 2.3.61 → 2.3.63

package/dist/components/chat/hooks.d.ts

@@ -7,6 +7,9 @@ export declare const useChatInWallet: () => {
     isChatInWalletV2: boolean;
     isWebNavbar: boolean;
     isInArcSphere: boolean;
-    updateUnreadState: (unread: boolean) => void;
+    updateUnreadState: ({ unread, unreadMessageCount }: {
+        unread: boolean;
+        unreadMessageCount: number;
+    }) => void;
     chatInWallet: import('react-router-dom').PathMatch<"chatId"> | null;
 };

package/dist/components/chat/unread-notification.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
 interface UnreadNotificationProviderProps {
-    fetchUnreadState: () => Promise<boolean>;
+    fetchUnreadState: () => Promise<Record<string, number>>;
     children: ReactNode;
 }
 interface UnreadNotificationContextType {
     unread: boolean | undefined;
-    markAsUnread: (value?: boolean) => void;
+    chatUnreadCounts: Record<string, number>;
+    incrementUnreadCount: (chatId: string, count: number) => void;
+    markChatAsRead: (chatId: string) => void;
+    unreadMessageCount: number;
 }
 export declare const UnreadNotificationContext: import('react').Context<UnreadNotificationContextType>;
 export declare const useUnreadNotification: () => UnreadNotificationContextType;

package/dist/{editor-Y6zGiG3X.mjs → editor-DcVbeMRW.mjs}

@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
 import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
 import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
 import { lazyRetry } from "@arcblock/ux/lib/Util";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-BPktVpJK.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-CM3uCkTS.mjs";
 const BlockletEditor = lazyRetry(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-BPktVpJK.mjs → index-CM3uCkTS.mjs}

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme, ThemeProvider, styled as styled$2 } from "@mui/material/styles";
 import { create as create$1, styled } from "@arcblock/ux/lib/Theme";
 import { useEffect, useRef, useState, createElement, useContext, useMemo, useLayoutEffect, useCallback, isValidElement, Suspense, createContext, Fragment as Fragment$1, forwardRef, useImperativeHandle } from "react";
-import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$1, Button as Button$1, Stack as Stack$1, Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, IconButton as IconButton$3, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Divider, Skeleton, InputBase, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Autocomplete, Typography as Typography$1, TextField, InputAdornment, SwipeableDrawer, Badge as Badge$1, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$1, Button as Button$1, Stack as Stack$1, Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, IconButton as IconButton$3, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Divider, Skeleton, InputBase, Badge as Badge$1, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Autocomplete, Typography as Typography$1, TextField, InputAdornment, SwipeableDrawer, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import isNil from "lodash/isNil";
 import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
 import { lazyWithPreload } from "react-lazy-with-preload";
@@ -1220,9 +1220,17 @@ const useChatInWallet = () => {
   const navigateToChatList = () => {
     navigate("/chat-in-wallet");
   };
-  const updateUnreadState = useCallback((unread) => {
-    bridge.call("updateUnreadState", { unread, appId: window.blocklet.appPid, timestamp: /* @__PURE__ */ new Date() });
-  }, []);
+  const updateUnreadState = useCallback(
+    ({ unread, unreadMessageCount }) => {
+      bridge.call("updateUnreadState", {
+        unread,
+        unreadMessageCount,
+        appId: window.blocklet.appPid,
+        timestamp: /* @__PURE__ */ new Date()
+      });
+    },
+    []
+  );
   return {
     navigateToChat,
     navigateToChatList,
@@ -3930,11 +3938,21 @@ const UnreadNotificationContext = createContext(
 const useUnreadNotification = () => useContext(UnreadNotificationContext);
 function UnreadNotificationProvider({ fetchUnreadState, children }) {
   const { session } = useSessionContext();
-  const [unread, setUnread] = useState(void 0);
-  const markAsUnread = useCallback((value2 = true) => setUnread(value2), []);
+  const [chatUnreadCounts, setChatUnreadCounts] = useState({});
+  const unread = useMemo(() => Object.values(chatUnreadCounts).some((x) => x > 0), [chatUnreadCounts]);
+  const unreadMessageCount = useMemo(
+    () => Object.values(chatUnreadCounts).reduce((acc, x) => acc + x, 0),
+    [chatUnreadCounts]
+  );
+  const incrementUnreadCount = useCallback((chatId, count) => {
+    setChatUnreadCounts((prev) => ({ ...prev, [chatId]: (prev[chatId] || 0) + count }));
+  }, []);
+  const markChatAsRead = useCallback((chatId) => {
+    setChatUnreadCounts((prev) => ({ ...prev, [chatId]: 0 }));
+  }, []);
   const update = async () => {
     const unreadState = await fetchUnreadState();
-    setUnread(unreadState);
+    setChatUnreadCounts(unreadState);
   };
   useEffect(() => {
     if (session.user && preferences.enableNotificationBadge && preferences.chatEnabled) {
@@ -3944,10 +3962,12 @@ function UnreadNotificationProvider({ fetchUnreadState, children }) {
   const value = useMemo(
     () => ({
       unread,
-      markAsUnread
+      chatUnreadCounts,
+      unreadMessageCount,
+      incrementUnreadCount,
+      markChatAsRead
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unread]
+    [unread, chatUnreadCounts, unreadMessageCount, incrementUnreadCount, markChatAsRead]
   );
   return /* @__PURE__ */ jsx(UnreadNotificationContext.Provider, { value, children });
 }
@@ -3973,7 +3993,7 @@ function ChatProvider({
     editingChannel: null,
     error: void 0
   });
-  const { markAsUnread } = useUnreadNotification();
+  const { incrementUnreadCount, markChatAsRead } = useUnreadNotification();
   const navigate = useNavigate();
   const { session } = useSessionContext();
   const currentUser = session == null ? void 0 : session.user;
@@ -3986,10 +4006,6 @@ function ChatProvider({
     }
     return false;
   };
-  const hasAnyUnreadMessages = useMemo(
-    () => state.chats.filter((chat) => chat.type !== "channel" || chat.hasJoined).some(hasUnreadMessages),
-    [state.chats]
-  );
   const isActiveChat = (chatId) => state.activeChatId === chatId;
   const updateChat = (chatId, mapper) => {
     setState((prev) => {
@@ -4005,6 +4021,7 @@ function ChatProvider({
   };
   const updateLastAckTime = async (chatId, clientOnly) => {
     updateChat(chatId, (chat) => ({ ...chat, lastAckTime: chat.lastMessageAt }));
+    markChatAsRead(chatId);
     if (!clientOnly) {
       await client2.updateLastAckTime(chatId);
     }
@@ -4192,6 +4209,8 @@ function ChatProvider({
           updateLastAckTime(chatId, true);
         } else if (isActiveChat(chatId)) {
           updateLastAckTime(chatId);
+        } else {
+          incrementUnreadCount(chatId, 1);
         }
       }),
       client2.onJoinChannel(({ chatId, participant }) => addParticipant(chatId, participant)),
@@ -4203,11 +4222,6 @@ function ChatProvider({
       cancels.forEach((cancel) => cancel == null ? void 0 : cancel());
     };
   }, [state]);
-  useEffect(() => {
-    if (state.initialized) {
-      markAsUnread(hasAnyUnreadMessages);
-    }
-  }, [state.initialized, hasAnyUnreadMessages, markAsUnread]);
   const value = useMemo(() => {
     return {
       ...state,
@@ -4272,7 +4286,8 @@ function ChannelGroup({ size = "normal", chat, children, ...rest }) {
 }
 function ChatList({ inWallet, ...rest }) {
   const { t } = useLocaleContext();
-  const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages, getLastMessageText } = useChatContext();
+  const { orderedChats, activeChatId, setActiveChat, getOppositeUser, getLastMessageText } = useChatContext();
+  const { chatUnreadCounts } = useUnreadNotification();
   const { navigateToChat } = useChatInWallet();
   const renderItem = (chat) => {
     if (chat.type === "notification") {
@@ -4306,7 +4321,7 @@ function ChatList({ inWallet, ...rest }) {
   };
   return /* @__PURE__ */ jsx(Box$1, { ...rest, children: /* @__PURE__ */ jsx(Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
     const isActiveChat = activeChatId === chat.id;
-    const _hasUnreadMessages = hasUnreadMessages(chat) && (chat.type !== "channel" || chat.hasJoined);
+    const unreadCount = chatUnreadCounts[chat.id];
     return /* @__PURE__ */ jsx(Flipped, { flipId: chat.id, children: /* @__PURE__ */ jsxs(
       Box$1,
       {
@@ -4351,19 +4366,18 @@ function ChatList({ inWallet, ...rest }) {
         },
         children: [
           renderItem(chat),
-          _hasUnreadMessages && /* @__PURE__ */ jsx(
-            Box$1,
+          unreadCount > 0 && /* @__PURE__ */ jsx(
+            Badge$1,
             {
+              badgeContent: unreadCount,
+              color: "primary",
               sx: {
                 position: "absolute",
                 top: "50%",
-                right: 16,
-                width: 10,
-                height: 10,
-                transform: "translateY(-50%)",
-                bgcolor: "error.light",
-                borderRadius: "100%"
-              }
+                right: { xs: 28, md: 16 },
+                transform: "translateY(-50%)"
+              },
+              children: /* @__PURE__ */ jsx(Box$1, { sx: { width: 1, height: 1 } })
             }
           )
         ]
@@ -4954,7 +4968,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, icon, ...rest }) {
 }
 const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" }) });
 const tablerLetterCase = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7" }) });
-const Editor = lazyRetry(() => import("./editor-Y6zGiG3X.mjs"));
+const Editor = lazyRetry(() => import("./editor-DcVbeMRW.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -5826,13 +5840,11 @@ function ChatListInWallet({ sx, ...rest }) {
   var _a2, _b2, _c2, _d2;
   const { session } = useSessionContext();
   const { initialized, chats, activeChatId } = useChatContext();
-  const { unread } = useUnreadNotification();
+  const { unreadMessageCount } = useUnreadNotification();
   const { navigateToChatList, updateUnreadState, isWebNavbar } = useChatInWallet();
   useEffect(() => {
-    if (unread !== void 0) {
-      updateUnreadState(unread);
-    }
-  }, [unread, updateUnreadState]);
+    updateUnreadState({ unread: unreadMessageCount > 0, unreadMessageCount });
+  }, [unreadMessageCount, updateUnreadState]);
   if (!initialized) {
     return /* @__PURE__ */ jsx(Backdrop, { open: true, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, bgcolor: "transparent" }, children: /* @__PURE__ */ jsx(CircularProgress$1, {}) });
   }
@@ -5934,7 +5946,7 @@ function ChatListInWallet({ sx, ...rest }) {
 }
 const tablerMessageCircle = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48c3.255 2.777 3.695 7.266 1.029 10.501S11.659 20.922 7.7 19z" }) });
 function ChatHeaderAddon({ ...rest }) {
-  const { unread } = useUnreadNotification();
+  const { unread, unreadMessageCount } = useUnreadNotification();
   if (!preferences.enableNotificationBadge || !preferences.chatEnabled) {
     return null;
   }
@@ -5942,7 +5954,7 @@ function ChatHeaderAddon({ ...rest }) {
     AddonButton,
     {
       size: "medium",
-      icon: /* @__PURE__ */ jsx(Badge$1, { color: "error", variant: "dot", invisible: !unread, children: /* @__PURE__ */ jsx(tablerMessageCircle, {}) }),
+      icon: /* @__PURE__ */ jsx(Badge$1, { color: "error", invisible: !unread, badgeContent: unreadMessageCount, children: /* @__PURE__ */ jsx(tablerMessageCircle, {}) }),
       ...rest,
       component: Link,
       to: "/chat"

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { W, o, Y, A, n, af, B, G, N, L, O, ar, _, Z, a1, $, a0, a3, x, C, y, z, F, a7, a8, aj, aa, T, U, ae, D, ai, ah, K, H, J, aG, aH, b, m, ag, M, P, aC, aq, w, v, aE, aF, R, S, ab, as, aD, q, a4, a6, ak, an, am, aA, at, Q, ao, au, ax, ay, l, az, h, p, r, k, aw, t, j, ac, aB, X, c, a2, E, a9, ad, e, u, ap, d, av, a5, al, f } from "./index-BPktVpJK.mjs";
+import { W, o, Y, A, n, af, B, G, N, L, O, ar, _, Z, a1, $, a0, a3, x, C, y, z, F, a7, a8, aj, aa, T, U, ae, D, ai, ah, K, H, J, aG, aH, b, m, ag, M, P, aC, aq, w, v, aE, aF, R, S, ab, as, aD, q, a4, a6, ak, an, am, aA, at, Q, ao, au, ax, ay, l, az, h, p, r, k, aw, t, j, ac, aB, X, c, a2, E, a9, ad, e, u, ap, d, av, a5, al, f } from "./index-CM3uCkTS.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";

package/dist/index.umd.js

@@ -1142,9 +1142,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const navigateToChatList = () => {
       navigate("/chat-in-wallet");
     };
-    const updateUnreadState = react.useCallback((unread) => {
-      bridge.call("updateUnreadState", { unread, appId: window.blocklet.appPid, timestamp: /* @__PURE__ */ new Date() });
-    }, []);
+    const updateUnreadState = react.useCallback(
+      ({ unread, unreadMessageCount }) => {
+        bridge.call("updateUnreadState", {
+          unread,
+          unreadMessageCount,
+          appId: window.blocklet.appPid,
+          timestamp: /* @__PURE__ */ new Date()
+        });
+      },
+      []
+    );
     return {
       navigateToChat,
       navigateToChatList,
@@ -3852,11 +3860,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const useUnreadNotification = () => react.useContext(UnreadNotificationContext);
   function UnreadNotificationProvider({ fetchUnreadState, children }) {
     const { session } = useSessionContext();
-    const [unread, setUnread] = react.useState(void 0);
-    const markAsUnread = react.useCallback((value2 = true) => setUnread(value2), []);
+    const [chatUnreadCounts, setChatUnreadCounts] = react.useState({});
+    const unread = react.useMemo(() => Object.values(chatUnreadCounts).some((x) => x > 0), [chatUnreadCounts]);
+    const unreadMessageCount = react.useMemo(
+      () => Object.values(chatUnreadCounts).reduce((acc, x) => acc + x, 0),
+      [chatUnreadCounts]
+    );
+    const incrementUnreadCount = react.useCallback((chatId, count) => {
+      setChatUnreadCounts((prev) => ({ ...prev, [chatId]: (prev[chatId] || 0) + count }));
+    }, []);
+    const markChatAsRead = react.useCallback((chatId) => {
+      setChatUnreadCounts((prev) => ({ ...prev, [chatId]: 0 }));
+    }, []);
     const update = async () => {
       const unreadState = await fetchUnreadState();
-      setUnread(unreadState);
+      setChatUnreadCounts(unreadState);
     };
     react.useEffect(() => {
       if (session.user && preferences.enableNotificationBadge && preferences.chatEnabled) {
@@ -3866,10 +3884,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const value = react.useMemo(
       () => ({
         unread,
-        markAsUnread
+        chatUnreadCounts,
+        unreadMessageCount,
+        incrementUnreadCount,
+        markChatAsRead
       }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [unread]
+      [unread, chatUnreadCounts, unreadMessageCount, incrementUnreadCount, markChatAsRead]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(UnreadNotificationContext.Provider, { value, children });
   }
@@ -3895,7 +3915,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       editingChannel: null,
       error: void 0
     });
-    const { markAsUnread } = useUnreadNotification();
+    const { incrementUnreadCount, markChatAsRead } = useUnreadNotification();
     const navigate = reactRouterDom.useNavigate();
     const { session } = useSessionContext();
     const currentUser = session == null ? void 0 : session.user;
@@ -3908,10 +3928,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       return false;
     };
-    const hasAnyUnreadMessages = react.useMemo(
-      () => state.chats.filter((chat) => chat.type !== "channel" || chat.hasJoined).some(hasUnreadMessages),
-      [state.chats]
-    );
     const isActiveChat = (chatId) => state.activeChatId === chatId;
     const updateChat = (chatId, mapper) => {
       setState((prev) => {
@@ -3927,6 +3943,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     const updateLastAckTime = async (chatId, clientOnly) => {
       updateChat(chatId, (chat) => ({ ...chat, lastAckTime: chat.lastMessageAt }));
+      markChatAsRead(chatId);
       if (!clientOnly) {
         await client2.updateLastAckTime(chatId);
       }
@@ -4114,6 +4131,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             updateLastAckTime(chatId, true);
           } else if (isActiveChat(chatId)) {
             updateLastAckTime(chatId);
+          } else {
+            incrementUnreadCount(chatId, 1);
           }
         }),
         client2.onJoinChannel(({ chatId, participant }) => addParticipant(chatId, participant)),
@@ -4125,11 +4144,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         cancels.forEach((cancel) => cancel == null ? void 0 : cancel());
       };
     }, [state]);
-    react.useEffect(() => {
-      if (state.initialized) {
-        markAsUnread(hasAnyUnreadMessages);
-      }
-    }, [state.initialized, hasAnyUnreadMessages, markAsUnread]);
     const value = react.useMemo(() => {
       return {
         ...state,
@@ -4194,7 +4208,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
   function ChatList({ inWallet, ...rest }) {
     const { t } = context.useLocaleContext();
-    const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages, getLastMessageText } = useChatContext();
+    const { orderedChats, activeChatId, setActiveChat, getOppositeUser, getLastMessageText } = useChatContext();
+    const { chatUnreadCounts } = useUnreadNotification();
     const { navigateToChat } = useChatInWallet();
     const renderItem = (chat) => {
       if (chat.type === "notification") {
@@ -4228,7 +4243,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(reactFlipToolkit.Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
       const isActiveChat = activeChatId === chat.id;
-      const _hasUnreadMessages = hasUnreadMessages(chat) && (chat.type !== "channel" || chat.hasJoined);
+      const unreadCount = chatUnreadCounts[chat.id];
       return /* @__PURE__ */ jsxRuntime.jsx(reactFlipToolkit.Flipped, { flipId: chat.id, children: /* @__PURE__ */ jsxRuntime.jsxs(
         Box,
         {
@@ -4273,19 +4288,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           },
           children: [
             renderItem(chat),
-            _hasUnreadMessages && /* @__PURE__ */ jsxRuntime.jsx(
-              Box,
+            unreadCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              material.Badge,
               {
+                badgeContent: unreadCount,
+                color: "primary",
                 sx: {
                   position: "absolute",
                   top: "50%",
-                  right: 16,
-                  width: 10,
-                  height: 10,
-                  transform: "translateY(-50%)",
-                  bgcolor: "error.light",
-                  borderRadius: "100%"
-                }
+                  right: { xs: 28, md: 16 },
+                  transform: "translateY(-50%)"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { width: 1, height: 1 } })
               }
             )
           ]
@@ -5748,13 +5762,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     var _a2, _b2, _c2, _d2;
     const { session } = useSessionContext();
     const { initialized, chats, activeChatId } = useChatContext();
-    const { unread } = useUnreadNotification();
+    const { unreadMessageCount } = useUnreadNotification();
     const { navigateToChatList, updateUnreadState, isWebNavbar } = useChatInWallet();
     react.useEffect(() => {
-      if (unread !== void 0) {
-        updateUnreadState(unread);
-      }
-    }, [unread, updateUnreadState]);
+      updateUnreadState({ unread: unreadMessageCount > 0, unreadMessageCount });
+    }, [unreadMessageCount, updateUnreadState]);
     if (!initialized) {
       return /* @__PURE__ */ jsxRuntime.jsx(material.Backdrop, { open: true, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, bgcolor: "transparent" }, children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {}) });
     }
@@ -5856,7 +5868,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }
   const tablerMessageCircle = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48c3.255 2.777 3.695 7.266 1.029 10.501S11.659 20.922 7.7 19z" }) });
   function ChatHeaderAddon({ ...rest }) {
-    const { unread } = useUnreadNotification();
+    const { unread, unreadMessageCount } = useUnreadNotification();
     if (!preferences.enableNotificationBadge || !preferences.chatEnabled) {
       return null;
     }
@@ -5864,7 +5876,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       addonButton.AddonButton,
       {
         size: "medium",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(material.Badge, { color: "error", variant: "dot", invisible: !unread, children: /* @__PURE__ */ jsxRuntime.jsx(tablerMessageCircle, {}) }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(material.Badge, { color: "error", invisible: !unread, badgeContent: unreadMessageCount, children: /* @__PURE__ */ jsxRuntime.jsx(tablerMessageCircle, {}) }),
         ...rest,
         component: reactRouterDom.Link,
         to: "/chat"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "2.3.61",
+  "version": "2.3.63",
   "files": [
     "dist"
   ],
@@ -45,8 +45,8 @@
     "ufo": "^1.5.4",
     "unstated-next": "^1.1.0",
     "url-join": "^4.0.1",
-    "@blocklet/editor": "^2.3.61",
-    "@blocklet/labels": "^2.3.61"
+    "@blocklet/editor": "^2.3.63",
+    "@blocklet/labels": "^2.3.63"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.36",