@blocklet/discuss-kit-ux 2.0.65 → 2.0.67

package/dist/components/chat/chat-input.d.ts

@@ -4,7 +4,7 @@ interface Props extends EditorProps {
     initialContent?: string;
     send: (content: string) => Promise<void>;
     onContentChange?: (content: string) => void;
-    onInputFocus?: (v: boolean) => void;
+    onFocusChange?: (focused: boolean) => void;
 }
-export declare function ChatInput({ initialContent, send, onContentChange, onInputFocus }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ initialContent, send, onContentChange, onFocusChange }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,3 +3,4 @@ export { useChanged } from './changed';
 export { useNow } from './now';
 export { useInterval } from './interval';
 export { useDownBreakpoint, useUpBreakpoint } from './responsive';
+export { useNotification } from './notification';

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

@@ -0,0 +1,9 @@
+interface UseNotificationProps {
+    title: string;
+    options?: NotificationOptions;
+    onclick?: () => void;
+}
+export declare const useNotification: () => {
+    show: ({ title, options, onclick }: UseNotificationProps) => Promise<void>;
+};
+export {};

package/dist/components/locale/en.d.ts

@@ -61,6 +61,7 @@ declare const _default: {
         mentionInPost: string;
         replyYourComment: string;
         replyComment: string;
+        newMsg: string;
         deleteChannelTitle: string;
         deleteChannelDesc: string;
         leaveChannel: string;

package/dist/components/locale/index.d.ts

@@ -63,6 +63,7 @@ export declare const translations: {
             mentionInPost: string;
             replyYourComment: string;
             replyComment: string;
+            newMsg: string;
             deleteChannelTitle: string;
             deleteChannelDesc: string;
             leaveChannel: string;
@@ -150,6 +151,7 @@ export declare const translations: {
             mentionInPost: string;
             replyYourComment: string;
             replyComment: string;
+            newMsg: string;
             deleteChannelTitle: string;
             deleteChannelDesc: string;
             leaveChannel: string;

package/dist/components/locale/zh.d.ts

@@ -62,6 +62,7 @@ declare const _default: {
         mentionInPost: string;
         replyYourComment: string;
         replyComment: string;
+        newMsg: string;
         deleteChannelTitle: string;
         deleteChannelDesc: string;
         leaveChannel: string;

package/dist/{editor-Bmjq1QtI.mjs → editor-TZZey5Q7.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 { lazy } from "react";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-CGs-Yy3L.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-7KXsY2Zx.mjs";
 const BlockletEditor = lazy(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-CGs-Yy3L.mjs → index-7KXsY2Zx.mjs}

@@ -1126,6 +1126,23 @@ const useResponsiveValue = (values2) => {
   const r = useResponsive();
   return r(values2);
 };
+const useNotification = () => {
+  const show = async ({ title, options, onclick }) => {
+    if (!("Notification" in window))
+      return;
+    if (Notification.permission === "granted") {
+      const notification = new Notification(title, options);
+      notification.onclick = onclick ?? null;
+      return;
+    }
+    if (Notification.permission !== "denied") {
+      const permission = await Notification.requestPermission();
+      if (permission === "granted")
+        show({ title, options, onclick });
+    }
+  };
+  return { show };
+};
 function ProfileCard({ user, click, ...rest }) {
   var _a2, _b2, _c2;
   const { session } = useSessionContext();
@@ -1196,7 +1213,7 @@ function ProfileCard({ user, click, ...rest }) {
             /* @__PURE__ */ jsx(Box$1, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(Badge, { passports: (user == null ? void 0 : user.passports) || [], pointInfo: (user == null ? void 0 : user.pointInfo) || {}, did: user == null ? void 0 : user.did }) })
           ] })
         ] }),
-        chatUrl && ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) && ((_c2 = session == null ? void 0 : session.user) == null ? void 0 : _c2.did) !== user.did && /* @__PURE__ */ jsxs(Fragment, { children: [
+        chatUrl && (user == null ? void 0 : user.did) !== window.blocklet.appId && ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) && ((_c2 = session == null ? void 0 : session.user) == null ? void 0 : _c2.did) !== user.did && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Box$1, { sx: { my: 2, borderTop: "1px solid #eee" } }),
           /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
             Button,
@@ -1312,9 +1329,10 @@ function AuthorInfo({
     createdAt = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
     return /* @__PURE__ */ jsx(Box$1, { component: RelativeTime, sx: { color: "text.secondary" }, value: createdAt });
   };
+  const canClick = linkToProfile && (user == null ? void 0 : user.did) && (user == null ? void 0 : user.did) !== window.blocklet.appId;
   const click = (e) => {
     var _a2, _b2;
-    if (!linkToProfile) {
+    if (!canClick) {
       return;
     }
     (_a2 = e == null ? void 0 : e.stopPropagation) == null ? void 0 : _a2.call(e);
@@ -1338,20 +1356,27 @@ function AuthorInfo({
           onOpen: () => setOpen(true),
           PopperProps: { disablePortal: false },
           title: /* @__PURE__ */ jsx(ProfileCard, { user, click }),
-          children: /* @__PURE__ */ jsx(Box$1, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsx(
-            Avatar,
+          children: /* @__PURE__ */ jsx(
+            Box$1,
             {
-              did: user == null ? void 0 : user.did,
-              src: user == null ? void 0 : user.avatar,
-              size: avatarSize,
-              shape: "circle",
-              variant: "circle",
-              sx: {
-                width: "100%",
-                height: "100%"
-              }
+              sx: { display: "flex", cursor: canClick ? "pointer" : "auto", width: avatarSize, height: avatarSize },
+              onClick: click,
+              children: /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  did: user == null ? void 0 : user.did,
+                  src: user == null ? void 0 : user.avatar,
+                  size: avatarSize,
+                  shape: "circle",
+                  variant: "circle",
+                  sx: {
+                    width: "100%",
+                    height: "100%"
+                  }
+                }
+              )
             }
-          ) })
+          )
         }
       );
     }
