@blocklet/discuss-kit-ux 1.6.222 → 1.6.224

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/Box"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), 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/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("@mui/material"), 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("url-join"), require("react-dom"), 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("@mui/material/Fab"), require("lodash/debounce"), 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/Box", "lodash/isNil", "@blocklet/editor/lib/config", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@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/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", "@mui/material", "@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", "url-join", "react-dom", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "@mui/material/Fab", "lodash/debounce", "@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.Box, global.isNil, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, 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.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$1, global.Session, global.material, global.NotificationsActiveOutlinedIcon, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.joinUrl, global.reactDom, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.Fab, global.debounce, global.TextField, global.AddIcon, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
-})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, Box, isNil, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$1, Session, material, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, reactDom, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, Fab, debounce, TextField, AddIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin, 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/Box"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), 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/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("@mui/material"), 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("url-join"), require("react-dom"), 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("@arcblock/bridge"), require("@mui/material/Fab"), require("lodash/debounce"), 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/Box", "lodash/isNil", "@blocklet/editor/lib/config", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@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/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", "@mui/material", "@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", "url-join", "react-dom", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@mui/material/colors/grey", "@arcblock/bridge", "@mui/material/Fab", "lodash/debounce", "@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.Box, global.isNil, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, 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.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.material, global.NotificationsActiveOutlinedIcon, global.CheckboxPlugin, global.DIDAddress, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.orderBy, global.Typography, global.Skeleton, global.joinUrl, global.ReactDOM, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, global.grey, global.bridge, global.Fab, global.debounce, global.TextField, global.AddIcon, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
+})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, Box, isNil, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, material, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, ReactDOM, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, bridge, Fab, debounce, TextField, AddIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin, 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) => {
@@ -788,7 +788,7 @@ var __publicField = (obj, key, value) => {
         flexDirection: "column",
         alignItems: "cetner",
         justifyContent: "center",
-        children: /* @__PURE__ */ jsxRuntime.jsx(Empty$1, { children: t("profile.empty") })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Empty$3, { children: t("profile.empty") })
       }
     );
   }
@@ -940,7 +940,8 @@ var __publicField = (obj, key, value) => {
                   }
                 },
                 ...restProps
-              }
+              },
+              badgeName
             );
           })
         },
