@blocklet/discuss-kit-ux 1.6.188 → 1.6.191

package/dist/{index-q1fCyaqz.mjs → index-OmtAwPz3.mjs}

@@ -8,7 +8,7 @@ var _a, _b;
 import { Labels2, LabelPicker } from "@blocklet/labels";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme, ThemeProvider, styled } from "@mui/material/styles";
-import { useEffect, useRef, lazy, useState, createElement, useContext, isValidElement, Suspense, useMemo, createContext, Fragment as Fragment$1, forwardRef, useCallback } from "react";
+import { useEffect, useRef, lazy, useState, createElement, useContext, useMemo, isValidElement, Suspense, createContext, Fragment as Fragment$1, forwardRef, useCallback } from "react";
 import Box from "@mui/material/Box";
 import isNil from "lodash/isNil";
 import { useEditorConfig, EditorConfigProvider } from "@blocklet/editor/lib/config";
@@ -20,7 +20,7 @@ import { ImageNode } from "@blocklet/editor/lib/main/nodes/ImageNode";
 import { VideoNode } from "@blocklet/editor/lib/ext/VideoPlugin/VideoNode";
 import { useSize, useInViewport, useSetState, useGetState, useReactive } from "ahooks";
 import LoadingButton from "@mui/lab/LoadingButton";
-import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, AddReactionOutlined, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
+import { Send, Save, ChatBubbleOutlineOutlined, MoreVert, NavigateNext, DeleteOutlineOutlined, ContentCopy, ArrowUpward, ArrowDownward, ArrowBackIos, Add, BorderColorOutlined } from "@mui/icons-material";
 import { LocaleContext, useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Alert from "@mui/material/Alert";
 import isBoolean from "lodash/isBoolean";
@@ -45,7 +45,7 @@ import BrokenImageIcon from "@mui/icons-material/BrokenImage";
 import { Icon } from "@iconify/react";
 import Empty$1 from "@arcblock/ux/lib/Empty";
 import { SessionContext } from "@arcblock/did-connect/lib/Session";
-import { useTheme as useTheme$1, useMediaQuery, Box as Box$1, Tooltip as Tooltip$1, Chip as Chip$1, alpha, ClickAwayListener, Dialog as Dialog$1, DialogTitle, DialogContent, DialogActions, DialogContentText, Button as Button$1, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { 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, Divider, Skeleton, IconButton as IconButton$2, InputBase, tooltipClasses as tooltipClasses$1, Badge as Badge$1, Paper, ToggleButtonGroup, ToggleButton } from "@mui/material";
 import NotificationsActiveOutlinedIcon from "@mui/icons-material/NotificationsActiveOutlined";
 import CheckboxPlugin from "@blocklet/editor/lib/ext/CheckboxPlugin";
 import DIDAddress from "@arcblock/did-connect/lib/Address";
@@ -518,7 +518,7 @@ const Input = ({
     ...editorConfig,
     ...inSmallView && {
       toolbar: {
-        items: ["block", "italic", "bold", "underline", "media", ...((_a2 = editorConfig == null ? void 0 : editorConfig.toolbar) == null ? void 0 : _a2.items) || []]
+        items: ["component", "block", "italic", "bold", "underline", "media", ...((_a2 = editorConfig == null ? void 0 : editorConfig.toolbar) == null ? void 0 : _a2.items) || []]
       }
     }
   };
@@ -916,9 +916,13 @@ function Badge({
   ] }) : null;
 }
 const useSessionContext = () => {
-  var _a2, _b2;
+  var _a2, _b2, _c, _d;
   const ctx = useContext(SessionContext) || {};
   const loginRole = (_b2 = (_a2 = ctx == null ? void 0 : ctx.session) == null ? void 0 : _a2.user) == null ? void 0 : _b2.role;
+  const permissionSet = useMemo(() => {
+    var _a3, _b3;
+    return new Set(((_b3 = (_a3 = ctx.session) == null ? void 0 : _a3.user) == null ? void 0 : _b3.permissions) || []);
+  }, [(_d = (_c = ctx.session) == null ? void 0 : _c.user) == null ? void 0 : _d.permissions]);
   return {
     ...ctx,
     isAdmin: ["admin", "owner"].includes(loginRole),
@@ -928,6 +932,13 @@ const useSessionContext = () => {
       }
       const passportsArr = Array.isArray(passports) ? passports : [passports];
       return passportsArr.includes(loginRole);
+    },
+    hasAnyPermission: (perms) => {
+      if (!perms || perms.length === 0) {
+        return true;
+      }
+      const permsArr = Array.isArray(perms) ? perms : [perms];
+      return permsArr.some((item) => permissionSet.has(item));
     }
   };
 };
