@blocklet/discuss-kit-ux 1.6.184 → 1.6.186

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("react"), require("@mui/material/Box"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), 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/ux/lib/Theme"), 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/material"), require("@arcblock/did-connect/lib/Address"), require("@mui/icons-material/NotificationsActiveOutlined"), require("@mui/icons-material/Groups2Rounded"), require("@blocklet/editor/lib/ext/CheckboxPlugin"), require("@mui/material/MenuItem"), require("clsx"), require("@mui/material/IconButton"), require("@mui/material/Menu"), require("@arcblock/ux/lib/Dialog"), require("url-join"), require("lodash/orderBy"), require("@mui/material/Typography"), require("@mui/material/Skeleton"), 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/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", "react", "@mui/material/Box", "lodash/isNil", "@blocklet/editor/lib/config", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/ux/lib/Theme", "@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/material", "@arcblock/did-connect/lib/Address", "@mui/icons-material/NotificationsActiveOutlined", "@mui/icons-material/Groups2Rounded", "@blocklet/editor/lib/ext/CheckboxPlugin", "@mui/material/MenuItem", "clsx", "@mui/material/IconButton", "@mui/material/Menu", "@arcblock/ux/lib/Dialog", "url-join", "lodash/orderBy", "@mui/material/Typography", "@mui/material/Skeleton", "react-dom", "dayjs", "dayjs/plugin/relativeTime", "mitt", "@mui/material/CircularProgress", "react-helmet", "react-flip-toolkit", "@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.react, global.Box, global.isNil, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.Theme, 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$1, global.Session, global.material, global.DIDAddress, global.NotificationsActiveOutlinedIcon, global.Groups2RoundedIcon, global.CheckboxPlugin, global.MuiMenuItem, global.clsx, global.IconButton$1, global.MuiMenu, global.Dialog, global.joinUrl, global.orderBy, global.Typography, global.Skeleton, global.reactDom, global.dayjs, global.relativeTime, global.mitt, global.CircularProgress, global.reactHelmet, global.reactFlipToolkit, 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, react, Box, isNil, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, Theme, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$1, Session, material, DIDAddress, NotificationsActiveOutlinedIcon, Groups2RoundedIcon, CheckboxPlugin, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, joinUrl, orderBy, Typography, Skeleton, reactDom, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, 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("react"), require("@mui/material/Box"), require("lodash/isNil"), require("@blocklet/editor/lib/config"), require("@lexical/react/LexicalComposerContext"), require("lexical"), require("ahooks"), 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/ux/lib/Theme"), 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/material"), 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("@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", "react", "@mui/material/Box", "lodash/isNil", "@blocklet/editor/lib/config", "@lexical/react/LexicalComposerContext", "lexical", "ahooks", "@mui/lab/LoadingButton", "@mui/icons-material", "@arcblock/ux/lib/Locale/context", "@mui/material/Alert", "lodash/isBoolean", "@mui/material/Button", "@arcblock/ux/lib/Theme", "@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/material", "@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", "@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.react, global.Box, global.isNil, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.Theme, 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$1, global.Session, global.material, 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.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, react, Box, isNil, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, Theme, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$1, Session, material, NotificationsActiveOutlinedIcon, CheckboxPlugin, DIDAddress, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, reactDom, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, grey, Fab, debounce, TextField, AddIcon, axios, Toast, MuiPagination, unstatedNext, Cookie, ws, css, OnContentChangePlugin, ShortcutPlugin, 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) => {
@@ -924,8 +924,13 @@ var __publicField = (obj, key, value) => {
     return r(values2);
   };
   function ProfileCard({ user, click, ...rest }) {
-    var _a2, _b2;
+    var _a2, _b2, _c;
     const { session } = useSessionContext();
+    const { t } = context.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__ */ jsxRuntime.jsxs(
       Box,
       {
@@ -987,18 +992,18 @@ var __publicField = (obj, key, value) => {
               )
             ] })
           ] }),
