@blocklet/discuss-kit-ux 1.6.184 → 1.6.186

package/dist/{index-LsAi57M8.mjs → index-p8mA3-D0.mjs}

@@ -46,10 +46,9 @@ import { Icon } from "@iconify/react";
 import Empty$1 from "@arcblock/ux/lib/Empty";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
 import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
-import DIDAddress from "@arcblock/did-connect/lib/Address";
 import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
-import Groups2RoundedIcon from "@mui/icons-material/Groups2Rounded";
 import CheckboxPlugin from "@blocklet/editor/lib/ext/CheckboxPlugin";
+import DIDAddress from "@arcblock/did-connect/lib/Address";
 import MuiMenuItem from "@mui/material/MenuItem";
 import clsx from "clsx";
 import IconButton$1 from "@mui/material/IconButton";
@@ -65,6 +64,7 @@ import mitt from "mitt";
 import CircularProgress from "@mui/material/CircularProgress";
 import { Helmet } from "react-helmet";
 import { Flipper, Flipped } from "react-flip-toolkit";
+import grey$1 from "@mui/material/colors/grey";
 import Fab from "@mui/material/Fab";
 import debounce from "lodash/debounce";
 import TextField from "@mui/material/TextField";
@@ -991,8 +991,13 @@ const useResponsiveValue = (values2) => {
   return r(values2);
 };
 function ProfileCard({ user, click, ...rest }) {
-  var _a2, _b2;
+  var _a2, _b2, _c;
   const { session } = useSessionContext();
+  const { t } = useLocaleContext();
+  let chatUrl = (user == null ? void 0 : user.did) && `/chat/dm/${user == null ? void 0 : user.did}`;
+  if (chatUrl && ((_a2 = window.location.pathname) == null ? void 0 : _a2.includes(user == null ? void 0 : user.did))) {
+    chatUrl = "";
+  }
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -1054,18 +1059,18 @@ function ProfileCard({ user, click, ...rest }) {
             )
           ] })
         ] }),
-        ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did) && ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) !== user.did && /* @__PURE__ */ jsxs(Fragment, { children: [
+        chatUrl && ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) && ((_c = session == null ? void 0 : session.user) == null ? void 0 : _c.did) !== user.did && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Box, { sx: { my: 2, borderTop: "1px solid #eee" } }),
           /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
             Button,
             {
               component: Link,
-              to: `/chat/dm/${user.did}`,
+              to: chatUrl,
               variant: "outlined",
               color: "inherit",
               startIcon: /* @__PURE__ */ jsx(ChatBubbleOutlineOutlined, { style: { fontSize: 16 } }),
               sx: { fontSize: 12 },
-              children: "Message"
+              children: t("messages")
             }
           ) })
         ] })
@@ -1090,6 +1095,7 @@ function AuthorInfo({
   showDID = true,
   newTitle = void 0,
   profileUse = false,
+  children,
   ...rest
 }) {
   const theme = useTheme();
@@ -1098,7 +1104,7 @@ function AuthorInfo({
   const [open, setOpen] = useState(false);
   const sm = size === "sm";
   let fontSize = sm ? 12 : 14;
-  let avatarSize = profileUse ? 24 : sm ? 32 : 40;
+  let avatarSize = profileUse ? 24 : sm ? 40 : 48;
   if (responsive && downMd) {
     fontSize = 12;
     avatarSize = 24;
@@ -1113,7 +1119,10 @@ function AuthorInfo({
     createdAt = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
     return /* @__PURE__ */ jsx(Box, { component: RelativeTime, sx: { color: "text.secondary" }, value: createdAt });
   };
-  const click = () => {
+  const click = (e) => {
+    var _a2, _b2;
+    (_a2 = e == null ? void 0 : e.stopPropagation) == null ? void 0 : _a2.call(e);
+    (_b2 = e == null ? void 0 : e.preventDefault) == null ? void 0 : _b2.call(e);
     setOpen(false);
     setTimeout(() => {
       navigate(`/profile/${user == null ? void 0 : user.did}`);
@@ -1128,7 +1137,7 @@ function AuthorInfo({
           onClose: () => setOpen(false),
           onOpen: () => setOpen(true),
           title: /* @__PURE__ */ jsx(ProfileCard, { user, click }),
-          children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", cursor: "pointer" }, onClick: click, children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsx(
             Avatar,
             {
               did: user == null ? void 0 : user.did,
@@ -1137,14 +1146,15 @@ function AuthorInfo({
               shape: "circle",
               variant: "circle",
               sx: {
-                width: avatarSize
+                width: "100%",
+                height: "100%"
               }
             }
           ) })
         }
       );
     }
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsx(
       Avatar,
       {
         did: user == null ? void 0 : user.did,
@@ -1153,10 +1163,11 @@ function AuthorInfo({
         shape: "circle",
         variant: "circle",
         sx: {
-          width: avatarSize
+          width: "100%",
+          height: "100%"
         }
       }
-    );
+    ) });
   };
   const BadgeRender = /* @__PURE__ */ jsx(
     Badge,
@@ -1187,7 +1198,8 @@ function AuthorInfo({
         }
       ),
       showBadge && downMd && /* @__PURE__ */ jsx(Box, { mt: 0.5, children: BadgeRender }),
-      showDID && !(responsive && downMd) && /* @__PURE__ */ jsx(DID, { style: { lineHeight: 1.4, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did })
+      showDID && !(responsive && downMd) && /* @__PURE__ */ jsx(DID, { style: { lineHeight: 1.5, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did }),
+      children && /* @__PURE__ */ jsx(Box, { children })
     ] })
   ] });
 }
@@ -1200,7 +1212,7 @@ function SystemUser({
   ...rest
 }) {
   const sm = size === "sm";
-  const iconSize = sm ? 36 : 40;
+  const iconSize = sm ? 40 : 48;
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
     showIcon && /* @__PURE__ */ jsx(
       Box,
@@ -1211,6 +1223,7 @@ function SystemUser({
           alignItems: "center",
           width: iconSize,
           height: iconSize,
+          p: 1,
           color: "#fff",
           bgcolor: "secondary.main",
           borderRadius: "100%"
@@ -1219,49 +1232,14 @@ function SystemUser({
       }
     ),
     /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: name }) }),
-      showDidAddress && /* @__PURE__ */ jsx(DIDAddress, { inline: true, responsive: false, compact: true, copyable: false, style: { marginTop: 4, lineHeight: 1 }, children: window.blocklet.appId })
-    ] })
-  ] });
-}
-function ChannelGroup({ size = "normal", chat, ...rest }) {
-  var _a2;
-  const sm = size === "sm";
-  const iconSize = sm ? 36 : 40;
-  const lastMessage = chat && chat.messages && chat.messages[chat.messages.length - 1];
-  const messageText = lastMessage ? `${(_a2 = lastMessage == null ? void 0 : lastMessage.sender) == null ? void 0 : _a2.fullName}: ${getExcerptFromLexicalContent(lastMessage == null ? void 0 : lastMessage.content)}` : "";
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          width: iconSize,
-          height: iconSize,
-          color: "#fff",
-          bgcolor: amber[200],
-          borderRadius: "100%"
-        },
-        children: /* @__PURE__ */ jsx(Groups2RoundedIcon, { sx: { fontSize: size === "sm" ? 16 : 18, color: amber[700] } })
-      }
-    ),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: chat == null ? void 0 : chat.name }) }),
-      /* @__PURE__ */ jsx(
-        Box,
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1.5, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: name }) }),
+      showDidAddress && /* @__PURE__ */ jsx(
+        DID,
         {
-          className: "message-content-text",
-          sx: {
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            width: 220,
-            fontWeight: "regular",
-            fontSize: 14
-          },
-          children: messageText
+          style: { lineHeight: 1.5, minHeight: 20, maxWidth: 200 },
+          size: 14,
+          did: window.blocklet.appId,
+          copyable: false
         }
       )
     ] })