@@ -1078,7 +1089,16 @@ function ProfileCard({ user, click, ...rest }) {
     }
   );
 }
-const HtmlTooltip$1 = styled(({ className, ...props }) => /* @__PURE__ */ jsx(Tooltip, { ...props, classes: { popper: className } }))(() => ({
+const HtmlTooltip$1 = styled(({ className, ...props }) => /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    PopperProps: {
+      disablePortal: true
+    },
+    ...props,
+    classes: { popper: className }
+  }
+))(() => ({
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: "transparent",
     maxWidth: "initial"
@@ -1180,10 +1200,11 @@ function AuthorInfo({
   );
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize }, ...rest, children: [
     renderAvatar(),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
       /* @__PURE__ */ jsxs(
         Box,
         {
+          className: "author-info-title",
           sx: { display: "flex", alignItems: "center", minHeight: 20, flexWrap: "wrap", lineHeight: 1.5 },
           lineHeight: 1,
           children: [
@@ -1303,7 +1324,6 @@ function PostContent({
   content,
   editing = false,
   onExitEditing,
-  onCancel,
   onSubmit,
   autoCollapse,
   enableHeadingsIdPlugin,
@@ -1317,7 +1337,7 @@ function PostContent({
         sx: {
           ".be-editable": { maxHeight: 768, overflow: "auto", minHeight: `${Math.max(innerHeight, 200)}px !important` }
         },
-        children: /* @__PURE__ */ jsx(PostEdit, { content, onCancel, send: onSubmit, onSuccess: onExitEditing })
+        children: /* @__PURE__ */ jsx(PostEdit, { content, onCancel: onExitEditing, send: onSubmit, onSuccess: onExitEditing })
       }
     );
   }
@@ -1499,7 +1519,7 @@ function PostComponent({
   return /* @__PURE__ */ jsxs(Root$1, { sx: { position: "relative", mt: 2, py: 1 }, ...rest, children: [
     /* @__PURE__ */ jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }), children: [
       /* @__PURE__ */ jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [
-        /* @__PURE__ */ jsx(AuthorInfo, { user: post.author, createdAt: renderTime(), showProfileCard }),
+        /* @__PURE__ */ jsx(AuthorInfo, { size: "sm", user: post.author, createdAt: renderTime(), showProfileCard }),
         /* @__PURE__ */ jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
       ] }),
       /* @__PURE__ */ jsxs(Box, { sx: { ml: 5.5 }, children: [
@@ -1551,6 +1571,7 @@ function PostComponent({
     renderExtraContent && renderExtraContent(postContext)
   ] });
 }
+const tablerMessageCircle = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "m3 20l1.3-3.9C1.976 12.663 2.874 8.228 6.4 5.726c3.526-2.501 8.59-2.296 11.845.48c3.255 2.777 3.695 7.266 1.029 10.501C16.608 19.942 11.659 20.922 7.7 19z" }) });
 const iconoirThumbsUp = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.5, children: [
   /* @__PURE__ */ jsx("path", { d: "M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z" }),
   /* @__PURE__ */ jsx("path", { strokeLinejoin: "round", d: "M7 20V9" })
@@ -1783,6 +1804,10 @@ const IconButtonRoot = styled$1("div")`
     }
   }
 `;
+const tablerMoodPlus = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [
+  /* @__PURE__ */ jsx("path", { d: "M20.985 12.528a9 9 0 1 0-8.45 8.456M16 19h6m-3-3v6M9 10h.01M15 10h.01" }),
+  /* @__PURE__ */ jsx("path", { d: "M9.5 15c.658.64 1.56 1 2.5 1s1.842-.36 2.5-1" })
+] }) });
 const emojiFont = {
   fontFamily: '"Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color"'
 };
@@ -1890,10 +1915,11 @@ function GithubReaction({
           sx: {
             lineHeight: "24px",
             fontSize: 13,
+            border: 1,
+            borderColor: "divider",
             borderRadius: 1,
             cursor: "pointer",
             ...selected && {
-              border: 1,
               borderColor: "primary.light",
               bgcolor: (theme) => alpha(theme.palette.primary.light, 0.2)
             }
@@ -1913,14 +1939,21 @@ function GithubReaction({
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
-            width: 28,
-            height: 28,
-            ml: -0.5,
-            cursor: "pointer"
-            // ':hover': { bgcolor: 'grey.100' },
+            gap: 0.75,
+            ml: -0.25,
+            cursor: "pointer",
+            fontWeight: "medium",
+            ".github-reaction-text": {
+              color: "text.secondary"
+            },
+            "&:hover .github-reaction-text": {
+              color: "secondary.main"
+            }
           },
+          onClick: handleOpen,
           children: [
-            /* @__PURE__ */ jsx(AddReactionOutlined, { sx: { fontSize: 20, color: "grey.600" }, onClick: handleOpen }),
+            /* @__PURE__ */ jsx(Box$1, { className: "github-reaction-text", component: tablerMoodPlus, sx: { fontSize: 18 } }),
+            /* @__PURE__ */ jsx(Box$1, { className: "github-reaction-text", component: "span", sx: { fontSize: 13 }, children: "Sticker" }),
             open && /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsx(
               Box$1,
               {
@@ -2104,23 +2137,36 @@ function Comment({
   };
   const render = ({ post, interactive }) => {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", mt: 1, children: /* @__PURE__ */ jsx(
-        GithubReaction,
-        {
-          data: (post == null ? void 0 : post.rating) || [],
-          onRate: ({ value, ratingType }) => onRate(post, value, ratingType),
-          onUnrate: () => onUnrate(post),
-          append: /* @__PURE__ */ jsx(Fragment, { children: (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsx(
-            Box,
-            {
-              onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
-              sx: { display: "flex", lineHeight: 1, "&:hover": { cursor: "pointer" } },
-              children: /* @__PURE__ */ jsx(ChatBubbleOutlineOutlined, { sx: { fontSize: 18, color: "grey.600" } })
-            }
-          ) }),
-          interactive
-        }
-      ) }),
+      /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 3, mt: 1 }, children: [
+        /* @__PURE__ */ jsx(
+          GithubReaction,
+          {
+            data: (post == null ? void 0 : post.rating) || [],
+            onRate: ({ value, ratingType }) => onRate(post, value, ratingType),
+            onUnrate: () => onUnrate(post),
+            interactive
+          }
+        ),
+        (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.75,
+              fontSize: 13,
+              color: "text.secondary",
+              lineHeight: 1,
+              "&:hover": { cursor: "pointer" }
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box, { component: tablerMessageCircle, sx: { fontSize: 18, color: "text.secondary" } }),
+              /* @__PURE__ */ jsx(Box, { component: "span", children: "Reply" })
+            ]
+          }
+        )
+      ] }),
       inputVisible && /* @__PURE__ */ jsx(Box, { my: 2, children: /* @__PURE__ */ jsx(
         CommentInput,
         {
@@ -2128,7 +2174,8 @@ function Comment({
           onSuccess: () => setInputVisible(false),
           draftKey: `post-${post.id}`
         }
-      ) })
+      ) }),
+      /* @__PURE__ */ jsx(Divider, { sx: { mt: 3 } })
     ] });
   };
   const renderExtraContent = ({ post }) => {
@@ -2708,7 +2755,7 @@ function CoverImage({
           pt: `${100 / aspectRatio}%`,
           overflow: "hidden",
           position: "relative",
-          borderRadius: 2,
+          borderRadius: 1,
           ...shadow && { boxShadow: "rgb(0 0 0 / 12%) 0px 8px 30px" },
           // https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari
           transform: "translateZ(0)"
@@ -2789,7 +2836,7 @@ function CoverImageUpload({ url, onChange, ...rest }) {
               height: 0,
               pt: "56%",
               overflow: "hidden",
-              borderRadius: 2,
+              borderRadius: 1,
               bgcolor: "grey.300",
               cursor: "pointer"
             },
@@ -3276,7 +3323,7 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
         alignItems: "center",
         border: "1px solid #bbb",
         borderRadius: 1,
-        boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+        overflow: "hidden"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -3285,10 +3332,10 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
             sx: {
               display: "flex",
               alignItems: "center",
-              width: 240,
+              width: 180,
               alignSelf: "stretch",
-              px: 2,
-              bgcolor: "grey.300"
+              px: 1.25,
+              bgcolor: "grey.200"
             },
             children: /* @__PURE__ */ jsx(
               Box$1,
@@ -3300,10 +3347,11 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
                   width: 1,
                   overflow: "hidden",
                   whiteSpace: "nowrap",
-                  fontSize: 14,
                   border: 0,
                   bgcolor: "inherit",
-                  outline: "none"
+                  outline: "none",
+                  fontSize: 14,
+                  color: "text.secondary"
                 }
               }
             )
@@ -3312,20 +3360,19 @@ function BlogPermaLink({ slug, onChange, ...rest }) {
         /* @__PURE__ */ jsx(
           InputBase,
           {
-            className: "blog-link",
             value: slug,
             onChange: (e) => onChange(e.target.value),
-            sx: { ml: 1, flex: 1 }
+            sx: { ml: 0.5, flex: 1, bgcolor: "transparent", input: { py: 1, fontSize: 14 } }
           }
         ),
         /* @__PURE__ */ jsx(
           IconButton$2,
           {
-            sx: { py: 1.25, px: 2 },
+            sx: { px: 1 },
             onClick: () => {
               copy(joinUrl(prefix, slug));
             },
-            children: /* @__PURE__ */ jsx(ContentCopy, { sx: { fontSize: 20 } })
+            children: /* @__PURE__ */ jsx(ContentCopy, { sx: { fontSize: 18 } })
           }
         )
       ]
@@ -3836,6 +3883,9 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
       }
     }
   };
