@blocklet/discuss-kit-ux 2.0.50 → 2.0.51

package/dist/components/chat/chat-input.d.ts

@@ -2,8 +2,9 @@ import { EditorProps } from '../editor';
 
 interface Props extends EditorProps {
     initialContent?: string;
-    send: (content: string) => void;
+    send: (content: string) => Promise<void>;
     onContentChange?: (content: string) => void;
+    onInputFocus?: (v: boolean) => void;
 }
-export declare function ChatInput({ initialContent, send, onContentChange }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ initialContent, send, onContentChange, onInputFocus }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/chat/chat-list-in-wallet.d.ts

@@ -1,7 +1,7 @@
 import { SxProps } from '@mui/material';
 
 interface ChatProps {
-    sx: SxProps;
+    sx?: SxProps;
 }
 export default function ChatListInWallet({ sx, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/chat/chat.d.ts

@@ -1,7 +1,7 @@
 import { SxProps } from '@mui/material';
 
 interface ChatProps {
-    sx: SxProps;
+    sx?: SxProps;
 }
 export default function Chat({ sx, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/chat/message-list.d.ts

@@ -3,5 +3,8 @@ import { Chat } from './types';
 interface ChatProps {
     chat: Chat;
 }
-export default function MessageList({ chat, ...rest }: ChatProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export interface MessageListHandle {
+    scrollToBottom: () => void;
+}
+declare const MessageList: import('react').ForwardRefExoticComponent<ChatProps & import("react").RefAttributes<MessageListHandle>>;
+export default MessageList;

package/dist/components/chat/user-search.d.ts

@@ -2,6 +2,7 @@ import { SxProps } from '@mui/material';
 
 interface Props {
     sx?: SxProps;
+    inputSx?: SxProps;
 }
-export declare function UserSearch({ sx, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function UserSearch({ sx, inputSx, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/empty-status/empty-status.d.ts

@@ -1 +1,7 @@
-export default function EmptyStatus(): import("react/jsx-runtime").JSX.Element;
+import { SxProps } from '@mui/material';
+
+interface Props {
+    sx?: SxProps;
+}
+export default function EmptyStatus({ sx }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/{editor-Bfs1bQVr.mjs → editor-B9hd6BuF.mjs}

@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
 import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
 import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
 import { lazy } from "react";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-CTvEVXs8.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-DohoZtqi.mjs";
 const BlockletEditor = lazy(() => import("@blocklet/editor"));
 const Root = styled(Box)`
   .be-editable,

package/dist/{index-CTvEVXs8.mjs → index-DohoZtqi.mjs}

@@ -9,7 +9,7 @@ import { Labels2, LabelPicker } from "@blocklet/labels";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme, ThemeProvider, styled } from "@mui/material/styles";
 import { create as create$1, styled as styled$1 } from "@arcblock/ux/lib/Theme";
-import { useEffect, useRef, useState, createElement, useContext, useMemo, useCallback, isValidElement, lazy, Suspense, createContext, Fragment as Fragment$1, forwardRef } from "react";
+import { useEffect, useRef, useState, createElement, useContext, useMemo, useCallback, isValidElement, lazy, Suspense, createContext, Fragment as Fragment$1, forwardRef, useImperativeHandle } from "react";
 import { Box, useTheme as useTheme$1, useMediaQuery, 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, Backdrop, Autocomplete, Typography as Typography$1, TextField as TextField$1, InputAdornment, SwipeableDrawer, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import isNil from "lodash/isNil";
 import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
@@ -868,12 +868,12 @@ function RelativeTime({ value, ...rest }) {
   const v2 = value instanceof Date ? value.getTime() : value;
   return /* @__PURE__ */ jsx(UxRelativeTime, { value: v2, ...rest });
 }
-function EmptyStatus() {
+function EmptyStatus({ sx }) {
   const { t } = useLocaleContext();
   return /* @__PURE__ */ jsx(
     Box$1,
     {
-      sx: { height: "50vh", width: "100%" },
+      sx: { height: "50vh", width: "100%", ...sx },
       display: "flex",
       flexDirection: "column",
       alignItems: "cetner",
@@ -4137,11 +4137,13 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
   const { confirm } = useConfirm();
   const { activeChatId, deleteMessage, isInWallet } = useChatContext();
   const handleDeleteMessage = async () => {
+    var _a3;
     if (activeChatId) {
       const proceed = await confirm({
         title: t("deleteMessage.title"),
         description: t("deleteMessage.desc"),
-        okButtonProps: { color: "error" }
+        okButtonProps: { color: "error" },
+        dialogProps: { sx: { top: ((_a3 = window.chatInWallet) == null ? void 0 : _a3.safeAreaInsetTop) ?? 0 } }
       });
       if (proceed) {
         deleteMessage(activeChatId, message.id);
@@ -4512,8 +4514,8 @@ function NotificationMessage({ chat, message, prevMessage }) {
 const checkIsAtBottom = (element) => {
   return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
 };
-function MessageList({ chat, ...rest }) {
-  var _a2, _b2;
+const MessageList = forwardRef(({ chat, ...rest }, ref) => {
+  var _a2, _b2, _c2;
   const { isActiveChat, loadMessages } = useChatContext();
   const { t } = useLocaleContext();
   const isActive = isActiveChat(chat.id);
@@ -4525,6 +4527,9 @@ function MessageList({ chat, ...rest }) {
     (_b3 = containerRef.current) == null ? void 0 : _b3.scrollTo({ top: ((_a3 = containerRef.current) == null ? void 0 : _a3.scrollHeight) || 0 });
     setIsAtBottom(true);
   };
+  useImperativeHandle(ref, () => ({
+    scrollToBottom
+  }));
   useEffect(() => {
     const handleScroll = debounce(() => {
       setIsAtBottom(checkIsAtBottom(containerRef.current));
@@ -4627,24 +4632,27 @@ function MessageList({ chat, ...rest }) {
             const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
             return /* @__PURE__ */ jsx(Box$1, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(Message, { message, prevMessage: prev }) }, message.id);
           })),
-          chat.type === "notification" && ((_b2 = chat.messages) == null ? void 0 : _b2.map((message, index) => {
-            var _a3;
-            const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
-            return /* @__PURE__ */ jsx(Box$1, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(
-              NotificationMessage,
-              {
-                chat,
-                message,
-                prevMessage: prev
-              }
-            ) }, message.id);
-          }))
+          chat.type === "notification" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            ((_b2 = chat.messages) == null ? void 0 : _b2.length) === 0 && /* @__PURE__ */ jsx(EmptyStatus, { sx: { height: "100%" } }),
+            (_c2 = chat.messages) == null ? void 0 : _c2.map((message, index) => {
+              var _a3;
+              const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
+              return /* @__PURE__ */ jsx(Box$1, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(
+                NotificationMessage,
+                {
+                  chat,
+                  message,
+                  prevMessage: prev
+                }
+              ) }, message.id);
+            })
+          ] })
         ]
       }
     ),
     !isAtBottom && /* @__PURE__ */ jsx(Box$1, { sx: { position: "absolute", bottom: 16, right: 24 }, onClick: scrollToBottom, children: /* @__PURE__ */ jsx(Fab, { color: "inherit", sx: { width: { xs: 36, sm: 44 }, height: { xs: 36, sm: 44 } }, children: /* @__PURE__ */ jsx(ArrowDownward, {}) }) })
   ] });
-}
+});
 const HtmlTooltip = styled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip$1, { ...props, classes: { popper: className } }))(() => ({
   [`& .${tooltipClasses$1.tooltip}`]: {
     color: "inherit",
@@ -4733,7 +4741,7 @@ 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-Bfs1bQVr.mjs"));
+const Editor = lazy(() => import("./editor-B9hd6BuF.mjs"));
 function LazyEditor(props) {
   const fallback2 = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -4868,7 +4876,7 @@ function ShortcutPlugin({ callback }) {
   }, [editor, callback, mobile.any]);
   return null;
 }
-function ChatInput({ initialContent, send, onContentChange }) {
+function ChatInput({ initialContent, send, onContentChange, onInputFocus }) {
   const { t } = useLocaleContext();
   const [content, setContent] = useState("");
   const [lastSent, setLastSent] = useState(0);
@@ -4877,6 +4885,14 @@ function ChatInput({ initialContent, send, onContentChange }) {
   });
   const { mobile } = useBrowser();
   const [focused, setFocused] = useState(false);
+  const onFocusWrapper = (v2) => {
+    setFocused(v2);
+    onInputFocus == null ? void 0 : onInputFocus(v2);
+  };
+  const onToolbarBtnMouseDown = (e) => {
+    e.preventDefault();
+    setToolbarVisible((x) => !x);
+  };
   const compactView = mobile.any && !focused;
   const handleSend = () => {
     if (!content) {
@@ -4961,7 +4977,7 @@ function ChatInput({ initialContent, send, onContentChange }) {
                     /* @__PURE__ */ jsx(AutoClearPlugin, { clearKey: lastSent }),
                     /* @__PURE__ */ jsx(ShortcutPlugin, { callback: handleSend }),
                     /* @__PURE__ */ jsx(DraggerPlugin, {}),
-                    /* @__PURE__ */ jsx(FocusPlugin, { callback: (v2) => setFocused(v2) })
+                    /* @__PURE__ */ jsx(FocusPlugin, { callback: onFocusWrapper })
                   ]
                 }
               ) })
@@ -4990,7 +5006,7 @@ function ChatInput({ initialContent, send, onContentChange }) {
                   size: "small",
                   color: "primary",
                   variant: "text",
-                  onClick: () => setToolbarVisible((x) => !x),
+                  onMouseDown: onToolbarBtnMouseDown,
                   startIcon: /* @__PURE__ */ jsx(Box, { component: tablerLetterCase, sx: { fontSize: "14px !important" } }),
                   sx: {
                     width: 32,
@@ -5045,6 +5061,7 @@ function ChatRoom({ chat, inWallet, ...rest }) {
   const { session, isAdmin } = useSessionContext();
   const isCreator = chat.creator.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
   const [input, setInput] = useLocalStorageState(`chat-input-${chat.id}`, { defaultValue: "" });
+  const messageListRef = useRef(null);
   useEffect(() => {
     if (chat.isActivated) {
       initChatRoom(chat.id);
@@ -5060,6 +5077,10 @@ function ChatRoom({ chat, inWallet, ...rest }) {
       deleteChannel(chat.id);
     }
   };
+  const onInputFocus = () => {
+    var _a3;
+    (_a3 = messageListRef.current) == null ? void 0 : _a3.scrollToBottom();
+  };
   const renderRoomHeader = () => {
     if (chat.type === "notification") {
       return /* @__PURE__ */ jsx(RoomTitle, { title: t("chat.notification") });
@@ -5154,13 +5175,14 @@ function ChatRoom({ chat, inWallet, ...rest }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box$1, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(EditorConfigProvider$1, { value: { openLinkInNewTab: !!inWallet }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }) }),
+    /* @__PURE__ */ jsx(Box$1, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(EditorConfigProvider$1, { value: { openLinkInNewTab: !!inWallet }, children: /* @__PURE__ */ jsx(MessageList, { ref: messageListRef, 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),
+          onInputFocus,
           send: (content) => sendMessage(chat.id, content)
         }
       ) }),
@@ -5280,7 +5302,7 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
   );
 }
 const tablerSearch = (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: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" }) });
-function UserSearch({ sx, ...rest }) {
+function UserSearch({ sx, inputSx, ...rest }) {
   var _a2;
   const { session } = useSessionContext();
   const navigate = useNavigate();
@@ -5391,6 +5413,7 @@ function UserSearch({ sx, ...rest }) {
             InputProps: {
               ...params.InputProps,
               type: "search",
+              sx: inputSx,
               startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Box, { component: tablerSearch, sx: { fontSize: 14 } }) })
             },
             sx: {
@@ -5618,7 +5641,7 @@ function ChatListInWallet({ sx, ...rest }) {
     updateUnreadState(unread);
   }, [unread, updateUnreadState]);
   if (!initialized) {
-    return /* @__PURE__ */ jsx(CircularProgress, {});
+    return /* @__PURE__ */ jsx(Backdrop, { open: true, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, bgcolor: "transparent" }, children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
   const mergedSx = [
     {
@@ -5689,7 +5712,7 @@ function ChatListInWallet({ sx, ...rest }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx(UserSearch, {})
+          /* @__PURE__ */ jsx(UserSearch, { inputSx: { fontSize: 16 } })
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: true }),

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, am, ar, N, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-CTvEVXs8.mjs";
+import { T, n, W, A, m, ad, B, F, K, J, L, ap, Y, X, $, Z, _, a1, w, C, x, y, E, a5, a6, ah, a8, O, Q, ac, D, ag, af, H, G, b, k, ae, M, P, ao, v, q, R, S, a9, aq, o, a2, a4, ai, al, ak, am, ar, N, as, l, f, p, r, j, t, h, aa, U, c, a0, z, a7, ab, u, an, d, at, a3, aj, e } from "./index-DohoZtqi.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";

package/dist/index.umd.js

@@ -794,12 +794,12 @@ var __publicField = (obj, key, value) => {
     const v2 = value instanceof Date ? value.getTime() : value;
     return /* @__PURE__ */ jsxRuntime.jsx(UxRelativeTime, { value: v2, ...rest });
   }
-  function EmptyStatus() {
+  function EmptyStatus({ sx }) {
     const { t } = context.useLocaleContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
-        sx: { height: "50vh", width: "100%" },
+        sx: { height: "50vh", width: "100%", ...sx },
         display: "flex",
         flexDirection: "column",
         alignItems: "cetner",
@@ -4063,11 +4063,13 @@ var __publicField = (obj, key, value) => {
     const { confirm } = useConfirm();
     const { activeChatId, deleteMessage, isInWallet } = useChatContext();
     const handleDeleteMessage = async () => {
+      var _a3;
       if (activeChatId) {
         const proceed = await confirm({
           title: t("deleteMessage.title"),
           description: t("deleteMessage.desc"),
-          okButtonProps: { color: "error" }
+          okButtonProps: { color: "error" },
+          dialogProps: { sx: { top: ((_a3 = window.chatInWallet) == null ? void 0 : _a3.safeAreaInsetTop) ?? 0 } }
         });
         if (proceed) {
           deleteMessage(activeChatId, message.id);
@@ -4438,8 +4440,8 @@ var __publicField = (obj, key, value) => {
   const checkIsAtBottom = (element) => {
     return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
   };
-  function MessageList({ chat, ...rest }) {
-    var _a2, _b2;
+  const MessageList = react.forwardRef(({ chat, ...rest }, ref) => {
+    var _a2, _b2, _c2;
     const { isActiveChat, loadMessages } = useChatContext();
     const { t } = context.useLocaleContext();
     const isActive = isActiveChat(chat.id);
@@ -4451,6 +4453,9 @@ var __publicField = (obj, key, value) => {
       (_b3 = containerRef.current) == null ? void 0 : _b3.scrollTo({ top: ((_a3 = containerRef.current) == null ? void 0 : _a3.scrollHeight) || 0 });
       setIsAtBottom(true);
     };
+    react.useImperativeHandle(ref, () => ({
+      scrollToBottom
+    }));
     react.useEffect(() => {
       const handleScroll = debounce(() => {
         setIsAtBottom(checkIsAtBottom(containerRef.current));
@@ -4553,24 +4558,27 @@ var __publicField = (obj, key, value) => {
               const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
               return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(Message, { message, prevMessage: prev }) }, message.id);
             })),
-            chat.type === "notification" && ((_b2 = chat.messages) == null ? void 0 : _b2.map((message, index) => {
-              var _a3;
-              const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
-              return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(
-                NotificationMessage,
-                {
-                  chat,
-                  message,
-                  prevMessage: prev
-                }
-              ) }, message.id);
-            }))
+            chat.type === "notification" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              ((_b2 = chat.messages) == null ? void 0 : _b2.length) === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyStatus, { sx: { height: "100%" } }),
+              (_c2 = chat.messages) == null ? void 0 : _c2.map((message, index) => {
+                var _a3;
+                const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
+                return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  NotificationMessage,
+                  {
+                    chat,
+                    message,
+                    prevMessage: prev
+                  }
+                ) }, message.id);
+              })
+            ] })
           ]
         }
       ),
       !isAtBottom && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { position: "absolute", bottom: 16, right: 24 }, onClick: scrollToBottom, children: /* @__PURE__ */ jsxRuntime.jsx(Fab, { color: "inherit", sx: { width: { xs: 36, sm: 44 }, height: { xs: 36, sm: 44 } }, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ArrowDownward, {}) }) })
     ] });
-  }
+  });
   const HtmlTooltip = styles.styled(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { ...props, classes: { popper: className } }))(() => ({
     [`& .${material.tooltipClasses.tooltip}`]: {
       color: "inherit",
@@ -4794,7 +4802,7 @@ var __publicField = (obj, key, value) => {
     }, [editor2, callback, mobile.any]);
     return null;
   }
-  function ChatInput({ initialContent, send, onContentChange }) {
+  function ChatInput({ initialContent, send, onContentChange, onInputFocus }) {
     const { t } = context.useLocaleContext();
     const [content, setContent] = react.useState("");
     const [lastSent, setLastSent] = react.useState(0);
@@ -4803,6 +4811,14 @@ var __publicField = (obj, key, value) => {
     });
     const { mobile } = reactHooks.useBrowser();
     const [focused, setFocused] = react.useState(false);
+    const onFocusWrapper = (v2) => {
+      setFocused(v2);
+      onInputFocus == null ? void 0 : onInputFocus(v2);
+    };
+    const onToolbarBtnMouseDown = (e) => {
+      e.preventDefault();
+      setToolbarVisible((x) => !x);
+    };
     const compactView = mobile.any && !focused;
     const handleSend = () => {
       if (!content) {
@@ -4887,7 +4903,7 @@ var __publicField = (obj, key, value) => {
                       /* @__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.jsx(FocusPlugin, { callback: onFocusWrapper })
                     ]
                   }
                 ) })
@@ -4916,7 +4932,7 @@ var __publicField = (obj, key, value) => {
                     size: "small",
                     color: "primary",
                     variant: "text",
-                    onClick: () => setToolbarVisible((x) => !x),
+                    onMouseDown: onToolbarBtnMouseDown,
                     startIcon: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: tablerLetterCase, sx: { fontSize: "14px !important" } }),
                     sx: {
                       width: 32,
@@ -4971,6 +4987,7 @@ var __publicField = (obj, key, value) => {
     const { session, isAdmin } = useSessionContext();
     const isCreator = chat.creator.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
     const [input, setInput] = ahooks.useLocalStorageState(`chat-input-${chat.id}`, { defaultValue: "" });
+    const messageListRef = react.useRef(null);
     react.useEffect(() => {
       if (chat.isActivated) {
         initChatRoom(chat.id);
@@ -4986,6 +5003,10 @@ var __publicField = (obj, key, value) => {
         deleteChannel(chat.id);
       }
     };
+    const onInputFocus = () => {
+      var _a3;
+      (_a3 = messageListRef.current) == null ? void 0 : _a3.scrollToBottom();
+    };
     const renderRoomHeader = () => {
       if (chat.type === "notification") {
         return /* @__PURE__ */ jsxRuntime.jsx(RoomTitle, { title: t("chat.notification") });
@@ -5080,13 +5101,14 @@ var __publicField = (obj, key, value) => {
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(editor$1.EditorConfigProvider, { value: { openLinkInNewTab: !!inWallet }, children: /* @__PURE__ */ jsxRuntime.jsx(MessageList, { chat }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(editor$1.EditorConfigProvider, { value: { openLinkInNewTab: !!inWallet }, children: /* @__PURE__ */ jsxRuntime.jsx(MessageList, { ref: messageListRef, 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),
+            onInputFocus,
             send: (content) => sendMessage(chat.id, content)
           }
         ) }),
@@ -5206,7 +5228,7 @@ var __publicField = (obj, key, value) => {
     );
   }
   const tablerSearch = (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: "M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" }) });
-  function UserSearch({ sx, ...rest }) {
+  function UserSearch({ sx, inputSx, ...rest }) {
     var _a2;
     const { session } = useSessionContext();
     const navigate = reactRouterDom.useNavigate();
@@ -5317,6 +5339,7 @@ var __publicField = (obj, key, value) => {
               InputProps: {
                 ...params.InputProps,
                 type: "search",
+                sx: inputSx,
                 startAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: tablerSearch, sx: { fontSize: 14 } }) })
               },
               sx: {
@@ -5544,7 +5567,7 @@ var __publicField = (obj, key, value) => {
       updateUnreadState(unread);
     }, [unread, updateUnreadState]);
     if (!initialized) {
-      return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {});
+      return /* @__PURE__ */ jsxRuntime.jsx(material.Backdrop, { open: true, sx: { zIndex: (theme) => theme.zIndex.drawer + 1, bgcolor: "transparent" }, children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {}) });
     }
     const mergedSx = [
       {
@@ -5615,7 +5638,7 @@ var __publicField = (obj, key, value) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(UserSearch, {})
+            /* @__PURE__ */ jsxRuntime.jsx(UserSearch, { inputSx: { fontSize: 16 } })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
           !!(chats == null ? void 0 : chats.length) && /* @__PURE__ */ jsxRuntime.jsx(ChatList, { sx: { flex: 1, overflowY: "auto" }, inWallet: true }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "2.0.50",
+  "version": "2.0.51",
   "files": [
     "dist"
   ],
@@ -31,8 +31,8 @@
     "@arcblock/bridge": "^2.10.1",
     "@arcblock/react-hooks": "^2.10.1",
     "@arcblock/ws": "^1.18.123",
-    "@blocklet/editor": "2.0.50",
-    "@blocklet/labels": "2.0.50",
+    "@blocklet/editor": "2.0.51",
+    "@blocklet/labels": "2.0.51",
     "@blocklet/uploader": "^0.1.15",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -100,5 +100,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "490df3c84bc3947788aa7527ceb6dc093713ddb8"
+  "gitHead": "8fc2c4a6f1c073443e56c933354ec6deb3be1a96"
 }