@blocklet/discuss-kit-ux 1.6.174 → 1.6.176

package/dist/{index-XTjHijc6.mjs → index-7VREaKfa.mjs}

@@ -27,10 +27,12 @@ import Alert from "@mui/material/Alert";
 import isBoolean from "lodash/isBoolean";
 import Button from "@mui/material/Button";
 import DidAvatar from "@arcblock/did-connect/lib/Avatar";
+import AvatarGroup from "@mui/material/AvatarGroup";
+import { grey, green, amber } from "@mui/material/colors";
 import useMediaQuery$1 from "@mui/material/useMediaQuery";
 import DID from "@arcblock/ux/lib/DID";
 import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
-import { Link, useNavigate, useLocation, useSearchParams, unstable_useBlocker, useParams } from "react-router-dom";
+import { Link, useNavigate, useLocation, useSearchParams, useBlocker, useParams } from "react-router-dom";
 import UxRelativeTime from "@arcblock/ux/lib/RelativeTime";
 import Chip from "@mui/material/Chip";
 import Stack from "@mui/material/Stack";
@@ -42,10 +44,11 @@ import Avatar$1 from "@mui/material/Avatar";
 import BrokenImageIcon from "@mui/icons-material/BrokenImage";
 import { Icon } from "@iconify/react";
 import Empty$1 from "@arcblock/ux/lib/Empty";
-import { green } from "@mui/material/colors";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, Badge as Badge$1 } from "@mui/material";
+import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import DIDAddress from "@arcblock/did-connect/lib/Address";
+import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
+import Groups2RoundedIcon from "@mui/icons-material/Groups2Rounded";
 import CheckboxPlugin from "@blocklet/editor/lib/ext/CheckboxPlugin";
 import MuiMenuItem from "@mui/material/MenuItem";
 import clsx from "clsx";
@@ -65,6 +68,7 @@ import { Flipper, Flipped } from "react-flip-toolkit";
 import Fab from "@mui/material/Fab";
 import debounce from "lodash/debounce";
 import TextField from "@mui/material/TextField";
+import AddIcon from "@mui/icons-material/Add";
 import { AxiosError } from "axios";
 import Toast from "@arcblock/ux/lib/Toast";
 import MuiPagination from "@mui/material/Pagination";
@@ -190,16 +194,58 @@ const inferDiscussKitApiPrefix = () => {
 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 text = "";
+  if (parsedRoot == null ? void 0 : parsedRoot.children) {
+    try {
+      parsedRoot.children.forEach((e) => {
+        if (e.text) {
+          text += e.text;
+        } else {
+          if (e.direction && text !== "") {
+            text += "\n";
+          }
+          text += lexicalRootToText(e);
+        }
+      });
+    } catch (err) {
+      console.error(`lexicalRootToText ${err == null ? void 0 : err.toString()}`);
+      console.error(err);
+    }
+  }
+  return text;
+}
+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,
@@ -647,28 +693,47 @@ function Avatar({ src, ...rest }) {
   }
   return /* @__PURE__ */ jsx(DidAvatar, { src: src ? getResizedAvatar(src) : src, ...rest });
 }
