@blocklet/ui-react 2.11.46 → 2.11.48

package/lib/Dashboard/index.d.ts

@@ -2,7 +2,7 @@ export default Dashboard;
 /**
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
-declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }: {
+declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, showDomainWarningDialog, ...rest }: {
     [x: string]: any;
     meta: any;
     fallbackUrl: any;
@@ -10,6 +10,7 @@ declare function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddon
     headerAddons: any;
     sessionManagerProps: any;
     links: any;
+    showDomainWarningDialog: any;
 }): import("react").JSX.Element | null;
 declare namespace Dashboard {
     namespace propTypes {
@@ -19,6 +20,7 @@ declare namespace Dashboard {
         export let headerAddons: any;
         export { SessionManagerProps as sessionManagerProps };
         export let links: any;
+        export let showDomainWarningDialog: any;
     }
     namespace defaultProps {
         export let meta: {};
@@ -33,6 +35,8 @@ declare namespace Dashboard {
         }
         let links_1: never[];
         export { links_1 as links };
+        let showDomainWarningDialog_1: boolean;
+        export { showDomainWarningDialog_1 as showDomainWarningDialog };
     }
 }
 import { BlockletMetaProps } from '../types';

package/lib/Dashboard/index.js

@@ -12,7 +12,16 @@ import { publicPath, formatBlockletInfo, getLocalizedNavigation, filterNavByRole
 import HeaderAddons from "../common/header-addons.js";
 import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
 import useMobile from "../hooks/use-mobile.js";
-function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }) {
+function Dashboard({
+  meta,
+  fallbackUrl,
+  invalidPathFallback,
+  headerAddons,
+  sessionManagerProps,
+  links,
+  showDomainWarningDialog,
+  ...rest
+}) {
   useWalletHiddenTopbar();
   const sessionCtx = useContext(SessionContext);
   const user = sessionCtx?.session?.user;
@@ -83,7 +92,8 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
     {
       formattedBlocklet,
       addons: headerAddons,
-      sessionManagerProps
+      sessionManagerProps,
+      showDomainWarningDialog
     }
   );
   return /* @__PURE__ */ jsx(
@@ -112,7 +122,8 @@ Dashboard.propTypes = {
   invalidPathFallback: PropTypes.func,
   headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   sessionManagerProps: SessionManagerProps,
-  links: PropTypes.oneOfType([PropTypes.array, PropTypes.func])
+  links: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  showDomainWarningDialog: PropTypes.bool
 };
 Dashboard.defaultProps = {
   meta: {},
@@ -126,6 +137,7 @@ Dashboard.defaultProps = {
       window.location.href = publicPath;
     }
   },
-  links: []
+  links: [],
+  showDomainWarningDialog: true
 };
 export default Dashboard;

package/lib/Header/index.d.ts

@@ -16,6 +16,7 @@ type HeaderProps = {
     prepend?: React.ReactNode;
     align?: 'left' | 'right';
     maxWidth?: false | Breakpoint;
+    showDomainWarningDialog?: boolean;
 };
 declare const _default: import("react").ComponentType<HeaderProps & Omit<BoxProps, keyof HeaderProps>>;
 export default _default;

package/lib/Header/index.js