@@ -1404,7 +1382,16 @@ function Menu({ items = [], ...rest }) {
     return null;
   }
   return /* @__PURE__ */ jsxs(Box, { display: "inline-block", ...rest, onClick: handleOnClick, children: [
-    /* @__PURE__ */ jsx(IconButton$1, { size: "medium", className: "menu-icon", onClick: handleClick, children: /* @__PURE__ */ jsx(MoreVert, { sx: { fontSize: 18 } }) }),
+    /* @__PURE__ */ jsx(
+      IconButton$1,
+      {
+        size: "medium",
+        className: "menu-icon",
+        onClick: handleClick,
+        sx: { p: 1, borderRadius: 1, border: 1, borderColor: "grey.200", height: 32, width: 32 },
+        children: /* @__PURE__ */ jsx(MoreVert, { sx: { fontSize: 18 } })
+      }
+    ),
     /* @__PURE__ */ jsx(
       StyledMuiMenu,
       {
@@ -3515,7 +3502,7 @@ function ChatProvider({ client: client2, activeChatId, children }) {
   const addParticipant = (chatId, participant) => {
     updateChat(chatId, (chat) => ({
       ...chat,
-      participants: [...chat.participants, participant]
+      participants: uniqBy([...chat.participants, participant], "did")
     }));
   };
   const removeParticipant = (chatId, participant) => {
@@ -3560,6 +3547,23 @@ function ChatProvider({ client: client2, activeChatId, children }) {
     addMessage(chatId, saved);
     updateLastAckTime(chatId);
   };
+  const getLastMessageText = (chat) => {
+    const lastMessage = chat && chat.messages && chat.messages[chat.messages.length - 1];
+    const getPrefix = (sender) => {
+      const isMyselfMessage = sender.did === (currentUser == null ? void 0 : currentUser.did);
+      if (isMyselfMessage || !(sender == null ? void 0 : sender.fullName)) {
+        return "";
+      }
+      return `${sender.fullName}: `;
+    };
+    if (lastMessage) {
+      return `${getPrefix(lastMessage == null ? void 0 : lastMessage.sender)}${getExcerptFromLexicalContent(lastMessage == null ? void 0 : lastMessage.content)}`;
+    }
+    if (chat.lastMessage) {
+      return `${getPrefix(chat.lastMessage.sender)}${chat.lastMessage.excerpt}`;
+    }
+    return "";
+  };
   const initChatRoom = async (chatId) => {
     const {
       chat: { participants },
@@ -3686,24 +3690,70 @@ function ChatProvider({ client: client2, activeChatId, children }) {
       deleteMessage,
       hasUnreadMessages,
       refresh,
-      orderedChats
+      orderedChats,
+      getLastMessageText
     };
   }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children });
 }
+const tablerUsersGroup = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 13a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 8v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1M15 5a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2 5h2a2 2 0 0 1 2 2v1M5 5a2 2 0 1 0 4 0a2 2 0 0 0-4 0m-2 8v-1a2 2 0 0 1 2-2h2" }) });
+function ChannelGroup({ size = "normal", chat, children, ...rest }) {
+  const sm = size === "sm";
+  const iconSize = sm ? 40 : 48;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          color: "#fff",
+          bgcolor: "rgba(254, 244, 199, 1)",
+          width: iconSize,
+          height: iconSize,
+          p: 0.8,
+          borderRadius: "100%"
+        },
+        children: /* @__PURE__ */ jsx(Box, { component: tablerUsersGroup, sx: { fontSize: 16, color: amber[700], width: iconSize } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1.5, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: chat == null ? void 0 : chat.name }) }),
+      children && /* @__PURE__ */ jsx(Box, { children })
+    ] })
+  ] });
+}
 function ChatList(props) {
   const { t } = useLocaleContext();
-  const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages } = useChatContext();
+  const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages, getLastMessageText } = useChatContext();
   const renderItem = (chat) => {
     if (chat.type === "notification") {
       return /* @__PURE__ */ jsx(SystemUser, { name: t("chat.notification") });
     }
+    const latestMessageText = getLastMessageText(chat);
+    const latestMessageTextContent = latestMessageText && /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "message-content-text",
+        sx: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          width: 220,
+          fontWeight: "regular",
+          fontSize: 14,
+          lineHeight: 1.5
+        },
+        children: latestMessageText
+      }
+    );
     if (chat.type === "dm") {
       const oppositeUser = getOppositeUser(chat);
-      return /* @__PURE__ */ jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false, showBadge: false, showDID: false });
+      return /* @__PURE__ */ jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false, showBadge: false, showDID: false, children: latestMessageTextContent });
     }
     if (chat.type === "channel") {
-      return /* @__PURE__ */ jsx(Box, { component: "span", children: /* @__PURE__ */ jsx(ChannelGroup, { chat }) });
+      return /* @__PURE__ */ jsx(ChannelGroup, { chat, children: latestMessageTextContent });
     }
     return null;
   };