-const Root$3 = styled(Box)`
+const Root$3 = 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: ${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__ */ jsx(Root$3, { sx: { ".avatars-item + .avatars-item .image": { boxShadow: "0 0 0 2px #fff" } }, children: users.map((user, index) => {
-    return /* @__PURE__ */ jsx(Box, { className: "avatars-item", sx: { position: "relative", zIndex: index + 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: user.did, src: user.avatar, size: 22, shape: "circle", variant }) }, index);
+function Avatars({ users, variant = "circle", ...restProps }) {
+  return /* @__PURE__ */ jsx(Root$3, { sx: { ".avatars-item + .avatars-item .image": { boxShadow: "0 0 0 2px #fff" } }, max: 999, ...restProps, children: users.map((user, index) => {
+    return /* @__PURE__ */ jsx(Box, { className: "avatars-item", sx: { position: "relative", zIndex: index + 1 }, children: /* @__PURE__ */ jsx(Avatar, { did: user.did, src: user.avatar, size: 24, shape: "circle", variant }) }, index);
   }) });
 }
 function RelativeTime({ value, ...rest }) {
@@ -1033,7 +1098,7 @@ function AuthorInfo({
       return createdAt;
     }
     createdAt = typeof createdAt === "string" ? new Date(createdAt) : createdAt;
-    return /* @__PURE__ */ jsx(RelativeTime, { value: createdAt });
+    return /* @__PURE__ */ jsx(Box, { component: RelativeTime, sx: { color: "text.secondary" }, value: createdAt });
   };
   const click = () => {
     setOpen(false);
@@ -1109,16 +1174,22 @@ function AuthorInfo({
         }
       ),
       showBadge && downMd && /* @__PURE__ */ jsx(Box, { mt: 0.5, children: BadgeRender }),
-      showDID && !(responsive && downMd) && /* @__PURE__ */ jsx(DID, { style: { lineHeight: 1.5, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did })
+      showDID && !(responsive && downMd) && /* @__PURE__ */ jsx(DID, { style: { lineHeight: 1.4, minHeight: 20, maxWidth: 250 }, size: 14, did: user == null ? void 0 : user.did })
     ] })
   ] });
 }
-const mdiBullhornVariantOutline = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ 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__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
-    /* @__PURE__ */ jsx(
+    showIcon && /* @__PURE__ */ jsx(
       Box,
       {
         sx: {
@@ -1128,10 +1199,10 @@ function SystemUser({ name = "System", showDidAddress = true, size = "normal", i
           width: iconSize,
           height: iconSize,
           color: "#fff",
-          bgcolor: "primary.dark",
+          bgcolor: "secondary.main",
           borderRadius: "100%"
         },
-        children: icon || /* @__PURE__ */ jsx(mdiBullhornVariantOutline, { style: { fontSize: size === "sm" ? 14 : 16 } })
+        children: icon || /* @__PURE__ */ jsx(NotificationsActiveOutlinedIcon, { sx: { fontSize: size === "sm" ? 16 : 18 } })
       }
     ),
     /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
@@ -1140,6 +1211,49 @@ function SystemUser({ name = "System", showDidAddress = true, size = "normal", i
     ] })
   ] });
 }
+function ChannelGroup({ size = "normal", chat, ...rest }) {
+  var _a2;
+  const sm = size === "sm";
+  const iconSize = sm ? 36 : 40;
+  const lastMessage = chat && chat.messages && chat.messages[chat.messages.length - 1];
+  const messageText = lastMessage ? `${(_a2 = lastMessage == null ? void 0 : lastMessage.sender) == null ? void 0 : _a2.fullName}: ${getExcerptFromLexicalContent(lastMessage == null ? void 0 : lastMessage.content)}` : "";
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: 14 }, ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: iconSize,
+          height: iconSize,
+          color: "#fff",
+          bgcolor: amber[200],
+          borderRadius: "100%"
+        },
+        children: /* @__PURE__ */ jsx(Groups2RoundedIcon, { sx: { fontSize: size === "sm" ? 16 : 18, color: amber[700] } })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center" }, lineHeight: 1, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: chat == null ? void 0 : chat.name }) }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          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$2 = styled("div")`
   &.markdown-viewer-collapsed .markdown-viewer-md-wrapper {
@@ -1366,7 +1480,7 @@ function PostComponent({
   menuItems = customMenu ? customMenu(menuItems, postContext) : menuItems;
   const renderTime = () => {
     if (allowCopyLink) {
-      return /* @__PURE__ */ jsx(Box, { component: "a", href: `#${post.id}`, sx: { color: "inherit", textDecoration: "none" }, children: /* @__PURE__ */ jsx(RelativeTime, { value: post.createdAt }) });
+      return /* @__PURE__ */ jsx(Box, { component: "a", href: `#${post.id}`, sx: { color: "text.secondary", textDecoration: "none" }, children: /* @__PURE__ */ jsx(RelativeTime, { value: post.createdAt }) });
     }
     return /* @__PURE__ */ jsx(RelativeTime, { value: post.createdAt });
   };
@@ -2173,7 +2287,7 @@ function CommentsProvider({
         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,
@@ -2617,7 +2731,8 @@ function CoverImage({
             }
           }
         ),
-        !!url && /* @__PURE__ */ jsx(
+        !!url && // add box because img can't add :after
+        /* @__PURE__ */ jsx(Box$1, { children: /* @__PURE__ */ jsx(
           "img",
           {
             src: url ? composeImageUrl(url, width) : "",
@@ -2637,7 +2752,7 @@ function CoverImage({
             onLoad: () => setLoaded(true),
             onError: () => setErrored(true)
           }
-        ),
+        ) }),
         (!url || errored) && /* @__PURE__ */ jsx(
           Box$1,
           {
@@ -3585,20 +3700,18 @@ function ChatProvider({ client: client2, activeChatId, children }) {
   return /* @__PURE__ */ jsx(ChatContext.Provider, { value, children });
 }
 function ChatList(props) {
+  const { t } = useLocaleContext();
   const { orderedChats, activeChatId, setActiveChat, getOppositeUser, hasUnreadMessages } = useChatContext();
   const renderItem = (chat) => {
     if (chat.type === "notification") {
-      return /* @__PURE__ */ jsx(SystemUser, { name: "Notification" });
+      return /* @__PURE__ */ jsx(SystemUser, { name: t("chat.notification") });
     }
     if (chat.type === "dm") {
       const oppositeUser = getOppositeUser(chat);
-      return /* @__PURE__ */ jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false });
+      return /* @__PURE__ */ jsx(AuthorInfo, { user: oppositeUser, showProfileCard: false, showBadge: false, showDID: false });
     }
     if (chat.type === "channel") {
-      return /* @__PURE__ */ jsxs(Box, { component: "span", sx: { fontSize: 14 }, children: [
-        "# ",
-        chat.name
-      ] });
+      return /* @__PURE__ */ jsx(Box, { component: "span", children: /* @__PURE__ */ jsx(ChannelGroup, { chat }) });
     }
     return null;
   };
@@ -3610,13 +3723,18 @@ function ChatList(props) {
       {
         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: [
@@ -3685,21 +3803,12 @@ function Message({ message, showTime = true, ...rest }) {
     }
   );
 }
-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 } = useLocaleContext();
   const renderQuote = ({ title, excerpt, cover }) => {
     if ("post" in message) {
-      return /* @__PURE__ */ jsxs(Box, { sx: { mt: 1.5, pl: 1, borderLeft: "4px solid #ddd", color: 14 }, children: [
-        /* @__PURE__ */ jsx(Box, { sx: { fontSize: 13, color: "grey.500" }, children: getUrlHost(message.link) }),
+      return /* @__PURE__ */ jsxs(Box, { sx: { color: 14, mt: 1 }, children: [
         title && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -3707,11 +3816,10 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
             variant: "h6",
             href: message.link,
             target: "_blank",
-            style: { fontSize: 14, color: "#2fafff" },
+            style: { fontSize: 14, color: "#2fafff", textDecoration: "none" },
             children: title
           }
         ),
-        excerpt && /* @__PURE__ */ jsx(Box, { sx: { overflow: "hidden" }, children: excerpt }),
         cover && // cover image
         /* @__PURE__ */ jsx(Box, { sx: { maxWidth: 200, mt: 1 }, children: /* @__PURE__ */ jsx(
           Box,
@@ -3736,58 +3844,138 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
     return null;
   };
   const render = () => {
-    var _a2, _b2, _c;
+    var _a2, _b2, _c, _d, _e, _f, _g;
     if (message.type === "post_create") {
-      return /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: message.sourceUser.fullName }),
-        /* @__PURE__ */ jsx("span", { children: t("message.newPost") }),
-        renderQuote(message.post)
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            py: 1.5,
+            px: 2,
+            background: "#fff",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            wordWrap: "break-word",
+            borderRadius: 1
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "tabler:news", style: { height: 15, width: 15, marginRight: 4 } }),
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+              /* @__PURE__ */ jsx("span", { children: t("chat.newPost") })
+            ] }),
+            renderQuote(message.post)
+          ]
+        }
+      );
     }
     if (message.type === "comment") {
-      return /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: message.sourceUser.fullName }),
-          /* @__PURE__ */ jsx("span", { children: ((_a2 = message == null ? void 0 : message.sourceUser) == null ? void 0 : _a2.did) === ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) ? " commented your post:" : " commented post:" })
-        ] }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: message.comment.excerpt }),
-        renderQuote(message.post)
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            py: 1.5,
+            px: 2,
+            background: "#fff",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            wordWrap: "break-word",
+            borderRadius: 1
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+              /* @__PURE__ */ jsx("span", { children: ((_a2 = message == null ? void 0 : message.sourceUser) == null ? void 0 : _a2.did) === ((_b2 = session == null ? void 0 : session.user) == null ? void 0 : _b2.did) ? t("chat.commentedYourPost") : t("chat.commentedPost") })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.600", fontWeight: "bold" }, children: message.sourceUser.fullName }),
-          /* @__PURE__ */ 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__ */ jsx(Typography, { variant: "body1", children: message.reply.excerpt }),
-        renderQuote({ title: message.post.title, excerpt: message.comment.excerpt })
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            py: 1.5,
+            px: 2,
+            background: "#fff",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            wordWrap: "break-word",
+            borderRadius: 1
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+              /* @__PURE__ */ jsx("span", { children: (message == null ? void 0 : message.recipient) === ((_d = session == null ? void 0 : session.user) == null ? void 0 : _d.did) ? t("chat.replyYourComment") : t("chat.replyComment") })
+            ] }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", children: message.reply.excerpt }),
+            renderQuote({ title: message.post.title, excerpt: message.comment.excerpt })
+          ]
+        }
+      );
     }
     if (message.type === "mentionInComment") {
-      return /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.600", fontWeight: "bold" }, children: message.sourceUser.fullName }),
-          /* @__PURE__ */ jsx("span", { children: " mentioned you in a comment:" })
-        ] }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body1", children: message.comment.excerpt }),
-        renderQuote(message.post)
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            py: 1.5,
+            px: 2,
+            background: "#fff",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            wordWrap: "break-word",
+            borderRadius: 1
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                " ",
+                t("chat.mentionInComment")
+              ] })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.600", fontWeight: "bold" }, children: message.sourceUser.fullName }),
-          /* @__PURE__ */ jsx("span", { children: " mentioned you in a post:" })
-        ] }),
-        renderQuote(message.post)
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            py: 1.5,
+            px: 2,
+            borderRadius: 1,
+            background: "#fff",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            wordWrap: "break-word"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "tabler:message-circle-2", style: { height: 15, width: 15, marginRight: 4 } }),
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+              /* @__PURE__ */ jsx("span", { children: t("chat.mentionInPost") })
+            ] }),
+            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__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "grey.600" }, children: tip }),
         comment && /* @__PURE__ */ jsx(Typography, { variant: "body1", children: comment.excerpt }),