-          ((_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__ */ jsxRuntime.jsxs(jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { my: 2, borderTop: "1px solid #eee" } }),
             /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 component: reactRouterDom.Link,
-                to: `/chat/dm/${user.did}`,
+                to: chatUrl,
                 variant: "outlined",
                 color: "inherit",
                 startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ChatBubbleOutlineOutlined, { style: { fontSize: 16 } }),
                 sx: { fontSize: 12 },
-                children: "Message"
+                children: t("messages")
               }
             ) })
           ] })
@@ -1023,6 +1028,7 @@ var __publicField = (obj, key, value) => {
     showDID = true,
     newTitle = void 0,
     profileUse = false,
+    children,
     ...rest
   }) {
     const theme = styles.useTheme();
@@ -1031,7 +1037,7 @@ var __publicField = (obj, key, value) => {
     const [open, setOpen] = react.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;
@@ -1046,7 +1052,10 @@ var __publicField = (obj, key, value) => {
       createdAt = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
       return /* @__PURE__ */ jsxRuntime.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}`);
@@ -1061,7 +1070,7 @@ var __publicField = (obj, key, value) => {
             onClose: () => setOpen(false),
             onOpen: () => setOpen(true),
             title: /* @__PURE__ */ jsxRuntime.jsx(ProfileCard, { user, click }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", cursor: "pointer" }, onClick: click, children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsxRuntime.jsx(
               Avatar,
               {
                 did: user == null ? void 0 : user.did,
@@ -1070,14 +1079,15 @@ var __publicField = (obj, key, value) => {
                 shape: "circle",
                 variant: "circle",
                 sx: {
-                  width: avatarSize
+                  width: "100%",
+                  height: "100%"
                 }
               }
             ) })
           }
         );
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", cursor: "pointer", width: avatarSize, height: avatarSize }, onClick: click, children: /* @__PURE__ */ jsxRuntime.jsx(
         Avatar,
         {
           did: user == null ? void 0 : user.did,
@@ -1086,10 +1096,11 @@ var __publicField = (obj, key, value) => {
           shape: "circle",
           variant: "circle",
           sx: {
-            width: avatarSize
+            width: "100%",
+            height: "100%"
           }
         }
-      );
+      ) });
     };
     const BadgeRender = /* @__PURE__ */ jsxRuntime.jsx(
       Badge,
@@ -1120,7 +1131,8 @@ var __publicField = (obj, key, value) => {
           }
         ),
         showBadge && downMd && /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 0.5, children: BadgeRender }),
-        showDID && !(responsive && downMd) && /* @__PURE__ */ jsxRuntime.jsx(DID, { style: { lineHeight: 1.4, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did })
+        showDID && !(responsive && downMd) && /* @__PURE__ */ jsxRuntime.jsx(DID, { style: { lineHeight: 1.5, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did }),
+        children && /* @__PURE__ */ jsxRuntime.jsx(Box, { children })
       ] })
     ] });
   }
@@ -1133,7 +1145,7 @@ var __publicField = (obj, key, value) => {
     ...rest
   }) {
     const sm = size === "sm";
-    const iconSize = sm ? 36 : 40;
+    const iconSize = sm ? 40 : 48;
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
       showIcon && /* @__PURE__ */ jsxRuntime.jsx(
         Box,
@@ -1144,6 +1156,7 @@ var __publicField = (obj, key, value) => {
             alignItems: "center",
             width: iconSize,
             height: iconSize,
+            p: 1,
             color: "#fff",
             bgcolor: "secondary.main",
             borderRadius: "100%"
@@ -1152,49 +1165,14 @@ var __publicField = (obj, key, value) => {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: name }) }),
-        showDidAddress && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          sx: {
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            width: iconSize,
-            height: iconSize,
-            color: "#fff",
-            bgcolor: colors.amber[200],
-            borderRadius: "100%"
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(Groups2RoundedIcon, { sx: { fontSize: size === "sm" ? 16 : 18, color: colors.amber[700] } })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: chat == null ? void 0 : chat.name }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Box,
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1.5, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: name }) }),
+        showDidAddress && /* @__PURE__ */ jsxRuntime.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
           }
         )
       ] })
@@ -1337,7 +1315,16 @@ var __publicField = (obj, key, value) => {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "inline-block", ...rest, onClick: handleOnClick, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { size: "medium", className: "menu-icon", onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.MoreVert, { sx: { fontSize: 18 } }) }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(iconsMaterial.MoreVert, { sx: { fontSize: 18 } })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         StyledMuiMenu,
         {
@@ -3448,7 +3435,7 @@ var __publicField = (obj, key, value) => {
     const addParticipant = (chatId, participant) => {
       updateChat(chatId, (chat) => ({
         ...chat,
-        participants: [...chat.participants, participant]
+        participants: uniqBy([...chat.participants, participant], "did")
       }));
     };
     const removeParticipant = (chatId, participant) => {
@@ -3493,6 +3480,23 @@ var __publicField = (obj, key, value) => {
       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 },
@@ -3619,24 +3623,70 @@ var __publicField = (obj, key, value) => {
         deleteMessage,
         hasUnreadMessages,
         refresh,
-        orderedChats
+        orderedChats,
+        getLastMessageText
       };
     }, [state, client2, currentUser == null ? void 0 : currentUser.did]);
     return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value, children });
   }
+  const tablerUsersGroup = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { component: tablerUsersGroup, sx: { fontSize: 16, color: colors.amber[700], width: iconSize } })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1.5, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: chat == null ? void 0 : chat.name }) }),
+        children && /* @__PURE__ */ jsxRuntime.jsx(Box, { children })
+      ] })
+    ] });
+  }
   function ChatList(props) {
     const { t } = context.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__ */ jsxRuntime.jsx(SystemUser, { name: t("chat.notification") });
       }
+      const latestMessageText = getLastMessageText(chat);
+      const latestMessageTextContent = latestMessageText && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false, showBadge: false, showDID: false });
+        return /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false, showBadge: false, showDID: false, children: latestMessageTextContent });
       }
       if (chat.type === "channel") {
-        return /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", children: /* @__PURE__ */ jsxRuntime.jsx(ChannelGroup, { chat }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(ChannelGroup, { chat, children: latestMessageTextContent });
       }
       return null;
     };
@@ -3657,8 +3707,8 @@ var __publicField = (obj, key, value) => {
             borderRadius: 1,
             cursor: "pointer",
             ...isActiveChat && {
-              ".did-address-text": { color: "grey.500" },
-              ".message-content-text": { color: "grey.500" }
+              ".did-address-text": { color: `${grey[500]} !important` },
+              ".message-content-text": { color: `${grey[500]}` }
             }
           },
           onClick: () => setActiveChat(chat),
@@ -3684,8 +3734,25 @@ var __publicField = (obj, key, value) => {
       ) }, chat.id);
     }) }) });
   }
-  function Message({ message, showTime = true, ...rest }) {
-    var _a2;
+  const tablerUsersPlus = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "inline-block", fontSize: 12, color: "grey.500", ml: 3 }, children: isWithinSevenDays ? /* @__PURE__ */ jsxRuntime.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 } = context.useLocaleContext();
     const { session, isAdmin } = useSessionContext();
     const { confirm } = useConfirm();
@@ -3704,34 +3771,73 @@ var __publicField = (obj, key, value) => {
     };
     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__ */ jsxRuntime.jsx(MuiMenuItem, { onClick: handleDeleteMessage, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("delete") }) }, "delete")
       );
     }
+    const compactMessage = messageInterval <= 6e4 && isSameUser;
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } }),
-          /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: message.sender, createdAt: showTime ? message.createdAt : void 0 }),
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { ml: 5.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(PostContent, { content: message.content }) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Menu,
+            {
+              items: menuItems,
+              className: "message-menu",
+              style: {
+                position: "absolute",
+                right: 12,
+                top: 0,
+                bottom: 0,
+                alignItems: "center",
+                display: "none"
+              }
+            }
+          ),
+          !compactMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            AuthorInfo,
+            {
+              showProfileCard: true,
+              user: message.sender,
+              createdAt: showTime ? message.createdAt : void 0,
+              size: "sm"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { ml: 6, width: "90%" }, children: /* @__PURE__ */ jsxRuntime.jsx(PostContent, { content: message.content }) })
         ]
       }
     );
   }
-  function NotificationMessage({ chat, message, prevMessage, ...rest }) {
+  function NotificationMessage({ chat, message, prevMessage }) {
     const { session } = useSessionContext();
     const { t } = context.useLocaleContext();
-    const renderQuote = ({ title, excerpt, cover }) => {
+    const renderQuote = ({ title, cover }) => {
       if ("post" in message) {
         return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { color: 14, mt: 1 }, children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3770,25 +3876,44 @@ var __publicField = (obj, key, value) => {
     };
     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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:news", style: { height: 15, width: 15, marginRight: 4 } }),
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("chat.newPost") })
-              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    color: "primary.light"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:news", style: { height: 15, width: 15, marginRight: 4 } }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("chat.newPost") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Time, { createdAt: message.createdAt })
+                  ]
+                }
+              ),
               renderQuote(message.post)
             ]
           }
@@ -3799,20 +3924,29 @@ var __publicField = (obj, key, value) => {
           Box,
           {
             sx: {
-              py: 1.5,
-              px: 2,
-              background: "#fff",
-              width: "fit-content",
-              maxWidth: "calc(100% - 16px)",
-              wordWrap: "break-word",
-              borderRadius: 1
+              ...baseCardSx
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    color: "primary.light"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Time, { createdAt: message.createdAt })
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: (_c = message == null ? void 0 : message.comment) == null ? void 0 : _c.excerpt }),
               renderQuote(message.post)
             ]
@@ -3824,21 +3958,30 @@ var __publicField = (obj, key, value) => {
           Box,
           {
             sx: {
-              py: 1.5,
-              px: 2,
-              background: "#fff",
-              width: "fit-content",
-              maxWidth: "calc(100% - 16px)",
-              wordWrap: "break-word",
-              borderRadius: 1
+              ...baseCardSx
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Typography, { variant: "body1", children: message.reply.excerpt }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    color: "primary.light"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Time, { createdAt: message.createdAt })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: message.reply.excerpt }),
               renderQuote({ title: message.post.title, excerpt: message.comment.excerpt })
             ]
           }
@@ -3849,23 +3992,32 @@ var __publicField = (obj, key, value) => {
           Box,
           {
             sx: {
-              py: 1.5,
-              px: 2,
-              background: "#fff",
-              width: "fit-content",
-              maxWidth: "calc(100% - 16px)",
-              wordWrap: "break-word",
-              borderRadius: 1
+              ...baseCardSx
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  " ",
-                  t("chat.mentionInComment")
-                ] })
-              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    color: "primary.light"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                        " ",
+                        t("chat.mentionInComment")
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Time, { createdAt: message.createdAt })
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.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)
             ]
@@ -3877,20 +4029,29 @@ var __publicField = (obj, key, value) => {
           Box,
           {
             sx: {
-              py: 1.5,
-              px: 2,
-              borderRadius: 1,
-              background: "#fff",
-              width: "fit-content",
-              maxWidth: "calc(100% - 16px)",
-              wordWrap: "break-word"
+              ...baseCardSx
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("chat.mentionInPost") })
-              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    color: "primary.light"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("chat.mentionInPost") })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Time, { createdAt: message.createdAt })
+                  ]
+                }
+              ),
               renderQuote(message.post)
             ]
           }
@@ -3918,20 +4079,29 @@ var __publicField = (obj, key, value) => {
           Box,
           {
             sx: {
-              py: 1.5,
-              px: 2,
-              borderRadius: 1,
-              background: "#fff",
-              width: "fit-content",
-              maxWidth: "calc(100% - 16px)",
-              wordWrap: "break-word"
+              ...baseCardSx
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:arrow-forward-up", style: { height: 15, width: 15, marginRight: 4 } }),
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: titles[message.subtype] })
-              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    color: "primary.light"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { icon: "tabler:arrow-forward-up", style: { height: 15, width: 15, marginRight: 4 } }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: titles[message.subtype] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Time, { createdAt: message.createdAt })
+                  ]
+                }
+              ),
               renderQuote(message.post)
             ]
           }
@@ -3939,11 +4109,7 @@ var __publicField = (obj, key, value) => {
       }
       return /* @__PURE__ */ jsxRuntime.jsx(Message, { message, showTime: false });
     };
-    const messageInterval = message.createdAt.getTime() - ((prevMessage == null ? void 0 : prevMessage.createdAt.getTime()) || 0);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...rest, sx: { mt: 2 }, children: [
-      messageInterval > 6e4 && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { sx: { p: 2, fontSize: 14, "&:hover": { bgcolor: "grey.50" } }, children: render() })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { ...baseItemSx, fontSize: 14 }, children: render() });
   }
   const checkIsAtBottom = (element) => {
     return element && (element.scrollHeight === 0 || element.scrollHeight - element.scrollTop < element.clientHeight + 60);
@@ -3951,6 +4117,7 @@ var __publicField = (obj, key, value) => {
   function MessageList({ chat, ...rest }) {
     var _a2, _b2;
     const { isActiveChat, loadMessages } = useChatContext();
+    const { t } = context.useLocaleContext();
     const isActive = isActiveChat(chat.id);
     const containerRef = react.useRef(null);
     const [isAtBottom, setIsAtBottom] = react.useState(true);
@@ -3979,34 +4146,56 @@ var __publicField = (obj, key, value) => {
         setIsAtBottom(checkIsAtBottom(containerRef.current));
       }
     }, [isActive]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...rest, sx: { position: "relative", height: "100%", py: 1 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { height: "100%", px: { sm: 2, xs: 0 }, overflowY: "auto" }, ref: containerRef, children: [
-        chat.nextCursor && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "text",
-            color: "inherit",
-            onClick: () => loadMessages(chat.id, chat.nextCursor),
-            startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ArrowUpward, {}),
-            children: "Load older messages"
-          }
-        ) }),
-        chat.type !== "notification" && ((_a2 = chat.messages) == null ? void 0 : _a2.map((message) => {
-          return /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            NotificationMessage,
-            {
-              chat,
-              message,
-              prevMessage: prev
-            }
-          ) }, message.id);
-        }))
-      ] }),
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...rest, sx: { position: "relative", height: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { id: "next-cursor", sx: { display: "flex", justifyContent: "center", py: 0.5 }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(iconsMaterial.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__ */ jsxRuntime.jsx(Box, { 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, { 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, {}) }) })
     ] });
   }
@@ -4039,7 +4228,10 @@ var __publicField = (obj, key, value) => {
         p: 0.5,
         pr: 1,
         border: 1,
-        borderColor: "grey.300"
+        borderColor: "grey.300",
+        ".MuiAvatarGroup-root": {
+          height: 24
+        }
       },
       ...Array.isArray(sx) ? sx : [sx]
     ];
@@ -4056,8 +4248,8 @@ var __publicField = (obj, key, value) => {
         disableTouchListener: true,
         title: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: users.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { p: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: item, size: "sm" }) }, i)) }),
         children: /* @__PURE__ */ jsxRuntime.jsxs(material.Button, { ...rest, sx: mergedSx, onClick: handleTooltipOpen, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Avatars, { users: visibleUsers }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { fontSize: 13, fontWeight: "bold", color: "grey.600" }, children: users.length })
+          /* @__PURE__ */ jsxRuntime.jsx(Avatars, { users: visibleUsers, max: 5 }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { fontSize: 12, fontWeight: "bold", color: "grey.600" }, children: users.length })
         ] })
       }
     ) }) });
@@ -4107,6 +4299,18 @@ var __publicField = (obj, key, value) => {
       }
     );
   }
+  function getLineClamp(count) {
+    return {
+      display: "-webkit-box",
+      WebkitLineClamp: count,
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden",
+      lineHeight: 1.5
+    };
+  }
+  function RoomTitle({ title }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "medium" }, children: title });
+  }
   function ChatRoom({ chat, ...rest }) {
     var _a2;
     const { t } = context.useLocaleContext();
@@ -4134,11 +4338,11 @@ var __publicField = (obj, key, value) => {
     };
     const renderRoomHeader = () => {
       if (chat.type === "notification") {
-        return /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(SystemUser, { name: t("chat.notification"), showDidAddress: false, size: "sm", showIcon: false }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RoomTitle, { title: t("chat.notification") });
       }
       if (chat.type === "dm") {
         const oppositeUser = getOppositeUser(chat);
-        return /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, color: "grey.600", fontWeight: "bold" }, children: oppositeUser.fullName }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(RoomTitle, { title: oppositeUser.fullName });
       }
       if (chat.type === "channel") {
         const menuItems = [];
@@ -4154,11 +4358,20 @@ var __publicField = (obj, key, value) => {
         }
         return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", width: 1, flex: 1 }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700" }, children: chat.name }),
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 12, color: "grey.500" }, children: chat.description })
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700", ...getLineClamp(1) }, children: chat.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 12, color: "grey.500", ...getLineClamp(1) }, children: chat.description })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            !chat.hasJoined && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "contained", color: "primary", onClick: () => joinChannel(chat.id), children: t("chat.joinChannel") }),
+            !chat.hasJoined && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "contained",
+                color: "primary",
+                onClick: () => joinChannel(chat.id),
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: tablerUsersPlus, sx: { fontSize: "16px!important" } }),
+                children: t("chat.joinChannel")
+              }
+            ),
             chat.hasJoined && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Participants, { users: chat.participants, sx: { border: "none" } }) }),
             /* @__PURE__ */ jsxRuntime.jsx(Menu, { items: menuItems })
           ] })
@@ -4177,8 +4390,8 @@ var __publicField = (obj, key, value) => {
             display: "flex",
             alignItems: "center",
             flex: "0 0 auto",
-            height: 64,
-            px: 2,
+            height: 52,
+            px: 2.5,
             borderBottom: "1px solid #e5e5e5"
           },
           children: [
@@ -4194,17 +4407,55 @@ var __publicField = (obj, key, value) => {
           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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { sx: { position: "relative" }, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ 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")
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
         }
       )
     ] });
@@ -4235,49 +4486,65 @@ var __publicField = (obj, key, value) => {
         ] }),
         onClose,
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { width: { xs: "100%", md: 560 }, minHeight: 140, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 14, lineHeight: 3, fontWeight: "medium", mb: 1 }, children: t("chat.channel") }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 14, lineHeight: 3, fontWeight: "medium", mt: 1 }, children: t("chat.description") }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          Box,
+          {
+            width: { xs: "100%", md: 560 },
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+              lineHeight: 1.75
+            },
+            minHeight: 140,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelName") }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 14, fontWeight: "medium", mb: 0 }, children: t("chat.channelDescription") }),
+                /* @__PURE__ */ jsxRuntime.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"
+                      }
+                    }
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       }
     );
   }
@@ -4296,22 +4563,23 @@ var __publicField = (obj, key, value) => {
     ];
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: mergedSx, children: [
       /* @__PURE__ */ jsxRuntime.jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold" }, children: t("chat.noChats") })
+      /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
     const downMd = material.useMediaQuery((theme) => theme.breakpoints.down("sm"));
     const { t } = context.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 = () => {
@@ -4366,17 +4634,17 @@ var __publicField = (obj, key, value) => {
                   display: "flex",
                   justifyContent: "space-between",
                   alignItems: "center",
-                  height: 64,
-                  px: 2,
+                  height: 52,
+                  px: 2.5,
                   borderBottom: "1px solid #e5e5e5"
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 16, fontWeight: "bold" }, children: t("chat.chats") }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 14, fontWeight: 500 }, children: t("chat.chats") }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsxRuntime.jsx(
                     IconButton$1,
                     {
                       onClick: () => setNewChannelVisible(true),
-                      sx: { p: 1, borderRadius: 1, border: `1px solid ${colors.grey[200]}` },
+                      sx: { p: 1, borderRadius: 1, border: 1, borderColor: "grey.200", height: 32, width: 32 },
                       children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Add, { sx: { color: "#000" } })
                     }
                   ) })
@@ -4853,6 +5121,7 @@ var __publicField = (obj, key, value) => {
     sendComment: "Comment",
     showMoreReplies: "Show more replies",
     all: "All",
+    messages: "Messages",
     deleteMessage: {
       title: "Delete message",
       desc: "Do you want to delete this message permanently?"
@@ -4881,6 +5150,7 @@ var __publicField = (obj, key, value) => {
     },
     chat: {
       notification: "Notification",
+      reply: "Reply",
       unknown: "Unknown",
       chats: "Chats",
       create: "Create",
@@ -4909,7 +5179,10 @@ var __publicField = (obj, key, value) => {
       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 = {
@@ -4928,6 +5201,7 @@ var __publicField = (obj, key, value) => {
     sendComment: "评论",
     showMoreReplies: "显示更多回复",
     all: "所有",
+    messages: "消息",
     deleteMessage: {
       title: "删除消息",
       desc: "是否要永久删除此消息？"
@@ -4956,6 +5230,7 @@ var __publicField = (obj, key, value) => {
     },
     chat: {
       notification: "通知",
+      reply: "回复",
       unknown: "未命名",
       chats: "聊天",
       create: "创建",
@@ -4975,7 +5250,7 @@ var __publicField = (obj, key, value) => {
       replyYourComment: "回复了你的评论",
       replyComment: "回复了评论",
       deleteChannelTitle: "确认删除这个频道？",
-      deleteChannelDesc: "如果你要删除这个频道, 所有频道的消息都会立刻消除。",
+      deleteChannelDesc: "如果你要删除这个频道, 频道内所有的消息都会立刻消除。",
       leaveChannel: "离开频道",
       joinChannel: "加入频道",
       openTask: "创建了一个任务",
@@ -4984,7 +5259,10 @@ var __publicField = (obj, key, value) => {
       unassignTask: "取消给你分配的一个任务",
       points: "分",
       point: "分",
-      pointUp: "🎉 您获得了 {points} {unit} {event}"
+      pointUp: "🎉 您获得了 {points} {unit} {event}",
+      loadMore: "加载更多消息",
+      notYetJoinedTheChannel: "暂未加入这个频道",
+      typeSomething: "在这里输入，适用 MarkDown，拽入或者黏贴图片"
     }
   };
   const translations = { zh, en };
@@ -10928,7 +11206,6 @@ var __publicField = (obj, key, value) => {
   exports2.BlogList = BlogListWrapper;
   exports2.BlogPermaLink = BlogPermaLink;
   exports2.ButtonGroup = ButtonGroup;
-  exports2.ChannelGroup = ChannelGroup;
   exports2.Chat = Chat;
   exports2.ChatClient = ChatClient;
   exports2.ChatHeaderAddon = ChatHeaderAddon;