@blocklet/discuss-kit-ux 2.0.1 → 2.0.3

package/dist/{index-KLdzJyDb.mjs → index-CEuSe9YY.mjs}

@@ -14,13 +14,13 @@ import { Box, useTheme as useTheme$1, useMediaQuery, Tooltip as Tooltip$1, Chip
 import isNil from "lodash/isNil";
 import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
 import { lazyWithPreload } from "react-lazy-with-preload";
-import { $getRoot, $createParagraphNode, $createTextNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $getSelection } from "lexical";
+import { $getRoot, $createParagraphNode, $createTextNode, KEY_ENTER_COMMAND, COMMAND_PRIORITY_LOW, $getSelection, COMMAND_PRIORITY_CRITICAL } from "lexical";
 import { $isRootTextContentEmpty } from "@lexical/text";
 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, useRequest, useGetState, useReactive } from "ahooks";
+import { useSize, useInViewport, useSetState, useLocalStorageState, useRequest, useGetState, useReactive } from "ahooks";
 import Box$1 from "@mui/material/Box";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
@@ -71,8 +71,10 @@ import bridge from "@arcblock/bridge";
 import { useBrowser } from "@arcblock/react-hooks";
 import Fab from "@mui/material/Fab";
 import debounce from "lodash/debounce";
+import { useIsFocused } from "@blocklet/editor/lib/main/hooks/useIsFocused";
 import TextField from "@mui/material/TextField";
 import AddIcon from "@mui/icons-material/Add";
+import SessionManager from "@arcblock/did-connect/lib/SessionManager";
 import { AxiosError } from "axios";
 import Toast from "@arcblock/ux/lib/Toast";
 import MuiPagination from "@mui/material/Pagination";
@@ -507,7 +509,7 @@ function VideoPathFixerPlugin() {
   }, [editor]);
   return null;
 }
-function AutoClearPlugin({ value, isChanged }) {
+function AutoClearPlugin$1({ value, isChanged }) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     try {
@@ -655,7 +657,7 @@ const Input = ({
         /* @__PURE__ */ jsx(CmdEnterShortcutPlugin, { shortcut, callback: handleCmdEnterPressed }),
         /* @__PURE__ */ jsx(ImagePathFixerPlugin, {}),
         /* @__PURE__ */ jsx(VideoPathFixerPlugin, {}),
-        /* @__PURE__ */ jsx(AutoClearPlugin, { value: content, isChanged: isChanged.current }),
+        /* @__PURE__ */ jsx(AutoClearPlugin$1, { value: content, isChanged: isChanged.current }),
         children
       ]
     }
@@ -3933,6 +3935,15 @@ const useChatInWallet = () => {
       return false;
     }
   }, [walletVersion, mobile]);
