@blocklet/discuss-kit-ux 2.0.1 → 2.0.3

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@blocklet/labels"), require("react/jsx-runtime"), require("@mui/material/styles"), require("@arcblock/ux/lib/Theme"), require("react"), require("@mui/material"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/material/Box"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/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/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("semver-compare"), require("@arcblock/bridge"), require("@arcblock/react-hooks"), 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", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/material/Box", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/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/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", "semver-compare", "@arcblock/bridge", "@arcblock/react-hooks", "@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.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.Box, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.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.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.cmp, global.bridge, global.reactHooks, 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, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, Box, 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, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, ReactDOM, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, cmp, bridge, reactHooks, 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"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("react-lazy-with-preload"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), require("@mui/material/Box"), require("@mui/lab/LoadingButton"), require("@mui/icons-material"), require("@arcblock/ux/lib/Locale/context"), require("@mui/material/Alert"), require("lodash/isBoolean"), require("@mui/material/Button"), require("@arcblock/did-connect/lib/Avatar"), require("@mui/material/AvatarGroup"), require("@mui/material/colors"), require("@mui/material/useMediaQuery"), require("@arcblock/ux/lib/DID"), require("@mui/material/Tooltip"), require("react-router-dom"), require("@arcblock/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/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("semver-compare"), require("@arcblock/bridge"), require("@arcblock/react-hooks"), require("@mui/material/Fab"), require("lodash/debounce"), require("@blocklet/editor/lib/main/hooks/useIsFocused"), require("@mui/material/TextField"), require("@mui/icons-material/Add"), require("@arcblock/did-connect/lib/SessionManager"), require("axios"), require("@arcblock/ux/lib/Toast"), require("@mui/material/Pagination"), require("unstated-next"), require("js-cookie"), require("@arcblock/ws"), require("@emotion/css"), require("@blocklet/editor/lib/ext/OnContentChangePlugin"), require("@blocklet/editor/lib/ext/ShortcutPlugin"), require("@blocklet/editor/lib/ext/SafeAreaPlugin"), require("@lexical/text"), require("@blocklet/editor/lib/main/nodes/ImageNode"), require("@blocklet/editor/lib/ext/VideoPlugin/VideoNode")) : typeof define === "function" && define.amd ? define(["exports", "@blocklet/labels", "react/jsx-runtime", "@mui/material/styles", "@arcblock/ux/lib/Theme", "react", "@mui/material", "lodash/isNil", "@blocklet/editor/lib/config", "react-lazy-with-preload", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/material/Box", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/did-connect/lib/Avatar", "@mui/material/AvatarGroup", "@mui/material/colors", "@mui/material/useMediaQuery", "@arcblock/ux/lib/DID", "@mui/material/Tooltip", "react-router-dom", "@arcblock/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/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", "semver-compare", "@arcblock/bridge", "@arcblock/react-hooks", "@mui/material/Fab", "lodash/debounce", "@blocklet/editor/lib/main/hooks/useIsFocused", "@mui/material/TextField", "@mui/icons-material/Add", "@arcblock/did-connect/lib/SessionManager", "axios", "@arcblock/ux/lib/Toast", "@mui/material/Pagination", "unstated-next", "js-cookie", "@arcblock/ws", "@emotion/css", "@blocklet/editor/lib/ext/OnContentChangePlugin", "@blocklet/editor/lib/ext/ShortcutPlugin", "@blocklet/editor/lib/ext/SafeAreaPlugin", "@lexical/text", "@blocklet/editor/lib/main/nodes/ImageNode", "@blocklet/editor/lib/ext/VideoPlugin/VideoNode"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.DiscussKitComponents = {}, global.labels, global.jsxRuntime, global.styles, global.Theme, global.react, global.material, global.isNil, global.config, global.reactLazyWithPreload, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.Box, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.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.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.cmp, global.bridge, global.reactHooks, global.Fab, global.debounce, global.useIsFocused, global.TextField, global.AddIcon, global.SessionManager, global.axios, global.Toast, global.MuiPagination, global.unstatedNext, global.Cookie, global.ws, global.css, global.OnContentChangePlugin, global.ShortcutPlugin$1, global.SafeAreaPlugin, global.text, global.ImageNode, global.VideoNode));
+})(this, function(exports2, labels, jsxRuntime, styles, Theme, react, material, isNil, config, reactLazyWithPreload, LexicalComposerContext, lexical$1, ahooks, Box, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$3, Session, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, ReactDOM, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, cmp, bridge, reactHooks, Fab, debounce, useIsFocused, TextField, AddIcon, SessionManager, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin$1, SafeAreaPlugin, text, ImageNode, VideoNode) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -436,7 +436,7 @@ var __publicField = (obj, key, value) => {
     }, [editor2]);
     return null;
   }
