@blocklet/discuss-kit-ux 1.6.173 → 1.6.175

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("@arcblock/ux/lib/Theme"), 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/did-connect/lib/Avatar"), 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("@mui/material/colors"), require("@arcblock/did-connect/lib/Session"), require("@mui/material"), require("@arcblock/did-connect/lib/Address"), 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("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/Fab"), require("lodash/debounce"), require("@mui/material/TextField"), 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", "@arcblock/ux/lib/Theme", "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/did-connect/lib/Avatar", "@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", "@mui/material/colors", "@arcblock/did-connect/lib/Session", "@mui/material", "@arcblock/did-connect/lib/Address", "@blocklet/editor/lib/ext/CheckboxPlugin", "@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/Fab", "lodash/debounce", "@mui/material/TextField", "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.Theme, global.isNil, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, 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.colors, global.Session, global.material, global.DIDAddress, global.CheckboxPlugin, 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.Fab, global.debounce, global.TextField, 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, Theme, isNil, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$1, colors, Session, material, DIDAddress, CheckboxPlugin, MuiMenuItem, clsx, IconButton$1, MuiMenu, Dialog, orderBy, Typography, Skeleton, joinUrl, reactDom, dayjs, relativeTime, mitt, CircularProgress, reactHelmet, reactFlipToolkit, Fab, debounce, TextField, 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("@arcblock/ux/lib/Theme"), 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/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", "@arcblock/ux/lib/Theme", "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/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.Theme, global.isNil, global.config, global.LexicalComposerContext, global.lexical$1, global.ahooks, global.LoadingButton, global.iconsMaterial, global.context, global.Alert, global.isBoolean, global.Button, global.DidAvatar, global.AvatarGroup, global.colors, global.useMediaQuery, global.DID, global.Tooltip, global.reactRouterDom, global.UxRelativeTime, global.Chip, global.Stack, global.groupBy, global.flatMap, global.uniqBy, global.trim, global.Avatar$1, global.BrokenImageIcon, global.react$1, global.Empty$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, Theme, isNil, config, LexicalComposerContext, lexical$1, ahooks, LoadingButton, iconsMaterial, context, Alert, isBoolean, Button, DidAvatar, AvatarGroup, colors, useMediaQuery, DID, Tooltip, reactRouterDom, UxRelativeTime, Chip, Stack, groupBy, flatMap, uniqBy, trim, Avatar$1, BrokenImageIcon, react$1, Empty$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) {
   "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) => {
@@ -127,16 +127,58 @@ var __publicField = (obj, key, value) => {
   const getDraftSessionKeyPrefix = () => {
     return "comment-draft-";
   };
+  function lexicalRootToText(data) {
+    let parsedRoot = data;
+    if (typeof data === "string") {
+      try {
+        parsedRoot = JSON.parse(data).root;
+        if (typeof parsedRoot !== "object") {
+          return data;
+        }
+      } catch {
+        parsedRoot = {};
+      }
+    }
+    let text2 = "";
+    if (parsedRoot == null ? void 0 : parsedRoot.children) {
+      try {
+        parsedRoot.children.forEach((e) => {
+          if (e.text) {
+            text2 += e.text;
+          } else {
+            if (e.direction && text2 !== "") {
+              text2 += "\n";
+            }
+            text2 += lexicalRootToText(e);
+          }
+        });
+      } catch (err) {
+        console.error(`lexicalRootToText ${err == null ? void 0 : err.toString()}`);
+        console.error(err);
+      }
+    }
+    return text2;
+  }
+  const getExcerptFromLexicalContent = (content, size = 150) => {
+    const textContent = (lexicalRootToText(content) || "").trim();
+    return textContent.length > size ? `${textContent.slice(0, size)}` : textContent;
+  };
+  const mergeSx = (initial, sx) => {
+    const mergedSx = [initial, ...Array.isArray(sx) ? sx : [sx]];
+    return mergedSx;
+  };
   const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     blockletExists,
     copy,
     getBlockletMountPointInfo,
     getDraftSessionKeyPrefix,
+    getExcerptFromLexicalContent,
     getLastItem,
     getPreference,
     getResizedAvatar,
     inferDiscussKitApiPrefix,
+    mergeSx,
     minDelay,
     protectLogin,
     repairBase64Avatar,
@@ -584,28 +626,47 @@ var __publicField = (obj, key, value) => {
     }
     return /* @__PURE__ */ jsxRuntime.jsx(DidAvatar, { src: src ? getResizedAvatar(src) : src, ...rest });
   }