@@ -60,6 +60,7 @@ function Header({
   homeLink = publicPath,
   theme: themeOverrides,
   hideNavMenu = false,
+  showDomainWarningDialog = true,
   ...rest
 }) {
   useWalletHiddenTopbar();
@@ -84,7 +85,15 @@ function Header({
   const _addons = typeof addons === "function" ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
   const headerAddons = (
     // @ts-ignore
-    /* @__PURE__ */ jsx(HeaderAddons, { formattedBlocklet, addons: _addons, sessionManagerProps })
+    /* @__PURE__ */ jsx(
+      HeaderAddons,
+      {
+        formattedBlocklet,
+        addons: _addons,
+        sessionManagerProps,
+        showDomainWarningDialog
+      }
+    )
   );
   return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
     StyledUxHeader,

package/lib/common/domain-warning.js

@@ -22,36 +22,36 @@ const translations = {
   en: {
     guest: {
       title: "Notice: You are using a temporary domain",
-      description: "You are accessing this site through a temporary domain. For a better experience, please contact the site administrator to bind a custom domain. Using a custom domain not only makes access more convenient but also ensures your access is more secure."
+      description: "You are accessing this site through a temporary domain. For a better experience, please contact the site administrator to configure a custom domain. Using a custom domain not only makes access more convenient but also ensures your access is more secure."
     },
     owner: {
-      title: "Enhance Website Security",
-      description: "Dear administrator, we recommend binding your custom domain soon, which will:",
+      title: "Enhance Your Website Security",
+      description: "Dear administrator, we recommend configuring your custom domain immediately, which will:",
       benefits1: "Automatically obtain HTTPS certificates to ensure secure data transmission",
       benefits2: "Create an exclusive brand image and increase website credibility",
       benefits3: "Get a shorter, more memorable access address",
       benefits4: "Provide visitors with a more professional experience",
-      benefits5: "Domain binding takes just minutes to complete, taking your website to the next level!"
+      benefits5: "Domain configuration takes just minutes to complete, taking your website to the next level!"
     },
     skip: "Remind Me Later",
-    bindDomain: "Bind Domain"
+    bindDomain: "Configure Domain"
   },
   zh: {
     guest: {
       title: "\u6E29\u99A8\u63D0\u793A\uFF1A\u5F53\u524D\u4F7F\u7528\u7684\u662F\u4E34\u65F6\u57DF\u540D",
-      description: "\u60A8\u6B63\u5728\u901A\u8FC7\u4E34\u65F6\u57DF\u540D\u8BBF\u95EE\u672C\u7AD9\u70B9\u3002\u4E3A\u4E86\u83B7\u5F97\u66F4\u597D\u7684\u8BBF\u95EE\u4F53\u9A8C\uFF0C\u8BF7\u8054\u7CFB\u7AD9\u70B9\u7BA1\u7406\u5458\u7ED1\u5B9A\u81EA\u5B9A\u4E49\u57DF\u540D\u3002\u4F7F\u7528\u81EA\u5B9A\u4E49\u57DF\u540D\u4E0D\u4EC5\u8BBF\u95EE\u66F4\u4FBF\u6377\uFF0C\u8FD8\u80FD\u786E\u4FDD\u60A8\u7684\u8BBF\u95EE\u66F4\u52A0\u5B89\u5168\u3002"
+      description: "\u60A8\u6B63\u5728\u901A\u8FC7\u4E34\u65F6\u57DF\u540D\u8BBF\u95EE\u672C\u7AD9\u70B9\u3002\u4E3A\u4E86\u83B7\u5F97\u66F4\u597D\u7684\u8BBF\u95EE\u4F53\u9A8C\uFF0C\u8BF7\u8054\u7CFB\u7AD9\u70B9\u7BA1\u7406\u5458\u914D\u7F6E\u81EA\u5B9A\u4E49\u57DF\u540D\u3002\u4F7F\u7528\u81EA\u5B9A\u4E49\u57DF\u540D\u4E0D\u4EC5\u8BBF\u95EE\u66F4\u4FBF\u6377\uFF0C\u8FD8\u80FD\u786E\u4FDD\u60A8\u7684\u8BBF\u95EE\u66F4\u52A0\u5B89\u5168\u3002"
     },
     owner: {
       title: "\u63D0\u5347\u7F51\u7AD9\u5B89\u5168\u6027\u4E0E\u4E13\u4E1A\u5EA6",
-      description: "\u5C0A\u656C\u7684\u7BA1\u7406\u5458\uFF0C\u6211\u4EEC\u5EFA\u8BAE\u60A8\u5C3D\u5FEB\u7ED1\u5B9A\u81EA\u5B9A\u4E49\u57DF\u540D\uFF0C\u8FD9\u6837\u53EF\u4EE5\uFF1A",
+      description: "\u5C0A\u656C\u7684\u7BA1\u7406\u5458\uFF0C\u6211\u4EEC\u5EFA\u8BAE\u60A8\u5C3D\u5FEB\u914D\u7F6E\u81EA\u5B9A\u4E49\u57DF\u540D\uFF0C\u8FD9\u6837\u53EF\u4EE5\uFF1A",
       benefits1: "\u81EA\u52A8\u83B7\u53D6 HTTPS \u8BC1\u4E66\uFF0C\u786E\u4FDD\u6570\u636E\u4F20\u8F93\u5B89\u5168",
       benefits2: "\u6253\u9020\u4E13\u5C5E\u54C1\u724C\u5F62\u8C61\uFF0C\u63D0\u5347\u7F51\u7AD9\u53EF\u4FE1\u5EA6",
       benefits3: "\u83B7\u5F97\u66F4\u7B80\u77ED\u3001\u6613\u8BB0\u7684\u8BBF\u95EE\u5730\u5740",
       benefits4: "\u4E3A\u8BBF\u5BA2\u63D0\u4F9B\u66F4\u4E13\u4E1A\u7684\u8BBF\u95EE\u4F53\u9A8C",
-      benefits5: "\u53EA\u9700\u51E0\u5206\u949F\u5373\u53EF\u5B8C\u6210\u57DF\u540D\u7ED1\u5B9A\uFF0C\u8BA9\u60A8\u7684\u7F51\u7AD9\u66F4\u4E0A\u4E00\u5C42\u697C\uFF01"
+      benefits5: "\u53EA\u9700\u51E0\u5206\u949F\u5373\u53EF\u5B8C\u6210\u57DF\u540D\u914D\u7F6E\uFF0C\u5168\u9762\u63D0\u5347\u60A8\u7684\u7F51\u7AD9\u54C1\u8D28\uFF01"
     },
     skip: "\u7A0D\u540E\u63D0\u9192",
-    bindDomain: "\u7ED1\u5B9A\u57DF\u540D"
+    bindDomain: "\u914D\u7F6E\u57DF\u540D"
   }
 };
 const ONE_MONTH = 1e3 * 60 * 60 * 24 * 30;

package/lib/common/header-addons.d.ts

@@ -1,7 +1,7 @@
-declare function HeaderAddons({ formattedBlocklet, addons, showDomainWarning, sessionManagerProps }: {
+declare function HeaderAddons({ formattedBlocklet, addons, showDomainWarningDialog, sessionManagerProps }: {
     formattedBlocklet: any;
     addons: any;
-    showDomainWarning: any;
+    showDomainWarningDialog: any;
     sessionManagerProps: any;
 }): import("react").FunctionComponentElement<{
     children?: import("react").ReactNode | undefined;
@@ -11,7 +11,7 @@ declare namespace HeaderAddons {
         export let formattedBlocklet: any;
         export let addons: any;
         export { SessionManagerProps as sessionManagerProps };
-        export let showDomainWarning: any;
+        export let showDomainWarningDialog: any;
     }
     namespace defaultProps {
         let addons_1: null;
@@ -19,8 +19,8 @@ declare namespace HeaderAddons {
         export namespace sessionManagerProps {
             let showRole: boolean;
         }
-        let showDomainWarning_1: boolean;
-        export { showDomainWarning_1 as showDomainWarning };
+        let showDomainWarningDialog_1: boolean;
+        export { showDomainWarningDialog_1 as showDomainWarningDialog };
     }
 }
 export default HeaderAddons;

package/lib/common/header-addons.js

@@ -16,7 +16,7 @@ const hasNotification = () => {
   const navigations = window?.blocklet?.navigation ?? [];
   return !!navigations.find((n) => n.id === "/userCenter/notification");
 };
-export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarning, sessionManagerProps }) {
+export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarningDialog, sessionManagerProps }) {
   const sessionCtx = useContext(SessionContext);
   const { locale, languages } = useLocaleContext() || {};
   const { enableConnect = true, enableLocale = true } = formattedBlocklet;
@@ -71,7 +71,7 @@ export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarn
   const renderedAddons = renderAddons();
   const nodes = Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons];
   const mergedNodes = [
-    showDomainWarning ? /* @__PURE__ */ jsx(DomainWarning, { session: sessionCtx?.session, locale }) : null,
+    showDomainWarningDialog ? /* @__PURE__ */ jsx(DomainWarning, { session: sessionCtx?.session, locale }) : null,
     ...nodes
   ].filter(Boolean);
   return createElement(Fragment, null, ...mergedNodes);
@@ -83,12 +83,12 @@ HeaderAddons.propTypes = {
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   sessionManagerProps: SessionManagerProps,
-  showDomainWarning: PropTypes.bool
+  showDomainWarningDialog: PropTypes.bool
 };
 HeaderAddons.defaultProps = {
   addons: null,
   sessionManagerProps: {
     showRole: true
   },
-  showDomainWarning: true
+  showDomainWarningDialog: true
 };

package/lib/common/notification-addon.js

@@ -21,6 +21,10 @@ export default function NotificationAddon({ session = {} }) {
     () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_CREATE}`,
     [userDid]
   );
+  const readListenEvent = useCreation(
+    () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_READ}`,
+    [userDid]
+  );
   const listenCallback = useCallback(
     (notification) => {
       const { receivers } = notification ?? {};
@@ -31,16 +35,27 @@ export default function NotificationAddon({ session = {} }) {
     },
     [userDid, setUnReadCount]
   );
+  const readListenCallback = useCallback(
+    (data) => {
+      const { receiver, readCount } = data ?? {};
+      if (receiver === userDid) {
+        setUnReadCount((x) => x - readCount);
+      }
+    },
+    [userDid, setUnReadCount]
+  );
   useEffect(() => {
     if (wsClient) {
       wsClient.on(listenEvent, listenCallback);
+      wsClient.on(readListenEvent, readListenCallback);
     }
     return () => {
       if (wsClient) {
         wsClient.off(listenEvent, listenCallback);
+        wsClient.off(readListenEvent, readListenCallback);
       }
     };
-  }, [wsClient, setUnReadCount, listenCallback, listenEvent]);
+  }, [wsClient, setUnReadCount, listenCallback, listenEvent, readListenCallback, readListenEvent]);
   if (!session.user || !viewAllUrl) {
     return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.46",
+  "version": "2.11.48",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.38",
-    "@arcblock/bridge": "^2.11.46",
-    "@arcblock/react-hooks": "^2.11.46",
+    "@arcblock/bridge": "^2.11.48",
+    "@arcblock/react-hooks": "^2.11.48",
     "@arcblock/ws": "^1.19.9",
     "@blocklet/did-space-react": "^1.0.16",
     "@iconify-icons/logos": "^1.2.36",
@@ -84,5 +84,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "289036b9e8092ce23314bece14c61c6ae8a7c757"
+  "gitHead": "817e70f58232384efd588a37ee343d67b5007a8d"
 }

package/src/Dashboard/index.jsx

@@ -18,7 +18,16 @@ import useMobile from '../hooks/use-mobile';
  * 专门用于 (composable) blocklet 的 Dashboard 组件, 解析 blocklet meta 中 section 为 dashboard 的 navigation 数据, 渲染一个 UX Dashboard
  */
 // eslint-disable-next-line no-shadow
-function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessionManagerProps, links, ...rest }) {
+function Dashboard({
+  meta,
+  fallbackUrl,
+  invalidPathFallback,
+  headerAddons,
+  sessionManagerProps,
+  links,
+  showDomainWarningDialog,
+  ...rest
+}) {
   useWalletHiddenTopbar();
   const sessionCtx = useContext(SessionContext);
   const user = sessionCtx?.session?.user;
@@ -110,6 +119,7 @@ function Dashboard({ meta, fallbackUrl, invalidPathFallback, headerAddons, sessi
       formattedBlocklet={formattedBlocklet}
       addons={headerAddons}
       sessionManagerProps={sessionManagerProps}
+      showDomainWarningDialog={showDomainWarningDialog}
     />
   );
 
@@ -140,6 +150,7 @@ Dashboard.propTypes = {
   headerAddons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   sessionManagerProps: SessionManagerProps,
   links: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  showDomainWarningDialog: PropTypes.bool,
 };
 
 Dashboard.defaultProps = {
@@ -156,6 +167,7 @@ Dashboard.defaultProps = {
     },
   },
   links: [],
+  showDomainWarningDialog: true,
 };
 
 export default Dashboard;

package/src/Header/index.tsx

@@ -76,6 +76,7 @@ type HeaderProps = {
   prepend?: React.ReactNode;
   align?: 'left' | 'right';
   maxWidth?: false | Breakpoint;
+  showDomainWarningDialog?: boolean;
 };
 
 /**
@@ -92,6 +93,7 @@ function Header({
   homeLink = publicPath,
   theme: themeOverrides,
   hideNavMenu = false,
+  showDomainWarningDialog = true,
   ...rest
 }: HeaderProps & Omit<BoxProps, keyof HeaderProps>) {
   useWalletHiddenTopbar();
@@ -122,7 +124,12 @@ function Header({
       : addons;
   const headerAddons = (
     // @ts-ignore
-    <HeaderAddons formattedBlocklet={formattedBlocklet} addons={_addons} sessionManagerProps={sessionManagerProps} />
+    <HeaderAddons
+      formattedBlocklet={formattedBlocklet}
+      addons={_addons}
+      sessionManagerProps={sessionManagerProps}
+      showDomainWarningDialog={showDomainWarningDialog}
+    />
   );
 
   return (

package/src/common/domain-warning.jsx

@@ -29,37 +29,37 @@ const translations = {
     guest: {
       title: 'Notice: You are using a temporary domain',
       description:
-        'You are accessing this site through a temporary domain. For a better experience, please contact the site administrator to bind a custom domain. Using a custom domain not only makes access more convenient but also ensures your access is more secure.',
+        'You are accessing this site through a temporary domain. For a better experience, please contact the site administrator to configure a custom domain. Using a custom domain not only makes access more convenient but also ensures your access is more secure.',
     },
     owner: {
-      title: 'Enhance Website Security',
-      description: 'Dear administrator, we recommend binding your custom domain soon, which will:',
+      title: 'Enhance Your Website Security',
+      description: 'Dear administrator, we recommend configuring your custom domain immediately, which will:',
       benefits1: 'Automatically obtain HTTPS certificates to ensure secure data transmission',
       benefits2: 'Create an exclusive brand image and increase website credibility',
       benefits3: 'Get a shorter, more memorable access address',
       benefits4: 'Provide visitors with a more professional experience',
-      benefits5: 'Domain binding takes just minutes to complete, taking your website to the next level!',
+      benefits5: 'Domain configuration takes just minutes to complete, taking your website to the next level!',
     },
     skip: 'Remind Me Later',
-    bindDomain: 'Bind Domain',
+    bindDomain: 'Configure Domain',
   },
   zh: {
     guest: {
       title: '温馨提示：当前使用的是临时域名',
       description:
-        '您正在通过临时域名访问本站点。为了获得更好的访问体验，请联系站点管理员绑定自定义域名。使用自定义域名不仅访问更便捷，还能确保您的访问更加安全。',
+        '您正在通过临时域名访问本站点。为了获得更好的访问体验，请联系站点管理员配置自定义域名。使用自定义域名不仅访问更便捷，还能确保您的访问更加安全。',
     },
     owner: {
       title: '提升网站安全性与专业度',
-      description: '尊敬的管理员，我们建议您尽快绑定自定义域名，这样可以：',
+      description: '尊敬的管理员，我们建议您尽快配置自定义域名，这样可以：',
       benefits1: '自动获取 HTTPS 证书，确保数据传输安全',
       benefits2: '打造专属品牌形象，提升网站可信度',
       benefits3: '获得更简短、易记的访问地址',
       benefits4: '为访客提供更专业的访问体验',
-      benefits5: '只需几分钟即可完成域名绑定，让您的网站更上一层楼！',
+      benefits5: '只需几分钟即可完成域名配置，全面提升您的网站品质！',
     },
     skip: '稍后提醒',
-    bindDomain: '绑定域名',
+    bindDomain: '配置域名',
   },
 };
 

package/src/common/header-addons.jsx

@@ -20,7 +20,7 @@ const hasNotification = () => {
 };
 
 // eslint-disable-next-line no-shadow
-export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarning, sessionManagerProps }) {
+export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarningDialog, sessionManagerProps }) {
   const sessionCtx = useContext(SessionContext);
   const { locale, languages } = useLocaleContext() || {};
   const { enableConnect = true, enableLocale = true } = formattedBlocklet;
@@ -85,7 +85,7 @@ export default function HeaderAddons({ formattedBlocklet, addons, showDomainWarn
   const renderedAddons = renderAddons();
   const nodes = Array.isArray(renderedAddons) ? renderedAddons : [renderedAddons];
   const mergedNodes = [
-    showDomainWarning ? <DomainWarning session={sessionCtx?.session} locale={locale} /> : null,
+    showDomainWarningDialog ? <DomainWarning session={sessionCtx?.session} locale={locale} /> : null,
     ...nodes,
   ].filter(Boolean);
 
@@ -99,7 +99,7 @@ HeaderAddons.propTypes = {
   // - PropTypes.node: 将 addons 原样传给 UX Header 组件
   addons: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   sessionManagerProps: SessionManagerProps,
-  showDomainWarning: PropTypes.bool,
+  showDomainWarningDialog: PropTypes.bool,
 };
 
 HeaderAddons.defaultProps = {
@@ -107,5 +107,5 @@ HeaderAddons.defaultProps = {
   sessionManagerProps: {
     showRole: true,
   },
-  showDomainWarning: true,
+  showDomainWarningDialog: true,
 };

package/src/common/notification-addon.jsx

@@ -26,13 +26,17 @@ export default function NotificationAddon({ session = {} }) {
     () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_CREATE}`,
     [userDid]
   );
+  const readListenEvent = useCreation(
+    () => `${window.blocklet.did}/${userDid}/${EVENTS.NOTIFICATION_BLOCKLET_READ}`,
+    [userDid]
+  );
 
   const listenCallback = useCallback(
     (notification) => {
       const { receivers } = notification ?? {};
 
       const { receiver: notificationReceiver } = receivers[0] ?? {};
-      // 更新列表
+
       if (notificationReceiver === userDid) {
         setUnReadCount((x) => x + 1);
       }
@@ -40,16 +44,29 @@ export default function NotificationAddon({ session = {} }) {
     [userDid, setUnReadCount]
   );
 
+  const readListenCallback = useCallback(
+    (data) => {
+      const { receiver, readCount } = data ?? {};
+
+      if (receiver === userDid) {
+        setUnReadCount((x) => x - readCount);
+      }
+    },
+    [userDid, setUnReadCount]
+  );
+
   useEffect(() => {
     if (wsClient) {
       wsClient.on(listenEvent, listenCallback);
+      wsClient.on(readListenEvent, readListenCallback);
     }
     return () => {
       if (wsClient) {
         wsClient.off(listenEvent, listenCallback);
+        wsClient.off(readListenEvent, readListenCallback);
       }
     };
-  }, [wsClient, setUnReadCount, listenCallback, listenEvent]);
+  }, [wsClient, setUnReadCount, listenCallback, listenEvent, readListenCallback, readListenEvent]);
 
   if (!session.user || !viewAllUrl) {
     return null;