@blocklet/discuss-kit-ux 1.6.188 → 1.6.191

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-import { N, j, Q, A, h, a8, B, y, F, z, H, ak, U, T, W, Y, o, C, q, v, x, a0, a1, ac, a3, K, L, D, ab, aa, E, G, b, f, a9, M, P, aj, n, m, a7, R, S, a4, al, k, Z, $, ad, ag, af, ah, am, J, an, l, p, r, e, t, a5, O, c, X, w, a2, a6, u, ai, ao, _, ae, d } from "./index-q1fCyaqz.mjs";
+import { O, k, T, A, j, a9, B, z, H, F, J, al, W, U, X, Z, q, C, v, w, y, a1, a2, ad, a4, L, N, D, ac, ab, E, G, b, h, aa, M, P, ak, o, n, a8, R, S, a5, am, m, _, a0, ae, ah, ag, ai, an, K, ao, l, p, r, f, t, a6, Q, c, Y, x, a3, a7, u, aj, d, ap, $, af, e } from "./index-OmtAwPz3.mjs";
 import "react/jsx-runtime";
 import "react";
 import "@mui/material/Box";
@@ -7,7 +7,6 @@ import "@mui/material/Button";
 import "@mui/lab/LoadingButton";
 import "@mui/icons-material";
 import "@arcblock/ux/lib/Locale/context";
-import "@arcblock/did-connect/lib/Session";
 import "@mui/material";
 import "@mui/material/styles";
 import "lodash/isNil";
@@ -40,6 +39,7 @@ import "@mui/material/Avatar";
 import "@mui/icons-material/BrokenImage";
 import "@iconify/react";
 import "@arcblock/ux/lib/Empty";
+import "@arcblock/did-connect/lib/Session";
 import "@mui/icons-material/NotificationsActiveOutlined";
 import "@blocklet/editor/lib/ext/CheckboxPlugin";
 import "@arcblock/did-connect/lib/Address";
@@ -71,77 +71,78 @@ import "js-cookie";
 import "@arcblock/ws";
 import "@emotion/css";
 export {
-  N as AccessControl,
-  j as AuthorInfo,
-  Q as AuthzProvider,
+  O as AccessControl,
+  k as AuthorInfo,
+  T as AuthzProvider,
   A as Avatar,
-  h as Avatars,
-  a8 as Back,
+  j as Avatars,
+  a9 as Back,
   B as Badge,
-  y as BinaryThumb,
-  F as BlogCard,
-  z as BlogList,
-  H as BlogPermaLink,
-  ak as ButtonGroup,
-  U as Chat,
-  T as ChatClient,
-  W as ChatHeaderAddon,
-  Y as ChatProvider,
-  o as Comment,
+  z as BinaryThumb,
+  H as BlogCard,
+  F as BlogList,
+  J as BlogPermaLink,
+  al as ButtonGroup,
+  W as Chat,
+  U as ChatClient,
+  X as ChatHeaderAddon,
+  Z as ChatProvider,
+  q as Comment,
   C as CommentInput,
-  q as CommentList,
-  v as CommentsContext,
-  x as CommentsProvider,
-  a0 as Confirm,
-  a1 as ConfirmContext,
-  ac as ConfirmNavigation,
-  a3 as ConfirmProvider,
-  K as CoverImage,
-  L as CoverImageUpload,
+  v as CommentList,
+  w as CommentsContext,
+  y as CommentsProvider,
+  a1 as Confirm,
+  a2 as ConfirmContext,
+  ad as ConfirmNavigation,
+  a4 as ConfirmProvider,
+  L as CoverImage,
+  N as CoverImageUpload,
   D as DefaultEditorConfigProvider,
-  ab as DirtyPromptContainer,
-  aa as EditorPreview,
+  ac as DirtyPromptContainer,
+  ab as EditorPreview,
   E as EmptyStatus,
   G as GithubReaction,
   b as Input,
-  f as InternalThemeProvider,
-  a9 as LazyEditor,
+  h as InternalThemeProvider,
+  aa as LazyEditor,
   M as Menu,
   P as Pagination,
-  aj as PointUpProvider,
-  n as Post,
-  m as PostContent,
-  a7 as PreviousLocationRecorder,
+  ak as PointUpProvider,
+  o as Post,
+  n as PostContent,
+  a8 as PreviousLocationRecorder,
   R as RelativeTime,
   S as ScrollableEditorWrapper,
-  a4 as SecureLabelPicker,
-  al as SegmentedControl,
-  k as SystemUser,
-  Z as UnreadNotificationContext,
-  $ as UnreadNotificationProvider,
-  ad as UploaderContext,
-  ag as UploaderProvider,
-  af as UploaderTrigger,
-  ah as composeImageUrl,
-  am as create,
-  J as getBlogLink,
-  an as getWsClient,
+  a5 as SecureLabelPicker,
+  am as SegmentedControl,
+  m as SystemUser,
+  _ as UnreadNotificationContext,
+  a0 as UnreadNotificationProvider,
+  ae as UploaderContext,
+  ah as UploaderProvider,
+  ag as UploaderTrigger,
+  ai as composeImageUrl,
+  an as create,
+  K as getBlogLink,
+  ao as getWsClient,
   l as lexicalUtils,
   p as preferences,
   r as routes,
-  e as themeOverrides,
+  f as themeOverrides,
   t as translations,
-  a5 as useApiErrorHandler,
-  O as useAuthzContext,
+  a6 as useApiErrorHandler,
+  Q as useAuthzContext,
   c as useChanged,
-  X as useChatContext,
-  w as useCommentsContext,
-  a2 as useConfirm,
-  a6 as useDefaultApiErrorHandler,
+  Y as useChatContext,
+  x as useCommentsContext,
+  a3 as useConfirm,
+  a7 as useDefaultApiErrorHandler,
   u as useNow,
-  ai as usePointUpContext,
-  ao as useSubscription,
-  _ as useUnreadNotification,
-  ae as useUploader,
-  d as utils
+  aj as usePointUpContext,
+  d as useSessionContext,
+  ap as useSubscription,
+  $ as useUnreadNotification,
+  af as useUploader,
+  e as utils
 };