-  const Root$4 = Theme.styled(Box)`
+  const Root$4 = Theme.styled(AvatarGroup)`
   display: flex;
+  align-items: center;
   position: relative;
   z-index: 0;
   line-height: 1;
   .avatars-item {
     width: 16px;
     transition: width 0.1s ease-in-out;
+    & .image {
+      box-shadow: 0 0 0 2px #fff !important;
+    }
   }
-  .avatars-item:last-child {
-    width: 22px;
+
+  // use avatarGroup first is last
+  .avatars-item:first-child {
+    width: 24px;
+  }
+
+  .MuiAvatar-root {
+    width: 24px;
+    height: 24px;
+    z-index: 100;
+    margin-left: 0px;
+    font-size: 12px;
+    background-color: ${colors.grey[400]};
+    font-weight: 500;
+    border: none;
+    box-shadow: 0 0 0 2px #fff !important;
   }
+
   /* &:hover {
     gap: 4px;
     .avatars-item {
-      width: 22px;
+      width: 24px;
     }
   } */
 `;
-  function Avatars({ users, variant = "circle" }) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Root$4, { sx: { ".avatars-item + .avatars-item .image": { boxShadow: "0 0 0 2px #fff" } }, children: users.map((user, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "avatars-item", sx: { position: "relative", zIndex: index + 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { did: user.did, src: user.avatar, size: 22, shape: "circle", variant }) }, index);
+  function Avatars({ users, variant = "circle", ...restProps }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Root$4, { sx: { ".avatars-item + .avatars-item .image": { boxShadow: "0 0 0 2px #fff" } }, max: 999, ...restProps, children: users.map((user, index) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "avatars-item", sx: { position: "relative", zIndex: index + 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { did: user.did, src: user.avatar, size: 24, shape: "circle", variant }) }, index);
     }) });
   }
   function RelativeTime({ value, ...rest }) {
@@ -970,7 +1031,7 @@ var __publicField = (obj, key, value) => {
         return createdAt;
       }
       createdAt = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
-      return /* @__PURE__ */ jsxRuntime.jsx(RelativeTime, { value: createdAt });
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { component: RelativeTime, sx: { color: "text.secondary" }, value: createdAt });
     };
     const click = () => {
       setOpen(false);
@@ -1046,16 +1107,22 @@ 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.5, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did })
+        showDID && !(responsive && downMd) && /* @__PURE__ */ jsxRuntime.jsx(DID, { style: { lineHeight: 1.4, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did })
       ] })
     ] });
   }
-  const mdiBullhornVariantOutline = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: "M20 2v2L4 8V6H2v12h2v-2l2 .5v2C6 20.4 7.6 22 9.5 22s3.5-1.6 3.5-3.5v-.2l7 1.7v2h2V2h-2m-9 16.5c0 .8-.7 1.5-1.5 1.5S8 19.3 8 18.5V17l3 .8v.7m9-.5L4 14v-4l16-4v12Z" }) });
-  function SystemUser({ name = "System", showDidAddress = true, size = "normal", icon, ...rest }) {
+  function SystemUser({
+    name = "System",
+    showDidAddress = true,
+    showIcon = true,
+    size = "normal",
+    icon,
+    ...rest
+  }) {
     const sm = size === "sm";
-    const iconSize = sm ? 32 : 36;
+    const iconSize = sm ? 36 : 40;
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      showIcon && /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
           sx: {
@@ -1065,10 +1132,10 @@ var __publicField = (obj, key, value) => {
             width: iconSize,
             height: iconSize,
             color: "#fff",
-            bgcolor: "primary.dark",
+            bgcolor: "secondary.main",
             borderRadius: "100%"
           },
-          children: icon || /* @__PURE__ */ jsxRuntime.jsx(mdiBullhornVariantOutline, { style: { fontSize: size === "sm" ? 14 : 16 } })
+          children: icon || /* @__PURE__ */ jsxRuntime.jsx(NotificationsActiveOutlinedIcon, { sx: { fontSize: size === "sm" ? 16 : 18 } })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
@@ -1077,6 +1144,49 @@ var __publicField = (obj, key, value) => {
       ] })
     ] });
   }
+  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,
+          {
+            className: "message-content-text",
+            sx: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              width: 220,
+              fontWeight: "regular",
+              fontSize: 14
+            },
+            children: messageText
+          }
+        )
+      ] })
+    ] });
+  }
   const MAX_HEIGHT = 200;
   const Root$3 = Theme.styled("div")`
   &.markdown-viewer-collapsed .markdown-viewer-md-wrapper {
@@ -1303,7 +1413,7 @@ var __publicField = (obj, key, value) => {
     menuItems = customMenu ? customMenu(menuItems, postContext) : menuItems;
     const renderTime = () => {
       if (allowCopyLink) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "a", href: `#${post.id}`, sx: { color: "inherit", textDecoration: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(RelativeTime, { value: post.createdAt }) });
+        return /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "a", href: `#${post.id}`, sx: { color: "text.secondary", textDecoration: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(RelativeTime, { value: post.createdAt }) });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(RelativeTime, { value: post.createdAt });
     };
@@ -2110,7 +2220,7 @@ var __publicField = (obj, key, value) => {
           setState({ initialized: true });
           return;
         }
-        setState({ ...getInitialState(order ? { order } : {}), initialized: false });
+        setState({ ...getInitialState(), order: state.order, initialized: false });
         const fetchCommentPosition = () => api.fetchCommentPosition({
           id: highlightedRef.current,
           objectId: target.id,
@@ -2554,7 +2664,8 @@ var __publicField = (obj, key, value) => {
               }
             }
           ),
-          !!url && /* @__PURE__ */ jsxRuntime.jsx(
+          !!url && // add box because img can't add :after
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
             "img",
             {
               src: url ? composeImageUrl(url, width) : "",
@@ -2574,7 +2685,7 @@ var __publicField = (obj, key, value) => {
               onLoad: () => setLoaded(true),
               onError: () => setErrored(true)
             }
-          ),
+          ) }),
           (!url || errored) && /* @__PURE__ */ jsxRuntime.jsx(
             material.Box,
             {
@@ -3522,20 +3633,18 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx(ChatContext.Provider, { value, children });
   }
   function ChatList(props) {
+    const { t } = context.useLocaleContext();
     const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages } = useChatContext();
     const renderItem = (chat) => {
       if (chat.type === "notification") {
-        return /* @__PURE__ */ jsxRuntime.jsx(SystemUser, { name: "Notification" });
+        return /* @__PURE__ */ jsxRuntime.jsx(SystemUser, { name: t("chat.notification") });
       }
       if (chat.type === "dm") {
         const oppositeUser = getOppositeUser(chat);
-        return /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false });
+        return /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false, showBadge: false, showDID: false });
       }
       if (chat.type === "channel") {
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { component: "span", sx: { fontSize: 14 }, children: [
-          "# ",
-          chat.name
-        ] });
+        return /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", children: /* @__PURE__ */ jsxRuntime.jsx(ChannelGroup, { chat }) });
       }
       return null;
     };