@@ -3724,8 +3774,8 @@ function ChatList(props) {
           borderRadius: 1,
           cursor: "pointer",
           ...isActiveChat && {
-            ".did-address-text": { color: "grey.500" },
-            ".message-content-text": { color: "grey.500" }
+            ".did-address-text": { color: `${grey$1[500]} !important` },
+            ".message-content-text": { color: `${grey$1[500]}` }
           }
         },
         onClick: () => setActiveChat(chat),
@@ -3751,8 +3801,25 @@ function ChatList(props) {
     ) }, chat.id);
   }) }) });
 }
-function Message({ message, showTime = true, ...rest }) {
-  var _a2;
+const tablerUsersPlus = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M3 21v-2a4 4 0 0 1 4-4h4c.96 0 1.84.338 2.53.901M16 3.13a4 4 0 0 1 0 7.75M16 19h6m-3-3v6" }) });
+const Time = ({ createdAt }) => {
+  if (!createdAt) {
+    return null;
+  }
+  const messageTime = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
+  const now = /* @__PURE__ */ new Date();
+  const diffInMilliseconds = now.getTime() - messageTime.getTime();
+  const diffInDays = diffInMilliseconds / (1e3 * 60 * 60 * 24);
+  const isWithinSevenDays = diffInDays <= 3;
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-block", fontSize: 12, color: "grey.500", ml: 3 }, children: isWithinSevenDays ? /* @__PURE__ */ jsx(RelativeTime, { value: createdAt }) : dayjs(messageTime).format("YYYY-MM-DD HH:mm") }) });
+};
+const baseItemSx = {
+  px: 1.25,
+  py: 1,
+  transition: "all 120ms linear"
+};
+function Message({ message, prevMessage, showTime = true, ...rest }) {
+  var _a2, _b2;
   const { t } = useLocaleContext();
   const { session, isAdmin } = useSessionContext();
   const { confirm } = useConfirm();
@@ -3771,34 +3838,73 @@ function Message({ message, showTime = true, ...rest }) {
   };
   const menuItems = [];
   const isSender = message.sender.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
+  const messageDate = new Date(message.createdAt);
+  const prevMessageDate = prevMessage ? new Date(prevMessage.createdAt) : /* @__PURE__ */ new Date(0);
+  const messageInterval = messageDate.getTime() - prevMessageDate.getTime();
+  const isSameUser = message.sender.did === ((_b2 = prevMessage == null ? void 0 : prevMessage.sender) == null ? void 0 : _b2.did);
   if (isSender || isAdmin) {
     menuItems.push(
       /* @__PURE__ */ jsx(MuiMenuItem, { onClick: handleDeleteMessage, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
     );
   }
+  const compactMessage = messageInterval <= 6e4 && isSameUser;
   return /* @__PURE__ */ jsxs(
     Box,
     {
       ...rest,
       sx: {
+        ...baseItemSx,
         position: "relative",
-        px: 2,
-        py: 1,
         fontSize: 14,
-        "&:hover": { bgcolor: "grey.50" }
+        borderRadius: 1,
+        "&:hover": {
+          bgcolor: "white",
+          ".message-menu": {
+            display: "flex !important"
+          }
+        },
+        ...{
+          ".be-editable": {
+            "& > *:last-child": {
+              marginBottom: "0em !important"
+            }
+          }
+        }
       },
       children: [
-        /* @__PURE__ */ jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } }),
-        /* @__PURE__ */ jsx(AuthorInfo, { user: message.sender, createdAt: showTime ? message.createdAt : void 0 }),
-        /* @__PURE__ */ jsx(Box, { sx: { ml: 5.5 }, children: /* @__PURE__ */ jsx(PostContent, { content: message.content }) })
+        /* @__PURE__ */ jsx(
+          Menu,
+          {
+            items: menuItems,
+            className: "message-menu",
+            style: {
+              position: "absolute",
+              right: 12,
+              top: 0,
+              bottom: 0,
+              alignItems: "center",
+              display: "none"
+            }
+          }
+        ),
+        !compactMessage && /* @__PURE__ */ jsx(
+          AuthorInfo,
+          {
+            showProfileCard: true,
+            user: message.sender,
+            createdAt: showTime ? message.createdAt : void 0,
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { sx: { ml: 6, width: "90%" }, children: /* @__PURE__ */ jsx(PostContent, { content: message.content }) })
       ]
     }
   );
 }
-function NotificationMessage({ chat, message, prevMessage, ...rest }) {
+function NotificationMessage({ chat, message, prevMessage }) {
   const { session } = useSessionContext();
   const { t } = useLocaleContext();
-  const renderQuote = ({ title, excerpt, cover }) => {
+  const renderQuote = ({ title, cover }) => {
     if ("post" in message) {
       return /* @__PURE__ */ jsxs(Box, { sx: { color: 14, mt: 1 }, children: [
         title && /* @__PURE__ */ jsx(
@@ -3837,25 +3943,44 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
   };
   const render = () => {
     var _a2, _b2, _c, _d, _e, _f, _g;
+    const baseCardSx = {
+      py: 1.5,
+      px: 2,
+      background: "#fff",
+      width: "fit-content",
+      maxWidth: "calc(100% - 16px)",
+      wordWrap: "break-word",
+      borderRadius: 1,
+      transition: "all 120ms linear"
+    };
     if (message.type === "post_create") {
       return /* @__PURE__ */ jsxs(
         Box,
         {
           sx: {
-            py: 1.5,
-            px: 2,
-            background: "#fff",
-            width: "fit-content",
-            maxWidth: "calc(100% - 16px)",
-            wordWrap: "break-word",
-            borderRadius: 1
+            ...baseCardSx
           },
           children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-              /* @__PURE__ */ jsx(Icon, { icon: "tabler:news", style: { height: 15, width: 15, marginRight: 4 } }),
-              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-              /* @__PURE__ */ jsx("span", { children: t("chat.newPost") })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  color: "primary.light"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: "tabler:news", style: { height: 15, width: 15, marginRight: 4 } }),
+                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx("span", { children: t("chat.newPost") })
+                  ] }),
+                  /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+                ]
+              }
+            ),
             renderQuote(message.post)
           ]
         }
@@ -3866,20 +3991,29 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
         Box,
         {
           sx: {
-            py: 1.5,
-            px: 2,
-            background: "#fff",
-            width: "fit-content",
-            maxWidth: "calc(100% - 16px)",
-            wordWrap: "break-word",
-            borderRadius: 1
+            ...baseCardSx
           },
           children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-              /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-              /* @__PURE__ */ jsx("span", { children: ((_a2 = message == null ? void 0 : message.sourceUser) == null ? void 0 : _a2.did) === ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) ? t("chat.commentedYourPost") : t("chat.commentedPost") })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  color: "primary.light"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx("span", { children: ((_a2 = message == null ? void 0 : message.sourceUser) == null ? void 0 : _a2.did) === ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) ? t("chat.commentedYourPost") : t("chat.commentedPost") })
+                  ] }),
+                  /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: (_c = message == null ? void 0 : message.comment) == null ? void 0 : _c.excerpt }),
             renderQuote(message.post)
           ]