package/dist/index.umd.js

@@ -451,7 +451,7 @@ var __publicField = (obj, key, value) => {
       ...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) || []]
         }
       }
     };
@@ -849,9 +849,13 @@ var __publicField = (obj, key, value) => {
     ] }) : null;
   }
   const useSessionContext = () => {
-    var _a2, _b2;
+    var _a2, _b2, _c, _d;
     const ctx = react.useContext(Session.SessionContext) || {};
     const loginRole = (_b2 = (_a2 = ctx == null ? void 0 : ctx.session) == null ? void 0 : _a2.user) == null ? void 0 : _b2.role;
+    const permissionSet = react.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),
@@ -861,6 +865,13 @@ var __publicField = (obj, key, value) => {
         }
         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));
       }
     };
   };
@@ -1011,7 +1022,16 @@ var __publicField = (obj, key, value) => {
       }
     );
   }
-  const HtmlTooltip$1 = styles.styled(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { ...props, classes: { popper: className } }))(() => ({
+  const HtmlTooltip$1 = styles.styled(({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+    Tooltip,
+    {
+      PopperProps: {
+        disablePortal: true
+      },
+      ...props,
+      classes: { popper: className }
+    }
+  ))(() => ({
     [`& .${Tooltip.tooltipClasses.tooltip}`]: {
       backgroundColor: "transparent",
       maxWidth: "initial"
@@ -1113,10 +1133,11 @@ var __publicField = (obj, key, value) => {
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize }, ...rest, children: [
       renderAvatar(),
-      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", flexDirection: "column", flex: 1 }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           Box,
           {
+            className: "author-info-title",
             sx: { display: "flex", alignItems: "center", minHeight: 20, flexWrap: "wrap", lineHeight: 1.5 },
             lineHeight: 1,
             children: [
@@ -1236,7 +1257,6 @@ var __publicField = (obj, key, value) => {
     content,
     editing = false,
     onExitEditing,
-    onCancel,
     onSubmit,
     autoCollapse,
     enableHeadingsIdPlugin,
@@ -1250,7 +1270,7 @@ var __publicField = (obj, key, value) => {
           sx: {
             ".be-editable": { maxHeight: 768, overflow: "auto", minHeight: `${Math.max(innerHeight, 200)}px !important` }
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(PostEdit, { content, onCancel, send: onSubmit, onSuccess: onExitEditing })
+          children: /* @__PURE__ */ jsxRuntime.jsx(PostEdit, { content, onCancel: onExitEditing, send: onSubmit, onSuccess: onExitEditing })
         }
       );
     }
@@ -1432,7 +1452,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Root$2, { sx: { position: "relative", mt: 2, py: 1 }, ...rest, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Box, { id: post.id, flex: "1", className: clsx({ "post-highlighted": isTargetPost && hasEnteredViewport }), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "start", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { user: post.author, createdAt: renderTime(), showProfileCard }),
+          /* @__PURE__ */ jsxRuntime.jsx(AuthorInfo, { size: "sm", user: post.author, createdAt: renderTime(), showProfileCard }),
           /* @__PURE__ */ jsxRuntime.jsx(Menu, { items: menuItems, style: { position: "absolute", right: 0, top: 0 } })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { ml: 5.5 }, children: [
@@ -1484,6 +1504,7 @@ var __publicField = (obj, key, value) => {
       renderExtraContent && renderExtraContent(postContext)
     ] });
   }
+  const tablerMessageCircle = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1.5, children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { strokeLinejoin: "round", d: "M7 20V9" })
@@ -1716,6 +1737,10 @@ var __publicField = (obj, key, value) => {
     }
   }
 `;
+  const tablerMoodPlus = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.985 12.528a9 9 0 1 0-8.45 8.456M16 19h6m-3-3v6M9 10h.01M15 10h.01" }),
+    /* @__PURE__ */ jsxRuntime.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"'
   };
@@ -1823,10 +1848,11 @@ var __publicField = (obj, key, value) => {
             sx: {
               lineHeight: "24px",
               fontSize: 13,
+              border: 1,
+              borderColor: "divider",
               borderRadius: 1,
               cursor: "pointer",
               ...selected && {
-                border: 1,
                 borderColor: "primary.light",
                 bgcolor: (theme) => material.alpha(theme.palette.primary.light, 0.2)
               }
@@ -1846,14 +1872,21 @@ var __publicField = (obj, key, value) => {
               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__ */ jsxRuntime.jsx(iconsMaterial.AddReactionOutlined, { sx: { fontSize: 20, color: "grey.600" }, onClick: handleOpen }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "github-reaction-text", component: tablerMoodPlus, sx: { fontSize: 18 } }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "github-reaction-text", component: "span", sx: { fontSize: 13 }, children: "Sticker" }),
               open && /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: () => setOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(
                 material.Box,
                 {
@@ -2037,23 +2070,36 @@ var __publicField = (obj, key, value) => {
     };
     const render = ({ post, interactive }) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { display: "flex", alignItems: "center", mt: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-          GithubReaction,
-          {
-            data: (post == null ? void 0 : post.rating) || [],
-            onRate: ({ value, ratingType }) => onRate(post, value, ratingType),
-            onUnrate: () => onUnrate(post),
-            append: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (!!(session == null ? void 0 : session.user) || preferences.displayReplyButtonForAnonymousUsers) && interactive && /* @__PURE__ */ jsxRuntime.jsx(
-              Box,
-              {
-                onClick: () => protectLogin(session, () => setInputVisible(!inputVisible)),
-                sx: { display: "flex", lineHeight: 1, "&:hover": { cursor: "pointer" } },
-                children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ChatBubbleOutlineOutlined, { sx: { fontSize: 18, color: "grey.600" } })
-              }
-            ) }),
-            interactive
-          }
-        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 3, mt: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { component: tablerMessageCircle, sx: { fontSize: 18, color: "text.secondary" } }),
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", children: "Reply" })
+              ]
+            }
+          )
+        ] }),
         inputVisible && /* @__PURE__ */ jsxRuntime.jsx(Box, { my: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
           CommentInput,
           {
@@ -2061,7 +2107,8 @@ var __publicField = (obj, key, value) => {
             onSuccess: () => setInputVisible(false),
             draftKey: `post-${post.id}`
           }
-        ) })
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { mt: 3 } })
       ] });
     };
     const renderExtraContent = ({ post }) => {
@@ -2641,7 +2688,7 @@ var __publicField = (obj, key, value) => {
             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)"
@@ -2722,7 +2769,7 @@ var __publicField = (obj, key, value) => {
                 height: 0,
                 pt: "56%",
                 overflow: "hidden",
-                borderRadius: 2,
+                borderRadius: 1,
                 bgcolor: "grey.300",
                 cursor: "pointer"
               },
@@ -3209,7 +3256,7 @@ var __publicField = (obj, key, value) => {
           alignItems: "center",
           border: "1px solid #bbb",
           borderRadius: 1,
-          boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+          overflow: "hidden"
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3218,10 +3265,10 @@ var __publicField = (obj, key, value) => {
               sx: {
                 display: "flex",
                 alignItems: "center",
-                width: 240,
+                width: 180,
                 alignSelf: "stretch",
-                px: 2,
-                bgcolor: "grey.300"
+                px: 1.25,
+                bgcolor: "grey.200"
               },
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 material.Box,
@@ -3233,10 +3280,11 @@ var __publicField = (obj, key, value) => {
                     width: 1,
                     overflow: "hidden",
                     whiteSpace: "nowrap",
-                    fontSize: 14,
                     border: 0,
                     bgcolor: "inherit",
-                    outline: "none"
+                    outline: "none",
+                    fontSize: 14,
+                    color: "text.secondary"
                   }
                 }
               )
@@ -3245,20 +3293,19 @@ var __publicField = (obj, key, value) => {
           /* @__PURE__ */ jsxRuntime.jsx(
             material.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__ */ jsxRuntime.jsx(
             material.IconButton,
             {
-              sx: { py: 1.25, px: 2 },
+              sx: { px: 1 },
               onClick: () => {
                 copy(joinUrl(prefix, slug));
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopy, { sx: { fontSize: 20 } })
+              children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopy, { sx: { fontSize: 18 } })
             }
           )
         ]
@@ -3769,6 +3816,9 @@ var __publicField = (obj, key, value) => {
         }
       }
     };
+    const renderPostContent = () => {
+      return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "author-chat-item", children: /* @__PURE__ */ jsxRuntime.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);
@@ -3796,10 +3846,18 @@ var __publicField = (obj, key, value) => {
               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"
               }
             }
           }
@@ -3820,17 +3878,21 @@ var __publicField = (obj, key, value) => {
               }
             }
           ),
-          !compactMessage && /* @__PURE__ */ jsxRuntime.jsx(
+          !compactMessage ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { sx: { ml: 6, width: "90%" }, children: /* @__PURE__ */ jsxRuntime.jsx(PostContent, { content: message.content }) })
+          ) : renderPostContent()
         ]
       }
     );
@@ -4122,6 +4184,7 @@ var __publicField = (obj, key, value) => {
     const isActive = isActiveChat(chat.id);
     const containerRef = react.useRef(null);
     const [isAtBottom, setIsAtBottom] = react.useState(true);
+    const [isLoadingMore, setIsLoadingMore] = react.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" });
@@ -4159,7 +4222,23 @@ var __publicField = (obj, key, value) => {
             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: [
@@ -4171,32 +4250,37 @@ var __publicField = (obj, key, value) => {
                   display: "flex",
                   justifyContent: "center",
                   py: 0.5,
-                  // 闪烁
-                  "@keyframes fade-in": {
-                    "0%": { opacity: 0 },
-                    "50%": { opacity: 1 },
-                    "100%": { opacity: 0 }
-                  }
+                  height: 40
                 },
                 children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(iconsMaterial.ArrowUpward, {}),
                     children: t("chat.loadMore")
@@ -4207,12 +4291,12 @@ var __publicField = (obj, key, value) => {
             chat.type !== "notification" && ((_a2 = chat.messages) == null ? void 0 : _a2.map((message, index) => {
               var _a3;
               const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
-              return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(Message, { message, prevMessage: prev }) }, message.id);
+              return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(Message, { message, prevMessage: prev }) }, message.id);
             })),
             chat.type === "notification" && ((_b2 = chat.messages) == null ? void 0 : _b2.map((message, index) => {
               var _a3;
               const prev = (_a3 = chat.messages) == null ? void 0 : _a3[index - 1];
-              return /* @__PURE__ */ jsxRuntime.jsx(Box, { id: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(
+              return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "message-item", id: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(
                 NotificationMessage,
                 {
                   chat,
@@ -4299,7 +4383,7 @@ var __publicField = (obj, key, value) => {
   };
   function Back({ url, fallbackUrl, iconOnly, sx, ...rest }) {
     const navigate = reactRouterDom.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 });
@@ -4318,8 +4402,7 @@ var __publicField = (obj, key, value) => {
       {
         onClick: handleClick,
         variant: "outlined",
-        color: "inherit",
-        size: "small",
+        color: "primary",
         startIcon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ArrowBackIos, { style: { fontSize: 13 } }),
         sx: mergedSx,
         ...rest,
@@ -11291,6 +11374,7 @@ var __publicField = (obj, key, value) => {
   exports2.useDefaultApiErrorHandler = useDefaultApiErrorHandler;
   exports2.useNow = useNow;
   exports2.usePointUpContext = usePointUpContext;
+  exports2.useSessionContext = useSessionContext;
   exports2.useSubscription = useSubscription;
   exports2.useUnreadNotification = useUnreadNotification;
   exports2.useUploader = useUploader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "1.6.188",
+  "version": "1.6.191",
   "files": [
     "dist"
   ],
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@arcblock/ws": "^1.18.113",
-    "@blocklet/editor": "1.6.188",
-    "@blocklet/labels": "1.6.188",
+    "@blocklet/editor": "1.6.191",
+    "@blocklet/labels": "1.6.191",
     "@blocklet/uploader": "^0.0.75",
     "@emotion/css": "^11.10.5",
     "@emotion/react": "^11.10.5",
@@ -94,5 +94,5 @@
   "resolutions": {
     "react": "^18.2.0"
   },
-  "gitHead": "7662e0b6e1a16e0129777feba8640acac2032a7b"
+  "gitHead": "e0bfe0bdc7ce8d39f4f3684f7170075025bbcb0a"
 }