@@ -3547,13 +3656,18 @@ var __publicField = (obj, key, value) => {
         {
           sx: {
             position: "relative",
-            p: 2,
+            m: 1,
+            py: 1.5,
+            px: 2,
             fontWeight: "bold",
-            color: isActiveChat ? "primary.contrastText" : "grey.700",
-            bgcolor: isActiveChat ? "primary.light" : "",
-            borderRadius: 2,
+            color: isActiveChat ? "secondary.main" : "grey.700",
+            bgcolor: isActiveChat ? "action.selected" : "",
+            borderRadius: 1,
             cursor: "pointer",
-            ...isActiveChat && { ".did-address-text": { color: "#fff!important" } }
+            ...isActiveChat && {
+              ".did-address-text": { color: "grey.500" },
+              ".message-content-text": { color: "grey.500" }
+            }
           },
           onClick: () => setActiveChat(chat),
           children: [
@@ -3622,21 +3736,12 @@ var __publicField = (obj, key, value) => {
       }
     );
   }
-  const getUrlHost = (url) => {
-    try {
-      const { host } = new URL(url);
-      return host;
-    } catch (e) {
-      return url;
-    }
-  };
   function NotificationMessage({ chat, message, prevMessage, ...rest }) {
     const { session } = useSessionContext();
     const { t } = context.useLocaleContext();
     const renderQuote = ({ title, excerpt, cover }) => {
       if ("post" in message) {
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { mt: 1.5, pl: 1, borderLeft: "4px solid #ddd", color: 14 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { fontSize: 13, color: "grey.500" }, children: getUrlHost(message.link) }),
+        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { color: 14, mt: 1 }, children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(
             Typography,
             {
@@ -3644,11 +3749,10 @@ var __publicField = (obj, key, value) => {
               variant: "h6",
               href: message.link,
               target: "_blank",
-              style: { fontSize: 14, color: "#2fafff" },
+              style: { fontSize: 14, color: "#2fafff", textDecoration: "none" },
               children: title
             }
           ),
-          excerpt && /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { overflow: "hidden" }, children: excerpt }),
           cover && // cover image
           /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { maxWidth: 200, mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
             Box,
@@ -3673,58 +3777,138 @@ var __publicField = (obj, key, value) => {
       return null;
     };
     const render = () => {
-      var _a2, _b2, _c;
+      var _a2, _b2, _c, _d, _e, _f, _g;
       if (message.type === "post_create") {
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: message.sourceUser.fullName }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("message.newPost") }),
-          renderQuote(message.post)
-        ] });
+        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
+            },
+            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") })
+              ] }),
+              renderQuote(message.post)
+            ]
+          }
+        );
       }
       if (message.type === "comment") {
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontWeight: "bold" }, 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) ? " commented your post:" : " commented post:" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", children: message.comment.excerpt }),
-          renderQuote(message.post)
-        ] });
+        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
+            },
+            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.jsx(Typography, { variant: "body1", sx: { fontSize: 16 }, children: (_c = message == null ? void 0 : message.comment) == null ? void 0 : _c.excerpt }),
+              renderQuote(message.post)
+            ]
+          }
+        );
       }
       if (message.type === "reply") {
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "grey.600", fontWeight: "bold" }, children: message.sourceUser.fullName }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: (message == null ? void 0 : message.recipient) === ((_c = session == null ? void 0 : session.user) == null ? void 0 : _c.did) ? " replied your comment:" : " replied comment:" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", children: message.reply.excerpt }),
-          renderQuote({ title: message.post.title, excerpt: message.comment.excerpt })
-        ] });
+        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
+            },
+            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 }),
+              renderQuote({ title: message.post.title, excerpt: message.comment.excerpt })
+            ]
+          }
+        );
       }
       if (message.type === "mentionInComment") {
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "grey.600", fontWeight: "bold" }, children: message.sourceUser.fullName }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: " mentioned you in a comment:" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", children: message.comment.excerpt }),
-          renderQuote(message.post)
-        ] });
+        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
+            },
+            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.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)
+            ]
+          }
+        );
       }
       if (message.type === "mentionInPost") {
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "grey.600", fontWeight: "bold" }, children: message.sourceUser.fullName }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: " mentioned you in a post:" })
-          ] }),
-          renderQuote(message.post)
-        ] });
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          Box,
+          {
+            sx: {
+              py: 1.5,
+              px: 2,
+              borderRadius: 1,
+              background: "#fff",
+              width: "fit-content",
+              maxWidth: "calc(100% - 16px)",
+              wordWrap: "break-word"
+            },
+            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") })
+              ] }),
+              renderQuote(message.post)
+            ]
+          }
+        );
       }
       if (message.type === "pointUp") {
         const { points, post, comment, eventKey = "" } = message;
-        const unit = points > 1 ? "points" : "point";
+        const unit = points > 1 ? t("chat.points") : t("chat.point");
         const event = eventKey ? `for ${eventKey.toLowerCase().replaceAll("-", " ")}: ` : ": ";
-        const tip = `🎉 You got ${points} ${unit} ${event}`;
+        const tip = t("chat.pointUp", { points, unit, event });
         return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "grey.600" }, children: tip }),
           comment && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body1", children: comment.excerpt }),