@@ -3796,24 +3984,39 @@ function NotificationMessage({ chat, message, prevMessage, ...rest }) {
     }
     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__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: "bold" }, children: message.sourceUser.fullName }),
-          /* @__PURE__ */ jsx("span", { children: titles[message.subtype] })
-        ] }),
-        renderQuote(message.post)
-      ] });
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            py: 1.5,
+            px: 2,
+            borderRadius: 1,
+            background: "#fff",
+            width: "fit-content",
+            maxWidth: "calc(100% - 16px)",
+            wordWrap: "break-word"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "row", alignItems: "center", color: "primary.light" }, children: [
+              /* @__PURE__ */ jsx(Icon, { icon: "tabler:arrow-forward-up", style: { height: 15, width: 15, marginRight: 4 } }),
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: { mr: 0.5 }, children: message.sourceUser.fullName }),
+              /* @__PURE__ */ jsx("span", { children: titles[message.subtype] })
+            ] }),
+            renderQuote(message.post)
+          ]
+        }
+      );
     }
     return /* @__PURE__ */ jsx(Message, { message, showTime: false });
   };
   const messageInterval = message.createdAt.getTime() - ((prevMessage == null ? void 0 : prevMessage.createdAt.getTime()) || 0);
   return /* @__PURE__ */ jsxs(Box, { ...rest, sx: { mt: 2 }, children: [
-    messageInterval > 6e4 && /* @__PURE__ */ jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-block", px: 1, fontSize: 12, bgcolor: "grey.300", borderRadius: "4px" }, children: dayjs(message.createdAt).format("MM-DD HH:mm") }) }),
+    messageInterval > 6e4 && /* @__PURE__ */ jsx(Box, { sx: { my: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-block", px: 1, fontSize: 12, bgcolor: "grey.300", borderRadius: 0.5 }, children: dayjs(message.createdAt).format("MM-DD HH:mm") }) }),
     /* @__PURE__ */ jsx(Box, { sx: { p: 2, fontSize: 14, "&:hover": { bgcolor: "grey.50" } }, children: render() })
   ] });
 }
@@ -3981,7 +4184,9 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
 }
 function ChatRoom({ chat, ...rest }) {
   var _a2;
-  const downSm = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const { t } = useLocaleContext();
+  const theme = useTheme();
+  const downSm = useMediaQuery((currentTheme) => currentTheme.breakpoints.down("sm"));
   const { initChatRoom, isActiveChat, getOppositeUser, sendMessage, joinChannel, leaveChannel, deleteChannel } = useChatContext();
   const { confirm } = useConfirm();
   const isActive = isActiveChat(chat.id);
@@ -3994,8 +4199,8 @@ function ChatRoom({ chat, ...rest }) {
   }, [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) {
@@ -4004,38 +4209,32 @@ function ChatRoom({ chat, ...rest }) {
   };
   const renderRoomHeader = () => {
     if (chat.type === "notification") {
-      return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: /* @__PURE__ */ jsx(SystemUser, { name: "Notification", showDidAddress: false, size: "sm" }) });
+      return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: /* @__PURE__ */ jsx(SystemUser, { name: t("chat.notification"), showDidAddress: false, size: "sm", showIcon: false }) });
     }
     if (chat.type === "dm") {
       const oppositeUser = getOppositeUser(chat);
-      return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: [
-        /* @__PURE__ */ jsx(Avatar, { did: oppositeUser.did, src: oppositeUser.avatar, size: 28, shape: "circle", variant: "circle" }),
-        /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, color: "grey.600", fontWeight: "bold" }, children: oppositeUser.fullName })
-      ] });
+      return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1, flex: 1 }, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, color: "grey.600", fontWeight: "bold" }, children: oppositeUser.fullName }) });
     }
     if (chat.type === "channel") {
       const menuItems = [];
       if (chat.hasJoined && !isCreator) {
         menuItems.push(
-          /* @__PURE__ */ jsx(Menu.Item, { onClick: () => leaveChannel(chat.id), children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: "Leave channel" }) }, "leave")
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: () => leaveChannel(chat.id), children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.leaveChannel") }) }, "leave")
         );
       }
       if (isAdmin || isCreator) {
         menuItems.push(
-          /* @__PURE__ */ jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: "Delete channel" }) }, "delete")
+          /* @__PURE__ */ jsx(Menu.Item, { onClick: handleDeleteChannel, children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: "error.main" }, children: t("chat.deleteChannel") }) }, "delete")
         );
       }
       return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", width: 1, flex: 1 }, children: [
         /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700" }, children: [
