@blocklet/discuss-kit-ux 1.6.222 → 1.6.224

package/dist/{index-BHZcv0rr.mjs → index-BYwPg7XF.mjs}

@@ -19,7 +19,7 @@ import joinUrl from "url-join";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
 import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
-import { useSize, useInViewport, useSetState, useGetState, useReactive } from "ahooks";
+import { useSize, useInViewport, useSetState, useRequest, useGetState, useReactive } from "ahooks";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
 import { LocaleContext, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
@@ -32,7 +32,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, useLocation, useSearchParams, useBlocker, useParams } from "react-router-dom";
+import { Link, useNavigate, useLocation, useParams, useSearchParams, useBlocker } from "react-router-dom";
 import UxRelativeTime from "@arcblock/ux/lib/RelativeTime";
 import Chip from "@mui/material/Chip";
 import Stack from "@mui/material/Stack";
@@ -43,9 +43,9 @@ import trim from "lodash/trim";
 import Avatar$1 from "@mui/material/Avatar";
 import BrokenImageIcon from "@mui/icons-material/BrokenImage";
 import { Icon } from "@iconify/react";
-import Empty$1 from "@arcblock/ux/lib/Empty";
+import Empty$3 from "@arcblock/ux/lib/Empty";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, 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, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, 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, Autocomplete, Typography as Typography$1, TextField as TextField$1, InputAdornment, Backdrop, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
 import CheckboxPlugin from "@blocklet/editor/lib/ext/CheckboxPlugin";
 import DIDAddress from "@arcblock/did-connect/lib/Address";
@@ -57,7 +57,7 @@ import Dialog from "@arcblock/ux/lib/Dialog";
 import orderBy from "lodash/orderBy";
 import Typography from "@mui/material/Typography";
 import Skeleton$1 from "@mui/material/Skeleton";
-import { createPortal } from "react-dom";
+import ReactDOM, { createPortal } from "react-dom";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import mitt from "mitt";
@@ -65,6 +65,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import { Helmet } from "react-helmet";
 import { Flipper, Flipped } from "react-flip-toolkit";
 import grey$1 from "@mui/material/colors/grey";
+import bridge from "@arcblock/bridge";
 import Fab from "@mui/material/Fab";
 import debounce from "lodash/debounce";
 import TextField from "@mui/material/TextField";
@@ -855,7 +856,7 @@ function EmptyStatus() {
       flexDirection: "column",
       alignItems: "cetner",
       justifyContent: "center",
-      children: /* @__PURE__ */ jsx(Empty$1, { children: t("profile.empty") })
+      children: /* @__PURE__ */ jsx(Empty$3, { children: t("profile.empty") })
     }
   );
 }
@@ -1007,7 +1008,8 @@ function Badge({
                 }
               },
               ...restProps
-            }
+            },
+            badgeName
           );
         })
       },
@@ -1216,6 +1218,7 @@ function AuthorInfo({
   newTitle = void 0,
   profileUse = false,
   children,
+  linkToProfile = true,
   ...rest
 }) {
   const theme = useTheme();
@@ -1241,6 +1244,9 @@ function AuthorInfo({
   };
   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);
@@ -3561,6 +3567,10 @@ class ChatClient {
     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__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 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 = createContext(
@@ -3597,7 +3607,7 @@ const uniqAndSort = (list, order = "asc") => {
   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] = useSetState({
     initialized: false,
     chats: [],
@@ -3634,9 +3644,11 @@ function ChatProvider({ client: client2, activeChatId, children }) {
       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) => ({
@@ -3661,7 +3673,11 @@ function ChatProvider({ client: client2, activeChatId, children }) {
     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
@@ -3673,6 +3689,22 @@ function ChatProvider({ client: client2, activeChatId, children }) {
       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]) }));
   };
@@ -3691,7 +3723,7 @@ function ChatProvider({ client: client2, activeChatId, children }) {
   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];
@@ -3763,9 +3795,10 @@ function ChatProvider({ client: client2, activeChatId, children }) {
       setState({ error: e.message });
     }
   };
-  const refresh = () => {
-    client2.destroy();
-    return init();
+  const createDM = async (oppositeUserDid) => {
+    const chat = await client2.createDM(oppositeUserDid);
+    addChat(chat);
+    return chat;
   };
   useEffect(() => {
     if (currentUser == null ? void 0 : currentUser.did) {
@@ -3796,14 +3829,17 @@ function ChatProvider({ client: client2, activeChatId, children }) {
     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());
@@ -3819,6 +3855,7 @@ function ChatProvider({ client: client2, activeChatId, children }) {
       ...state,
       client: client2,
       setActiveChat,
+      setActiveChatInWallet,
       isActiveChat,
       getOppositeUser: (chat) => {
         if (chat.type === "dm") {
@@ -3835,9 +3872,10 @@ function ChatProvider({ client: client2, activeChatId, children }) {
       deleteChannel,
       deleteMessage,
       hasUnreadMessages,
-      refresh,
       orderedChats,
-      getLastMessageText
+      getLastMessageText,
+      isInWallet,
+      createDM
     };
   }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children });
@@ -3870,7 +3908,7 @@ function ChannelGroup({ size = "normal", chat, children, ...rest }) {
     ] })
   ] });
 }