@@ -3733,24 +3917,39 @@ var __publicField = (obj, key, value) => {
       }
       if (message.type === "task") {
         const titles = {
-          open: " opened a post",
-          close: " closed a post",
-          assign: " assigned you to a post",
-          unassign: " unassigned you from a post"
+          open: t("chat.openTask"),
+          close: t("chat.closeTask"),
+          assign: t("chat.assignTask"),
+          unassign: t("chat.unassignTask")
         };
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: message.sourceUser.fullName }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: titles[message.subtype] })
-          ] }),
-          renderQuote(message.post)
-        ] });
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          Box,
+          {
+            sx: {
+              py: 1.5,
+              px: 2,
+              borderRadius: 1,
+              background: "#fff",
+              width: "fit-content",
+              maxWidth: "calc(100% - 16px)",
+              wordWrap: "break-word"
+            },
+            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] })
+              ] }),
+              renderQuote(message.post)
+            ]
+          }
+        );
       }
       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: "4px" }, children: dayjs(message.createdAt).format("MM-DD HH:mm") }) }),
+      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() })
     ] });
   }
@@ -3918,7 +4117,9 @@ var __publicField = (obj, key, value) => {
   }
   function ChatRoom({ chat, ...rest }) {
     var _a2;
-    const downSm = material.useMediaQuery((theme) => theme.breakpoints.down("sm"));
+    const { t } = context.useLocaleContext();
+    const theme = styles.useTheme();
+    const downSm = material.useMediaQuery((currentTheme) => currentTheme.breakpoints.down("sm"));
     const { initChatRoom, isActiveChat, getOppositeUser, sendMessage, joinChannel, leaveChannel, deleteChannel } = useChatContext();
     const { confirm } = useConfirm();
     const isActive = isActiveChat(chat.id);
@@ -3931,8 +4132,8 @@ var __publicField = (obj, key, value) => {
     }, [chat.isActivated]);
     const handleDeleteChannel = async () => {
       const proceed = await confirm({
-        title: "Delete this channel?",
-        description: "If you delete this channel, all messages in the channel will be deleted immediately.",
+        title: t("chat.deleteChannelTitle"),
+        description: t("chat.deleteChannelDesc"),
         okButtonProps: { color: "error" }
       });
       if (proceed) {
@@ -3941,38 +4142,32 @@ 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: "Notification", showDidAddress: false, size: "sm" }) });
+        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 }) });
       }
       if (chat.type === "dm") {
         const oppositeUser = getOppositeUser(chat);
-        return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Avatar, { did: oppositeUser.did, src: oppositeUser.avatar, size: 28, shape: "circle", variant: "circle" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, color: "grey.600", fontWeight: "bold" }, children: oppositeUser.fullName })
-        ] });
+        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 }) });
       }
       if (chat.type === "channel") {
         const menuItems = [];
         if (chat.hasJoined && !isCreator) {
           menuItems.push(
-            /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { onClick: () => leaveChannel(chat.id), children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "error.main" }, children: "Leave channel" }) }, "leave")
+            /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { onClick: () => leaveChannel(chat.id), children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.leaveChannel") }) }, "leave")
           );
         }
         if (isAdmin || isCreator) {
           menuItems.push(
-            /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "error.main" }, children: "Delete channel" }) }, "delete")
+            /* @__PURE__ */ jsxRuntime.jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.deleteChannel") }) }, "delete")
           );
         }
         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.jsxs(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700" }, children: [
-              "# ",
-              chat.name
-            ] }),
+            /* @__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.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: "Join channel" }),
-            !!chat.hasJoined && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Participants, { users: chat.participants }) }),
+            !chat.hasJoined && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "contained", color: "primary", onClick: () => joinChannel(chat.id), 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 })
           ] })
         ] });
@@ -4000,7 +4195,7 @@ var __publicField = (obj, key, value) => {
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(MessageList, { chat }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { sx: { flex: 1, overflow: "hidden", background: theme.palette.grey[50] }, children: /* @__PURE__ */ jsxRuntime.jsx(MessageList, { chat }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Box,
         {
@@ -4027,6 +4222,8 @@ var __publicField = (obj, key, value) => {
       name: "",
       description: ""
     });
+    const { t } = context.useLocaleContext();
+    const theme = styles.useTheme();
     const canSubmit = react.useMemo(() => {
       return state.name;
     }, [state]);
@@ -4039,35 +4236,70 @@ var __publicField = (obj, key, value) => {
         open,
         showCloseButton: true,
         maxWidth: "lg",
-        title: "New channel",
-        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { color: "inherit", variant: "contained", size: "small", onClick: onClose, children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { color: "primary", variant: "contained", size: "small", onClick: handleSubmit, disabled: !canSubmit, children: "Create" })
-        ] }),
+        title: t("chat.newChannel"),
+        sx: {
+          "& .MuiDialogContent-root": {
+            borderTop: `1px solid ${theme.palette.divider}`,
+            borderBottom: `1px solid ${theme.palette.divider}`
+          }
+        },
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            color: "primary",
+            sx: { mt: 1 },
+            variant: "contained",
+            size: "small",
+            onClick: handleSubmit,
+            disabled: !canSubmit,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { sx: { mr: 0.375 } }),
+              t("chat.create")
+            ]
+          }
+        ),
         onClose,
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { width: { xs: "100%", md: 600 }, minHeight: 140, children: [
+        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,
             {
-              label: "Name",
               value: state.name,
-              placeholder: "Channel 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,
             {
-              label: "Description",
               value: state.description,
-              placeholder: "Channel description",
-              size: "small",
+              placeholder: t("chat.channelDescription"),
               fullWidth: true,
+              multiline: true,
               onChange: (e) => setState({ description: e.target.value }),
-              sx: { mt: 2 }
+              sx: {
+                my: 1,
+                "& .MuiInputBase-root": {
+                  height: 64,
+                  display: "flex",
+                  alignItems: "flex-start",
+                  backgroundColor: theme.palette.grey[100]
+                },
+                "& .MuiInputBase-inputMultiline": {
+                  maxHeight: "100%",
+                  overflowY: "auto"
+                }
+              }
             }
           )
         ] })