@@ -3891,21 +4025,30 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
         Box,
         {
           sx: {
-            py: 1.5,
-            px: 2,
-            background: "#fff",
-            width: "fit-content",
-            maxWidth: "calc(100% - 16px)",
-            wordWrap: "break-word",
-            borderRadius: 1
+            ...baseCardSx
           },
           children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-              /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-              /* @__PURE__ */ jsx("span", { children: (message == null ? void 0 : message.recipient) === ((_d = session == null ? void 0 : session.user) == null ? void 0 : _d.did) ? t("chat.replyYourComment") : t("chat.replyComment") })
-            ] }),
-            /* @__PURE__ */ jsx(Typography, { variant: "body1", children: message.reply.excerpt }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  color: "primary.light"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx("span", { children: (message == null ? void 0 : message.recipient) === ((_d = session == null ? void 0 : session.user) == null ? void 0 : _d.did) ? t("chat.replyYourComment") : t("chat.replyComment") })
+                  ] }),
+                  /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: message.reply.excerpt }),
             renderQuote({ title: message.post.title, excerpt: message.comment.excerpt })
           ]
         }
@@ -3916,23 +4059,32 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
         Box,
         {
           sx: {
-            py: 1.5,
-            px: 2,
-            background: "#fff",
-            width: "fit-content",
-            maxWidth: "calc(100% - 16px)",
-            wordWrap: "break-word",
-            borderRadius: 1
+            ...baseCardSx
           },
           children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-              /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-              /* @__PURE__ */ jsxs("span", { children: [
-                " ",
-                t("chat.mentionInComment")
-              ] })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  color: "primary.light"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      " ",
+                      t("chat.mentionInComment")
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: (_g = (_e = message == null ? void 0 : message.comment) == null ? void 0 : _e.excerpt) == null ? void 0 : _g.replace((_f = session == null ? void 0 : session.user) == null ? void 0 : _f.fullName, "") }),
             renderQuote(message.post)
           ]
@@ -3944,20 +4096,29 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
         Box,
         {
           sx: {
-            py: 1.5,
-            px: 2,
-            borderRadius: 1,
-            background: "#fff",
-            width: "fit-content",
-            maxWidth: "calc(100% - 16px)",
-            wordWrap: "break-word"
+            ...baseCardSx
           },
           children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-              /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-              /* @__PURE__ */ jsx("span", { children: t("chat.mentionInPost") })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  color: "primary.light"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx("span", { children: t("chat.mentionInPost") })
+                  ] }),
+                  /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+                ]
+              }
+            ),
             renderQuote(message.post)
           ]
         }