-            "# ",
-            chat.name
-          ] }),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold", color: "grey.700" }, children: chat.name }),
           /* @__PURE__ */ jsx(Box, { sx: { fontSize: 12, color: "grey.500" }, children: chat.description })
         ] }),
         /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          !chat.hasJoined && /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => joinChannel(chat.id), children: "Join channel" }),
-          !!chat.hasJoined && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Participants, { users: chat.participants }) }),
+          !chat.hasJoined && /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => joinChannel(chat.id), children: t("chat.joinChannel") }),
+          chat.hasJoined && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Participants, { users: chat.participants, sx: { border: "none" } }) }),
           /* @__PURE__ */ jsx(Menu, { items: menuItems })
         ] })
       ] });
@@ -4063,7 +4262,7 @@ function ChatRoom({ chat, ...rest }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { sx: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }),
+    /* @__PURE__ */ jsx(Box, { sx: { flex: 1, overflow: "hidden", background: theme.palette.grey[50] }, children: /* @__PURE__ */ jsx(MessageList, { chat }) }),
     /* @__PURE__ */ jsx(
       Box,
       {
@@ -4090,6 +4289,8 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
     name: "",
     description: ""
   });
+  const { t } = useLocaleContext();
+  const theme = useTheme();
   const canSubmit = useMemo(() => {
     return state.name;
   }, [state]);