@@ -3720,6 +3745,9 @@ function ChatProvider({ client: client2, activeChatId, children, isInWallet }) {
     activeChatId: void 0,
     error: void 0
   });
+  const chatById = useMemo(() => {
+    return state.chats.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+  }, [state.chats]);
   const { markAsUnread } = useUnreadNotification();
   const navigate = useNavigate();
   const { session } = useSessionContext();
@@ -3931,9 +3959,42 @@ function ChatProvider({ client: client2, activeChatId, children, isInWallet }) {
       setState((prev) => ({ ...prev, activeChatId: void 0 }));
     }
   }, [state, activeChatId]);
+  const { t } = useLocaleContext();
+  const { show } = useNotification();
+  const resolveChatNotification = (chatId, { id: id2, content, sender, type, link, sourceUser, comment, reply, post }) => {
+    if (isInWallet || sender.did === currentUser.did)
+      return;
+    const chat = chatById[chatId];
+    if (!chat)
+      return;
+    const isSystem = chat.type === "notification";
+    const isChannel = chat.type === "channel";
+    const getNotificationMeta = () => {
+      const getOpener = (url) => () => window.open(url, "_blank");
+      const getTitle = (i18nKey) => `${sourceUser == null ? void 0 : sourceUser.fullName} ${t(`chat.${i18nKey}`)}`;
+      const onclick2 = getOpener(link);
+      const map = {
+        message: {
+          title: `${t("chat.newMsg")} ${isChannel ? chat.name : sender.fullName}`,
+          body: getExcerptFromLexicalContent(content),
+          onclick: getOpener(joinURL("/chat", chatId))
+        },
+        comment: { title: getTitle("commentedYourPost"), body: comment == null ? void 0 : comment.excerpt, onclick: onclick2 },
+        reply: { title: getTitle("replyYourComment"), body: reply == null ? void 0 : reply.excerpt, onclick: onclick2 },
+        mentionInComment: { title: getTitle("mentionInComment"), body: comment == null ? void 0 : comment.excerpt, onclick: onclick2 },
+        mentionInPost: { title: getTitle("mentionInPost"), body: post == null ? void 0 : post.excerpt, onclick: onclick2 }
+      };
+      return map[type];
+    };
+    const icon = isSystem ? sourceUser == null ? void 0 : sourceUser.avatar : sender.avatar;
+    const { title, body, onclick } = getNotificationMeta();
+    if (title)
+      show({ title, onclick, options: { tag: id2, icon, body } });
+  };
   useEffect(() => {
     const cancels = [
       client2.onMessage(({ chatId, message }) => {
+        resolveChatNotification(chatId, message);
         addMessage(chatId, message);
         if (message.sender.did === (currentUser == null ? void 0 : currentUser.did)) {
           updateLastAckTime(chatId, true);
@@ -4741,7 +4802,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
 }
 const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", 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", "data-iconify": "tabler", 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 = lazy(() => import("./editor-Bmjq1QtI.mjs"));
+const Editor = lazy(() => import("./editor-TZZey5Q7.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -4876,7 +4937,7 @@ function ShortcutPlugin({ callback }) {
   }, [editor, callback, mobile.any]);
   return null;
 }
-function ChatInput({ initialContent, send, onContentChange, onInputFocus }) {
+function ChatInput({ initialContent, send, onContentChange, onFocusChange }) {
   const { t } = useLocaleContext();
   const [content, setContent] = useState("");
   const [lastSent, setLastSent] = useState(0);
@@ -4885,23 +4946,26 @@ function ChatInput({ initialContent, send, onContentChange, onInputFocus }) {
   });
   const { mobile } = useBrowser();
   const [focused, setFocused] = useState(false);
-  const onFocusWrapper = (v2) => {
+  const FocusCallback = (v2) => {
     setFocused(v2);
-    onInputFocus == null ? void 0 : onInputFocus(v2);
+    onFocusChange == null ? void 0 : onFocusChange(v2);
   };
   const onToolbarBtnMouseDown = (e) => {
     e.preventDefault();
     setToolbarVisible((x) => !x);
   };
   const compactView = mobile.any && !focused;
-  const handleSend = () => {
-    if (!content) {
+  const handleSend = async () => {
+    if (!content)
       return;
-    }
-    send(content);
+    await send(content);
     setContent("");
     setLastSent(Date.now());
   };
+  const onSendBtnMouseDown = (e) => {
+    e.preventDefault();
+    handleSend();
+  };
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -4977,7 +5041,7 @@ function ChatInput({ initialContent, send, onContentChange, onInputFocus }) {
                     /* @__PURE__ */ jsx(AutoClearPlugin, { clearKey: lastSent }),
                     /* @__PURE__ */ jsx(ShortcutPlugin, { callback: handleSend }),
                     /* @__PURE__ */ jsx(DraggerPlugin, {}),
-                    /* @__PURE__ */ jsx(FocusPlugin, { callback: onFocusWrapper })
+                    /* @__PURE__ */ jsx(FocusPlugin, { callback: FocusCallback })
                   ]
                 }
               ) })
@@ -5024,7 +5088,7 @@ function ChatInput({ initialContent, send, onContentChange, onInputFocus }) {
                   color: "primary",
                   variant: "contained",
                   disabled: !content,
-                  onClick: handleSend,
+                  onMouseDown: onSendBtnMouseDown,
                   startIcon: /* @__PURE__ */ jsx(Box, { component: tablerSend, sx: { fontSize: "14px !important" } }),
                   sx: { height: 28 },
                   children: t("chat.send")
@@ -5077,9 +5141,10 @@ function ChatRoom({ chat, inWallet, ...rest }) {
       deleteChannel(chat.id);
     }
   };
-  const onInputFocus = () => {
+  const onFocusChange = (focused) => {
     var _a3;
-    (_a3 = messageListRef.current) == null ? void 0 : _a3.scrollToBottom();
+    if (downSm && focused)
+      (_a3 = messageListRef.current) == null ? void 0 : _a3.scrollToBottom();
   };
   const renderRoomHeader = () => {
     if (chat.type === "notification") {
@@ -5182,7 +5247,7 @@ function ChatRoom({ chat, inWallet, ...rest }) {
         {
           initialContent: input,
           onContentChange: (v2) => setInput(v2),
-          onInputFocus,
+          onFocusChange,
           send: (content) => sendMessage(chat.id, content)
         }
       ) }),
@@ -6193,6 +6258,7 @@ const en = {
     mentionInPost: "mentioned you in a post",
     replyYourComment: "replied to your comment",
     replyComment: "replied to a comment",
+    newMsg: "New message from",
     deleteChannelTitle: "Delete this channel?",
     deleteChannelDesc: "If you delete this channel, all messages in the channel will be deleted immediately.",
     leaveChannel: "Leave channel",
@@ -6281,6 +6347,7 @@ const zh = {
     mentionInPost: "在帖子里提及了你",
     replyYourComment: "回复了你的评论",
     replyComment: "回复了评论",
+    newMsg: "新消息来自",
     deleteChannelTitle: "确认删除这个频道？",
     deleteChannelDesc: "如果你要删除这个频道, 频道内所有的消息都会立刻消除。",
     leaveChannel: "离开频道",
@@ -12204,88 +12271,89 @@ function SegmentedControl({ value, options, onChange, sx, ...rest }) {
   ) });
 }
 export {
-  ChatHeaderAddon as $,
+  ChatListInWallet as $,
   Avatar as A,
   Badge as B,
   CommentInput as C,
   DefaultEditorConfigProvider as D,
-  CommentsProvider as E,
-  BinaryThumb as F,
-  GithubReaction as G,
-  EmptyStatus as H,
+  useCommentsContext as E,
+  CommentsProvider as F,
+  BinaryThumb as G,
+  GithubReaction as H,
   ImagePathFixerPlugin as I,
-  BlogListWrapper as J,
-  BlogCard as K,
-  BlogPermaLink as L,
+  EmptyStatus as J,
+  BlogListWrapper as K,
+  BlogCard as L,
   Menu as M,
-  getBlogLink as N,
-  CoverImage as O,
+  BlogPermaLink as N,
+  getBlogLink as O,
   Pagination as P,
-  CoverImageUpload as Q,
+  CoverImage as Q,
   RelativeTime as R,
   ScrollableEditorWrapper as S,
-  AccessControl as T,
-  useAuthzContext as U,
+  CoverImageUpload as T,
+  AccessControl as U,
   VideoPathFixerPlugin as V,
-  AuthzProvider as W,
-  ChatClient as X,
-  Chat as Y,
-  ChatInWallet as Z,
-  ChatListInWallet as _,
+  useAuthzContext as W,
+  AuthzProvider as X,
+  ChatClient as Y,
+  Chat as Z,
+  ChatInWallet as _,
   isEmptyContent as a,
-  useChatContext as a0,
-  ChatProvider as a1,
-  UnreadNotificationContext as a2,
-  useUnreadNotification as a3,
-  UnreadNotificationProvider as a4,
-  Confirm as a5,
-  ConfirmContext as a6,
-  useConfirm as a7,
-  ConfirmProvider as a8,
-  SecureLabelPicker as a9,
-  useApiErrorHandler as aa,
-  useDefaultApiErrorHandler as ab,
-  DefaultApiErrorHandler as ac,
-  Back as ad,
-  LazyEditor as ae,
-  EditorPreview as af,
-  DirtyPromptContainer as ag,
-  ConfirmNavigation as ah,
-  UploaderContext as ai,
-  useUploader as aj,
-  UploaderTrigger as ak,
-  UploaderProvider as al,
-  composeImageUrl as am,
-  usePointUpContext as an,
-  PointUpProvider as ao,
-  ButtonGroup as ap,
-  SegmentedControl as aq,
-  create as ar,
-  getWsClient as as,
-  useSubscription as at,
+  ChatHeaderAddon as a0,
+  useChatContext as a1,
+  ChatProvider as a2,
+  UnreadNotificationContext as a3,
+  useUnreadNotification as a4,
+  UnreadNotificationProvider as a5,
+  Confirm as a6,
+  ConfirmContext as a7,
+  useConfirm as a8,
+  ConfirmProvider as a9,
+  SecureLabelPicker as aa,
+  useApiErrorHandler as ab,
+  useDefaultApiErrorHandler as ac,
+  DefaultApiErrorHandler as ad,
+  Back as ae,
+  LazyEditor as af,
+  EditorPreview as ag,
+  DirtyPromptContainer as ah,
+  ConfirmNavigation as ai,
+  UploaderContext as aj,
+  useUploader as ak,
+  UploaderTrigger as al,
+  UploaderProvider as am,
+  composeImageUrl as an,
+  usePointUpContext as ao,
+  PointUpProvider as ap,
+  ButtonGroup as aq,
+  SegmentedControl as ar,
+  create as as,
+  getWsClient as at,
+  useSubscription as au,
   Input as b,
   useChanged as c,
   useSessionContext as d,
-  utils as e,
-  preferences as f,
+  useNotification as e,
+  utils as f,
   getExcerptSync as g,
-  typography as h,
+  preferences as h,
   inferInitialEditorState as i,
-  themeOverrides as j,
-  InternalThemeProvider as k,
+  typography as j,
+  themeOverrides as k,
   lexical as l,
-  Avatars as m,
-  AuthorInfo as n,
-  SystemUser as o,
+  InternalThemeProvider as m,
+  Avatars as n,
+  AuthorInfo as o,
   preloadInput as p,
-  PostContent as q,
+  SystemUser as q,
   routes as r,
   stringify as s,
   translations as t,
   useNow as u,
-  PostComponent as v,
-  Comment as w,
-  CommentList as x,
-  CommentsContext as y,
-  useCommentsContext as z
+  PostContent as v,
+  PostComponent as w,
+  Comment as x,
+  CommentList as y,
+  CommentsContext as z
 };

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export * from './components/editor';
 export * as lexicalUtils from './components/lexical';
 export * from './components/dirty-prompt';
 export { translations } from './components/locale';
-export { useNow, useChanged, useSessionContext } from './components/hooks';
+export { useNow, useChanged, useSessionContext, useNotification } from './components/hooks';
 export * as utils from './components/utils';
 export * as routes from './components/routes';
 export { default as preferences } from './preferences';

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, am, ar, N, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-CGs-Yy3L.mjs";
+import { U, o, X, A, n, ae, B, G, L, K, N, aq, Z, Y, a0, _, $, a2, x, C, y, z, F, a6, a7, ai, a9, Q, T, ad, D, ah, ag, J, H, b, m, af, M, P, ap, w, v, R, S, aa, ar, q, a3, a5, aj, am, al, an, as, O, at, l, h, p, r, k, t, j, ab, W, c, a1, E, a8, ac, e, u, ao, d, au, a4, ak, f } from "./index-7KXsY2Zx.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";
@@ -9,82 +9,83 @@ import "@mui/icons-material";
 import "@arcblock/ux/lib/Locale/context";
 import "@mui/material";
 export {
-  T as AccessControl,
-  n as AuthorInfo,
-  W as AuthzProvider,
+  U as AccessControl,
+  o as AuthorInfo,
+  X as AuthzProvider,
   A as Avatar,
-  m as Avatars,
-  ad as Back,
+  n as Avatars,
+  ae as Back,
   B as Badge,
-  F as BinaryThumb,
-  K as BlogCard,
-  J as BlogList,
-  L as BlogPermaLink,
-  ap as ButtonGroup,
-  Y as Chat,
-  X as ChatClient,
-  $ as ChatHeaderAddon,
-  Z as ChatInWallet,
-  _ as ChatListInWallet,
-  a1 as ChatProvider,
-  w as Comment,
+  G as BinaryThumb,
+  L as BlogCard,
+  K as BlogList,
+  N as BlogPermaLink,
+  aq as ButtonGroup,
+  Z as Chat,
+  Y as ChatClient,
+  a0 as ChatHeaderAddon,
+  _ as ChatInWallet,
+  $ as ChatListInWallet,
+  a2 as ChatProvider,
+  x as Comment,
   C as CommentInput,
-  x as CommentList,
-  y as CommentsContext,
-  E as CommentsProvider,
-  a5 as Confirm,
-  a6 as ConfirmContext,
-  ah as ConfirmNavigation,
-  a8 as ConfirmProvider,
-  O as CoverImage,
-  Q as CoverImageUpload,
-  ac as DefaultApiErrorHandler,
+  y as CommentList,
+  z as CommentsContext,
+  F as CommentsProvider,
+  a6 as Confirm,
+  a7 as ConfirmContext,
+  ai as ConfirmNavigation,
+  a9 as ConfirmProvider,
+  Q as CoverImage,
+  T as CoverImageUpload,
+  ad as DefaultApiErrorHandler,
   D as DefaultEditorConfigProvider,
-  ag as DirtyPromptContainer,
-  af as EditorPreview,
-  H as EmptyStatus,
-  G as GithubReaction,
+  ah as DirtyPromptContainer,
+  ag as EditorPreview,
+  J as EmptyStatus,
+  H as GithubReaction,
   b as Input,
-  k as InternalThemeProvider,
-  ae as LazyEditor,
+  m as InternalThemeProvider,
+  af as LazyEditor,
   M as Menu,
   P as Pagination,
-  ao as PointUpProvider,
-  v as Post,
-  q as PostContent,
+  ap as PointUpProvider,
+  w as Post,
+  v as PostContent,
   R as RelativeTime,
   S as ScrollableEditorWrapper,
-  a9 as SecureLabelPicker,
-  aq as SegmentedControl,
-  o as SystemUser,
-  a2 as UnreadNotificationContext,
-  a4 as UnreadNotificationProvider,
-  ai as UploaderContext,
-  al as UploaderProvider,
-  ak as UploaderTrigger,
-  am as composeImageUrl,
-  ar as create,
-  N as getBlogLink,
-  as as getWsClient,
+  aa as SecureLabelPicker,
+  ar as SegmentedControl,
+  q as SystemUser,
+  a3 as UnreadNotificationContext,
+  a5 as UnreadNotificationProvider,
+  aj as UploaderContext,
+  am as UploaderProvider,
+  al as UploaderTrigger,
+  an as composeImageUrl,
+  as as create,
+  O as getBlogLink,
+  at as getWsClient,
   l as lexicalUtils,
-  f as preferences,
+  h as preferences,
   p as preloadInput,
   r as routes,
-  j as themeOverrides,
+  k as themeOverrides,
   t as translations,
-  h as typography,
-  aa as useApiErrorHandler,
-  U as useAuthzContext,
+  j as typography,
+  ab as useApiErrorHandler,
+  W as useAuthzContext,
   c as useChanged,
-  a0 as useChatContext,
-  z as useCommentsContext,
-  a7 as useConfirm,
-  ab as useDefaultApiErrorHandler,
+  a1 as useChatContext,
+  E as useCommentsContext,
+  a8 as useConfirm,
+  ac as useDefaultApiErrorHandler,
+  e as useNotification,
   u as useNow,
-  an as usePointUpContext,
+  ao as usePointUpContext,
   d as useSessionContext,
-  at as useSubscription,
-  a3 as useUnreadNotification,
-  aj as useUploader,
-  e as utils
+  au as useSubscription,
+  a4 as useUnreadNotification,
+  ak as useUploader,
+  f as utils
 };

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/material/Box"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/react-hooks"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@arcblock/did-connect/lib/Session"), require("semver-compare"), require("@arcblock/bridge"), require("@mui/icons-material/NotificationsActiveOutlined"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@arcblock/did-connect/lib/Address"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("url-join"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("react-flip-toolkit"), require("@mui/material/colors/grey"), require("@blocklet/editor"), require("@mui/material/Fab"), require("lodash/debounce"), require("@blocklet/editor/lib/main/hooks/useIsFocused"), require("@mui/material/TextField"), require("@mui/icons-material/Add"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("ufo"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "@arcblock/ux/lib/Theme", "react", "@mui/material", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/material/Box", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/react-hooks", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@arcblock/did-connect/lib/Session", "semver-compare", "@arcblock/bridge", "@mui/icons-material/NotificationsActiveOutlined", "@blocklet/editor/lib/ext/CheckboxPlugin", "@arcblock/did-connect/lib/Address", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "url-join", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "@blocklet/editor", "@mui/material/Fab", "lodash/debounce", "@blocklet/editor/lib/main/hooks/useIsFocused", "@mui/material/TextField", "@mui/icons-material/Add", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "ufo", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.Theme, global.react, global.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.Box, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.reactHooks, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$3, global.Session, global.cmp, global.bridge, global.NotificationsActiveOutlinedIcon, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.joinUrl, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.TextField, global.AddIcon, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin$1, global.SafeAreaPlugin, global.text, global.ufo, global.ImageNode, global.VideoNode));
-})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, Box, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, reactHooks, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, cmp, bridge, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, ReactDOM, joinUrl, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, editor$1, Fab, debounce, useIsFocused, TextField, AddIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, ufo, ImageNode, VideoNode) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/material/Box"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/react-hooks"), require("@arcblock/ux/lib/RelativeTime"), require("@mui/material/Chip"), require("@mui/material/Stack"), require("lodash/groupBy"), require("lodash/flatMap"), require("lodash/uniqBy"), require("lodash/trim"), require("@mui/material/Avatar"), require("@mui/icons-material/BrokenImage"), require("@iconify/react"), require("@arcblock/ux/lib/Empty"), require("@arcblock/did-connect/lib/Session"), require("semver-compare"), require("@arcblock/bridge"), require("@mui/icons-material/NotificationsActiveOutlined"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@arcblock/did-connect/lib/Address"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("url-join"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("mitt"), require("@mui/material/CircularProgress"), require("react-helmet"), require("react-flip-toolkit"), require("@mui/material/colors/grey"), require("ufo"), require("@blocklet/editor"), require("@mui/material/Fab"), require("lodash/debounce"), require("@blocklet/editor/lib/main/hooks/useIsFocused"), require("@mui/material/TextField"), require("@mui/icons-material/Add"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "@arcblock/ux/lib/Theme", "react", "@mui/material", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/material/Box", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/react-hooks", "@arcblock/ux/lib/RelativeTime", "@mui/material/Chip", "@mui/material/Stack", "lodash/groupBy", "lodash/flatMap", "lodash/uniqBy", "lodash/trim", "@mui/material/Avatar", "@mui/icons-material/BrokenImage", "@iconify/react", "@arcblock/ux/lib/Empty", "@arcblock/did-connect/lib/Session", "semver-compare", "@arcblock/bridge", "@mui/icons-material/NotificationsActiveOutlined", "@blocklet/editor/lib/ext/CheckboxPlugin", "@arcblock/did-connect/lib/Address", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "url-join", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "ufo", "@blocklet/editor", "@mui/material/Fab", "lodash/debounce", "@blocklet/editor/lib/main/hooks/useIsFocused", "@mui/material/TextField", "@mui/icons-material/Add", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.Theme, global.react, global.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.Box, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.reactHooks, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$3, global.Session, global.cmp, global.bridge, global.NotificationsActiveOutlinedIcon, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.joinUrl, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.ufo, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.TextField, global.AddIcon, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin$1, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
+})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, Box, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, reactHooks, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, cmp, bridge, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, ReactDOM, joinUrl, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, ufo, editor$1, Fab, debounce, useIsFocused, TextField, AddIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, ImageNode, VideoNode) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -1052,6 +1052,23 @@ var __publicField = (obj, key, value) => {
     const r = useResponsive();
     return r(values2);
   };