@@ -4075,6 +4307,7 @@ var __publicField = (obj, key, value) => {
     );
   }
   function Empty({ sx }) {
+    const { t } = context.useLocaleContext();
     const mergedSx = [
       {
         display: "flex",
@@ -4088,26 +4321,27 @@ 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: "No chats" })
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold" }, children: t("chat.noChats") })
     ] });
   }
   function Chat({ sx, ...rest }) {
     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 webTitleMap = {
       dm: () => {
         var _a2;
-        return ((_a2 = getOppositeUser(activeChat)) == null ? void 0 : _a2.fullName) || "Unknown";
+        return ((_a2 = getOppositeUser(activeChat)) == null ? void 0 : _a2.fullName) || t("chat.unknown");
       },
-      notification: () => "Notification",
-      channel: () => (activeChat == null ? void 0 : activeChat.type) === "channel" ? `#${activeChat.name}` : "Unknown Channel",
-      default: () => "Chats"
+      notification: () => t("chat.notification"),
+      channel: () => (activeChat == null ? void 0 : activeChat.type) === "channel" ? `#${activeChat.name}` : t("chat.unknownChannel"),
+      default: () => t("chat.chats")
     };
     const getWebTitle = () => {
       if (!activeChat) {
-        return "Chats";
+        return t("chat.chats");
       }
       const getTitle = webTitleMap[activeChat.type] || webTitleMap.default;
       return getTitle();
@@ -4130,10 +4364,7 @@ var __publicField = (obj, key, value) => {
     if (!initialized) {
       return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, {});
     }
-    const mergedSx = [
-      { display: "flex", height: "100%", bgcolor: "#fff", borderRadius: 1 },
-      ...Array.isArray(sx) ? sx : [sx]
-    ];
+    const mergedSx = [{ display: "flex", height: "100%", bgcolor: "#fff" }, ...Array.isArray(sx) ? sx : [sx]];
     const handleNewChannel = async ({ name, description }) => {
       const saved = await client2.createChannel(name, description);
       const newChannel = { ...saved, hasJoined: true };
@@ -4165,11 +4396,15 @@ var __publicField = (obj, key, value) => {
                   borderBottom: "1px solid #e5e5e5"
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Back, { iconOnly: true, fallbackUrl: "/discussions" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 16, fontWeight: "bold" }, children: "Chats" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { onClick: () => setNewChannelVisible(true), children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Add, {}) }) })
+                  /* @__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(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsxRuntime.jsx(
+                    IconButton$1,
+                    {
+                      onClick: () => setNewChannelVisible(true),
+                      sx: { p: 1, borderRadius: 1, border: `1px solid ${colors.grey[200]}` },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Add, { sx: { color: "#000" } })
+                    }
+                  ) })
                 ]
               }
             ),
@@ -4596,7 +4831,7 @@ var __publicField = (obj, key, value) => {
   function ConfirmNavigation() {
     const { t } = context.useLocaleContext();
     const { dirty, reset } = DirtyPromptContainer.useContainer();
-    const blocker = reactRouterDom.unstable_useBlocker(dirty);
+    const blocker = reactRouterDom.useBlocker(dirty);
     react.useEffect(() => {
       if (blocker.state === "blocked" && !dirty) {
         blocker.reset();
@@ -4669,8 +4904,37 @@ var __publicField = (obj, key, value) => {
       timeout: "Request timeout: please retry the request later",
       error: "Oops, your request failed. Please try again"
     },
-    message: {
-      newPost: " create a new post:"
+    chat: {
+      notification: "Notification",
+      unknown: "Unknown",
+      chats: "Chats",
+      create: "Create",
+      channel: "Channel",
+      description: "Description",
+      newChannel: "New channel",
+      noChats: "No chats",
+      unknownChannel: "Unknown Channel",
+      channelDescription: "Channel Description",
+      channelName: "Channel Name",
+      deleteChannel: "Delete Channel",
+      commentedYourPost: "commented your post",
+      commentedPost: "commented post",
+      newPost: "create a new post",
+      mentionInComment: "mentioned you in a comment",
+      mentionInPost: "mentioned you in a post",
+      replyYourComment: "replied your comment",
+      replyComment: "replied comment",
+      deleteChannelTitle: "Delete this channel?",
+      deleteChannelDesc: "If you delete this channel, all messages in the channel will be deleted immediately.",
+      leaveChannel: "Leave channel",
+      joinChannel: "Join channel",
+      openTask: "opened a post",
+      closeTask: "closed a post",
+      assignTask: "assigned you to a post",
+      unassignTask: "unassigned you from a post",
+      points: "points",
+      point: "point",
+      pointUp: "🎉 You got {points} {unit} {event}"
     }
   };
   const zh = {
@@ -4715,8 +4979,37 @@ var __publicField = (obj, key, value) => {
       timeout: "请求超时: 请稍后重试",
       error: "哎呀，您的请求失败了，请稍后重试"
     },
-    message: {
-      newPost: " 创建了一个新的帖子:"
+    chat: {
+      notification: "通知",
+      unknown: "未命名",
+      chats: "聊天",
+      create: "创建",
+      channel: "频道",
+      description: "描述",
+      newChannel: "新的频道",
+      noChats: "暂无对话",
+      unknownChannel: "未命名的频道",
+      channelDescription: "频道描述",
+      channelName: "频道名称",
+      deleteChannel: "删除频道",
+      commentedYourPost: "评论了你的帖子",
+      commentedPost: "评论了帖子",
+      newPost: "创建了一个新的帖子:",
+      mentionInComment: "在评论里提及了你",
+      mentionInPost: "在帖子里提及了你",
+      replyYourComment: "回复了你的评论",
+      replyComment: "回复了评论",
+      deleteChannelTitle: "确认删除这个频道？",
+      deleteChannelDesc: "如果你要删除这个频道, 所有频道的消息都会立刻消除。",
+      leaveChannel: "离开频道",
+      joinChannel: "加入频道",
+      openTask: "创建了一个任务",
+      closeTask: "关闭了一个任务",
+      assignTask: "分配给你一个任务",
+      unassignTask: "取消给你分配的一个任务",
+      points: "分",
+      point: "分",
+      pointUp: "🎉 您获得了 {points} {unit} {event}"
     }
   };
   const translations = { zh, en };
@@ -10573,6 +10866,50 @@ var __publicField = (obj, key, value) => {
     display: none; /* Chrome, Safari and Opera */
   }
 `;
+  function SegmentedControl({ value, options, onChange, sx, ...rest }) {
+    const mergedSx = mergeSx(
+      {
+        display: "inline-flex",
+        borderRadius: "100vh",
+        bgcolor: "grey.100"
+      },
+      sx
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 0, sx: mergedSx, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+      material.ToggleButtonGroup,
+      {
+        size: "small",
+        value,
+        exclusive: true,
+        onChange: (_, v2) => onChange == null ? void 0 : onChange(v2),
+        sx: {
+          ".MuiToggleButtonGroup-grouped": {
+            m: 0.5,
+            px: 1.5,
+            border: 0,
+            borderRadius: "100vh",
+            lineHeight: 1.3,
+            textTransform: "none"
+          },
+          ".MuiToggleButtonGroup-grouped.Mui-selected": {
+            bgcolor: "#fff",
+            border: 1,
+            borderColor: "divider",
+            ":hover": {
+              bgcolor: "grey.50"
+            }
+          },
+          ".MuiToggleButtonGroup-middleButton, .MuiToggleButtonGroup-lastButton": {
+            marginLeft: "-1px",
+            borderLeft: "1px solid transparent"
+          }
+        },
+        children: options.map((x) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(material.ToggleButton, { value: x.value, children: x.label }, x.value);
+        })
+      }
+    ) });
+  }
   const BlockletEditor = react.lazy(() => import("@blocklet/editor"));
   const Root = material.styled(material.Box)`
   .be-editable,
@@ -10616,6 +10953,7 @@ 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;
@@ -10648,6 +10986,7 @@ var __publicField = (obj, key, value) => {
   exports2.RelativeTime = RelativeTime;
   exports2.ScrollableEditorWrapper = ScrollableEditorWrapper;
   exports2.SecureLabelPicker = SecureLabelPicker;
+  exports2.SegmentedControl = SegmentedControl;
   exports2.SystemUser = SystemUser;
   exports2.UnreadNotificationContext = UnreadNotificationContext;
   exports2.UnreadNotificationProvider = UnreadNotificationProvider;