-  function AutoClearPlugin({ value, isChanged }) {
+  function AutoClearPlugin$1({ value, isChanged }) {
     const [editor2] = LexicalComposerContext.useLexicalComposerContext();
     react.useEffect(() => {
       try {
@@ -584,7 +584,7 @@ var __publicField = (obj, key, value) => {
           /* @__PURE__ */ jsxRuntime.jsx(CmdEnterShortcutPlugin, { shortcut, callback: handleCmdEnterPressed }),
           /* @__PURE__ */ jsxRuntime.jsx(ImagePathFixerPlugin, {}),
           /* @__PURE__ */ jsxRuntime.jsx(VideoPathFixerPlugin, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(AutoClearPlugin, { value: content, isChanged: isChanged.current }),
+          /* @__PURE__ */ jsxRuntime.jsx(AutoClearPlugin$1, { value: content, isChanged: isChanged.current }),
           children
         ]
       }
@@ -3862,6 +3862,15 @@ var __publicField = (obj, key, value) => {
         return false;
       }
     }, [walletVersion, mobile]);
+    const isWebNavbar = react.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}`);
@@ -3875,7 +3884,7 @@ var __publicField = (obj, key, value) => {
     const updateUnreadState = react.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 } = context.useLocaleContext();
@@ -3920,6 +3929,7 @@ var __publicField = (obj, key, value) => {
           sx: {
             position: "relative",
             m: 1,
+            mx: { xs: 0, sm: 1 },
             py: 1.5,
             px: 2,
             fontWeight: "bold",
@@ -3991,7 +4001,6 @@ var __publicField = (obj, key, value) => {
   };
   const baseItemSx = {
     px: 1.25,
-    py: 1,
     transition: "all 120ms linear"
   };
   function Message({ message, prevMessage, showTime = true, ...rest }) {
@@ -4044,7 +4053,9 @@ var __publicField = (obj, key, value) => {
           },
           ".author-info-title": {
             fontSize: 14,
-            fontWeight: 500
+            fontWeight: 500,
+            // username 下方首条消息的 margin-top
+            "+ div": { mt: 1 }
           },
           ".author-chat-item": {
             ml: compactMessage ? 6 : 0,
@@ -4139,7 +4150,7 @@ var __publicField = (obj, key, value) => {
       const baseCardSx = {
         py: 1.5,
         px: 2,
-        background: "#fff",
+        bgcolor: "grey.50",
         width: "fit-content",
         maxWidth: "calc(100% - 16px)",
         wordWrap: "break-word",
@@ -4369,7 +4380,7 @@ var __publicField = (obj, key, value) => {
       }
       return /* @__PURE__ */ jsxRuntime.jsx(Message, { message, showTime: false });
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { ...baseItemSx, fontSize: 14 }, children: render() });
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { ...baseItemSx, py: 0.5, fontSize: 14 }, children: render() });
   }
   const checkIsAtBottom = (element) => {
     return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
@@ -4384,7 +4395,7 @@ var __publicField = (obj, key, value) => {
     const [isLoadingMore, setIsLoadingMore] = react.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);
     };
     react.useEffect(() => {
@@ -4419,7 +4430,6 @@ var __publicField = (obj, key, value) => {
             py: 2.5,
             px: 1.25,
             gap: 1,
-            background: "rgba(249, 250, 251, 1)",
             // 闪烁
             "@keyframes blinking": {
               "0%": { opacity: 0 },
@@ -4594,6 +4604,270 @@ var __publicField = (obj, key, value) => {
       }
     );
   }
+  const tablerSend = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.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$1 = react.lazy(() => Promise.resolve().then(() => editor));
+  function LazyEditor(props) {
+    const fallback2 = /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { px: 3 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "80%" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "60%" }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "40%" })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: fallback2, children: /* @__PURE__ */ jsxRuntime.jsx(Editor$1, { ...props }) });
+  }
+  const BlockletEditor$1 = react.lazy(() => import("@blocklet/editor"));
+  const fallback = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "80%" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "60%" }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "40%" })
+  ] });
+  function EditorPreview({ content, children, ...rest }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      BlockletEditor$1,
+      {
+        editorState: inferInitialEditorState(content),
+        editable: false,
+        enableHeadingsIdPlugin: true,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ImagePathFixerPlugin, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(VideoPathFixerPlugin, {}),
+          children
+        ]
+      }
+    ) });
+  }
+  EditorPreview.fallback = fallback;
+  function AutoClearPlugin({ clearKey }) {
+    const [editor2] = LexicalComposerContext.useLexicalComposerContext();
+    react.useEffect(() => {
+      if (editor2 && clearKey) {
+        editor2.update(() => {
+          const root = lexical$1.$getRoot();
+          root.clear();
+        });
+      }
+    }, [editor2, clearKey]);
+    return null;
+  }
+  function FocusPlugin({ callback }) {
+    const hasFocus = useIsFocused.useIsFocused();
+    react.useEffect(() => {
+      callback(hasFocus);
+    }, [callback, hasFocus]);
+    return null;
+  }
+  function DraggerPlugin() {
+    const [editor2] = LexicalComposerContext.useLexicalComposerContext();
+    const { mobile } = reactHooks.useBrowser();
+    const hasFocus = useIsFocused.useIsFocused();
+    const selection = editor2.getEditorState().read(lexical$1.$getSelection);
+    const enabled = mobile.any && hasFocus && selection;
+    if (enabled) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        material.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 [editor2] = LexicalComposerContext.useLexicalComposerContext();
+    const { mobile } = reactHooks.useBrowser();
+    react.useEffect(() => {
+      let dispatching = false;
+      return editor2.registerCommand(
+        lexical$1.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();
+            editor2.dispatchCommand(lexical$1.KEY_ENTER_COMMAND, keyboardEvent);
+            return true;
+          }
+          callback();
+          return true;
+        },
+        lexical$1.COMMAND_PRIORITY_CRITICAL
+      );
+    }, [editor2, callback, mobile.any]);
+    return null;
+  }
+  function ChatInput({ initialContent, send, onContentChange }) {
+    const { t } = context.useLocaleContext();
+    const [content, setContent] = react.useState("");
+    const [lastSent, setLastSent] = react.useState(0);
+    const [toolbarVisible, setToolbarVisible] = ahooks.useLocalStorageState("chat-input-toolbar-visible", {
+      defaultValue: false
+    });
+    const { mobile } = reactHooks.useBrowser();
+    const [focused, setFocused] = react.useState(false);
+    const compactView = mobile.any && !focused;
+    const handleSend = () => {
+      send(content);
+      setContent("");
+      setLastSent(Date.now());
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.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__ */ jsxRuntime.jsxs(
+            material.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__ */ jsxRuntime.jsx(
+                  material.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__ */ jsxRuntime.jsx(material.Box, { component: tablerSend, sx: { fontSize: 13, color: "text.secondary" } })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AutoClearPlugin, { clearKey: lastSent }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ShortcutPlugin, { callback: handleSend }),
+                      /* @__PURE__ */ jsxRuntime.jsx(DraggerPlugin, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx(FocusPlugin, { callback: (v2) => setFocused(v2) })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.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__ */ jsxRuntime.jsx(
+                  material.Button,
+                  {
+                    size: "small",
+                    color: "primary",
+                    variant: "text",
+                    onClick: () => setToolbarVisible((x) => !x),
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(material.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__ */ jsxRuntime.jsx(
+                  material.Button,
+                  {
+                    size: "small",
+                    color: "primary",
+                    variant: "contained",
+                    disabled: !content,
+                    onClick: handleSend,
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: tablerSend, sx: { fontSize: "14px !important" } }),
+                    sx: { height: 28 },
+                    children: t("chat.send")
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
   function getLineClamp(count) {
     return {
       display: "-webkit-box",
@@ -4617,7 +4891,7 @@ var __publicField = (obj, key, value) => {
     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] = react.useState("");
+    const [input, setInput] = ahooks.useLocalStorageState(`chat-input-${chat.id}`, { defaultValue: "" });
     react.useEffect(() => {
       if (chat.isActivated) {
         initChatRoom(chat.id);
@@ -4639,7 +4913,10 @@ var __publicField = (obj, key, value) => {
       }
       if (chat.type === "dm") {
         const oppositeUser = getOppositeUser(chat);
-        return /* @__PURE__ */ jsxRuntime.jsx(RoomTitle, { title: oppositeUser.fullName });
+        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Avatar, { did: oppositeUser == null ? void 0 : oppositeUser.did, src: oppositeUser == null ? void 0 : oppositeUser.avatar, size: 24, shape: "circle", variant: "rounded" }),
+          /* @__PURE__ */ jsxRuntime.jsx(RoomTitle, { title: oppositeUser.fullName })
+        ] });
       }
       if (chat.type === "channel") {
         const menuItems = [];
@@ -4724,66 +5001,41 @@ var __publicField = (obj, key, value) => {
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { flex: 1, overflow: "hidden", background: theme.palette.grey[50] }, children: /* @__PURE__ */ jsxRuntime.jsx(MessageList, { chat }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          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__ */ jsxRuntime.jsxs(Box, { sx: { position: "relative" }, children: [
-            isActive && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-              Box,
-              {
-                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__ */ jsxRuntime.jsx(Box, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Box,
-                    {
-                      sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 },
-                      onClick: () => joinChannel(chat.id),
-                      children: t("chat.joinChannel")
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(MessageList, { chat }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { position: "relative" }, children: [
+        chat.isActivated && chat.type !== "notification" && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { px: { xs: 0, sm: 2.5 }, pb: { xs: 0, sm: 2.5 } }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ChatInput,
+          {
+            initialContent: input,
+            onContentChange: (v2) => setInput(v2),
+            send: (content) => sendMessage(chat.id, content)
+          }
+        ) }),
+        chat.type === "channel" && !chat.hasJoined && /* @__PURE__ */ jsxRuntime.jsxs(
+          Box,
+          {
+            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__ */ jsxRuntime.jsx(Box, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
+              /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 }, onClick: () => joinChannel(chat.id), children: t("chat.joinChannel") })
+            ]
+          }
+        )
+      ] })
     ] });
   }
   function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
@@ -5184,6 +5436,7 @@ var __publicField = (obj, key, value) => {
       !activeChatId && /* @__PURE__ */ jsxRuntime.jsx(Empty$1, { sx: { height: 1 } })
     ] }) });
   }
+  const tablerSwitchHorizontal = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", "data-iconify": "tabler", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.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 } = context.useLocaleContext();
     const mergedSx = [
@@ -5203,16 +5456,28 @@ var __publicField = (obj, key, value) => {
     ] });
   }
   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();
     react.useEffect(() => {
       updateUnreadState(unread);
     }, [unread, updateUnreadState]);
     if (!initialized) {
       return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { ...rest, sx: mergedSx, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Box,
       {
@@ -5223,7 +5488,37 @@ var __publicField = (obj, key, value) => {
           borderRight: { sm: "1px solid #e5e5e5" }
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(UserSearch, { sx: { flex: "0 0 auto", py: 1, px: 3 } }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { flex: "0 0 auto", py: 1, px: 2 }, children: [
+            isWebNavbar && /* @__PURE__ */ jsxRuntime.jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  mr: -1,
+                  mb: 1
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    Box,
+                    {
+                      onClick: () => {
+                        bridge.call("switchApp");
+                      },
+                      sx: { display: "flex", alignItems: "center", gap: 1 },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "img", src: window.blocklet.appLogo, alt: "", sx: { width: 20, height: 20 } }),
+                        /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { typography: "h5", fontWeight: "medium" }, children: window.blocklet.appName }),
+                        /* @__PURE__ */ jsxRuntime.jsx(Box, { component: tablerSwitchHorizontal, sx: { fontSize: 15, color: "grey.600" } })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(SessionManager, { style: { padding: 0 }, showText: true, showRole: true, session })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(UserSearch, {})
+          ] }),
           /* @__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 } }),
@@ -5237,7 +5532,19 @@ var __publicField = (obj, key, value) => {
               onClose: () => navigateToChatList(),
               onOpen: () => {
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { width: 1, height: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {}) })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Box,
+                {
+                  sx: {
+                    width: 1,
+                    height: 1,
+                    ...((_b2 = window.chatInWallet) == null ? void 0 : _b2.safeAreaInsetTop) && {
+                      pt: `${window.chatInWallet.safeAreaInsetTop}px`
+                    }
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+                }
+              )
             }
           )
         ]
@@ -5536,40 +5843,6 @@ var __publicField = (obj, key, value) => {
       }
     );
   }
-  const Editor$1 = react.lazy(() => Promise.resolve().then(() => editor));
-  function LazyEditor(props) {
-    const fallback2 = /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { px: 3 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "80%" }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "60%" }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "40%" })
-    ] });
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: fallback2, children: /* @__PURE__ */ jsxRuntime.jsx(Editor$1, { ...props }) });
-  }
-  const BlockletEditor$1 = react.lazy(() => import("@blocklet/editor"));
-  const fallback = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "80%" }),
-    /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "60%" }),
-    /* @__PURE__ */ jsxRuntime.jsx(material.Skeleton, { width: "40%" })
-  ] });
-  function EditorPreview({ content, children, ...rest }) {
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      BlockletEditor$1,
-      {
-        editorState: inferInitialEditorState(content),
-        editable: false,
-        enableHeadingsIdPlugin: true,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ImagePathFixerPlugin, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(VideoPathFixerPlugin, {}),
-          children
-        ]
-      }
-    ) });
-  }
-  EditorPreview.fallback = fallback;
   const useBeforeUnloadPrompt = (dirty) => {
     react.useEffect(() => {
       const showPrompt = (e) => {
@@ -5735,7 +6008,8 @@ var __publicField = (obj, key, value) => {
       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 = {
@@ -5815,7 +6089,8 @@ var __publicField = (obj, key, value) => {
       pointUp: "🎉 您获得了 {points} {unit} {event}",
       loadMore: "加载更多消息",
       notYetJoinedTheChannel: "暂未加入这个频道",
-      typeSomething: "在这里输入，适用 MarkDown，拽入或者黏贴图片"
+      typeSomething: "在这里输入，适用 MarkDown，拽入或者黏贴图片",
+      send: "发送"
     }
   };
   const translations = { zh, en };
@@ -11723,7 +11998,15 @@ var __publicField = (obj, key, value) => {
     min-height: 150px;
   }
 `;
-  function Editor({ initialContent, onChange, children, onSave, ...rest }) {
+  function Editor({
+    initialContent,
+    onChange,
+    children,
+    onSave,
+    enableSaveAreaPlugin = true,
+    ignoreInitialChange = true,
+    ...rest
+  }) {
     const handleChange = async (editorState, editor2) => {
       const isEmpty = await isEmptyContent(editorState, editor2);
       onChange == null ? void 0 : onChange({
@@ -11737,9 +12020,9 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(BlockletEditor, { editorState: inferInitialEditorState(initialContent), ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ImagePathFixerPlugin, {}),
       /* @__PURE__ */ jsxRuntime.jsx(VideoPathFixerPlugin, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(OnContentChangePlugin.OnContentChangePlugin, { onChange: handleChange }),
-      onSave && /* @__PURE__ */ jsxRuntime.jsx(ShortcutPlugin.CtrlsShortcutPlugin, { callback: onSave }),
-      /* @__PURE__ */ jsxRuntime.jsx(SafeAreaPlugin.SafeAreaPlugin, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(OnContentChangePlugin.OnContentChangePlugin, { onChange: handleChange, ignoreInitialChange }),
+      onSave && /* @__PURE__ */ jsxRuntime.jsx(ShortcutPlugin$1.CtrlsShortcutPlugin, { callback: onSave }),
+      enableSaveAreaPlugin && /* @__PURE__ */ jsxRuntime.jsx(SafeAreaPlugin.SafeAreaPlugin, {}),
       children
     ] }) });
   }