+  const useNotification = () => {
+    const show = async ({ title, options, onclick }) => {
+      if (!("Notification" in window))
+        return;
+      if (Notification.permission === "granted") {
+        const notification = new Notification(title, options);
+        notification.onclick = onclick ?? null;
+        return;
+      }
+      if (Notification.permission !== "denied") {
+        const permission = await Notification.requestPermission();
+        if (permission === "granted")
+          show({ title, options, onclick });
+      }
+    };
+    return { show };
+  };
   function ProfileCard({ user, click, ...rest }) {
     var _a2, _b2, _c2;
     const { session } = useSessionContext();
@@ -1122,7 +1139,7 @@ var __publicField = (obj, key, value) => {
               /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { passports: (user == null ? void 0 : user.passports) || [], pointInfo: (user == null ? void 0 : user.pointInfo) || {}, did: user == null ? void 0 : user.did }) })
             ] })
           ] }),
-          chatUrl && ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) && ((_c2 = session == null ? void 0 : session.user) == null ? void 0 : _c2.did) !== user.did && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          chatUrl && (user == null ? void 0 : user.did) !== window.blocklet.appId && ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) && ((_c2 = session == null ? void 0 : session.user) == null ? void 0 : _c2.did) !== user.did && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { my: 2, borderTop: "1px solid #eee" } }),
             /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
               Button,