@@ -1149,6 +1150,7 @@ var __publicField = (obj, key, value) => {
     newTitle = void 0,
     profileUse = false,
     children,
+    linkToProfile = true,
     ...rest
   }) {
     const theme = styles.useTheme();
@@ -1174,6 +1176,9 @@ var __publicField = (obj, key, value) => {
     };
     const click = (e) => {
       var _a2, _b2;
+      if (!linkToProfile) {
+        return;
+      }
       (_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);
@@ -2734,7 +2739,7 @@ var __publicField = (obj, key, value) => {
     window.uploaderRef = uploaderRef;
     return /* @__PURE__ */ jsxRuntime.jsxs(UploaderContext.Provider, { value: uploaderRef, children: [
       children,
-      reactDom.createPortal(
+      ReactDOM.createPortal(
         /* @__PURE__ */ jsxRuntime.jsx(
           UploaderComponent,
           {
@@ -3494,6 +3499,10 @@ var __publicField = (obj, key, value) => {
       this.emitter.on("deleteChannel", callback);
       return () => this.emitter.off("deleteChannel", callback);
     }
+    onUpdateLastAckTime(callback) {
+      this.emitter.on("updateLastAckTime", callback);
+      return () => this.emitter.off("updateLastAckTime", callback);
+    }
   }
   const iconoirChatBubbleEmpty = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12c0 1.821.487 3.53 1.338 5L2.5 21.5l4.5-.838A9.955 9.955 0 0 0 12 22Z" }) });
   const UnreadNotificationContext = react.createContext(
@@ -3530,7 +3539,7 @@ var __publicField = (obj, key, value) => {
     const sorted = orderBy(unique, ["createdAt", "id"], [order, order]);
     return sorted;
   };
-  function ChatProvider({ client: client2, activeChatId, children }) {
+  function ChatProvider({ client: client2, activeChatId, children, isInWallet }) {
     const [state, setState] = ahooks.useSetState({
       initialized: false,
       chats: [],
@@ -3567,9 +3576,11 @@ var __publicField = (obj, key, value) => {
         return { ...prev, chats };
       });
     };
-    const updateLastAckTime = async (chatId) => {
+    const updateLastAckTime = async (chatId, clientOnly) => {
       updateChat(chatId, (chat) => ({ ...chat, lastAckTime: chat.lastMessageAt }));
-      await client2.updateLastAckTime(chatId);
+      if (!clientOnly) {
+        await client2.updateLastAckTime(chatId);
+      }
     };
     const addMessage = (chatId, message) => {
       updateChat(chatId, (chat) => ({
@@ -3594,7 +3605,11 @@ var __publicField = (obj, key, value) => {
       const chatId = chat == null ? void 0 : chat.id;
       setState((prev) => ({ ...prev, activeChatId: chatId }));
       if (chatId) {
-        navigate(`/chat/${chatId}`, { replace: true });
+        if (isInWallet) {
+          navigate(`/chat-in-wallet/${chatId}`, { replace: true });
+        } else {
+          navigate(`/chat/${chatId}`, { replace: true });
+        }
         updateChat(chatId, (origin) => ({
           ...origin,
           isActivated: true
@@ -3606,6 +3621,22 @@ var __publicField = (obj, key, value) => {
         navigate("/chat", { replace: true });
       }
     };
+    const setActiveChatInWallet = (chat) => {
+      const chatId = chat == null ? void 0 : chat.id;
+      setState((prev) => ({ ...prev, activeChatId: chatId }));
+      if (chatId) {
+        navigate(`/chat-in-wallet/${chatId}`, { replace: true });
+        updateChat(chatId, (origin) => ({
+          ...origin,
+          isActivated: true
+        }));
+        if ((chat.type !== "channel" || chat.hasJoined) && hasUnreadMessages(chat)) {
+          updateLastAckTime(chatId);
+        }
+      } else {
+        navigate("/chat-in-wallet", { replace: true });
+      }
+    };
     const addChat = (chat) => {
       setState((prev) => ({ ...prev, chats: uniqAndSort([...state.chats, chat]) }));
     };
@@ -3624,7 +3655,7 @@ var __publicField = (obj, key, value) => {
     const sendMessage = async (chatId, content) => {
       const saved = await client2.sendMessage(chatId, content);
       addMessage(chatId, saved);
-      updateLastAckTime(chatId);
+      updateLastAckTime(chatId, true);
     };
     const getLastMessageText = (chat) => {
       const lastMessage = chat && chat.messages && chat.messages[chat.messages.length - 1];
@@ -3696,9 +3727,10 @@ var __publicField = (obj, key, value) => {
         setState({ error: e.message });
       }
     };
-    const refresh = () => {
-      client2.destroy();
-      return init();
+    const createDM = async (oppositeUserDid) => {
+      const chat = await client2.createDM(oppositeUserDid);
+      addChat(chat);
+      return chat;
     };
     react.useEffect(() => {
       if (currentUser == null ? void 0 : currentUser.did) {
@@ -3729,14 +3761,17 @@ var __publicField = (obj, key, value) => {
       const cancels = [
         client2.onMessage(({ chatId, message }) => {
           addMessage(chatId, message);
-          if (isActiveChat(chatId)) {
+          if (message.sender.did === (currentUser == null ? void 0 : currentUser.did)) {
+            updateLastAckTime(chatId, true);
+          } else if (isActiveChat(chatId)) {
             updateLastAckTime(chatId);
           }
         }),
         client2.onCreateChat(({ chat }) => addChat(chat)),
         client2.onJoinChannel(({ chatId, participant }) => addParticipant(chatId, participant)),
         client2.onLeaveChannel(({ chatId, participant }) => removeParticipant(chatId, participant)),
-        client2.onDeleteChannel(({ chatId }) => deleteChat(chatId))
+        client2.onDeleteChannel(({ chatId }) => deleteChat(chatId)),
+        client2.onUpdateLastAckTime(({ chatId }) => updateLastAckTime(chatId, true))
       ];
       return () => {
         cancels.forEach((cancel) => cancel == null ? void 0 : cancel());
@@ -3752,6 +3787,7 @@ var __publicField = (obj, key, value) => {
         ...state,
         client: client2,
         setActiveChat,
+        setActiveChatInWallet,
         isActiveChat,
         getOppositeUser: (chat) => {
           if (chat.type === "dm") {
@@ -3768,9 +3804,10 @@ var __publicField = (obj, key, value) => {
         deleteChannel,
         deleteMessage,
         hasUnreadMessages,
-        refresh,
         orderedChats,
-        getLastMessageText
+        getLastMessageText,
+        isInWallet,
+        createDM
       };
     }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
     return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value, children });
@@ -3803,7 +3840,7 @@ var __publicField = (obj, key, value) => {
       ] })
     ] });
   }
-  function ChatList(props) {
+  function ChatList({ inWallet, ...rest }) {
     const { t } = context.useLocaleContext();
     const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages, getLastMessageText } = useChatContext();
     const renderItem = (chat) => {
@@ -3829,14 +3866,24 @@ var __publicField = (obj, key, value) => {
       );
       if (chat.type === "dm") {
         const oppositeUser = getOppositeUser(chat);
-        return /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false, showBadge: false, showDID: false, children: latestMessageTextContent });
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          AuthorInfo,
+          {
+            user: oppositeUser,
+            showProfileCard: false,
+            showBadge: false,
+            showDID: false,
+            linkToProfile: !inWallet,
+            children: latestMessageTextContent
+          }
+        );
       }
       if (chat.type === "channel") {
         return /* @__PURE__ */ jsxRuntime.jsx(ChannelGroup, { chat, children: latestMessageTextContent });
       }
       return null;
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactFlipToolkit.Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(reactFlipToolkit.Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
       const isActiveChat = activeChatId === chat.id;
       const _hasUnreadMessages = hasUnreadMessages(chat) && (chat.type !== "channel" || chat.hasJoined);
       return /* @__PURE__ */ jsxRuntime.jsx(reactFlipToolkit.Flipped, { flipId: chat.id, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3857,7 +3904,29 @@ var __publicField = (obj, key, value) => {
               ".message-content-text": { color: `${grey[500]}` }
             }
           },
-          onClick: () => setActiveChat(chat),
+          onClick: () => {
+            if (inWallet) {
+              const webTitleMap = {
+                dm: () => {
+                  var _a2;
+                  return ((_a2 = getOppositeUser(chat)) == null ? void 0 : _a2.fullName) || t("chat.unknown");
+                },
+                notification: () => t("chat.notification"),
+                channel: () => (chat == null ? void 0 : chat.type) === "channel" ? `# ${chat.name}` : t("chat.unknownChannel"),
+                default: () => t("chat.chats")
+              };
+              const getWebTitle = () => {
+                if (!chat) {
+                  return t("chat.chats");
+                }
+                const getTitle = webTitleMap[chat.type] || webTitleMap.default;
+                return getTitle();
+              };
+              bridge.call("clickChat", { id: chat.id, title: getWebTitle() });
+            } else {
+              setActiveChat(chat);
+            }
+          },
           children: [
             renderItem(chat),
             _hasUnreadMessages && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4521,7 +4590,7 @@ var __publicField = (obj, key, value) => {
   function RoomTitle({ title }) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "medium" }, children: title });
   }
-  function ChatRoom({ chat, ...rest }) {
+  function ChatRoom({ chat, inWallet, ...rest }) {
     var _a2;
     const { t } = context.useLocaleContext();
     const theme = styles.useTheme();
@@ -4593,7 +4662,7 @@ var __publicField = (obj, key, value) => {
       return /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {}) });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...rest, sx: { display: isActive ? "flex" : "none", flexDirection: "column", height: "100%" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      !inWallet && /* @__PURE__ */ jsxRuntime.jsxs(
         Box,
         {
           sx: {
@@ -4758,7 +4827,138 @@ var __publicField = (obj, key, value) => {
       }
     );
   }
-  function Empty({ sx }) {
+  const tablerSearch = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" }) });
+  function UserSearch({ sx, ...rest }) {
+    var _a2;
+    const { session } = useSessionContext();
+    const navigate = reactRouterDom.useNavigate();
+    const { client: client2, isInWallet, chats, setActiveChat, createDM } = useChatContext();
+    const [inputValue, setInputValue] = react.useState("");
+    const [open, setOpen] = react.useState(false);
+    const { data, loading } = ahooks.useRequest(
+      async () => {
+        if (!open) {
+          return Promise.resolve([]);
+        }
+        const results = await client2.searchUsers({ search: inputValue });
+        if (!(results == null ? void 0 : results.length)) {
+          return [];
+        }
+        return results.filter((x) => {
+          var _a3;
+          return x.did !== ((_a3 = session == null ? void 0 : session.user) == null ? void 0 : _a3.did);
+        });
+      },
+      {
+        throttleWait: 500,
+        throttleLeading: false,
+        refreshDeps: [open, inputValue, (_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did]
+      }
+    );
+    const mergedSx = mergeSx({}, sx);
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: mergedSx, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Autocomplete,
+        {
+          open,
+          onOpen: () => setOpen(true),
+          onClose: () => {
+            setInputValue("");
+            setOpen(false);
+          },
+          disableClearable: true,
+          filterOptions: (x) => x,
+          options: data || [],
+          getOptionLabel: () => "",
+          renderOption: (props, option) => /* @__PURE__ */ react.createElement(material.Box, { component: "li", ...props, key: option.did, sx: { px: "8px!important" } }, /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", width: 1 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 0.25, lineHeight: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { did: option.did, src: option.avatar, size: 28, shape: "circle", variant: "circle" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Box,
+              {
+                sx: {
+                  flex: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden",
+                  ml: 1
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Typography,
+                    {
+                      variant: "body2",
+                      sx: {
+                        fontSize: 12,
+                        fontWeight: "bold",
+                        overflow: "hidden",
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis"
+                      },
+                      children: option.fullName
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { ".span": { lineHeight: 1 } }, children: /* @__PURE__ */ jsxRuntime.jsx(DID, { did: option.did, copyable: false, compact: true, responsive: false, size: 12 }) })
+                ]
+              }
+            )
+          ] })),
+          onChange: async (event, newValue, reason) => {
+            var _a3;
+            if (event.type === "keydown" && event.key === "Backspace" && reason === "removeOption") {
+              return;
+            }
+            const chatId = [newValue.did, (_a3 = session == null ? void 0 : session.user) == null ? void 0 : _a3.did].sort().join("-");
+            const chat = chats.find((x) => x.id === chatId);
+            if (isInWallet) {
+              if (chat) {
+                bridge.call("clickChat", { id: chat.id, title: newValue.fullName });
+              } else {
+                const dm = await createDM(newValue.did);
+                bridge.call("clickChat", { id: dm.id, title: newValue.fullName });
+              }
+            } else if (chat) {
+              setActiveChat(chat);
+            } else {
+              navigate(`/chat/dm/${newValue.did}`);
+            }
+          },
+          loading,
+          onInputChange: (_, newInputValue, reason) => {
+            if (reason === "reset") {
+              return;
+            }
+            setInputValue(newInputValue);
+          },
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+            material.TextField,
+            {
+              ...params,
+              placeholder: "Search user",
+              variant: "outlined",
+              InputProps: {
+                ...params.InputProps,
+                type: "search",
+                startAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: tablerSearch, sx: { fontSize: 14 } }) })
+              },
+              sx: {
+                fontSize: 12,
+                ".MuiInputBase-root": { pr: "8px!important" },
+                ".MuiInputBase-input": { py: "0!important" },
+                fieldset: { borderColor: "#eee!important" }
+              }
+            }
+          ),
+          isOptionEqualToValue: (option, value) => option.did === value.did,
+          sx: { ".MuiAutocomplete-endAdornment": { display: "none" } }
+        }
+      ),
+      ReactDOM.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx(material.Backdrop, { open, sx: { zIndex: "modal", bgcolor: "transparent" } }),
+        window.document.body
+      )
+    ] });
+  }
+  function Empty$2({ sx }) {
     const { t } = context.useLocaleContext();
     const mergedSx = [
       {
@@ -4778,7 +4978,7 @@ var __publicField = (obj, key, value) => {
   }
   function Chat({ sx, ...rest }) {
     var _a2;
-    const { client: client2, initialized, chats, activeChatId, addChat, setActiveChat, refresh, getOppositeUser } = useChatContext();
+    const { client: client2, initialized, chats, activeChatId, addChat, setActiveChat, getOppositeUser } = useChatContext();
     const [newChannelVisible, setNewChannelVisible] = react.useState(false);
     const downMd = material.useMediaQuery((theme) => theme.breakpoints.down("sm"));
     const { t } = context.useLocaleContext();
@@ -4799,9 +4999,6 @@ var __publicField = (obj, key, value) => {
       const getTitle = webTitleMap[activeChat.type] || webTitleMap.default;
       return getTitle();
     };
-    react.useEffect(() => {
-      refresh();
-    }, []);
     const show = react.useMemo(() => {
       if (downMd) {
         return {
@@ -4844,12 +5041,13 @@ var __publicField = (obj, key, value) => {
                   display: "flex",
                   justifyContent: "space-between",
                   alignItems: "center",
+                  gap: 1,
                   height: 52,
-                  px: 2.5,
+                  px: 3,
                   borderBottom: "1px solid #e5e5e5"
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.chats") }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(UserSearch, { sx: { flex: 1 } }),
                   /* @__PURE__ */ jsxRuntime.jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsxRuntime.jsx(
                     IconButton$1,
                     {
@@ -4861,16 +5059,16 @@ var __publicField = (obj, key, value) => {
                 ]
               }
             ),
-            !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsxRuntime.jsx(ChatList, { sx: { flex: 1, overflowY: "auto" } }),
-            !(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsxRuntime.jsx(Empty, { sx: { flex: 1 } })
+            !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsxRuntime.jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: false }),
+            !(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsxRuntime.jsx(Empty$2, { sx: { flex: 1 } })
           ]
         }
       ),
       show.right && /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
         chats.map((chat) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(ChatRoom, { chat }, chat.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChatRoom, { chat, inWallet: false }, chat.id);
         }),
-        !activeChatId && /* @__PURE__ */ jsxRuntime.jsx(Empty, { sx: { height: 1 } })
+        !activeChatId && /* @__PURE__ */ jsxRuntime.jsx(Empty$2, { sx: { height: 1 } })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         NewChannelDialog,
@@ -4883,6 +5081,106 @@ var __publicField = (obj, key, value) => {
       )
     ] });
   }
+  function Empty$1({ sx }) {
+    const { t } = context.useLocaleContext();
+    const mergedSx = [
+      {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 1,
+        color: "grey.600"
+      },
+      ...Array.isArray(sx) ? sx : [sx]
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: mergedSx, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
+    ] });
+  }
+  function ChatInWallet({ sx, ...rest }) {
+    var _a2;
+    const { chatId: activeChatId } = reactRouterDom.useParams();
+    const { initialized, chats } = useChatContext();
+    const downMd = material.useMediaQuery((theme) => theme.breakpoints.down("sm"));
+    const activeChat = (_a2 = chats == null ? void 0 : chats.filter((chat) => (chat == null ? void 0 : chat.id) === activeChatId)) == null ? void 0 : _a2[0];
+    const show = react.useMemo(() => {
+      if (downMd) {
+        return {
+          left: !activeChatId,
+          right: !!activeChatId
+        };
+      }
+      return {
+        left: true,
+        right: true
+      };
+    }, [downMd, activeChatId]);
+    if (!initialized) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {});
+    }
+    const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...rest, sx: mergedSx, children: show.right && /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ChatRoom, { chat: activeChat, inWallet: true }),
+      !activeChatId && /* @__PURE__ */ jsxRuntime.jsx(Empty$1, { sx: { height: 1 } })
+    ] }) });
+  }
+  function Empty({ sx }) {
+    const { t } = context.useLocaleContext();
+    const mergedSx = [
+      {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 1,
+        color: "grey.600"
+      },
+      ...Array.isArray(sx) ? sx : [sx]
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: mergedSx, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
+    ] });
+  }
+  function ChatListInWallet({ sx, ...rest }) {
+    const { initialized, chats, activeChatId } = useChatContext();
+    const downMd = material.useMediaQuery((theme) => theme.breakpoints.down("sm"));
+    const show = react.useMemo(() => {
+      if (downMd) {
+        return {
+          left: !activeChatId,
+          right: !!activeChatId
+        };
+      }
+      return {
+        left: true,
+        right: true
+      };
+    }, [downMd, activeChatId]);
+    if (!initialized) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {});
+    }
+    const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { ...rest, sx: mergedSx, children: show.left && /* @__PURE__ */ jsxRuntime.jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          width: { sm: 320, xs: "100%" },
+          borderRight: { sm: "1px solid #e5e5e5" }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(UserSearch, { sx: { flex: "0 0 auto", py: 1, px: 3 } }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
+          !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsxRuntime.jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: true }),
+          !(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsxRuntime.jsx(Empty, { sx: { flex: 1 } })
+        ]
+      }
+    ) });
+  }
   const iconoirMessageText = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 12h10M7 8h6" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 20.29V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7.961a2 2 0 0 0-1.561.75l-2.331 2.914A.6.6 0 0 1 3 20.29Z" })