@@ -3985,20 +4146,29 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
         Box,
         {
           sx: {
-            py: 1.5,
-            px: 2,
-            borderRadius: 1,
-            background: "#fff",
-            width: "fit-content",
-            maxWidth: "calc(100% - 16px)",
-            wordWrap: "break-word"
+            ...baseCardSx
           },
           children: [
-            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-              /* @__PURE__ */ jsx(Icon, { icon: "tabler:arrow-forward-up", style: { height: 15, width: 15, marginRight: 4 } }),
-              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-              /* @__PURE__ */ jsx("span", { children: titles[message.subtype] })
-            ] }),
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  color: "primary.light"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: "tabler:arrow-forward-up", style: { height: 15, width: 15, marginRight: 4 } }),
+                    /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                    /* @__PURE__ */ jsx("span", { children: titles[message.subtype] })
+                  ] }),
+                  /* @__PURE__ */ jsx(Time, { createdAt: message.createdAt })
+                ]
+              }
+            ),
             renderQuote(message.post)
           ]
         }
@@ -4006,11 +4176,7 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
     }
     return /* @__PURE__ */ jsx(Message, { message, showTime: false });
   };
-  const messageInterval = message.createdAt.getTime() - ((prevMessage == null ? void 0 : prevMessage.createdAt.getTime()) || 0);
-  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { mt: 2 }, children: [
-    messageInterval > 6e4 && /* @__PURE__ */ jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-block", px: 1, fontSize: 12, bgcolor: "grey.300", borderRadius: 0.5 }, children: dayjs(message.createdAt).format("MM-DD HH:mm") }) }),
-    /* @__PURE__ */ jsx(Box, { sx: { p: 2, fontSize: 14, "&:hover": { bgcolor: "grey.50" } }, children: render() })
-  ] });
+  return /* @__PURE__ */ jsx(Box, { sx: { ...baseItemSx, fontSize: 14 }, children: render() });
 }
 const checkIsAtBottom = (element) => {
   return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
@@ -4018,6 +4184,7 @@ const checkIsAtBottom = (element) => {
 function MessageList({ chat, ...rest }) {
   var _a2, _b2;
   const { isActiveChat, loadMessages } = useChatContext();
+  const { t } = useLocaleContext();
   const isActive = isActiveChat(chat.id);
   const containerRef = useRef(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
@@ -4046,34 +4213,56 @@ function MessageList({ chat, ...rest }) {
       setIsAtBottom(checkIsAtBottom(containerRef.current));
     }
   }, [isActive]);
-  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { position: "relative", height: "100%", py: 1 }, children: [
-    /* @__PURE__ */ jsxs(Box, { sx: { height: "100%", px: { sm: 2, xs: 0 }, overflowY: "auto" }, ref: containerRef, children: [
-      chat.nextCursor && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 0.5 }, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "text",
-          color: "inherit",
-          onClick: () => loadMessages(chat.id, chat.nextCursor),
-          startIcon: /* @__PURE__ */ jsx(ArrowUpward, {}),
-          children: "Load older messages"
-        }
-      ) }),
-      chat.type !== "notification" && ((_a2 = chat.messages) == null ? void 0 : _a2.map((message) => {
-        return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Message, { message }) }, 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, { children: /* @__PURE__ */ jsx(
-          NotificationMessage,
-          {
-            chat,
-            message,
-            prevMessage: prev
-          }
-        ) }, message.id);
-      }))
-    ] }),
+  return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { position: "relative", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          height: "100%",
+          overflowY: "auto",
+          display: "flex",
+          flexDirection: "column",
+          py: 2.5,
+          px: 1.25,
+          gap: 1,
+          background: "rgba(249, 250, 251, 1)"
+        },
+        ref: containerRef,
+        children: [
+          chat.nextCursor && /* @__PURE__ */ jsx(Box, { id: "next-cursor", sx: { display: "flex", justifyContent: "center", py: 0.5 }, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              color: "inherit",
+              onClick: async () => {
+                var _a3;
+                (_a3 = document.getElementById("next-cursor")) == null ? void 0 : _a3.scrollIntoView();
+                await loadMessages(chat.id, chat.nextCursor);
+              },
+              startIcon: /* @__PURE__ */ jsx(ArrowUpward, {}),
+              children: t("chat.loadMore")
+            }
+          ) }),
+          chat.type !== "notification" && ((_a2 = chat.messages) == null ? void 0 : _a2.map((message, index) => {
+            var _a3;
+            const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
+            return /* @__PURE__ */ jsx(Box, { 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, { id: message.id, children: /* @__PURE__ */ jsx(
+              NotificationMessage,
+              {
+                chat,
+                message,
+                prevMessage: prev
+              }
+            ) }, message.id);
+          }))
+        ]
+      }
+    ),
     !isAtBottom && /* @__PURE__ */ jsx(Box, { 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, {}) }) })
   ] });
 }
@@ -4106,7 +4295,10 @@ function Participants({ users, sx, ...rest }) {
       p: 0.5,
       pr: 1,
       border: 1,
-      borderColor: "grey.300"
+      borderColor: "grey.300",
+      ".MuiAvatarGroup-root": {
+        height: 24
+      }
     },
     ...Array.isArray(sx) ? sx : [sx]
   ];