@@ -1238,9 +1255,10 @@ var __publicField = (obj, key, value) => {
       createdAt = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
       return /* @__PURE__ */ jsxRuntime.jsx(Box, { component: RelativeTime, sx: { color: "text.secondary" }, value: createdAt });
     };
+    const canClick = linkToProfile && (user == null ? void 0 : user.did) && (user == null ? void 0 : user.did) !== window.blocklet.appId;
     const click = (e) => {
       var _a2, _b2;
-      if (!linkToProfile) {
+      if (!canClick) {
         return;
       }
       (_a2 = e == null ? void 0 : e.stopPropagation) == null ? void 0 : _a2.call(e);
@@ -1264,20 +1282,27 @@ var __publicField = (obj, key, value) => {
             onOpen: () => setOpen(true),
             PopperProps: { disablePortal: false },
             title: /* @__PURE__ */ jsxRuntime.jsx(ProfileCard, { user, click }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Avatar,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
               {
-                did: user == null ? void 0 : user.did,
-                src: user == null ? void 0 : user.avatar,
-                size: avatarSize,
-                shape: "circle",
-                variant: "circle",
-                sx: {
-                  width: "100%",
-                  height: "100%"
-                }
+                sx: { display: "flex", cursor: canClick ? "pointer" : "auto", width: avatarSize, height: avatarSize },
+                onClick: click,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Avatar,
+                  {
+                    did: user == null ? void 0 : user.did,
+                    src: user == null ? void 0 : user.avatar,
+                    size: avatarSize,
+                    shape: "circle",
+                    variant: "circle",
+                    sx: {
+                      width: "100%",
+                      height: "100%"
+                    }
+                  }
+                )
               }
-            ) })
+            )
           }
         );
       }