+  const isWebNavbar = useMemo(() => {
+    try {
+      const targetVersion = mobile.apple.device ? "5.4.6" : "5.4.4";
+      return !!walletVersion && cmp(walletVersion, targetVersion) === 1;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }, [walletVersion, mobile]);
   const navigateToChat = ({ id: id2, title }) => {
     if (isChatInWalletV2) {
       navigate(`/chat-in-wallet/${id2}`);
@@ -3946,7 +3957,7 @@ const useChatInWallet = () => {
   const updateUnreadState = useCallback((unread) => {
     bridge.call("updateUnreadState", { unread, appId: window.blocklet.appPid, timestamp: /* @__PURE__ */ new Date() });
   }, []);
-  return { navigateToChat, navigateToChatList, isChatInWalletV2, updateUnreadState };
+  return { navigateToChat, navigateToChatList, isChatInWalletV2, isWebNavbar, updateUnreadState };
 };
 function ChatList({ inWallet, ...rest }) {
   const { t } = useLocaleContext();
@@ -3991,6 +4002,7 @@ function ChatList({ inWallet, ...rest }) {
         sx: {
           position: "relative",
           m: 1,
+          mx: { xs: 0, sm: 1 },
           py: 1.5,
           px: 2,
           fontWeight: "bold",
@@ -4062,7 +4074,6 @@ const Time = ({ createdAt }) => {
 };
 const baseItemSx = {
   px: 1.25,
-  py: 1,
   transition: "all 120ms linear"
 };
 function Message({ message, prevMessage, showTime = true, ...rest }) {
@@ -4115,7 +4126,9 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
         },
         ".author-info-title": {
           fontSize: 14,
-          fontWeight: 500
+          fontWeight: 500,
+          // username 下方首条消息的 margin-top
+          "+ div": { mt: 1 }
         },
         ".author-chat-item": {
           ml: compactMessage ? 6 : 0,
@@ -4210,7 +4223,7 @@ function NotificationMessage({ chat, message, prevMessage }) {
     const baseCardSx = {
       py: 1.5,
       px: 2,
-      background: "#fff",
+      bgcolor: "grey.50",
       width: "fit-content",
       maxWidth: "calc(100% - 16px)",
       wordWrap: "break-word",
@@ -4440,7 +4453,7 @@ function NotificationMessage({ chat, message, prevMessage }) {
     }
     return /* @__PURE__ */ jsx(Message, { message, showTime: false });
   };
-  return /* @__PURE__ */ jsx(Box$1, { sx: { ...baseItemSx, fontSize: 14 }, children: render() });
+  return /* @__PURE__ */ jsx(Box$1, { sx: { ...baseItemSx, py: 0.5, fontSize: 14 }, children: render() });
 }
 const checkIsAtBottom = (element) => {
   return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
@@ -4455,7 +4468,7 @@ function MessageList({ chat, ...rest }) {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const scrollToBottom = () => {
     var _a3, _b3;
-    (_b3 = containerRef.current) == null ? void 0 : _b3.scrollTo({ top: ((_a3 = containerRef.current) == null ? void 0 : _a3.scrollHeight) || 0, behavior: "smooth" });
+    (_b3 = containerRef.current) == null ? void 0 : _b3.scrollTo({ top: ((_a3 = containerRef.current) == null ? void 0 : _a3.scrollHeight) || 0 });
     setIsAtBottom(true);
   };
   useEffect(() => {
@@ -4490,7 +4503,6 @@ function MessageList({ chat, ...rest }) {
           py: 2.5,
           px: 1.25,
           gap: 1,
-          background: "rgba(249, 250, 251, 1)",
           // 闪烁
           "@keyframes blinking": {
             "0%": { opacity: 0 },
@@ -4665,6 +4677,270 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
     }
   );
 }
+const tablerSend = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" }) });
+const tablerLetterCase = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7" }) });
+const Editor = lazy(() => import("./editor-BkMaHMub.mjs"));
+function LazyEditor(props) {
+  const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
+    /* @__PURE__ */ jsx(Skeleton, {}),
+    /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
+  ] });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: fallback2, children: /* @__PURE__ */ jsx(Editor, { ...props }) });
+}
+const BlockletEditor = lazy(() => import("@blocklet/editor"));
+const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Skeleton, {}),
+  /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
+  /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+  /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
+] });
+function EditorPreview({ content, children, ...rest }) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsxs(
+    BlockletEditor,
+    {
+      editorState: inferInitialEditorState(content),
+      editable: false,
+      enableHeadingsIdPlugin: true,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(ImagePathFixerPlugin, {}),
+        /* @__PURE__ */ jsx(VideoPathFixerPlugin, {}),
+        children
+      ]
+    }
+  ) });
+}
+EditorPreview.fallback = fallback;
+function AutoClearPlugin({ clearKey }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (editor && clearKey) {
+      editor.update(() => {
+        const root = $getRoot();
+        root.clear();
+      });
+    }
+  }, [editor, clearKey]);
+  return null;
+}
+function FocusPlugin({ callback }) {
+  const hasFocus = useIsFocused();
+  useEffect(() => {
+    callback(hasFocus);
+  }, [callback, hasFocus]);
+  return null;
+}
+function DraggerPlugin() {
+  const [editor] = useLexicalComposerContext();
+  const { mobile } = useBrowser();
+  const hasFocus = useIsFocused();
+  const selection = editor.getEditorState().read($getSelection);
+  const enabled = mobile.any && hasFocus && selection;
+  if (enabled) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          position: "absolute",
+          left: "50%",
+          top: 4,
+          width: 64,
+          marginLeft: "-32px",
+          height: 4,
+          bgcolor: "grey.300",
+          borderRadius: 0.1
+        }
+      }
+    );
+  }
+  return null;
+}
+function ShortcutPlugin({ callback }) {
+  const [editor] = useLexicalComposerContext();
+  const { mobile } = useBrowser();
+  useEffect(() => {
+    let dispatching = false;
+    return editor.registerCommand(
+      KEY_ENTER_COMMAND,
+      (e) => {
+        if (dispatching || mobile.any) {
+          dispatching = false;
+          return false;
+        }
+        if (e.shiftKey) {
+          dispatching = true;
+          const keyboardEvent = new KeyboardEvent("keydown", {
+            code: "Enter",
+            key: "Enter",
+            charCode: 13,
+            keyCode: 13,
+            view: window,
+            bubbles: true
+          });
+          e.preventDefault();
+          editor.dispatchCommand(KEY_ENTER_COMMAND, keyboardEvent);
+          return true;
+        }
+        callback();
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor, callback, mobile.any]);
+  return null;
+}
+function ChatInput({ initialContent, send, onContentChange }) {
+  const { t } = useLocaleContext();
+  const [content, setContent] = useState("");
+  const [lastSent, setLastSent] = useState(0);
+  const [toolbarVisible, setToolbarVisible] = useLocalStorageState("chat-input-toolbar-visible", {
+    defaultValue: false
+  });
+  const { mobile } = useBrowser();
+  const [focused, setFocused] = useState(false);
+  const compactView = mobile.any && !focused;
+  const handleSend = () => {
+    send(content);
+    setContent("");
+    setLastSent(Date.now());
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        pb: 5,
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        overflow: "hidden",
+        ".be-shell": { borderTop: "0 !important" },
+        ".be-shell .toolbar": { bgcolor: "grey.50", ...!toolbarVisible && { display: "none" } },
+        ".be-shell .be-editable": { px: "16px !important" },
+        ".be-shell .be-placeholder": { left: 16 },
+        ".be-shell .be-editable, .be-shell .be-content": { minHeight: "20px !important" },
+        ".be-shell .be-editable p": { my: 0 },
+        ".draggable-block-menu": { display: "none" },
+        ...compactView && {
+          pb: 0,
+          borderRadius: 2,
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              maxHeight: 400,
+              overflowY: "auto",
+              ...compactView && {
+                height: 44 + (toolbarVisible ? 44 : 0),
+                pt: toolbarVisible ? 0 : 0.5,
+                pb: 0.5,
+                overflow: "hidden",
+                ".be-shell .be-editable": { pr: "44px !important" }
+              }
+            },
+            children: [
+              compactView && !toolbarVisible && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    position: "absolute",
+                    right: 12,
+                    top: 12,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: 28,
+                    height: 28,
+                    bgcolor: "grey.300",
+                    borderRadius: "100%"
+                  },
+                  children: /* @__PURE__ */ jsx(Box, { component: tablerSend, sx: { fontSize: 13, color: "text.secondary" } })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                LazyEditor,
+                {
+                  enableSaveAreaPlugin: false,
+                  initialContent: initialContent || "",
+                  onChange: ({ content: contentStr, isEmpty }) => {
+                    const value = isEmpty ? "" : contentStr;
+                    setContent(value);
+                    onContentChange == null ? void 0 : onContentChange(value);
+                  },
+                  autoFocus: false,
+                  ignoreInitialChange: false,
+                  placeholder: "Jot something down",
+                  children: [
+                    /* @__PURE__ */ jsx(AutoClearPlugin, { clearKey: lastSent }),
+                    /* @__PURE__ */ jsx(ShortcutPlugin, { callback: handleSend }),
+                    /* @__PURE__ */ jsx(DraggerPlugin, {}),
+                    /* @__PURE__ */ jsx(FocusPlugin, { callback: (v2) => setFocused(v2) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: 40,
+              p: 1,
+              ...compactView && { display: "none" }
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Button$1,
+                {
+                  size: "small",
+                  color: "primary",
+                  variant: "text",
+                  onClick: () => setToolbarVisible((x) => !x),
+                  startIcon: /* @__PURE__ */ jsx(Box, { component: tablerLetterCase, sx: { fontSize: "14px !important" } }),
+                  sx: {
+                    width: 32,
+                    height: 28,
+                    minWidth: 0,
+                    ".MuiButton-startIcon": { m: 0, color: "text.secondary" },
+                    ...toolbarVisible && { bgcolor: "grey.200" }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button$1,
+                {
+                  size: "small",
+                  color: "primary",
+                  variant: "contained",
+                  disabled: !content,
+                  onClick: handleSend,
+                  startIcon: /* @__PURE__ */ jsx(Box, { component: tablerSend, sx: { fontSize: "14px !important" } }),
+                  sx: { height: 28 },
+                  children: t("chat.send")
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function getLineClamp(count) {
   return {
     display: "-webkit-box",
@@ -4688,7 +4964,7 @@ function ChatRoom({ chat, inWallet, ...rest }) {
   const isActive = isActiveChat(chat.id);
   const { session, isAdmin } = useSessionContext();
   const isCreator = chat.creator.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
-  const [input, setInput] = useState("");
+  const [input, setInput] = useLocalStorageState(`chat-input-${chat.id}`, { defaultValue: "" });
   useEffect(() => {
     if (chat.isActivated) {
       initChatRoom(chat.id);
@@ -4710,7 +4986,10 @@ function ChatRoom({ chat, inWallet, ...rest }) {
     }
     if (chat.type === "dm") {
       const oppositeUser = getOppositeUser(chat);
-      return /* @__PURE__ */ jsx(RoomTitle, { title: oppositeUser.fullName });
+      return /* @__PURE__ */ jsxs(Box$1, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+        /* @__PURE__ */ jsx(Avatar, { did: oppositeUser == null ? void 0 : oppositeUser.did, src: oppositeUser == null ? void 0 : oppositeUser.avatar, size: 24, shape: "circle", variant: "rounded" }),
+        /* @__PURE__ */ jsx(RoomTitle, { title: oppositeUser.fullName })
+      ] });
     }
     if (chat.type === "channel") {
       const menuItems = [];
@@ -4795,66 +5074,41 @@ function ChatRoom({ chat, inWallet, ...rest }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box$1, { sx: { flex: 1, overflow: "hidden", background: theme.palette.grey[50] }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }),
-    /* @__PURE__ */ jsx(
-      Box$1,
-      {
-        sx: {
-          flex: "0 0 auto",
-          ".be-editable": { maxHeight: 200, overflow: "auto" },
-          ".be-editable, .be-content": { minHeight: "64px !important" },
-          ".be-shell": {
-            border: "none !important",
-            borderTop: "1px solid #e5e5e5 !important",
-            borderRadius: "0px !important"
-          }
-        },
-        children: /* @__PURE__ */ jsxs(Box$1, { sx: { position: "relative" }, children: [
-          isActive && /* @__PURE__ */ jsx(
-            CommentInput,
-            {
-              initialContent: input,
-              onChange: (editorState) => setInput(editorState ? JSON.stringify(editorState) : ""),
-              send: (content) => sendMessage(chat.id, content),
-              placeholder: t("chat.typeSomething"),
-              sendText: t("chat.reply"),
-              disabledSend: !(chat.type !== "channel" || chat.hasJoined)
-            }
-          ),
-          chat.type === "channel" && !chat.hasJoined && /* @__PURE__ */ jsxs(
-            Box$1,
-            {
-              sx: {
-                position: "absolute",
-                zIndex: 9999999,
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                bgcolor: "rgba(255, 255, 255, 0.7)",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                color: "#fff"
-              },
-              children: [
-                /* @__PURE__ */ jsx(Box$1, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
-                /* @__PURE__ */ jsx(Box$1, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
-                /* @__PURE__ */ jsx(
-                  Box$1,
-                  {
-                    sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 },
-                    onClick: () => joinChannel(chat.id),
-                    children: t("chat.joinChannel")
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      }
-    )
+    /* @__PURE__ */ jsx(Box$1, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }),
+    /* @__PURE__ */ jsxs(Box$1, { sx: { position: "relative" }, children: [
+      chat.isActivated && chat.type !== "notification" && /* @__PURE__ */ jsx(Box$1, { sx: { px: { xs: 0, sm: 2.5 }, pb: { xs: 0, sm: 2.5 } }, children: /* @__PURE__ */ jsx(
+        ChatInput,
+        {
+          initialContent: input,
+          onContentChange: (v2) => setInput(v2),
+          send: (content) => sendMessage(chat.id, content)
+        }
+      ) }),
+      chat.type === "channel" && !chat.hasJoined && /* @__PURE__ */ jsxs(
+        Box$1,
+        {
+          sx: {
+            position: "absolute",
+            zIndex: 9999999,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            bgcolor: "rgba(255, 255, 255, 0.7)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "#fff"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Box$1, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
+            /* @__PURE__ */ jsx(Box$1, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
+            /* @__PURE__ */ jsx(Box$1, { sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 }, onClick: () => joinChannel(chat.id), children: t("chat.joinChannel") })
+          ]
+        }
+      )
+    ] })
   ] });
 }
 function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
@@ -5255,6 +5509,7 @@ function ChatInWallet({ sx, ...rest }) {
     !activeChatId && /* @__PURE__ */ jsx(Empty$1, { sx: { height: 1 } })
   ] }) });
 }
+const tablerSwitchHorizontal = (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: "m16 3l4 4l-4 4m-6-4h10M8 13l-4 4l4 4m-4-4h9" }) });
 function Empty({ sx }) {
   const { t } = useLocaleContext();
   const mergedSx = [
@@ -5274,16 +5529,28 @@ function Empty({ sx }) {
   ] });
 }
 function ChatListInWallet({ sx, ...rest }) {
+  var _a2, _b2;
+  const { session } = useSessionContext();
   const { initialized, chats, activeChatId } = useChatContext();
   const { unread } = useUnreadNotification();
-  const { navigateToChatList, updateUnreadState } = useChatInWallet();
+  const { navigateToChatList, updateUnreadState, isWebNavbar } = useChatInWallet();
   useEffect(() => {
     updateUnreadState(unread);
   }, [unread, updateUnreadState]);
   if (!initialized) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
-  const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
+  const mergedSx = [
+    {
+      display: "flex",
+      height: "100%",
+      bgcolor: "#fff",
+      ...((_a2 = window.chatInWallet) == null ? void 0 : _a2.safeAreaInsetTop) && {
+        pt: `${window.chatInWallet.safeAreaInsetTop}px`
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
   return /* @__PURE__ */ jsx(Box$1, { ...rest, sx: mergedSx, children: /* @__PURE__ */ jsxs(
     Box$1,
     {
@@ -5294,7 +5561,37 @@ function ChatListInWallet({ sx, ...rest }) {
         borderRight: { sm: "1px solid #e5e5e5" }
       },
       children: [
-        /* @__PURE__ */ jsx(UserSearch, { sx: { flex: "0 0 auto", py: 1, px: 3 } }),
+        /* @__PURE__ */ jsxs(Box$1, { sx: { flex: "0 0 auto", py: 1, px: 2 }, children: [
+          isWebNavbar && /* @__PURE__ */ jsxs(
+            Box$1,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                mr: -1,
+                mb: 1
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Box$1,
+                  {
+                    onClick: () => {
+                      bridge.call("switchApp");
+                    },
+                    sx: { display: "flex", alignItems: "center", gap: 1 },
+                    children: [
+                      /* @__PURE__ */ jsx(Box$1, { component: "img", src: window.blocklet.appLogo, alt: "", sx: { width: 20, height: 20 } }),
+                      /* @__PURE__ */ jsx(Box$1, { component: "span", sx: { typography: "h5", fontWeight: "medium" }, children: window.blocklet.appName }),
+                      /* @__PURE__ */ jsx(Box$1, { component: tablerSwitchHorizontal, sx: { fontSize: 15, color: "grey.600" } })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(SessionManager, { style: { padding: 0 }, showText: true, showRole: true, session })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(UserSearch, {})
+        ] }),
         /* @__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 } }),
@@ -5308,7 +5605,19 @@ function ChatListInWallet({ sx, ...rest }) {
             onClose: () => navigateToChatList(),
             onOpen: () => {
             },
-            children: /* @__PURE__ */ jsx(Box$1, { sx: { width: 1, height: 1 }, children: /* @__PURE__ */ jsx(Outlet, {}) })
+            children: /* @__PURE__ */ jsx(
+              Box$1,
+              {
+                sx: {
+                  width: 1,
+                  height: 1,
+                  ...((_b2 = window.chatInWallet) == null ? void 0 : _b2.safeAreaInsetTop) && {
+                    pt: `${window.chatInWallet.safeAreaInsetTop}px`
+                  }
+                },
+                children: /* @__PURE__ */ jsx(Outlet, {})
+              }
+            )
           }
         )
       ]
@@ -5607,40 +5916,6 @@ function Pagination({
     }
   );
 }
-const Editor = lazy(() => import("./editor-D3RAcw2N.mjs"));
-function LazyEditor(props) {
-  const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
-    /* @__PURE__ */ jsx(Skeleton, {}),
-    /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
-    /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
-    /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
-  ] });
-  return /* @__PURE__ */ jsx(Suspense, { fallback: fallback2, children: /* @__PURE__ */ jsx(Editor, { ...props }) });
-}
-const BlockletEditor = lazy(() => import("@blocklet/editor"));
-const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Skeleton, {}),
-  /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
-  /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
-  /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
-] });
-function EditorPreview({ content, children, ...rest }) {
-  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsxs(
-    BlockletEditor,
-    {
-      editorState: inferInitialEditorState(content),
-      editable: false,
-      enableHeadingsIdPlugin: true,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(ImagePathFixerPlugin, {}),
-        /* @__PURE__ */ jsx(VideoPathFixerPlugin, {}),
-        children
-      ]
-    }
-  ) });
-}
-EditorPreview.fallback = fallback;
 const useBeforeUnloadPrompt = (dirty) => {
   useEffect(() => {
     const showPrompt = (e) => {
@@ -5806,7 +6081,8 @@ const en = {
     pointUp: "🎉 You got {points} {unit} {event}",
     loadMore: "Load older messages",
     notYetJoinedTheChannel: "Not yet joined the channel",
-    typeSomething: "Type here. Use Markdown, Drag or paste images"
+    typeSomething: "Type here. Use Markdown, Drag or paste images",
+    send: "Send"
   }
 };
 const zh = {
@@ -5886,7 +6162,8 @@ const zh = {
     pointUp: "🎉 您获得了 {points} {unit} {event}",
     loadMore: "加载更多消息",
     notYetJoinedTheChannel: "暂未加入这个频道",
-    typeSomething: "在这里输入，适用 MarkDown，拽入或者黏贴图片"
+    typeSomething: "在这里输入，适用 MarkDown，拽入或者黏贴图片",
+    send: "发送"
   }
 };
 const translations = { zh, en };