@@ -4123,8 +4315,8 @@ function Participants({ users, sx, ...rest }) {
       disableTouchListener: true,
       title: /* @__PURE__ */ jsx(Fragment, { children: users.map((item, i) => /* @__PURE__ */ jsx(Box$1, { sx: { p: 1 }, children: /* @__PURE__ */ jsx(AuthorInfo, { user: item, size: "sm" }) }, i)) }),
       children: /* @__PURE__ */ jsxs(Button$1, { ...rest, sx: mergedSx, onClick: handleTooltipOpen, children: [
-        /* @__PURE__ */ jsx(Avatars, { users: visibleUsers }),
-        /* @__PURE__ */ jsx(Box$1, { sx: { fontSize: 13, fontWeight: "bold", color: "grey.600" }, children: users.length })
+        /* @__PURE__ */ jsx(Avatars, { users: visibleUsers, max: 5 }),
+        /* @__PURE__ */ jsx(Box$1, { sx: { fontSize: 12, fontWeight: "bold", color: "grey.600" }, children: users.length })
       ] })
     }
   ) }) });
@@ -4174,6 +4366,18 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
     }
   );
 }
+function getLineClamp(count) {
+  return {
+    display: "-webkit-box",
+    WebkitLineClamp: count,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    lineHeight: 1.5
+  };
+}
+function RoomTitle({ title }) {
+  return /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "medium" }, children: title });
+}
 function ChatRoom({ chat, ...rest }) {
   var _a2;
   const { t } = useLocaleContext();
@@ -4201,11 +4405,11 @@ function ChatRoom({ chat, ...rest }) {
   };
   const renderRoomHeader = () => {
     if (chat.type === "notification") {
-      return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: /* @__PURE__ */ jsx(SystemUser, { name: t("chat.notification"), showDidAddress: false, size: "sm", showIcon: false }) });
+      return /* @__PURE__ */ jsx(RoomTitle, { title: t("chat.notification") });
     }
     if (chat.type === "dm") {
       const oppositeUser = getOppositeUser(chat);
-      return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, color: "grey.600", fontWeight: "bold" }, children: oppositeUser.fullName }) });
+      return /* @__PURE__ */ jsx(RoomTitle, { title: oppositeUser.fullName });
     }
     if (chat.type === "channel") {
       const menuItems = [];
@@ -4221,11 +4425,20 @@ function ChatRoom({ chat, ...rest }) {
       }
       return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", width: 1, flex: 1 }, children: [
         /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700" }, children: chat.name }),
-          /* @__PURE__ */ jsx(Box, { sx: { fontSize: 12, color: "grey.500" }, children: chat.description })
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700", ...getLineClamp(1) }, children: chat.name }),
+          /* @__PURE__ */ jsx(Box, { sx: { fontSize: 12, color: "grey.500", ...getLineClamp(1) }, children: chat.description })
         ] }),
         /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          !chat.hasJoined && /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => joinChannel(chat.id), children: t("chat.joinChannel") }),
+          !chat.hasJoined && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "contained",
+              color: "primary",
+              onClick: () => joinChannel(chat.id),
+              startIcon: /* @__PURE__ */ jsx(Box, { component: tablerUsersPlus, sx: { fontSize: "16px!important" } }),
+              children: t("chat.joinChannel")
+            }
+          ),
           chat.hasJoined && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Participants, { users: chat.participants, sx: { border: "none" } }) }),
           /* @__PURE__ */ jsx(Menu, { items: menuItems })
         ] })
@@ -4244,8 +4457,8 @@ function ChatRoom({ chat, ...rest }) {
           display: "flex",
           alignItems: "center",
           flex: "0 0 auto",
-          height: 64,
-          px: 2,
+          height: 52,
+          px: 2.5,
           borderBottom: "1px solid #e5e5e5"
         },
         children: [
@@ -4261,17 +4474,55 @@ function ChatRoom({ chat, ...rest }) {
         sx: {
           flex: "0 0 auto",
           ".be-editable": { maxHeight: 200, overflow: "auto" },
-          ".be-editable, .be-content": { minHeight: "64px!important" }
-        },
-        children: (chat.type !== "channel" || chat.hasJoined) && /* @__PURE__ */ jsx(
-          CommentInput,
-          {
-            send: (content) => sendMessage(chat.id, content),
-            placeholder: "Type something...",
-            sendText: "Send",
-            shortcut: "ENTER"
+          ".be-editable, .be-content": { minHeight: "64px !important" },
+          ".be-shell": {
+            border: "none !important",
+            borderTop: "1px solid #e5e5e5 !important",
+            borderRadius: "0px !important"
           }
-        )
+        },
+        children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            CommentInput,
+            {
+              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,
+            {
+              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, { sx: { mb: 0.5, fontSize: 18 }, children: "🚪" }),
+                /* @__PURE__ */ jsx(Box, { sx: { color: "primary.main", mb: 0.5, fontSize: 13, fontWeight: 500 }, children: t("chat.notYetJoinedTheChannel") }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: { color: "secondary.main", cursor: "pointer", fontSize: 13 },
+                    onClick: () => joinChannel(chat.id),
+                    children: t("chat.joinChannel")
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     )
   ] });
@@ -4302,49 +4553,65 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
       ] }),
       onClose,
       ...rest,
