@blocklet/discuss-kit-ux 2.1.190 → 2.1.192

package/dist/components/profile-card/index.d.ts

@@ -1 +1 @@
-export { default as ProfileCard } from './profile-card';
+export { ProfileCard } from './profile-card';

package/dist/components/profile-card/profile-card.d.ts

@@ -3,5 +3,9 @@ interface ProfileCardProps {
     user: User;
     click: () => void;
 }
-export default function ProfileCard({ user, click, ...rest }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProfileCard({ user, click, ...rest }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProfileCardTooltip({ user, children }: {
+    user: User;
+    children: React.ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/{editor-BNWEz7Qx.mjs → editor-Dnvr-2B3.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-Df9duIx9.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-DVR6adH3.mjs";
 const BlockletEditor = lazyRetry(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-Df9duIx9.mjs → index-DVR6adH3.mjs}

@@ -4,10 +4,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var _a, _b, _c, _d, _e, _f;
 import { Labels2, LabelPicker } from "@blocklet/labels";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useTheme, ThemeProvider, styled as styled$1 } from "@mui/material/styles";
+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, useCallback, isValidElement, Suspense, createContext, Fragment as Fragment$1, forwardRef, useImperativeHandle } from "react";
-import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$2, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Divider, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Stack as Stack$1, Autocomplete, Typography as Typography$1, TextField, InputAdornment, SwipeableDrawer, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { Box, useTheme as useTheme$1, useMediaQuery, styled as styled$1, Button as Button$1, Stack as Stack$1, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Divider, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, CircularProgress, Backdrop, Autocomplete, Typography as Typography$1, TextField, InputAdornment, SwipeableDrawer, Badge as Badge$1, Paper, 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";
@@ -31,7 +31,7 @@ import { grey, green, amber } from "@mui/material/colors";
 import useMediaQuery$1 from "@mui/material/useMediaQuery";
 import DID from "@arcblock/ux/lib/DID";
 import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
-import { Link, useNavigate, useMatch, useLocation, useParams, Outlet, useSearchParams, useBlocker } from "react-router-dom";
+import { useNavigate, useMatch, Link, useLocation, useParams, Outlet, useSearchParams, useBlocker } from "react-router-dom";
 import { useBrowser } from "@arcblock/react-hooks";
 import UxRelativeTime from "@arcblock/ux/lib/RelativeTime";
 import Chip from "@mui/material/Chip";
@@ -50,7 +50,6 @@ import bridge from "@arcblock/bridge";
 import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
 import { lazyRetry } from "@arcblock/ux/lib/Util";
 import CheckboxPlugin from "@blocklet/editor/lib/ext/CheckboxPlugin";
-import DIDAddress from "@arcblock/did-connect/lib/Address";
 import MuiMenuItem from "@mui/material/MenuItem";
 import clsx from "clsx";
 import IconButton$1 from "@mui/material/IconButton";
@@ -1127,6 +1126,53 @@ const useResponsiveValue = (values2) => {
   const r = useResponsive();
   return r(values2);
 };
+const useChatInWallet = () => {
+  var _a2;
+  const navigate = useNavigate();
+  const { walletVersion, mobile } = useBrowser();
+  const chatInWallet = useMatch("/chat-in-wallet/:chatId?");
+  const isInArcSphere2 = ((_a2 = window == null ? void 0 : window.navigator) == null ? void 0 : _a2.userAgent.indexOf("ArcSphere")) > -1;
+  const isChatInWalletV2 = useMemo(() => {
+    try {
+      const targetVersion = mobile.apple.device ? "5.3.5" : "5.3.1";
+      return isInArcSphere2 || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }, [walletVersion, mobile, isInArcSphere2]);
+  const isWebNavbar = useMemo(() => {
+    try {
+      const targetVersion = mobile.apple.device ? "5.4.6" : "5.4.4";
+      return isInArcSphere2 || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }, [walletVersion, mobile, isInArcSphere2]);
+  const navigateToChat = ({ id: id2, title }) => {
+    if (isChatInWalletV2) {
+      navigate(`/chat-in-wallet/${id2}`);
+    } else {
+      bridge.call("clickChat", { id: id2, title });
+    }
+  };
+  const navigateToChatList = () => {
+    navigate("/chat-in-wallet");
+  };
+  const updateUnreadState = useCallback((unread) => {
+    bridge.call("updateUnreadState", { unread, appId: window.blocklet.appPid, timestamp: /* @__PURE__ */ new Date() });
+  }, []);
+  return {
+    navigateToChat,
+    navigateToChatList,
+    isChatInWalletV2,
+    isWebNavbar,
+    isInArcSphere: isInArcSphere2,
+    updateUnreadState,
+    chatInWallet
+  };
+};
 function ProfileCard({ user, click, ...rest }) {
   var _a2, _b2, _c2;
   const { session } = useSessionContext();
@@ -1136,7 +1182,7 @@ function ProfileCard({ user, click, ...rest }) {
     chatUrl = "";
   }
   return /* @__PURE__ */ jsxs(
-    Box$1,
+    Box,
     {
       sx: {
         boxSizing: "border-box",
@@ -1151,11 +1197,11 @@ function ProfileCard({ user, click, ...rest }) {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 2, cursor: "pointer" }, onClick: click, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, cursor: "pointer" }, onClick: click, children: [
           /* @__PURE__ */ jsx(Avatar, { did: user.did, src: user.avatar, size: 44, shape: "circle", variant: "circle" }),
-          /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }, children: [
             /* @__PURE__ */ jsxs(
-              Box$1,
+              Box,
               {
                 component: "span",
                 sx: {
@@ -1165,9 +1211,9 @@ function ProfileCard({ user, click, ...rest }) {
                   lineHeight: 1.3
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Box$1, { sx: { fontWeight: "bold" }, children: user.fullName }),
+                  /* @__PURE__ */ jsx(Box, { sx: { fontWeight: "bold" }, children: user.fullName }),
                   user.role && /* @__PURE__ */ jsx(
-                    Box$1,
+                    Box,
                     {
                       sx: {
                         px: 1.25,
@@ -1194,13 +1240,13 @@ function ProfileCard({ user, click, ...rest }) {
                 did: user.did
               }
             ),
-            /* @__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 }) })
+            /* @__PURE__ */ jsx(Box, { 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 && (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,
+          /* @__PURE__ */ jsx(Box, { sx: { my: 2, borderTop: "1px solid #eee" } }),
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            Button$1,
             {
               component: Link,
               to: chatUrl,
@@ -1216,54 +1262,59 @@ function ProfileCard({ user, click, ...rest }) {
     }
   );
 }
-const useChatInWallet = () => {
-  var _a2;
+const HtmlTooltip$2 = styled$1(({ className, ...props }) => /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    PopperProps: {
+      disablePortal: true
+    },
+    ...props,
+    classes: { popper: className }
+  }
+))(() => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "transparent",
+    maxWidth: "initial"
+  }
+}));
+function ProfileCardTooltip({ user, children }) {
   const navigate = useNavigate();
-  const { walletVersion, mobile } = useBrowser();
-  const chatInWallet = useMatch("/chat-in-wallet/:chatId?");
-  const isInArcSphere2 = ((_a2 = window == null ? void 0 : window.navigator) == null ? void 0 : _a2.userAgent.indexOf("ArcSphere")) > -1;
-  const isChatInWalletV2 = useMemo(() => {
-    try {
-      const targetVersion = mobile.apple.device ? "5.3.5" : "5.3.1";
-      return isInArcSphere2 || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
-    } catch (e) {
-      console.error(e);
-      return false;
-    }
-  }, [walletVersion, mobile, isInArcSphere2]);
-  const isWebNavbar = useMemo(() => {
-    try {
-      const targetVersion = mobile.apple.device ? "5.4.6" : "5.4.4";
-      return isInArcSphere2 || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
-    } catch (e) {
-      console.error(e);
-      return false;
-    }
-  }, [walletVersion, mobile, isInArcSphere2]);
-  const navigateToChat = ({ id: id2, title }) => {
-    if (isChatInWalletV2) {
-      navigate(`/chat-in-wallet/${id2}`);
+  const [open, setOpen] = useState(false);
+  const { mobile } = useBrowser();
+  const { chatInWallet } = useChatInWallet();
+  const click = (e) => {
+    var _a2, _b2;
+    (_a2 = e == null ? void 0 : e.stopPropagation) == null ? void 0 : _a2.call(e);
+    (_b2 = e == null ? void 0 : e.preventDefault) == null ? void 0 : _b2.call(e);
+    setOpen(false);
+    if (chatInWallet) {
+      openProfile(user == null ? void 0 : user.did, true);
     } else {
-      bridge.call("clickChat", { id: id2, title });
+      setTimeout(() => {
+        if (isInDiscussKitApp) {
+          navigate(`/profile?did=${user == null ? void 0 : user.did}`);
+        } else {
+          openProfile(user == null ? void 0 : user.did);
+        }
+      }, 100);
     }
   };
-  const navigateToChatList = () => {
-    navigate("/chat-in-wallet");
-  };
-  const updateUnreadState = useCallback((unread) => {
-    bridge.call("updateUnreadState", { unread, appId: window.blocklet.appPid, timestamp: /* @__PURE__ */ new Date() });
-  }, []);
-  return {
-    navigateToChat,
-    navigateToChatList,
-    isChatInWalletV2,
-    isWebNavbar,
-    isInArcSphere: isInArcSphere2,
-    updateUnreadState,
-    chatInWallet
-  };
-};
-const HtmlTooltip$1 = styled$1(({ className, ...props }) => /* @__PURE__ */ jsx(
+  if (mobile.any) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx(
+    HtmlTooltip$2,
+    {
+      open,
+      onClose: () => setOpen(false),
+      onOpen: () => setOpen(true),
+      PopperProps: { disablePortal: false },
+      title: /* @__PURE__ */ jsx(ProfileCard, { user, click }),
+      children
+    }
+  );
+}
+const HtmlTooltip$1 = styled$2(({ className, ...props }) => /* @__PURE__ */ jsx(
   Tooltip,
   {
     PopperProps: {
@@ -1544,13 +1595,16 @@ function ViewMore({ children, ...rest }) {
   ] });
 }
 const BlockletEditor$1 = lazyRetry(() => import("@blocklet/editor"));
-const StyledBlockletEditor = styled$1(BlockletEditor$1)`
+const StyledBlockletEditor = styled$2(BlockletEditor$1)`
   .editor-scroller {
     min-height: initial;
   }
   .ContentEditable__root {
     padding: 0;
   }
+  .be-editable > p:last-child {
+    margin-bottom: 0;
+  }
 `;
 const innerHeight = parseInt(String(window.innerHeight / 3), 10);
 function PostContent({
@@ -1610,6 +1664,10 @@ function PostContent({
     }
   ) }) });
 }
+const tablerArrowForwardUp = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsx("path", { d: "m15 14l4-4l-4-4" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 10H8a4 4 0 1 0 0 8h1" })
+] }) });
 const StyledMuiMenu = styled(MuiMenu)`
   .MuiMenuItem-root {
     min-height: 32px;
@@ -1672,7 +1730,7 @@ function Menu({ items = [], ...rest }) {
   ] });
 }
 Menu.Item = MuiMenuItem;
-const Root$1 = styled$1(Box$1)`
+const Root$1 = styled$2(Box$1)`
   .post-highlighted {
     animation: highlighted-post-fade 3s;
     animation-timing-function: ease-out;
@@ -1764,6 +1822,7 @@ function PostComponent({
           AuthorInfo,
           {
             size: "sm",
+            avatarSize: 32,
             user: post.author,
             createdAt: renderTime(),
             showProfileCard,
@@ -1773,24 +1832,26 @@ function PostComponent({
         ),
         /* @__PURE__ */ jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
       ] }),
-      /* @__PURE__ */ jsxs(Box$1, { sx: { ml: 6.5 }, children: [
-        post.replyTo && /* @__PURE__ */ jsxs(
-          Box$1,
+      /* @__PURE__ */ jsxs(Box$1, { sx: { ml: 5.5 }, children: [
+        post.replyTo && /* @__PURE__ */ jsx(Box$1, { sx: { pt: 1 }, children: /* @__PURE__ */ jsx(ProfileCardTooltip, { user: post.replyTo, children: /* @__PURE__ */ jsxs(
+          Stack$1,
           {
-            mt: 0.5,
-            fontSize: 13,
-            lineHeight: 1,
-            color: "primary.light",
-            sx: { ".did-address-text": { color: "primary.light" } },
+            direction: "row",
+            alignItems: "center",
+            gap: 0.5,
+            sx: {
+              display: "inline-flex",
+              color: "text.secondary",
+              cursor: "pointer",
+              ".did-address-text": { color: "primary.light" }
+            },
             children: [
-              "@",
-              /* @__PURE__ */ jsx(Box$1, { component: "span", mr: 1, children: post.replyTo.fullName }),
-              "(",
-              /* @__PURE__ */ jsx(DIDAddress, { copyable: false, responsive: false, compact: true, inline: true, children: post.replyTo.did }),
-              ")"
+              /* @__PURE__ */ jsx(Box$1, { component: tablerArrowForwardUp }),
+              /* @__PURE__ */ jsx("span", { children: "Reply to" }),
+              /* @__PURE__ */ jsx(Box$1, { component: "span", children: post.replyTo.fullName })
             ]
           }
-        ),
+        ) }) }),
         showSystemTip && /* @__PURE__ */ jsx(
           Box$1,
           {
@@ -1805,7 +1866,7 @@ function PostComponent({
             children: systemTip
           }
         ),
-        !showSystemTip && !post.deletedAt && /* @__PURE__ */ jsx(Box$1, { my: 1, children: /* @__PURE__ */ jsx(
+        !showSystemTip && !post.deletedAt && /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
           PostContent,
           {
             content: post.content,
@@ -1829,7 +1890,7 @@ const iconoirThumbsUp = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24
   /* @__PURE__ */ jsx("path", { d: "M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.576a2 2 0 0 1 1.929 2.526l-1.91 7A2 2 0 0 1 16.473 20Z" }),
   /* @__PURE__ */ jsx("path", { strokeLinejoin: "round", d: "M7 20V9" })
 ] }) });
-const StyledDialog = styled$2(Dialog)`
+const StyledDialog = styled$1(Dialog)`
   .ux-dialog_header {
     padding: 0 16px;
   }
@@ -2172,9 +2233,13 @@ function GithubReaction({
             borderColor: "divider",
             borderRadius: 1,
             cursor: "pointer",
+            bgcolor: "transparent",
+            "&:hover": {
+              bgcolor: "grey.100"
+            },
             ...selected && {
-              borderColor: "primary.light",
-              bgcolor: (theme) => alpha(theme.palette.primary.light, 0.2)
+              borderColor: "warning.light",
+              bgcolor: (theme) => alpha(theme.palette.warning.light, 0.2)
             }
           },
           onClick: () => toggleRate(option.value),
@@ -2191,7 +2256,10 @@ function GithubReaction({
           alignItems: "center",
           gap: 3,
           ".github-reaction-icon": {
-            color: "text.hint",
+            width: "1em",
+            height: "1em",
+            fontSize: 20,
+            color: "text.secondary",
             cursor: "pointer"
           },
           ".github-reaction-icon:hover": {
@@ -2213,14 +2281,7 @@ function GithubReaction({
               },
               onClick: handleOpen,
               children: [
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    className: "github-reaction-icon",
-                    component: tablerMoodPlus,
-                    sx: { width: "1em", height: "1em", fontSize: 18 }
-                  }
-                ),
+                /* @__PURE__ */ jsx(Box, { className: "github-reaction-icon", component: tablerMoodPlus }),
                 open && /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsx(
                   Box,
                   {
@@ -2452,10 +2513,10 @@ function Comment({
               (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsx(
                 Box$1,
                 {
+                  component: tablerMessageCircle,
                   className: "github-reaction-icon",
                   onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
-                  sx: { lineHeight: 1 },
-                  children: /* @__PURE__ */ jsx(Box$1, { component: tablerMessageCircle, sx: { width: "1em", height: "1em", fontSize: 18 } })
+                  sx: { lineHeight: 1 }
                 }
               ),
               renderDonation && renderDonation(post)
@@ -2853,7 +2914,7 @@ function CommentsProvider({
   );
   return /* @__PURE__ */ jsx(CommentsContext.Provider, { value, children });
 }
-const LoadMoreButtonWrapper = styled$1(Box$1)`
+const LoadMoreButtonWrapper = styled$2(Box$1)`
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11L8 5L16 11' stroke='%23e1e4e8' stroke-linecap='square' stroke-width='1.5' /%3E%3C/svg%3E");
   background-repeat: repeat-x;
   background-position: center;
@@ -4719,7 +4780,7 @@ const MessageList = forwardRef(({ chat, ...rest }, ref) => {
     !isAtBottom && /* @__PURE__ */ jsx(Box$1, { sx: { position: "absolute", bottom: 16, right: 24 }, onClick: scrollToBottom, children: /* @__PURE__ */ jsx(Fab, { color: "inherit", sx: { width: { xs: 36, sm: 44 }, height: { xs: 36, sm: 44 } }, children: /* @__PURE__ */ jsx(ArrowDownward, {}) }) })
   ] });
 });
-const HtmlTooltip = styled$1(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip$1, { ...props, classes: { popper: className } }))(() => ({
+const HtmlTooltip = styled$2(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip$1, { ...props, classes: { popper: className } }))(() => ({
   [`& .${tooltipClasses$1.tooltip}`]: {
     color: "inherit",
     backgroundColor: "#fff",
@@ -4847,7 +4908,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, icon, ...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 = lazyRetry(() => import("./editor-BNWEz7Qx.mjs"));
+const Editor = lazyRetry(() => import("./editor-Dnvr-2B3.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),

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, ay, ar, N, am, as, av, aw, l, ax, f, p, r, j, au, t, h, aa, az, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-Df9duIx9.mjs";
+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, ay, ar, N, am, as, av, aw, l, ax, f, p, r, j, au, t, h, aa, az, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-DVR6adH3.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";

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("@arcblock/ux/lib/Locale/context"), require("@mui/icons-material"), require("@mui/lab/LoadingButton"), require("@mui/material/Alert"), require("@mui/material/Box"), 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("@arcblock/ux/lib/Util"), 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("@blocklet/editor/lib/ext/EditorHolderPlugin"), require("@mui/material/colors/red"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("ufo"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("url-join"), 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("@blocklet/editor/lib/ext/BusyPlugin"), require("@arcblock/ux/lib/Header/addon-button"), require("axios"), require("react-hot-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", "@arcblock/ux/lib/Locale/context", "@mui/icons-material", "@mui/lab/LoadingButton", "@mui/material/Alert", "@mui/material/Box", "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", "@arcblock/ux/lib/Util", "@blocklet/editor/lib/ext/CheckboxPlugin", "@arcblock/did-connect/lib/Address", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@blocklet/editor/lib/ext/EditorHolderPlugin", "@mui/material/colors/red", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "ufo", "dayjs", "dayjs/plugin/relativeTime", "url-join", "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", "@blocklet/editor/lib/ext/BusyPlugin", "@arcblock/ux/lib/Header/addon-button", "axios", "react-hot-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.context, global.iconsMaterial, global.LoadingButton, global.Alert, global.Box, 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.Util, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.EditorHolderPlugin, global.red, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.ufo, global.dayjs, global.relativeTime, global.joinUrl, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.BusyPlugin, global.addonButton, global.axios, global.hotToast, 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, context, iconsMaterial, LoadingButton, Alert, Box, 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, Util, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, EditorHolderPlugin, red, Dialog, orderBy, Typography, Skeleton, ReactDOM, ufo, dayjs, relativeTime, joinUrl, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, editor$1, Fab, debounce, useIsFocused, BusyPlugin, addonButton, axios, hotToast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, 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("@arcblock/ux/lib/Locale/context"), require("@mui/icons-material"), require("@mui/lab/LoadingButton"), require("@mui/material/Alert"), require("@mui/material/Box"), 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("@arcblock/ux/lib/Util"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@blocklet/editor/lib/ext/EditorHolderPlugin"), require("@mui/material/colors/red"), require("@arcblock/ux/lib/Dialog"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), require("react-dom"), require("ufo"), require("dayjs"), require("dayjs/plugin/relativeTime"), require("url-join"), 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("@blocklet/editor/lib/ext/BusyPlugin"), require("@arcblock/ux/lib/Header/addon-button"), require("axios"), require("react-hot-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", "@arcblock/ux/lib/Locale/context", "@mui/icons-material", "@mui/lab/LoadingButton", "@mui/material/Alert", "@mui/material/Box", "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", "@arcblock/ux/lib/Util", "@blocklet/editor/lib/ext/CheckboxPlugin", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@blocklet/editor/lib/ext/EditorHolderPlugin", "@mui/material/colors/red", "@arcblock/ux/lib/Dialog", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "ufo", "dayjs", "dayjs/plugin/relativeTime", "url-join", "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", "@blocklet/editor/lib/ext/BusyPlugin", "@arcblock/ux/lib/Header/addon-button", "axios", "react-hot-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.context, global.iconsMaterial, global.LoadingButton, global.Alert, global.Box, 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.Util, global.CheckboxPlugin, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.EditorHolderPlugin, global.red, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.ReactDOM, global.ufo, global.dayjs, global.relativeTime, global.joinUrl, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.editor$1, global.Fab, global.debounce, global.useIsFocused, global.BusyPlugin, global.addonButton, global.axios, global.hotToast, 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, context, iconsMaterial, LoadingButton, Alert, Box, 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, Util, CheckboxPlugin, MuiMenuItem, clsx, IconButton$1, MuiMenu, EditorHolderPlugin, red, Dialog, orderBy, Typography, Skeleton, ReactDOM, ufo, dayjs, relativeTime, joinUrl, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, editor$1, Fab, debounce, useIsFocused, BusyPlugin, addonButton, axios, hotToast, 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) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -1050,6 +1050,53 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const r = useResponsive();
     return r(values2);
   };
+  const useChatInWallet = () => {
+    var _a2;
+    const navigate = reactRouterDom.useNavigate();
+    const { walletVersion, mobile } = reactHooks.useBrowser();
+    const chatInWallet = reactRouterDom.useMatch("/chat-in-wallet/:chatId?");
+    const isInArcSphere2 = ((_a2 = window == null ? void 0 : window.navigator) == null ? void 0 : _a2.userAgent.indexOf("ArcSphere")) > -1;
+    const isChatInWalletV2 = react.useMemo(() => {
+      try {
+        const targetVersion = mobile.apple.device ? "5.3.5" : "5.3.1";
+        return isInArcSphere2 || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
+      } catch (e) {
+        console.error(e);
+        return false;
+      }
+    }, [walletVersion, mobile, isInArcSphere2]);
+    const isWebNavbar = react.useMemo(() => {
+      try {
+        const targetVersion = mobile.apple.device ? "5.4.6" : "5.4.4";
+        return isInArcSphere2 || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
+      } catch (e) {
+        console.error(e);
+        return false;
+      }
+    }, [walletVersion, mobile, isInArcSphere2]);
+    const navigateToChat = ({ id: id2, title }) => {
+      if (isChatInWalletV2) {
+        navigate(`/chat-in-wallet/${id2}`);
+      } else {
+        bridge.call("clickChat", { id: id2, title });
+      }
+    };
+    const navigateToChatList = () => {
+      navigate("/chat-in-wallet");
+    };
+    const updateUnreadState = react.useCallback((unread) => {
+      bridge.call("updateUnreadState", { unread, appId: window.blocklet.appPid, timestamp: /* @__PURE__ */ new Date() });
+    }, []);
+    return {
+      navigateToChat,
+      navigateToChatList,
+      isChatInWalletV2,
+      isWebNavbar,
+      isInArcSphere: isInArcSphere2,
+      updateUnreadState,
+      chatInWallet
+    };
+  };
   function ProfileCard({ user, click, ...rest }) {
     var _a2, _b2, _c2;
     const { session } = useSessionContext();
@@ -1059,7 +1106,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       chatUrl = "";
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Box,
+      material.Box,
       {
         sx: {
           boxSizing: "border-box",
@@ -1074,11 +1121,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         },
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, cursor: "pointer" }, onClick: click, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2, cursor: "pointer" }, onClick: click, children: [
             /* @__PURE__ */ jsxRuntime.jsx(Avatar, { did: user.did, src: user.avatar, size: 44, shape: "circle", variant: "circle" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }, children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
-                Box,
+                material.Box,
                 {
                   component: "span",
                   sx: {
@@ -1088,9 +1135,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     lineHeight: 1.3
                   },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontWeight: "bold" }, children: user.fullName }),
+                    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { fontWeight: "bold" }, children: user.fullName }),
                     user.role && /* @__PURE__ */ jsxRuntime.jsx(
-                      Box,
+                      material.Box,
                       {
                         sx: {
                           px: 1.25,
@@ -1117,13 +1164,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   did: user.did
                 }
               ),
-              /* @__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 }) })
+              /* @__PURE__ */ jsxRuntime.jsx(material.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 && (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,
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { my: 2, borderTop: "1px solid #eee" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Button,
               {
                 component: reactRouterDom.Link,
                 to: chatUrl,
@@ -1139,53 +1186,58 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     );
   }
-  const useChatInWallet = () => {
-    var _a2;
+  const HtmlTooltip$2 = material.styled(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip,
+    {
+      PopperProps: {
+        disablePortal: true
+      },
+      ...props,
+      classes: { popper: className }
+    }
+  ))(() => ({
+    [`& .${Tooltip.tooltipClasses.tooltip}`]: {
+      backgroundColor: "transparent",
+      maxWidth: "initial"
+    }
+  }));
+  function ProfileCardTooltip({ user, children }) {
     const navigate = reactRouterDom.useNavigate();
-    const { walletVersion, mobile } = reactHooks.useBrowser();
-    const chatInWallet = reactRouterDom.useMatch("/chat-in-wallet/:chatId?");
-    const isInArcSphere2 = ((_a2 = window == null ? void 0 : window.navigator) == null ? void 0 : _a2.userAgent.indexOf("ArcSphere")) > -1;
-    const isChatInWalletV2 = react.useMemo(() => {
-      try {
-        const targetVersion = mobile.apple.device ? "5.3.5" : "5.3.1";
-        return isInArcSphere2 || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
-      } catch (e) {
-        console.error(e);
-        return false;
-      }
-    }, [walletVersion, mobile, isInArcSphere2]);
-    const isWebNavbar = react.useMemo(() => {
-      try {
-        const targetVersion = mobile.apple.device ? "5.4.6" : "5.4.4";
-        return isInArcSphere2 || !!walletVersion && cmp(walletVersion, targetVersion) === 1;
-      } catch (e) {
-        console.error(e);
-        return false;
-      }
-    }, [walletVersion, mobile, isInArcSphere2]);
-    const navigateToChat = ({ id: id2, title }) => {
-      if (isChatInWalletV2) {
-        navigate(`/chat-in-wallet/${id2}`);
+    const [open, setOpen] = react.useState(false);
+    const { mobile } = reactHooks.useBrowser();
+    const { chatInWallet } = useChatInWallet();
+    const click = (e) => {
+      var _a2, _b2;
+      (_a2 = e == null ? void 0 : e.stopPropagation) == null ? void 0 : _a2.call(e);
+      (_b2 = e == null ? void 0 : e.preventDefault) == null ? void 0 : _b2.call(e);
+      setOpen(false);
+      if (chatInWallet) {
+        openProfile(user == null ? void 0 : user.did, true);
       } else {
-        bridge.call("clickChat", { id: id2, title });
+        setTimeout(() => {
+          if (isInDiscussKitApp) {
+            navigate(`/profile?did=${user == null ? void 0 : user.did}`);
+          } else {
+            openProfile(user == null ? void 0 : user.did);
+          }
+        }, 100);
       }
     };
-    const navigateToChatList = () => {
-      navigate("/chat-in-wallet");
-    };
-    const updateUnreadState = react.useCallback((unread) => {
-      bridge.call("updateUnreadState", { unread, appId: window.blocklet.appPid, timestamp: /* @__PURE__ */ new Date() });
-    }, []);
-    return {
-      navigateToChat,
-      navigateToChatList,
-      isChatInWalletV2,
-      isWebNavbar,
-      isInArcSphere: isInArcSphere2,
-      updateUnreadState,
-      chatInWallet
-    };
-  };
+    if (mobile.any) {
+      return children;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      HtmlTooltip$2,
+      {
+        open,
+        onClose: () => setOpen(false),
+        onOpen: () => setOpen(true),
+        PopperProps: { disablePortal: false },
+        title: /* @__PURE__ */ jsxRuntime.jsx(ProfileCard, { user, click }),
+        children
+      }
+    );
+  }
   const HtmlTooltip$1 = styles.styled(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     Tooltip,
     {
@@ -1474,6 +1526,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   .ContentEditable__root {
     padding: 0;
   }
+  .be-editable > p:last-child {
+    margin-bottom: 0;
+  }
 `;
   const innerHeight = parseInt(String(window.innerHeight / 3), 10);
   function PostContent({
@@ -1533,6 +1588,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
     ) }) });
   }
+  const tablerArrowForwardUp = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 14l4-4l-4-4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 10H8a4 4 0 1 0 0 8h1" })
+  ] }) });
   const StyledMuiMenu = Theme.styled(MuiMenu)`
   .MuiMenuItem-root {
     min-height: 32px;
@@ -1687,6 +1746,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             AuthorInfo,
             {
               size: "sm",
+              avatarSize: 32,
               user: post.author,
               createdAt: renderTime(),
               showProfileCard,
@@ -1696,24 +1756,26 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           ),
           /* @__PURE__ */ jsxRuntime.jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { ml: 6.5 }, children: [
-          post.replyTo && /* @__PURE__ */ jsxRuntime.jsxs(
-            Box,
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { ml: 5.5 }, children: [
+          post.replyTo && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { pt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(ProfileCardTooltip, { user: post.replyTo, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Stack,
             {
-              mt: 0.5,
-              fontSize: 13,
-              lineHeight: 1,
-              color: "primary.light",
-              sx: { ".did-address-text": { color: "primary.light" } },
+              direction: "row",
+              alignItems: "center",
+              gap: 0.5,
+              sx: {
+                display: "inline-flex",
+                color: "text.secondary",
+                cursor: "pointer",
+                ".did-address-text": { color: "primary.light" }
+              },
               children: [
-                "@",
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", mr: 1, children: post.replyTo.fullName }),
-                "(",
-                /* @__PURE__ */ jsxRuntime.jsx(DIDAddress, { copyable: false, responsive: false, compact: true, inline: true, children: post.replyTo.did }),
-                ")"
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: tablerArrowForwardUp }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Reply to" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", children: post.replyTo.fullName })
               ]
             }
-          ),
+          ) }) }),
           showSystemTip && /* @__PURE__ */ jsxRuntime.jsx(
             Box,
             {
@@ -1728,7 +1790,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               children: systemTip
             }
           ),
-          !showSystemTip && !post.deletedAt && /* @__PURE__ */ jsxRuntime.jsx(Box, { my: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+          !showSystemTip && !post.deletedAt && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
             PostContent,
             {
               content: post.content,
@@ -2095,9 +2157,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
               borderColor: "divider",
               borderRadius: 1,
               cursor: "pointer",
+              bgcolor: "transparent",
+              "&:hover": {
+                bgcolor: "grey.100"
+              },
               ...selected && {
-                borderColor: "primary.light",
-                bgcolor: (theme) => material.alpha(theme.palette.primary.light, 0.2)
+                borderColor: "warning.light",
+                bgcolor: (theme) => material.alpha(theme.palette.warning.light, 0.2)
               }
             },
             onClick: () => toggleRate(option.value),
@@ -2114,7 +2180,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             alignItems: "center",
             gap: 3,
             ".github-reaction-icon": {
-              color: "text.hint",
+              width: "1em",
+              height: "1em",
+              fontSize: 20,
+              color: "text.secondary",
               cursor: "pointer"
             },
             ".github-reaction-icon:hover": {
@@ -2136,14 +2205,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 },
                 onClick: handleOpen,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Box,
-                    {
-                      className: "github-reaction-icon",
-                      component: tablerMoodPlus,
-                      sx: { width: "1em", height: "1em", fontSize: 18 }
-                    }
-                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "github-reaction-icon", component: tablerMoodPlus }),
                   open && /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(
                     material.Box,
                     {
@@ -2375,10 +2437,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsxRuntime.jsx(
                   Box,
                   {
+                    component: tablerMessageCircle,
                     className: "github-reaction-icon",
                     onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
-                    sx: { lineHeight: 1 },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: tablerMessageCircle, sx: { width: "1em", height: "1em", fontSize: 18 } })
+                    sx: { lineHeight: 1 }
                   }
                 ),
                 renderDonation && renderDonation(post)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "2.1.190",
+  "version": "2.1.192",
   "files": [
     "dist"
   ],
@@ -18,8 +18,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.12.10",
-    "@arcblock/react-hooks": "^2.12.10",
+    "@arcblock/bridge": "^2.12.12",
+    "@arcblock/react-hooks": "^2.12.12",
     "@arcblock/ws": "^1.19.15",
     "@blocklet/uploader": "^0.1.71",
     "@emotion/css": "^11.13.0",
@@ -45,8 +45,8 @@
     "ufo": "^1.5.4",
     "unstated-next": "^1.1.0",
     "url-join": "^4.0.1",
-    "@blocklet/editor": "^2.1.190",
-    "@blocklet/labels": "^2.1.190"
+    "@blocklet/editor": "^2.1.192",
+    "@blocklet/labels": "^2.1.192"
   },
   "peerDependencies": {
     "@arcblock/did-connect": "^2.10.36",
@@ -63,7 +63,7 @@
   "devDependencies": {
     "@arcblock/eslint-config-ts": "^0.3.3",
     "@babel/core": "^7.25.2",
-    "@blocklet/sdk": "^1.16.40-beta-20250228",
+    "@blocklet/sdk": "^1.16.40-beta-20250310-113951-17556f90",
     "@iconify-json/iconoir": "^1.2.1",
     "@iconify-json/material-symbols": "^1.2.1",
     "@iconify-json/mdi": "^1.2.0",

package/dist/components/profile-card/ProfileCard.stories.d.ts

@@ -1,5 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { default as ProfileCard } from './profile-card';
-declare const _default: ComponentMeta<typeof ProfileCard>;
-export default _default;
-export declare const Basic: ComponentStory<typeof ProfileCard>;