@@ -4102,35 +4303,70 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
       open,
       showCloseButton: true,
       maxWidth: "lg",
-      title: "New channel",
-      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "contained", size: "small", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ 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__ */ jsxs(
+        Button,
+        {
+          color: "primary",
+          sx: { mt: 1 },
+          variant: "contained",
+          size: "small",
+          onClick: handleSubmit,
+          disabled: !canSubmit,
+          children: [
+            /* @__PURE__ */ jsx(AddIcon, { sx: { mr: 0.375 } }),
+            t("chat.create")
+          ]
+        }
+      ),
       onClose,
       ...rest,
-      children: /* @__PURE__ */ jsxs(Box, { width: { xs: "100%", md: 600 }, minHeight: 140, children: [
+      children: /* @__PURE__ */ jsxs(Box, { width: { xs: "100%", md: 560 }, minHeight: 140, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { fontSize: 14, lineHeight: 3, fontWeight: "medium", mb: 1 }, children: t("chat.channel") }),
         /* @__PURE__ */ jsx(
           TextField,
           {
-            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__ */ jsx(Box, { sx: { fontSize: 14, lineHeight: 3, fontWeight: "medium", mt: 1 }, children: t("chat.description") }),
         /* @__PURE__ */ 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"
+              }
+            }
           }
         )
       ] })