+  const renderPostContent = () => {
+    return /* @__PURE__ */ jsx(Box, { className: "author-chat-item", children: /* @__PURE__ */ jsx(PostContent, { content: message.content }) });
+  };
   const menuItems = [];
   const isSender = message.sender.did === ((_a2 = session == null ? void 0 : session.user) == null ? void 0 : _a2.did);
   const messageDate = new Date(message.createdAt);
@@ -3863,10 +3913,18 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
             display: "flex !important"
           }
         },
+        ".author-info-title": {
+          fontSize: 14,
+          fontWeight: 500
+        },
+        ".author-chat-item": {
+          ml: compactMessage ? 6 : 0,
+          width: "90%"
+        },
         ...{
           ".be-editable": {
             "& > *:last-child": {
-              marginBottom: "0em !important"
+              mb: "0 !important"
             }
           }
         }
@@ -3887,17 +3945,21 @@ function Message({ message, prevMessage, showTime = true, ...rest }) {
             }
           }
         ),
-        !compactMessage && /* @__PURE__ */ jsx(
+        !compactMessage ? /* @__PURE__ */ jsx(
           AuthorInfo,
           {
             showBadge: false,
             showProfileCard: true,
+            showDID: false,
             user: message.sender,
             createdAt: showTime ? message.createdAt : void 0,
-            size: "sm"
+            size: "sm",
+            style: {
+              alignItems: "flex-start"
+            },
+            children: renderPostContent()
           }
-        ),
-        /* @__PURE__ */ jsx(Box, { sx: { ml: 6, width: "90%" }, children: /* @__PURE__ */ jsx(PostContent, { content: message.content }) })
+        ) : renderPostContent()
       ]
     }
   );