@@ -3646,6 +3671,9 @@ var __publicField = (obj, key, value) => {
       activeChatId: void 0,
       error: void 0
     });
+    const chatById = react.useMemo(() => {
+      return state.chats.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {});
+    }, [state.chats]);
     const { markAsUnread } = useUnreadNotification();
     const navigate = reactRouterDom.useNavigate();
     const { session } = useSessionContext();
@@ -3857,9 +3885,42 @@ var __publicField = (obj, key, value) => {
         setState((prev) => ({ ...prev, activeChatId: void 0 }));
       }
     }, [state, activeChatId]);
+    const { t } = context.useLocaleContext();
+    const { show } = useNotification();
+    const resolveChatNotification = (chatId, { id: id2, content, sender, type, link, sourceUser, comment, reply, post }) => {
+      if (isInWallet || sender.did === currentUser.did)
+        return;
+      const chat = chatById[chatId];
+      if (!chat)
+        return;
+      const isSystem = chat.type === "notification";
+      const isChannel = chat.type === "channel";
+      const getNotificationMeta = () => {
+        const getOpener = (url) => () => window.open(url, "_blank");
+        const getTitle = (i18nKey) => `${sourceUser == null ? void 0 : sourceUser.fullName} ${t(`chat.${i18nKey}`)}`;
+        const onclick2 = getOpener(link);
+        const map = {
+          message: {
+            title: `${t("chat.newMsg")} ${isChannel ? chat.name : sender.fullName}`,
+            body: getExcerptFromLexicalContent(content),
+            onclick: getOpener(ufo.joinURL("/chat", chatId))
+          },
+          comment: { title: getTitle("commentedYourPost"), body: comment == null ? void 0 : comment.excerpt, onclick: onclick2 },
+          reply: { title: getTitle("replyYourComment"), body: reply == null ? void 0 : reply.excerpt, onclick: onclick2 },
+          mentionInComment: { title: getTitle("mentionInComment"), body: comment == null ? void 0 : comment.excerpt, onclick: onclick2 },
+          mentionInPost: { title: getTitle("mentionInPost"), body: post == null ? void 0 : post.excerpt, onclick: onclick2 }
+        };
+        return map[type];
+      };
+      const icon = isSystem ? sourceUser == null ? void 0 : sourceUser.avatar : sender.avatar;
+      const { title, body, onclick } = getNotificationMeta();
+      if (title)
+        show({ title, onclick, options: { tag: id2, icon, body } });
+    };
     react.useEffect(() => {
       const cancels = [
         client2.onMessage(({ chatId, message }) => {
+          resolveChatNotification(chatId, message);
           addMessage(chatId, message);
           if (message.sender.did === (currentUser == null ? void 0 : currentUser.did)) {
             updateLastAckTime(chatId, true);
@@ -4802,7 +4863,7 @@ var __publicField = (obj, key, value) => {
     }, [editor2, callback, mobile.any]);
     return null;
   }
-  function ChatInput({ initialContent, send, onContentChange, onInputFocus }) {
+  function ChatInput({ initialContent, send, onContentChange, onFocusChange }) {
     const { t } = context.useLocaleContext();
     const [content, setContent] = react.useState("");
     const [lastSent, setLastSent] = react.useState(0);
@@ -4811,23 +4872,26 @@ var __publicField = (obj, key, value) => {
     });
     const { mobile } = reactHooks.useBrowser();
     const [focused, setFocused] = react.useState(false);
-    const onFocusWrapper = (v2) => {
+    const FocusCallback = (v2) => {
       setFocused(v2);
-      onInputFocus == null ? void 0 : onInputFocus(v2);
+      onFocusChange == null ? void 0 : onFocusChange(v2);
     };
     const onToolbarBtnMouseDown = (e) => {
       e.preventDefault();
       setToolbarVisible((x) => !x);
     };
     const compactView = mobile.any && !focused;
-    const handleSend = () => {
-      if (!content) {
+    const handleSend = async () => {
+      if (!content)
         return;
-      }
-      send(content);
+      await send(content);
       setContent("");
       setLastSent(Date.now());
     };
+    const onSendBtnMouseDown = (e) => {
+      e.preventDefault();
+      handleSend();
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       material.Box,
       {
@@ -4903,7 +4967,7 @@ var __publicField = (obj, key, value) => {
                       /* @__PURE__ */ jsxRuntime.jsx(AutoClearPlugin, { clearKey: lastSent }),
                       /* @__PURE__ */ jsxRuntime.jsx(ShortcutPlugin, { callback: handleSend }),
                       /* @__PURE__ */ jsxRuntime.jsx(DraggerPlugin, {}),
-                      /* @__PURE__ */ jsxRuntime.jsx(FocusPlugin, { callback: onFocusWrapper })
+                      /* @__PURE__ */ jsxRuntime.jsx(FocusPlugin, { callback: FocusCallback })
                     ]
                   }
                 ) })
@@ -4950,7 +5014,7 @@ var __publicField = (obj, key, value) => {
                     color: "primary",
                     variant: "contained",
                     disabled: !content,
-                    onClick: handleSend,
+                    onMouseDown: onSendBtnMouseDown,
                     startIcon: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: tablerSend, sx: { fontSize: "14px !important" } }),
                     sx: { height: 28 },
                     children: t("chat.send")
@@ -5003,9 +5067,10 @@ var __publicField = (obj, key, value) => {
         deleteChannel(chat.id);
       }
     };
-    const onInputFocus = () => {
+    const onFocusChange = (focused) => {
       var _a3;
-      (_a3 = messageListRef.current) == null ? void 0 : _a3.scrollToBottom();
+      if (downSm && focused)
+        (_a3 = messageListRef.current) == null ? void 0 : _a3.scrollToBottom();
     };
     const renderRoomHeader = () => {
       if (chat.type === "notification") {
@@ -5108,7 +5173,7 @@ var __publicField = (obj, key, value) => {
           {
             initialContent: input,
             onContentChange: (v2) => setInput(v2),
-            onInputFocus,
+            onFocusChange,
             send: (content) => sendMessage(chat.id, content)
           }
         ) }),
@@ -6119,6 +6184,7 @@ var __publicField = (obj, key, value) => {
       mentionInPost: "mentioned you in a post",
       replyYourComment: "replied to your comment",
       replyComment: "replied to a comment",
+      newMsg: "New message from",
       deleteChannelTitle: "Delete this channel?",
       deleteChannelDesc: "If you delete this channel, all messages in the channel will be deleted immediately.",
       leaveChannel: "Leave channel",
@@ -6207,6 +6273,7 @@ var __publicField = (obj, key, value) => {
       mentionInPost: "在帖子里提及了你",
       replyYourComment: "回复了你的评论",
       replyComment: "回复了评论",
+      newMsg: "新消息来自",
       deleteChannelTitle: "确认删除这个频道？",
       deleteChannelDesc: "如果你要删除这个频道, 频道内所有的消息都会立刻消除。",
       leaveChannel: "离开频道",
@@ -12239,6 +12306,7 @@ var __publicField = (obj, key, value) => {
   exports2.useCommentsContext = useCommentsContext;
   exports2.useConfirm = useConfirm;
   exports2.useDefaultApiErrorHandler = useDefaultApiErrorHandler;
+  exports2.useNotification = useNotification;
   exports2.useNow = useNow;
   exports2.usePointUpContext = usePointUpContext;
   exports2.useSessionContext = useSessionContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "2.0.65",
+  "version": "2.0.67",
   "files": [
     "dist"
   ],
@@ -31,8 +31,8 @@
     "@arcblock/bridge": "^2.10.5",
     "@arcblock/react-hooks": "^2.10.5",
     "@arcblock/ws": "^1.18.126",
-    "@blocklet/editor": "2.0.65",
-    "@blocklet/labels": "2.0.65",
+    "@blocklet/editor": "2.0.67",
+    "@blocklet/labels": "2.0.67",
     "@blocklet/uploader": "^0.1.19",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -100,5 +100,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "3e7d1e73283113ea9c13fbc5d33fffaf001640db"
+  "gitHead": "138f22fa2ed3d57c2a184c6db5b083fa3b9d8749"
 }