@blocklet/discuss-kit-ux 1.6.189 → 1.6.191

package/dist/{editor-2xtEiiWT.mjs → editor-E23ceKmd.mjs}

@@ -4,7 +4,7 @@ import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangeP
 import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
 import { SafeAreaPlugin } from "@blocklet/editor/lib/ext/SafeAreaPlugin";
 import { lazy } from "react";
-import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-XoHU_Puz.mjs";
+import { i as inferInitialEditorState, I as ImagePathFixerPlugin, V as VideoPathFixerPlugin, a as isEmptyContent, s as stringify, g as getExcerptSync } from "./index-OmtAwPz3.mjs";
 import "@blocklet/labels";
 import "@mui/material/styles";
 import "@mui/material/Box";

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

@@ -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) || []]
       }
     }
   };
@@ -1089,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"
@@ -1191,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: [
@@ -3873,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);
@@ -3900,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"
             }
           }
         }
@@ -3924,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()
       ]
     }
   );
@@ -4226,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" });
@@ -4263,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: [
@@ -4275,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")
@@ -4311,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,
@@ -5129,7 +5176,7 @@ function Pagination({
     }
   );
 }
-const Editor = lazy(() => import("./editor-2xtEiiWT.mjs"));
+const Editor = lazy(() => import("./editor-E23ceKmd.mjs"));
 function LazyEditor(props) {
   const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Skeleton, {}),

package/dist/index.es.js

@@ -1,5 +1,5 @@
 export * from "@blocklet/labels";
-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-XoHU_Puz.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";

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) || []]
         }
       }
     };
@@ -1022,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"
@@ -1124,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: [
@@ -3806,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);
@@ -3833,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"
               }
             }
           }
@@ -3857,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()
         ]
       }
     );
@@ -4159,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" });
@@ -4196,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: [
@@ -4208,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")
@@ -4244,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit-ux",
-  "version": "1.6.189",
+  "version": "1.6.191",
   "files": [
     "dist"
   ],
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@arcblock/ws": "^1.18.113",
-    "@blocklet/editor": "1.6.189",
-    "@blocklet/labels": "1.6.189",
+    "@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": "9dc3cda97f297d5f4818c0b7a7e0daa1e588d1dd"
+  "gitHead": "e0bfe0bdc7ce8d39f4f3684f7170075025bbcb0a"
 }