-      children: /* @__PURE__ */ jsxs(Box, { width: { xs: "100%", md: 560 }, minHeight: 140, children: [
-        /* @__PURE__ */ jsx(Box, { sx: { fontSize: 14, lineHeight: 3, fontWeight: "medium", mb: 1 }, children: t("chat.channel") }),
-        /* @__PURE__ */ jsx(
-          TextField,
-          {
-            value: state.name,
-            placeholder: t("chat.channelName"),
-            size: "small",
-            fullWidth: true,
-            sx: {
-              "& .MuiInputBase-root": {
-                height: 40,
-                backgroundColor: theme.palette.grey[100]
-              }
-            },
-            onChange: (e) => setState({ name: e.target.value })
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { sx: { fontSize: 14, lineHeight: 3, fontWeight: "medium", mt: 1 }, children: t("chat.description") }),
-        /* @__PURE__ */ jsx(
-          TextField,
-          {
-            value: state.description,
-            placeholder: t("chat.channelDescription"),
-            fullWidth: true,
-            multiline: true,
-            onChange: (e) => setState({ description: e.target.value }),
-            sx: {
-              my: 1,
-              "& .MuiInputBase-root": {
-                height: 64,
-                display: "flex",
-                alignItems: "flex-start",
-                backgroundColor: theme.palette.grey[100]
-              },
-              "& .MuiInputBase-inputMultiline": {
-                maxHeight: "100%",
-                overflowY: "auto"
-              }
-            }
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          width: { xs: "100%", md: 560 },
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            lineHeight: 1.75
+          },
+          minHeight: 140,
+          children: [
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Box, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelName") }),
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  value: state.name,
+                  placeholder: t("chat.channelName"),
+                  size: "small",
+                  fullWidth: true,
+                  sx: {
+                    "& .MuiInputBase-root": {
+                      height: 40,
+                      backgroundColor: theme.palette.grey[100]
+                    }
+                  },
+                  onChange: (e) => setState({ name: e.target.value })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Box, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelDescription") }),
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  value: state.description,
+                  placeholder: t("chat.channelDescription"),
+                  fullWidth: true,
+                  multiline: true,
+                  onChange: (e) => setState({ description: e.target.value }),
+                  minRows: 2,
+                  sx: {
+                    "& .MuiInputBase-root": {
+                      display: "flex",
+                      alignItems: "flex-start",
+                      backgroundColor: theme.palette.grey[100]
+                    },
+                    "& .MuiInputBase-inputMultiline": {
+                      maxHeight: "100%",
+                      overflowY: "auto"
+                    }
+                  }
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -4363,22 +4630,23 @@ function Empty({ sx }) {
   ];
   return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
     /* @__PURE__ */ jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
-    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold" }, children: t("chat.noChats") })
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.noChats") })
   ] });
 }
 function Chat({ sx, ...rest }) {
+  var _a2;
   const { client: client2, initialized, chats, activeChatId, addChat, setActiveChat, refresh, getOppositeUser } = useChatContext();
   const [newChannelVisible, setNewChannelVisible] = useState(false);
   const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
   const { t } = useLocaleContext();
-  const activeChat = chats.filter((chat) => (chat == null ? void 0 : chat.id) === activeChatId)[0];
+  const activeChat = (_a2 = chats == null ? void 0 : chats.filter((chat) => (chat == null ? void 0 : chat.id) === activeChatId)) == null ? void 0 : _a2[0];
   const webTitleMap = {
     dm: () => {
-      var _a2;
-      return ((_a2 = getOppositeUser(activeChat)) == null ? void 0 : _a2.fullName) || t("chat.unknown");
+      var _a3;
+      return ((_a3 = getOppositeUser(activeChat)) == null ? void 0 : _a3.fullName) || t("chat.unknown");
     },
     notification: () => t("chat.notification"),
-    channel: () => (activeChat == null ? void 0 : activeChat.type) === "channel" ? `#${activeChat.name}` : t("chat.unknownChannel"),
+    channel: () => (activeChat == null ? void 0 : activeChat.type) === "channel" ? `# ${activeChat.name}` : t("chat.unknownChannel"),
     default: () => t("chat.chats")
   };
   const getWebTitle = () => {
@@ -4433,17 +4701,17 @@ function Chat({ sx, ...rest }) {
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center",
-                height: 64,
-                px: 2,
+                height: 52,
+                px: 2.5,
                 borderBottom: "1px solid #e5e5e5"
               },
               children: [
-                /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 16, fontWeight: "bold" }, children: t("chat.chats") }) }),
+                /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.chats") }) }),
                 /* @__PURE__ */ jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsx(
                   IconButton$1,
                   {
                     onClick: () => setNewChannelVisible(true),
-                    sx: { p: 1, borderRadius: 1, border: `1px solid ${grey[200]}` },
+                    sx: { p: 1, borderRadius: 1, border: 1, borderColor: "grey.200", height: 32, width: 32 },
                     children: /* @__PURE__ */ jsx(Add, { sx: { color: "#000" } })
                   }
                 ) })
@@ -4797,7 +5065,7 @@ function Pagination({
     }
   );
 }