@@ -4138,6 +4374,7 @@ function NewChannelDialog({ open, onSubmit, onClose, ...rest }) {
   );
 }
 function Empty({ sx }) {
+  const { t } = useLocaleContext();
   const mergedSx = [
     {
       display: "flex",
@@ -4151,26 +4388,27 @@ function Empty({ sx }) {
   ];
   return /* @__PURE__ */ jsxs(Box, { sx: mergedSx, children: [
     /* @__PURE__ */ jsx(iconoirChatBubbleEmpty, { style: { fontSize: 32 } }),
-    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontSize: 14, fontWeight: "bold" }, children: "No chats" })
+    /* @__PURE__ */ 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] = useState(false);
   const downMd = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const { t } = useLocaleContext();
   const activeChat = chats.filter((chat) => (chat == null ? void 0 : chat.id) === activeChatId)[0];
   const 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();
@@ -4193,10 +4431,7 @@ function Chat({ sx, ...rest }) {
   if (!initialized) {
     return /* @__PURE__ */ 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 };
@@ -4228,11 +4463,15 @@ function Chat({ sx, ...rest }) {
                 borderBottom: "1px solid #e5e5e5"
               },
               children: [
-                /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-                  /* @__PURE__ */ jsx(Back, { iconOnly: true, fallbackUrl: "/discussions" }),
-                  /* @__PURE__ */ jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 16, fontWeight: "bold" }, children: "Chats" })
-                ] }),
-                /* @__PURE__ */ jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsx(IconButton$1, { onClick: () => setNewChannelVisible(true), children: /* @__PURE__ */ jsx(Add, {}) }) })
+                /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: /* @__PURE__ */ jsx(Typography, { component: "span", variant: "subtitle1", sx: { fontSize: 16, fontWeight: "bold" }, children: t("chat.chats") }) }),
+                /* @__PURE__ */ jsx(AccessControl, { roles: ["owner", "admin"], children: /* @__PURE__ */ jsx(
+                  IconButton$1,
+                  {
+                    onClick: () => setNewChannelVisible(true),
+                    sx: { p: 1, borderRadius: 1, border: `1px solid ${grey[200]}` },
+                    children: /* @__PURE__ */ jsx(Add, { sx: { color: "#000" } })
+                  }
+                ) })
               ]
             }
           ),
@@ -4583,7 +4822,7 @@ function Pagination({
     }
   );
 }