-function ChatList(props) {
+function ChatList({ inWallet, ...rest }) {
   const { t } = useLocaleContext();
   const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages, getLastMessageText } = useChatContext();
   const renderItem = (chat) => {
@@ -3896,14 +3934,24 @@ function ChatList(props) {
     );
     if (chat.type === "dm") {
       const oppositeUser = getOppositeUser(chat);
-      return /* @__PURE__ */ jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false, showBadge: false, showDID: false, children: latestMessageTextContent });
+      return /* @__PURE__ */ jsx(
+        AuthorInfo,
+        {
+          user: oppositeUser,
+          showProfileCard: false,
+          showBadge: false,
+          showDID: false,
+          linkToProfile: !inWallet,
+          children: latestMessageTextContent
+        }
+      );
     }
     if (chat.type === "channel") {
       return /* @__PURE__ */ jsx(ChannelGroup, { chat, children: latestMessageTextContent });
     }
     return null;
   };
-  return /* @__PURE__ */ jsx(Box, { ...props, children: /* @__PURE__ */ jsx(Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
+  return /* @__PURE__ */ jsx(Box, { ...rest, children: /* @__PURE__ */ jsx(Flipper, { flipKey: orderedChats.map((x) => x.id).join(""), children: orderedChats.map((chat) => {
     const isActiveChat = activeChatId === chat.id;
     const _hasUnreadMessages = hasUnreadMessages(chat) && (chat.type !== "channel" || chat.hasJoined);
     return /* @__PURE__ */ jsx(Flipped, { flipId: chat.id, children: /* @__PURE__ */ jsxs(
@@ -3924,7 +3972,29 @@ function ChatList(props) {
             ".message-content-text": { color: `${grey$1[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__ */ jsx(
@@ -4588,7 +4658,7 @@ function getLineClamp(count) {
 function RoomTitle({ title }) {
   return /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "medium" }, children: title });
 }
-function ChatRoom({ chat, ...rest }) {
+function ChatRoom({ chat, inWallet, ...rest }) {
   var _a2;
   const { t } = useLocaleContext();
   const theme = useTheme();
@@ -4660,7 +4730,7 @@ function ChatRoom({ chat, ...rest }) {
     return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: 1 }, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
   return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { display: isActive ? "flex" : "none", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs(
+    !inWallet && /* @__PURE__ */ jsxs(
       Box,
       {
         sx: {
@@ -4825,7 +4895,138 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
     }
   );
 }
-function Empty({ sx }) {
+const tablerSearch = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 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 = useNavigate();
+  const { client: client2, isInWallet, chats, setActiveChat, createDM } = useChatContext();
+  const [inputValue, setInputValue] = useState("");
+  const [open, setOpen] = useState(false);
+  const { data, loading } = 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__ */ jsxs(Box$1, { sx: mergedSx, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        open,
+        onOpen: () => setOpen(true),
+        onClose: () => {
+          setInputValue("");
+          setOpen(false);
+        },
+        disableClearable: true,
+        filterOptions: (x) => x,
+        options: data || [],
+        getOptionLabel: () => "",
+        renderOption: (props, option) => /* @__PURE__ */ createElement(Box$1, { component: "li", ...props, key: option.did, sx: { px: "8px!important" } }, /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", width: 1 }, children: [
+          /* @__PURE__ */ jsx(Box$1, { sx: { mt: 0.25, lineHeight: 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: option.did, src: option.avatar, size: 28, shape: "circle", variant: "circle" }) }),
+          /* @__PURE__ */ jsxs(
+            Box$1,
+            {
+              sx: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden",
+                ml: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Typography$1,
+                  {
+                    variant: "body2",
+                    sx: {
+                      fontSize: 12,
+                      fontWeight: "bold",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis"
+                    },
+                    children: option.fullName
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box$1, { sx: { ".span": { lineHeight: 1 } }, children: /* @__PURE__ */ 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__ */ jsx(
+          TextField$1,
+          {
+            ...params,
+            placeholder: "Search user",
+            variant: "outlined",
+            InputProps: {
+              ...params.InputProps,
+              type: "search",
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Box$1, { 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__ */ jsx(Backdrop, { open, sx: { zIndex: "modal", bgcolor: "transparent" } }),
+      window.document.body
+    )
+  ] });
+}
+function Empty$2({ sx }) {
   const { t } = useLocaleContext();
   const mergedSx = [
     {
@@ -4845,7 +5046,7 @@ function Empty({ sx }) {
 }
 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] = useState(false);
   const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
   const { t } = useLocaleContext();
@@ -4866,9 +5067,6 @@ function Chat({ sx, ...rest }) {
     const getTitle = webTitleMap[activeChat.type] || webTitleMap.default;
     return getTitle();
   };
-  useEffect(() => {
-    refresh();
-  }, []);
   const show = useMemo(() => {
     if (downMd) {
       return {
@@ -4911,12 +5109,13 @@ function Chat({ sx, ...rest }) {
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center",
+                gap: 1,
                 height: 52,
-                px: 2.5,
+                px: 3,
                 borderBottom: "1px solid #e5e5e5"
               },
               children: [
-                /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.chats") }) }),
+                /* @__PURE__ */ jsx(UserSearch, { sx: { flex: 1 } }),
                 /* @__PURE__ */ jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsx(
                   IconButton$1,
                   {
@@ -4928,16 +5127,16 @@ function Chat({ sx, ...rest }) {
               ]
             }
           ),
-          !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(ChatList, { sx: { flex: 1, overflowY: "auto" } }),
-          !(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(Empty, { sx: { flex: 1 } })
+          !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: false }),
+          !(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(Empty$2, { sx: { flex: 1 } })
         ]
       }
     ),
     show.right && /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
       chats.map((chat) => {
-        return /* @__PURE__ */ jsx(ChatRoom, { chat }, chat.id);
+        return /* @__PURE__ */ jsx(ChatRoom, { chat, inWallet: false }, chat.id);
       }),
-      !activeChatId && /* @__PURE__ */ jsx(Empty, { sx: { height: 1 } })
+      !activeChatId && /* @__PURE__ */ jsx(Empty$2, { sx: { height: 1 } })
     ] }),
     /* @__PURE__ */ jsx(
       NewChannelDialog,
@@ -4950,6 +5149,106 @@ function Chat({ sx, ...rest }) {
     )
   ] });
 }
+function Empty$1({ sx }) {
+  const { t } = useLocaleContext();
+  const mergedSx = [
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 1,
+      color: "grey.600"
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
+    /* @__PURE__ */ jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
+  ] });
+}
+function ChatInWallet({ sx, ...rest }) {
+  var _a2;
+  const { chatId: activeChatId } = useParams();
+  const { initialized, chats } = useChatContext();
+  const downMd = 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 = useMemo(() => {
+    if (downMd) {
+      return {
+        left: !activeChatId,
+        right: !!activeChatId
+      };
+    }
+    return {
+      left: true,
+      right: true
+    };
+  }, [downMd, activeChatId]);
+  if (!initialized) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
+  return /* @__PURE__ */ jsx(Box, { ...rest, sx: mergedSx, children: show.right && /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx(ChatRoom, { chat: activeChat, inWallet: true }),
+    !activeChatId && /* @__PURE__ */ jsx(Empty$1, { sx: { height: 1 } })
+  ] }) });
+}
+function Empty({ sx }) {
+  const { t } = useLocaleContext();
+  const mergedSx = [
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 1,
+      color: "grey.600"
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
+    /* @__PURE__ */ jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
+  ] });
+}
+function ChatListInWallet({ sx, ...rest }) {
+  const { initialized, chats, activeChatId } = useChatContext();
+  const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const show = useMemo(() => {
+    if (downMd) {
+      return {
+        left: !activeChatId,
+        right: !!activeChatId
+      };
+    }
+    return {
+      left: true,
+      right: true
+    };
+  }, [downMd, activeChatId]);
+  if (!initialized) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
+  return /* @__PURE__ */ jsx(Box, { ...rest, sx: mergedSx, children: show.left && /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        width: { sm: 320, xs: "100%" },
+        borderRight: { sm: "1px solid #e5e5e5" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(UserSearch, { sx: { flex: "0 0 auto", py: 1, px: 3 } }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: true }),
+        !(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(Empty, { sx: { flex: 1 } })
+      ]
+    }
+  ) });
+}
 const iconoirMessageText = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: [
   /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 12h10M7 8h6" }),
   /* @__PURE__ */ 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" })
@@ -5279,7 +5578,7 @@ function Pagination({
     }
   );
 }
-const Editor = lazy(() => import("./editor-Bv0IhrR_.mjs"));
+const Editor = lazy(() => import("./editor-xw6iQCuH.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Box$1, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -11445,7 +11744,7 @@ function SegmentedControl({ value, options, onChange, sx, ...rest }) {
   ) });
 }
 export {
-  UnreadNotificationContext as $,
+  useChatContext as $,
   Avatar as A,
   Badge as B,
   CommentInput as C,
@@ -11470,38 +11769,40 @@ export {
   VideoPathFixerPlugin as V,
   ChatClient as W,
   Chat as X,
-  ChatHeaderAddon as Y,
-  useChatContext as Z,
-  ChatProvider as _,
+  ChatInWallet as Y,
+  ChatListInWallet as Z,
+  ChatHeaderAddon as _,
   isEmptyContent as a,
-  useUnreadNotification as a0,
-  UnreadNotificationProvider as a1,
-  Confirm as a2,
-  ConfirmContext as a3,
-  useConfirm as a4,
-  ConfirmProvider as a5,
-  SecureLabelPicker as a6,
-  useApiErrorHandler as a7,
-  useDefaultApiErrorHandler as a8,
-  DefaultApiErrorHandler as a9,
-  PreviousLocationRecorder as aa,
-  Back as ab,
-  LazyEditor as ac,
-  EditorPreview as ad,
-  DirtyPromptContainer as ae,
-  ConfirmNavigation as af,
-  UploaderContext as ag,
-  useUploader as ah,
-  UploaderTrigger as ai,
-  UploaderProvider as aj,
-  composeImageUrl as ak,
-  usePointUpContext as al,
-  PointUpProvider as am,
-  ButtonGroup as an,
-  SegmentedControl as ao,
-  create as ap,
-  getWsClient as aq,
-  useSubscription as ar,
+  ChatProvider as a0,
+  UnreadNotificationContext as a1,
+  useUnreadNotification as a2,
+  UnreadNotificationProvider as a3,
+  Confirm as a4,
+  ConfirmContext as a5,
+  useConfirm as a6,
+  ConfirmProvider as a7,
+  SecureLabelPicker as a8,
+  useApiErrorHandler as a9,
+  useDefaultApiErrorHandler as aa,
+  DefaultApiErrorHandler as ab,
+  PreviousLocationRecorder as ac,
+  Back as ad,
+  LazyEditor as ae,
+  EditorPreview as af,
+  DirtyPromptContainer as ag,
+  ConfirmNavigation as ah,
+  UploaderContext as ai,
+  useUploader as aj,
+  UploaderTrigger as ak,
+  UploaderProvider as al,
+  composeImageUrl as am,
+  usePointUpContext as an,
+  PointUpProvider as ao,
+  ButtonGroup as ap,
+  SegmentedControl as aq,
+  create as ar,
+  getWsClient as as,
+  useSubscription as at,
   Input as b,
   useChanged as c,
   useSessionContext as d,