@@ -11117,7 +11415,7 @@ var __publicField = (obj, key, value) => {
       return (_a3 = handlers[event]) == null ? void 0 : _a3.call(handlers, data);
     }, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(PointUpContext.Provider, { value, children: [
-      (pointUpComponent == null ? void 0 : pointUpComponent.mountPoint) && reactDom.createPortal(
+      (pointUpComponent == null ? void 0 : pointUpComponent.mountPoint) && ReactDOM.createPortal(
         /* @__PURE__ */ jsxRuntime.jsx(
           Box,
           {
@@ -11423,6 +11721,8 @@ var __publicField = (obj, key, value) => {
   exports2.Chat = Chat;
   exports2.ChatClient = ChatClient;
   exports2.ChatHeaderAddon = ChatHeaderAddon;
+  exports2.ChatInWallet = ChatInWallet;
+  exports2.ChatListInWallet = ChatListInWallet;
   exports2.ChatProvider = ChatProvider;
   exports2.Comment = Comment;
   exports2.CommentInput = CommentInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "1.6.222",
+  "version": "1.6.224",
   "files": [
     "dist"
   ],
@@ -28,9 +28,10 @@
     "access": "public"
   },
   "dependencies": {
+    "@arcblock/bridge": "^2.9.65",
     "@arcblock/ws": "^1.18.115",
-    "@blocklet/editor": "1.6.222",
-    "@blocklet/labels": "1.6.222",
+    "@blocklet/editor": "1.6.224",
+    "@blocklet/labels": "1.6.224",
     "@blocklet/uploader": "^0.0.78",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -52,8 +53,8 @@
     "url-join": "^4.0.1"
   },
   "peerDependencies": {
-    "@arcblock/did-connect": "^2.9.63",
-    "@arcblock/ux": "^2.9.63",
+    "@arcblock/did-connect": "^2.9.70",
+    "@arcblock/ux": "^2.9.70",
     "@mui/icons-material": "^5.10.9",
     "@mui/lab": "^5.0.0-alpha.109",
     "@mui/material": "^5.10.13",
@@ -94,5 +95,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "84061503d6b781510a927dc0060f618644904d81"
+  "gitHead": "16547e2b9301b69d2210d80c2ffbba21f4235543"
 }