-const Editor = lazy(() => import("./editor-8X1A2syI.mjs"));
+const Editor = lazy(() => import("./editor-tuTpD7pf.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -4659,7 +4898,7 @@ const DirtyPromptContainer = createContainer(useDirtyPrompt);
 function ConfirmNavigation() {
   const { t } = useLocaleContext();
   const { dirty, reset } = DirtyPromptContainer.useContainer();
-  const blocker = unstable_useBlocker(dirty);
+  const blocker = useBlocker(dirty);
   useEffect(() => {
     if (blocker.state === "blocked" && !dirty) {
       blocker.reset();
@@ -4732,8 +4971,37 @@ const en = {
     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 = {
@@ -4778,8 +5046,37 @@ const zh = {
     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 };
@@ -10636,60 +10933,106 @@ const Group = css`
     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__ */ jsx(Paper, { elevation: 0, sx: mergedSx, ...rest, children: /* @__PURE__ */ jsx(
+    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__ */ jsx(ToggleButton, { value: x.value, children: x.label }, x.value);
+      })
+    }
+  ) });
+}
 export {
-  UnreadNotificationProvider as $,
+  useUnreadNotification as $,
   Avatar as A,
   Badge as B,
   CommentInput as C,
   DefaultEditorConfigProvider as D,
   EmptyStatus as E,
-  BlogCard as F,
+  BlogListWrapper as F,
   GithubReaction as G,
-  BlogPermaLink as H,
+  BlogCard as H,
   ImagePathFixerPlugin as I,
-  getBlogLink as J,
-  CoverImage as K,
-  CoverImageUpload as L,
+  BlogPermaLink as J,
+  getBlogLink as K,
+  CoverImage as L,
   Menu as M,
-  AccessControl as N,
-  useAuthzContext as O,
+  CoverImageUpload as N,
+  AccessControl as O,
   Pagination as P,
-  AuthzProvider as Q,
+  useAuthzContext as Q,
   RelativeTime as R,
   ScrollableEditorWrapper as S,
-  ChatClient as T,
-  Chat as U,
+  AuthzProvider as T,
+  ChatClient as U,
   VideoPathFixerPlugin as V,
-  ChatHeaderAddon as W,
-  useChatContext as X,
-  ChatProvider as Y,
-  UnreadNotificationContext as Z,
-  useUnreadNotification as _,
+  Chat as W,
+  ChatHeaderAddon as X,
+  useChatContext as Y,
+  ChatProvider as Z,
+  UnreadNotificationContext as _,
   isEmptyContent as a,
-  Confirm as a0,
-  ConfirmContext as a1,
-  useConfirm as a2,
-  ConfirmProvider as a3,
-  SecureLabelPicker as a4,
-  useApiErrorHandler as a5,
-  useDefaultApiErrorHandler as a6,
-  PreviousLocationRecorder as a7,
-  Back as a8,
-  LazyEditor as a9,
-  EditorPreview as aa,
-  DirtyPromptContainer as ab,
-  ConfirmNavigation as ac,
-  UploaderContext as ad,
-  useUploader as ae,
-  UploaderTrigger as af,
-  UploaderProvider as ag,
-  composeImageUrl as ah,
-  usePointUpContext as ai,
-  PointUpProvider as aj,
-  ButtonGroup as ak,
-  create as al,
-  getWsClient as am,
-  useSubscription as an,
+  UnreadNotificationProvider as a0,
+  Confirm as a1,
+  ConfirmContext as a2,
+  useConfirm as a3,
+  ConfirmProvider as a4,
+  SecureLabelPicker as a5,
+  useApiErrorHandler as a6,
+  useDefaultApiErrorHandler as a7,
+  PreviousLocationRecorder as a8,
+  Back as a9,
+  LazyEditor as aa,
+  EditorPreview as ab,
+  DirtyPromptContainer as ac,
+  ConfirmNavigation as ad,
+  UploaderContext as ae,
+  useUploader as af,
+  UploaderTrigger as ag,
+  UploaderProvider as ah,
+  composeImageUrl as ai,
+  usePointUpContext as aj,
+  PointUpProvider as ak,
+  ButtonGroup as al,
+  SegmentedControl as am,
+  create as an,
+  getWsClient as ao,
+  useSubscription as ap,
   Input as b,
   useChanged as c,
   utils as d,
@@ -10701,18 +11044,18 @@ export {
   AuthorInfo as j,
   SystemUser as k,
   lexical as l,
-  PostContent as m,
-  PostComponent as n,
-  Comment as o,
+  ChannelGroup as m,
+  PostContent as n,
+  PostComponent as o,
   preferences as p,
-  CommentList as q,
+  Comment as q,
   routes as r,
   stringify as s,
   translations as t,
   useNow as u,
-  CommentsContext as v,
-  useCommentsContext as w,
-  CommentsProvider as x,
-  BinaryThumb as y,
-  BlogListWrapper as z
+  CommentList as v,
+  CommentsContext as w,
+  useCommentsContext as x,
+  CommentsProvider as y,
+  BinaryThumb as z
 };