-const Editor = lazy(() => import("./editor-LUBMEeS4.mjs"));
+const Editor = lazy(() => import("./editor-HUTb7nXS.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -4920,6 +5188,7 @@ const en = {
   sendComment: "Comment",
   showMoreReplies: "Show more replies",
   all: "All",
+  messages: "Messages",
   deleteMessage: {
     title: "Delete message",
     desc: "Do you want to delete this message permanently?"
@@ -4948,6 +5217,7 @@ const en = {
   },
   chat: {
     notification: "Notification",
+    reply: "Reply",
     unknown: "Unknown",
     chats: "Chats",
     create: "Create",
@@ -4976,7 +5246,10 @@ const en = {
     unassignTask: "unassigned you from a post",
     points: "points",
     point: "point",
-    pointUp: "🎉 You got {points} {unit} {event}"
+    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"
   }
 };
 const zh = {
@@ -4995,6 +5268,7 @@ const zh = {
   sendComment: "评论",
   showMoreReplies: "显示更多回复",
   all: "所有",
+  messages: "消息",
   deleteMessage: {
     title: "删除消息",
     desc: "是否要永久删除此消息？"
@@ -5023,6 +5297,7 @@ const zh = {
   },
   chat: {
     notification: "通知",
+    reply: "回复",
     unknown: "未命名",
     chats: "聊天",
     create: "创建",
@@ -5042,7 +5317,7 @@ const zh = {
     replyYourComment: "回复了你的评论",
     replyComment: "回复了评论",
     deleteChannelTitle: "确认删除这个频道？",
-    deleteChannelDesc: "如果你要删除这个频道, 所有频道的消息都会立刻消除。",
+    deleteChannelDesc: "如果你要删除这个频道, 频道内所有的消息都会立刻消除。",
     leaveChannel: "离开频道",
     joinChannel: "加入频道",
     openTask: "创建了一个任务",
@@ -5051,7 +5326,10 @@ const zh = {
     unassignTask: "取消给你分配的一个任务",
     points: "分",
     point: "分",
-    pointUp: "🎉 您获得了 {points} {unit} {event}"
+    pointUp: "🎉 您获得了 {points} {unit} {event}",
+    loadMore: "加载更多消息",
+    notYetJoinedTheChannel: "暂未加入这个频道",
+    typeSomething: "在这里输入，适用 MarkDown，拽入或者黏贴图片"
   }
 };
 const translations = { zh, en };
@@ -10953,61 +11231,60 @@ function SegmentedControl({ value, options, onChange, sx, ...rest }) {
   ) });
 }
 export {
-  useUnreadNotification as $,
+  UnreadNotificationProvider as $,
   Avatar as A,
   Badge as B,
   CommentInput as C,
   DefaultEditorConfigProvider as D,
   EmptyStatus as E,
-  BlogListWrapper as F,
+  BlogCard as F,
   GithubReaction as G,
-  BlogCard as H,
+  BlogPermaLink as H,
   ImagePathFixerPlugin as I,
-  BlogPermaLink as J,
-  getBlogLink as K,
-  CoverImage as L,
+  getBlogLink as J,
+  CoverImage as K,
+  CoverImageUpload as L,
   Menu as M,
-  CoverImageUpload as N,
-  AccessControl as O,
+  AccessControl as N,
+  useAuthzContext as O,
   Pagination as P,
-  useAuthzContext as Q,
+  AuthzProvider as Q,
   RelativeTime as R,
   ScrollableEditorWrapper as S,
-  AuthzProvider as T,
-  ChatClient as U,
+  ChatClient as T,
+  Chat as U,
   VideoPathFixerPlugin as V,
-  Chat as W,
-  ChatHeaderAddon as X,
-  useChatContext as Y,
-  ChatProvider as Z,
-  UnreadNotificationContext as _,
+  ChatHeaderAddon as W,
+  useChatContext as X,
+  ChatProvider as Y,
+  UnreadNotificationContext as Z,
+  useUnreadNotification as _,
   isEmptyContent as a,
-  UnreadNotificationProvider as a0,
-  Confirm as a1,
-  ConfirmContext as a2,
-  useConfirm as a3,
-  ConfirmProvider as a4,
-  SecureLabelPicker as a5,
-  useApiErrorHandler as a6,
-  useDefaultApiErrorHandler as a7,
-  PreviousLocationRecorder as a8,
-  Back as a9,
-  LazyEditor as aa,
-  EditorPreview as ab,
-  DirtyPromptContainer as ac,
-  ConfirmNavigation as ad,
-  UploaderContext as ae,
-  useUploader as af,
-  UploaderTrigger as ag,
-  UploaderProvider as ah,
-  composeImageUrl as ai,
-  usePointUpContext as aj,
-  PointUpProvider as ak,
-  ButtonGroup as al,
-  SegmentedControl as am,
-  create as an,
-  getWsClient as ao,
-  useSubscription as ap,
+  Confirm as a0,
+  ConfirmContext as a1,
+  useConfirm as a2,
+  ConfirmProvider as a3,
+  SecureLabelPicker as a4,
+  useApiErrorHandler as a5,
+  useDefaultApiErrorHandler as a6,
+  PreviousLocationRecorder as a7,
+  Back as a8,
+  LazyEditor as a9,
+  EditorPreview as aa,
+  DirtyPromptContainer as ab,
+  ConfirmNavigation as ac,
+  UploaderContext as ad,
+  useUploader as ae,
+  UploaderTrigger as af,
+  UploaderProvider as ag,
+  composeImageUrl as ah,
+  usePointUpContext as ai,
+  PointUpProvider as aj,
+  ButtonGroup as ak,
+  SegmentedControl as al,
+  create as am,
+  getWsClient as an,
+  useSubscription as ao,
   Input as b,
   useChanged as c,
   utils as d,
@@ -11019,18 +11296,18 @@ export {
   AuthorInfo as j,
   SystemUser as k,
   lexical as l,
-  ChannelGroup as m,
-  PostContent as n,
-  PostComponent as o,
+  PostContent as m,
+  PostComponent as n,
+  Comment as o,
   preferences as p,
-  Comment as q,
+  CommentList as q,
   routes as r,
   stringify as s,
   translations as t,
   useNow as u,
-  CommentList as v,
-  CommentsContext as w,
-  useCommentsContext as x,
-  CommentsProvider as y,
-  BinaryThumb as z
+  CommentsContext as v,
+  useCommentsContext as w,
+  CommentsProvider as x,
+  BinaryThumb as y,
+  BlogListWrapper as z
 };