@@ -4189,6 +4251,7 @@ function MessageList({ chat, ...rest }) {
   const isActive = isActiveChat(chat.id);
   const containerRef = useRef(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const scrollToBottom = () => {
     var _a3, _b3;
     (_b3 = containerRef.current) == null ? void 0 : _b3.scrollTo({ top: ((_a3 = containerRef.current) == null ? void 0 : _a3.scrollHeight) || 0, behavior: "smooth" });
@@ -4226,7 +4289,23 @@ function MessageList({ chat, ...rest }) {
           py: 2.5,
           px: 1.25,
           gap: 1,
-          background: "rgba(249, 250, 251, 1)"
+          background: "rgba(249, 250, 251, 1)",
+          // 闪烁
+          "@keyframes blinking": {
+            "0%": { opacity: 0 },
+            "50%": { opacity: 1 },
+            "100%": { opacity: 0 }
+          },
+          // 渐变显示
+          "@keyframes fade-in": {
+            "0%": { opacity: 0 },
+            "100%": { opacity: 1 }
+          },
+          // 用于弱化消息渲染闪烁
+          ".message-item": {
+            animation: "fade-in 0.2s linear",
+            animationIterationCount: 1
+          }
         },
         ref: containerRef,
         children: [
@@ -4238,32 +4317,37 @@ function MessageList({ chat, ...rest }) {
                 display: "flex",
                 justifyContent: "center",
                 py: 0.5,
-                // 闪烁
-                "@keyframes fade-in": {
-                  "0%": { opacity: 0 },
-                  "50%": { opacity: 1 },
-                  "100%": { opacity: 0 }
-                }
+                height: 40
               },
               children: /* @__PURE__ */ jsx(
-                Button,
+                LoadingButton,
                 {
                   variant: "text",
                   color: "inherit",
+                  loadingPosition: "start",
+                  loading: isLoadingMore,
                   onClick: async () => {
-                    await loadMessages(chat.id, chat.nextCursor);
-                    setTimeout(() => {
-                      var _a3, _b3;
+                    var _a3, _b3;
+                    try {
+                      setIsLoadingMore(true);
+                      const firstChatId = (_b3 = (_a3 = chat.messages) == null ? void 0 : _a3[0]) == null ? void 0 : _b3.id;
+                      const firstChatMessage = document.getElementById(firstChatId);
                       const divider = document.createElement("div");
-                      divider.style.animation = "fade-in 1s linear";
+                      divider.style.animation = "blinking 1s linear";
                       divider.style.animationIterationCount = "5";
                       divider.style.borderTop = "1px solid #e5e5e5";
                       divider.style.opacity = "0";
                       divider.style.height = "0";
-                      const insertBeforeElement = document.getElementById(chat.nextCursor);
-                      (_a3 = insertBeforeElement == null ? void 0 : insertBeforeElement.parentElement) == null ? void 0 : _a3.insertBefore(divider, insertBeforeElement);
-                      (_b3 = containerRef.current) == null ? void 0 : _b3.scrollTo({ top: divider.offsetTop - 140, behavior: "smooth" });
-                    }, 100);
+                      await loadMessages(chat.id, chat.nextCursor);
+                      setTimeout(() => {
+                        var _a4, _b4;
+                        (_a4 = containerRef.current) == null ? void 0 : _a4.insertBefore(divider, firstChatMessage);
+                        (_b4 = containerRef.current) == null ? void 0 : _b4.scrollTo({ top: divider.offsetTop - 40 - 16 - 1 });
+                      }, 20);
+                    } catch (error) {
+                    } finally {
+                      setIsLoadingMore(false);
+                    }
                   },
                   startIcon: /* @__PURE__ */ jsx(ArrowUpward, {}),
                   children: t("chat.loadMore")
@@ -4274,12 +4358,12 @@ function MessageList({ chat, ...rest }) {
           chat.type !== "notification" && ((_a2 = chat.messages) == null ? void 0 : _a2.map((message, index) => {
             var _a3;
             const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
-            return /* @__PURE__ */ jsx(Box, { id: message.id, children: /* @__PURE__ */ jsx(Message, { message, prevMessage: prev }) }, message.id);
+            return /* @__PURE__ */ jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(Message, { message, prevMessage: prev }) }, message.id);
           })),
           chat.type === "notification" && ((_b2 = chat.messages) == null ? void 0 : _b2.map((message, index) => {
             var _a3;
             const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
-            return /* @__PURE__ */ jsx(Box, { id: message.id, children: /* @__PURE__ */ jsx(
+            return /* @__PURE__ */ jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsx(
               NotificationMessage,
               {
                 chat,
@@ -4366,7 +4450,7 @@ const PreviousLocationRecorder = () => {
 };
 function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
   const navigate = useNavigate();
-  const mergedSx = [{ color: "grey.600" }, ...Array.isArray(sx) ? sx : [sx]];
+  const mergedSx = [{}, ...Array.isArray(sx) ? sx : [sx]];
   const handleClick = () => {
     if (url) {
       navigate(url, { replace: true });
@@ -4385,8 +4469,7 @@ function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
     {
       onClick: handleClick,
       variant: "outlined",
-      color: "inherit",
-      size: "small",
+      color: "primary",
       startIcon: /* @__PURE__ */ jsx(ArrowBackIos, { style: { fontSize: 13 } }),
       sx: mergedSx,
       ...rest,
@@ -5093,7 +5176,7 @@ function Pagination({
     }
   );
 }
-const Editor = lazy(() => import("./editor-1S0suIcX.mjs"));
+const Editor = lazy(() => import("./editor-E23ceKmd.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, {}),
@@ -11259,83 +11342,84 @@ function SegmentedControl({ value, options, onChange, sx, ...rest }) {
   ) });
 }
 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,
-  SegmentedControl as al,
-  create as am,
-  getWsClient as an,
-  useSubscription as ao,
+  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,
-  themeOverrides as e,
-  InternalThemeProvider as f,
+  useSessionContext as d,
+  utils as e,
+  themeOverrides as f,
   getExcerptSync as g,
-  Avatars as h,
+  InternalThemeProvider as h,
   inferInitialEditorState as i,
-  AuthorInfo as j,
-  SystemUser as k,
+  Avatars as j,
+  AuthorInfo as k,
   lexical as l,
-  PostContent as m,
-  PostComponent as n,
-  Comment as o,
+  SystemUser 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
 };

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export * from './components/editor';
 export * as lexicalUtils from './components/lexical';
 export * from './components/dirty-prompt';
 export { translations } from './components/locale';
-export { useNow, useChanged } from './components/hooks';
+export { useNow, useChanged, useSessionContext } from './components/hooks';
 export * as utils from './components/utils';
 export * as routes from './components/routes';
 export { default as preferences } from './preferences';