@blocklet/discuss-kit 2.5.31 → 2.5.33

package/lib/cjs/comments.js

@@ -1,8 +1,8 @@
-"use strict";const n=require("react/jsx-runtime"),f=require("react"),Q=require("@arcblock/ux/lib/Theme"),t=require("prop-types"),X=require("@arcblock/did-connect-react/lib/Session"),l=require("@mui/material"),D=require("@arcblock/ux/lib/Locale/context"),Y=require("react-error-boundary"),a=require("@blocklet/discuss-kit-ux"),Z=require("ahooks"),ee=require("./components/error-fallback.js"),te=require("./locales/index.js"),ne=require("./lib/utils.js"),r=require("./api.js"),oe=require("./hooks/topic-info-sync.js"),se=()=>{const e=s=>s.endsWith("/")?s:`${s}/`;return window.blocklet?.componentMountPoints?.find(s=>e(s.mountPoint)===e(window.blocklet?.prefix))?.title},u=e=>({...e,rootId:e.rootCommentId,createdAt:e.createdAt?new Date(e.createdAt):null,updatedAt:e.updatedAt?new Date(e.updatedAt):null,deletedAt:e.deletedAt?new Date(e.deletedAt):null,pinnedAt:e.pinnedAt?new Date(e.pinnedAt):null,replies:e.replies?.map(u)}),ie={fetchComments:async e=>{const o={...e,embed:e.rootId?"rating":"replies,rating",size:e.limit},{data:{data:s,nextCursor:c,total:x}}=await r.default.get("/comments",{params:o});return{data:s?.map(u),nextCursor:c,total:x}},fetchPinnedComments:async e=>{const{data:o}=await r.default.get("/comments/pinned",{params:{objectId:e}});return(o?.data||[]).map(u)},fetchCommentPosition:async({id:e,...o})=>{const{data:s}=await r.default.get(`/comments/${e}/position`,{params:o});return s},deleteComment:async({id:e})=>{const{data:o}=await r.default.delete(`/comments/${e}`);return o},updateComment:async({id:e,updatedAt:o},s)=>{const{data:c}=await r.default.put(`/comments/${e}`,{content:s,updatedAt:o});return u(c)},reply:async({id:e},o)=>{const{data:s}=await r.default.post("/comments/replies",{content:o,parentId:e,link:window.location.href});return u(s)},rate:async(e,o,s)=>{await r.default.post(`/topics/${e.topicId}/comments/${e.id}/ratings`,{ratingType:s,value:o})},unrate:async e=>{await r.default.delete(`/topics/${e.topicId}/comments/${e.id}/ratings`)},fetchRatings:async e=>{const{data:o}=await r.default.get(`/ratings/${e}`);return o},togglePin:async({post:e,value:o})=>{o?await r.default.put(`/posts/${e.id}/pinned`):await r.default.delete(`/posts/${e.id}/pinned`)}},re=()=>{const[e,o]=f.useState(!0);return Z.useRequest(()=>r.default.get("/status",{muteError:!0}).then(()=>o(!0)).catch(()=>o(!1)),{cacheKey:"discuss-kit-status",staleTime:-1}),{available:e}};function K({ref:e=void 0,displayReaction:o=!0,object:s,onChange:c=()=>{},onSendComment:x=()=>{},commentInputPosition:h="top",autoFocus:y=!1,disabledSend:j=void 0,initialContent:A="",sendText:q="",sendIcon:v=null,showTopbar:S=!0,sendComment:C=null,reactionAppend:I=null,skeleton:P=null,placeholder:k="",onInput:T=()=>{},draftKey:b="",inputSx:g={},editorRef:w=null,disableCmdEnter:O=!1}){a.useDefaultApiErrorHandler({request:r.default});const{available:U}=re(),{session:E}=f.useContext(X.SessionContext)||{},{state:B,sort:W,add:M,updateCommentState:N,interactive:$,findById:z,renderInnerFooter:G}=a.useCommentsContext(),{total:R,order:_,initialized:H}=B,{t:p}=D.useLocaleContext();oe.useTopicInfoSync(s);const V={ADD_COMMENT:i=>{M(u(i)),c?.()},UPDATE_COMMENT:i=>{const d=z(i.id);d&&d.content!==i.content&&N(i.id,m=>(m.content=i.content,m.updatedAt=i.updatedAt,m.synced=Date.now(),m))},RATING_COMMENT:async({commentId:i})=>{const d=await r.fetchRatings(i);N(i,m=>({...m,rating:d}))}};if(a.useSubscription(s.id,({event:i,data:d})=>{V[i]?.(d)},[s.id,B]),!U)return n.jsxs(l.Alert,{severity:"info",children:[n.jsx(l.AlertTitle,{children:p("apiUnavailable.title")}),p("apiUnavailable.desc")]});if(!H)return P||n.jsx(l.Box,{sx:{width:"100%",display:"flex",justifyContent:"center"},children:n.jsx(l.CircularProgress,{})});const J=async i=>{const{data:d}=await(C?C({content:i,object:s}):r.default.post("/comments",{content:i,object:s}));M(u(d)),x?.(d)},F=()=>n.jsx(f.Suspense,{fallback:n.jsxs(n.Fragment,{children:[n.jsx(l.Skeleton,{}),n.jsx(l.Skeleton,{width:"80%"}),n.jsx(l.Skeleton,{width:"60%"}),n.jsx(l.Skeleton,{width:"40%"})]}),children:n.jsx(a.CommentInput,{editorRef:w,placeholder:k,send:J,draftKey:b||`object-${s.id}`,autoFocus:y,disabledSend:j,initialContent:A,sendText:q,sendIcon:v,renderInnerFooter:G,onChange:T,disableCmdEnter:O})});return n.jsxs(ae,{ref:e,children:[n.jsxs(n.Fragment,{children:[n.jsx(l.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"end"},children:o&&n.jsxs(a.IconButtonGroup,{sx:{alignItems:"flex-end"},children:[n.jsx(a.GithubReactionContainer,{id:s.id,request:r.default,interactive:$}),I]})}),E.user&&$&&h==="top"&&n.jsx(l.Box,{className:"comment-editor",sx:{mt:2},children:F()})]}),!!R&&S&&n.jsxs(l.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mt:3},children:[n.jsxs(l.Box,{sx:{fontWeight:"medium"},children:[R>0?`${R} ${p("comments")}`:p("comment")," "]}),n.jsx(a.SegmentedControl,{value:_,options:[{value:"desc",label:p("newest")},{value:"asc",label:p("oldest")}],onChange:i=>W(i)})]}),n.jsx(a.CommentList,{className:"comment-list"}),E.user&&$&&h==="bottom"&&n.jsx(l.Box,{sx:{mt:6,...g},children:F()})]})}K.propTypes={ref:t.any,displayReaction:t.bool,object:t.object.isRequired,onChange:t.func,onSendComment:t.func,disabledSend:t.bool,autoFocus:t.bool,initialContent:t.string,sendText:t.string,sendIcon:t.node,commentInputPosition:t.oneOf(["top","bottom"]),showTopbar:t.bool,sendComment:t.func,reactionAppend:t.any,skeleton:t.node,placeholder:t.string,onInput:t.func,draftKey:t.string,editorRef:t.object,inputSx:t.object,disableCmdEnter:t.bool};function L({target:e,flatView:o=!1,autoCollapse:s=!1,autoLoadComments:c=!0,order:x=void 0,allowCopyLink:h=!1,showProfileCard:y=!1,interactive:j=!0,renderComments:A=null,renderDonation:q=null,renderActions:v=null,renderEditorPlugins:S=null,enableAutoTranslate:C=!1,renderInnerFooter:I=null,...P}){const k=Object.assign({},{displayReaction:!0,onChange:()=>{},onSendComment:()=>{},disabledSend:void 0,sendComment:null,reactionAppend:null},P);if(!e?.id)throw new Error("target is required.");const{locale:T="en"}=D.useLocaleContext()||{},b=f.useRef(),g=f.useMemo(()=>({link:window.location.href,blockletName:se(),...e}),[e]),w=a.getWsClient(ne.discussKitPrefix);return f.useEffect(()=>(w.connect(),()=>{w.isConnected()}),[]),n.jsx(Y.ErrorBoundary,{FallbackComponent:ee,children:n.jsx(D.LocaleProvider,{translations:te.translations,locale:T,children:n.jsx(a.UploaderProvider,{children:n.jsx(a.InternalThemeProvider,{children:n.jsx(a.ConfirmProvider,{children:n.jsx(a.DefaultEditorConfigProvider,{request:r.default,children:n.jsx(a.CommentsProvider,{target:g,api:ie,flatView:o,order:x,autoCollapse:s,autoLoadComments:c,allowCopyLink:h,showProfileCard:y,interactive:j,containerRef:b,renderDonation:q,renderActions:v,renderEditorPlugins:S,enableAutoTranslate:C,renderComments:A,renderInnerFooter:I,children:n.jsx(K,{...k,object:g,ref:b})})})})})})})})}L.propTypes={target:t.shape({id:t.string.isRequired,title:t.string,desc:t.string,owner:t.string}).isRequired,displayReaction:t.bool,onChange:t.func,flatView:t.bool,autoCollapse:t.bool,autoLoadComments:t.bool,allowCopyLink:t.bool,disabledSend:t.bool,showProfileCard:t.bool,order:t.oneOf(["asc","desc"]),interactive:t.bool,renderComments:t.func,renderDonation:t.any,renderActions:t.func,renderEditorPlugins:t.func,enableAutoTranslate:t.bool,renderInnerFooter:t.func,sendComment:t.func,reactionAppend:t.any};const ae=Q.styled("div")`
+"use strict";const n=require("react/jsx-runtime"),p=require("react"),M=require("@arcblock/ux/lib/Theme"),t=require("prop-types"),H=require("@arcblock/did-connect-react/lib/Session"),i=require("@mui/material"),R=require("@arcblock/ux/lib/Locale/context"),V=require("react-error-boundary"),a=require("@blocklet/discuss-kit-ux"),J=require("ahooks"),Q=require("./components/error-fallback.js"),X=require("./locales/index.js"),Y=require("./lib/utils.js"),r=require("./api.js"),Z=require("./hooks/topic-info-sync.js"),_=()=>{const e=s=>s.endsWith("/")?s:`${s}/`;return window.blocklet?.componentMountPoints?.find(s=>e(s.mountPoint)===e(window.blocklet?.prefix))?.title},u=e=>({...e,rootId:e.rootCommentId,createdAt:e.createdAt?new Date(e.createdAt):null,updatedAt:e.updatedAt?new Date(e.updatedAt):null,deletedAt:e.deletedAt?new Date(e.deletedAt):null,pinnedAt:e.pinnedAt?new Date(e.pinnedAt):null,replies:e.replies?.map(u)}),ee={fetchComments:async e=>{const o={...e,embed:e.rootId?"rating":"replies,rating",size:e.limit},{data:{data:s,nextCursor:l,total:d}}=await r.default.get("/comments",{params:o});return{data:s?.map(u),nextCursor:l,total:d}},fetchPinnedComments:async e=>{const{data:o}=await r.default.get("/comments/pinned",{params:{objectId:e}});return(o?.data||[]).map(u)},fetchCommentPosition:async({id:e,...o})=>{const{data:s}=await r.default.get(`/comments/${e}/position`,{params:o});return s},deleteComment:async({id:e})=>{const{data:o}=await r.default.delete(`/comments/${e}`);return o},updateComment:async({id:e,updatedAt:o},s)=>{const{data:l}=await r.default.put(`/comments/${e}`,{content:s,updatedAt:o});return u(l)},reply:async({id:e},o)=>{const{data:s}=await r.default.post("/comments/replies",{content:o,parentId:e,link:window.location.href});return u(s)},rate:async(e,o,s)=>{await r.default.post(`/topics/${e.topicId}/comments/${e.id}/ratings`,{ratingType:s,value:o})},unrate:async e=>{await r.default.delete(`/topics/${e.topicId}/comments/${e.id}/ratings`)},fetchRatings:async e=>{const{data:o}=await r.default.get(`/ratings/${e}`);return o},togglePin:async({post:e,value:o})=>{o?await r.default.put(`/posts/${e.id}/pinned`):await r.default.delete(`/posts/${e.id}/pinned`)}},te=()=>{const[e,o]=p.useState(!0);return J.useRequest(()=>r.default.get("/status",{muteError:!0}).then(()=>o(!0)).catch(()=>o(!1)),{cacheKey:"discuss-kit-status",staleTime:-1}),{available:e}};function E({ref:e=void 0,displayReaction:o=!0,object:s,onSendComment:l=()=>{},commentInputPosition:d="top",autoFocus:b=!1,disabledSend:g=void 0,initialContent:w="",sendText:y="",sendIcon:j=null,showTopbar:q=!0,sendComment:m=null,reactionAppend:v=null,skeleton:A=null,placeholder:I="",onInput:S=()=>{},draftKey:k="",inputSx:f={},editorRef:x=null,disableCmdEnter:h=!1}){a.useDefaultApiErrorHandler({request:r.default});const{available:K}=te(),{session:T}=p.useContext(H.SessionContext)||{},{state:L,sort:N,add:U,interactive:P,renderInnerFooter:W}=a.useCommentsContext(),{total:$,order:z,initialized:O}=L,{t:c}=R.useLocaleContext();if(Z.useTopicInfoSync(s),!K)return n.jsxs(i.Alert,{severity:"info",children:[n.jsx(i.AlertTitle,{children:c("apiUnavailable.title")}),c("apiUnavailable.desc")]});if(!O)return A||n.jsx(i.Box,{sx:{width:"100%",display:"flex",justifyContent:"center"},children:n.jsx(i.CircularProgress,{})});const G=async C=>{const{data:D}=await(m?m({content:C,object:s}):r.default.post("/comments",{content:C,object:s}));U(u(D)),l?.(D)},B=()=>n.jsx(p.Suspense,{fallback:n.jsxs(n.Fragment,{children:[n.jsx(i.Skeleton,{}),n.jsx(i.Skeleton,{width:"80%"}),n.jsx(i.Skeleton,{width:"60%"}),n.jsx(i.Skeleton,{width:"40%"})]}),children:n.jsx(a.CommentInput,{editorRef:x,placeholder:I,send:G,draftKey:k||`object-${s.id}`,autoFocus:b,disabledSend:g,initialContent:w,sendText:y,sendIcon:j,renderInnerFooter:W,onChange:S,disableCmdEnter:h})});return n.jsxs(ne,{ref:e,children:[n.jsxs(n.Fragment,{children:[n.jsx(i.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"end"},children:o&&n.jsxs(a.IconButtonGroup,{sx:{alignItems:"flex-end"},children:[n.jsx(a.GithubReactionContainer,{id:s.id,request:r.default,interactive:P}),v]})}),T.user&&P&&d==="top"&&n.jsx(i.Box,{className:"comment-editor",sx:{mt:2},children:B()})]}),!!$&&q&&n.jsxs(i.Box,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mt:3},children:[n.jsxs(i.Box,{sx:{fontWeight:"medium"},children:[$>0?`${$} ${c("comments")}`:c("comment")," "]}),n.jsx(a.SegmentedControl,{value:z,options:[{value:"desc",label:c("newest")},{value:"asc",label:c("oldest")}],onChange:C=>N(C)})]}),n.jsx(a.CommentList,{className:"comment-list"}),T.user&&P&&d==="bottom"&&n.jsx(i.Box,{sx:{mt:6,...f},children:B()})]})}E.propTypes={ref:t.any,displayReaction:t.bool,object:t.object.isRequired,onSendComment:t.func,disabledSend:t.bool,autoFocus:t.bool,initialContent:t.string,sendText:t.string,sendIcon:t.node,commentInputPosition:t.oneOf(["top","bottom"]),showTopbar:t.bool,sendComment:t.func,reactionAppend:t.any,skeleton:t.node,placeholder:t.string,onInput:t.func,draftKey:t.string,editorRef:t.object,inputSx:t.object,disableCmdEnter:t.bool};function F({target:e,flatView:o=!1,autoCollapse:s=!1,autoLoadComments:l=!0,order:d=void 0,allowCopyLink:b=!1,showProfileCard:g=!1,interactive:w=!0,renderComments:y=null,renderDonation:j=null,renderActions:q=null,renderEditorPlugins:m=null,enableAutoTranslate:v=!1,renderInnerFooter:A=null,...I}){const S=Object.assign({},{displayReaction:!0,onChange:()=>{},onSendComment:()=>{},disabledSend:void 0,sendComment:null,reactionAppend:null},I);if(!e?.id)throw new Error("target is required.");const{locale:k="en"}=R.useLocaleContext()||{},f=p.useRef(),x=p.useMemo(()=>({link:window.location.href,blockletName:_(),...e}),[e]),h=a.getWsClient(Y.discussKitPrefix);return p.useEffect(()=>(h.connect(),()=>{h.isConnected()}),[]),n.jsx(V.ErrorBoundary,{FallbackComponent:Q,children:n.jsx(R.LocaleProvider,{translations:X.translations,locale:k,children:n.jsx(a.UploaderProvider,{children:n.jsx(a.InternalThemeProvider,{children:n.jsx(a.ConfirmProvider,{children:n.jsx(a.DefaultEditorConfigProvider,{request:r.default,children:n.jsx(a.CommentsProvider,{target:x,api:ee,flatView:o,order:d,autoCollapse:s,autoLoadComments:l,allowCopyLink:b,showProfileCard:g,interactive:w,containerRef:f,renderDonation:j,renderActions:q,renderEditorPlugins:m,enableAutoTranslate:v,renderComments:y,renderInnerFooter:A,children:n.jsx(E,{...S,object:x,ref:f})})})})})})})})}F.propTypes={target:t.shape({id:t.string.isRequired,title:t.string,desc:t.string,owner:t.string}).isRequired,displayReaction:t.bool,onChange:t.func,flatView:t.bool,autoCollapse:t.bool,autoLoadComments:t.bool,allowCopyLink:t.bool,disabledSend:t.bool,showProfileCard:t.bool,order:t.oneOf(["asc","desc"]),interactive:t.bool,renderComments:t.func,renderDonation:t.any,renderActions:t.func,renderEditorPlugins:t.func,enableAutoTranslate:t.bool,renderInnerFooter:t.func,sendComment:t.func,reactionAppend:t.any};const ne=M.styled("div")`
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
   padding: ${e=>e.padding?"20px":"0"};
   border: ${e=>e.border?"1px solid rgb(208, 215, 222)":"none"};
   border-radius: 6px;
-`;module.exports=L;
+`;module.exports=F;

package/lib/es/comments.js

@@ -1,216 +1,192 @@
-import { jsx as i, jsxs as d, Fragment as K } from "react/jsx-runtime";
-import { useRef as Q, useMemo as X, useEffect as Y, useContext as Z, useState as ee, Suspense as te } from "react";
-import { styled as ne } from "@arcblock/ux/lib/Theme";
+import { jsx as r, jsxs as a, Fragment as j } from "react/jsx-runtime";
+import { useRef as M, useMemo as H, useEffect as V, useContext as J, useState as Q, Suspense as X } from "react";
+import { styled as Y } from "@arcblock/ux/lib/Theme";
 import t from "prop-types";
-import { SessionContext as oe } from "@arcblock/did-connect-react/lib/Session";
-import { Alert as ie, AlertTitle as re, Box as p, CircularProgress as se, Skeleton as y } from "@mui/material";
-import { useLocaleContext as O, LocaleProvider as ae } from "@arcblock/ux/lib/Locale/context";
-import { ErrorBoundary as le } from "react-error-boundary";
-import { getWsClient as de, UploaderProvider as ce, InternalThemeProvider as ue, ConfirmProvider as me, DefaultEditorConfigProvider as pe, CommentsProvider as fe, useDefaultApiErrorHandler as he, useCommentsContext as Ce, useSubscription as be, IconButtonGroup as ge, GithubReactionContainer as we, SegmentedControl as ye, CommentList as xe, CommentInput as Ae } from "@blocklet/discuss-kit-ux";
-import { useRequest as ve } from "ahooks";
-import Ie from "./components/error-fallback.js";
-import { translations as Pe } from "./locales/index.js";
-import { discussKitPrefix as Se } from "./lib/utils.js";
-import s, { fetchRatings as Te } from "./api.js";
-import { useTopicInfoSync as $e } from "./hooks/topic-info-sync.js";
-const Re = () => {
+import { SessionContext as Z } from "@arcblock/did-connect-react/lib/Session";
+import { Alert as _, AlertTitle as ee, Box as c, CircularProgress as te, Skeleton as C } from "@mui/material";
+import { useLocaleContext as F, LocaleProvider as ne } from "@arcblock/ux/lib/Locale/context";
+import { ErrorBoundary as oe } from "react-error-boundary";
+import { getWsClient as re, UploaderProvider as ie, InternalThemeProvider as se, ConfirmProvider as ae, DefaultEditorConfigProvider as le, CommentsProvider as de, useDefaultApiErrorHandler as ce, useCommentsContext as ue, IconButtonGroup as me, GithubReactionContainer as pe, SegmentedControl as fe, CommentList as he, CommentInput as be } from "@blocklet/discuss-kit-ux";
+import { useRequest as Ce } from "ahooks";
+import ge from "./components/error-fallback.js";
+import { translations as we } from "./locales/index.js";
+import { discussKitPrefix as ye } from "./lib/utils.js";
+import i from "./api.js";
+import { useTopicInfoSync as xe } from "./hooks/topic-info-sync.js";
+const ve = () => {
   const e = (o) => o.endsWith("/") ? o : `${o}/`;
   return window.blocklet?.componentMountPoints?.find(
     (o) => e(o.mountPoint) === e(window.blocklet?.prefix)
   )?.title;
-}, c = (e) => ({
+}, u = (e) => ({
   ...e,
   rootId: e.rootCommentId,
   createdAt: e.createdAt ? new Date(e.createdAt) : null,
   updatedAt: e.updatedAt ? new Date(e.updatedAt) : null,
   deletedAt: e.deletedAt ? new Date(e.deletedAt) : null,
   pinnedAt: e.pinnedAt ? new Date(e.pinnedAt) : null,
-  replies: e.replies?.map(c)
-}), ke = {
+  replies: e.replies?.map(u)
+}), Ae = {
   fetchComments: async (e) => {
     const n = {
       ...e,
       embed: e.rootId ? "rating" : "replies,rating",
       size: e.limit
     }, {
-      data: { data: o, nextCursor: l, total: f }
-    } = await s.get("/comments", { params: n });
-    return { data: o?.map(c), nextCursor: l, total: f };
+      data: { data: o, nextCursor: s, total: l }
+    } = await i.get("/comments", { params: n });
+    return { data: o?.map(u), nextCursor: s, total: l };
   },
   fetchPinnedComments: async (e) => {
-    const { data: n } = await s.get("/comments/pinned", { params: { objectId: e } });
-    return (n?.data || []).map(c);
+    const { data: n } = await i.get("/comments/pinned", { params: { objectId: e } });
+    return (n?.data || []).map(u);
   },
   fetchCommentPosition: async ({ id: e, ...n }) => {
-    const { data: o } = await s.get(`/comments/${e}/position`, { params: n });
+    const { data: o } = await i.get(`/comments/${e}/position`, { params: n });
     return o;
   },
   deleteComment: async ({ id: e }) => {
-    const { data: n } = await s.delete(`/comments/${e}`);
+    const { data: n } = await i.delete(`/comments/${e}`);
     return n;
   },
   updateComment: async ({ id: e, updatedAt: n }, o) => {
-    const { data: l } = await s.put(`/comments/${e}`, { content: o, updatedAt: n });
-    return c(l);
+    const { data: s } = await i.put(`/comments/${e}`, { content: o, updatedAt: n });
+    return u(s);
   },
   reply: async ({ id: e }, n) => {
-    const { data: o } = await s.post("/comments/replies", {
+    const { data: o } = await i.post("/comments/replies", {
       content: n,
       parentId: e,
       link: window.location.href
     });
-    return c(o);
+    return u(o);
   },
   rate: async (e, n, o) => {
-    await s.post(`/topics/${e.topicId}/comments/${e.id}/ratings`, { ratingType: o, value: n });
+    await i.post(`/topics/${e.topicId}/comments/${e.id}/ratings`, { ratingType: o, value: n });
   },
   unrate: async (e) => {
-    await s.delete(`/topics/${e.topicId}/comments/${e.id}/ratings`);
+    await i.delete(`/topics/${e.topicId}/comments/${e.id}/ratings`);
   },
   fetchRatings: async (e) => {
-    const { data: n } = await s.get(`/ratings/${e}`);
+    const { data: n } = await i.get(`/ratings/${e}`);
     return n;
   },
   togglePin: async ({ post: e, value: n }) => {
-    n ? await s.put(`/posts/${e.id}/pinned`) : await s.delete(`/posts/${e.id}/pinned`);
+    n ? await i.put(`/posts/${e.id}/pinned`) : await i.delete(`/posts/${e.id}/pinned`);
   }
-}, De = () => {
-  const [e, n] = ee(!0);
-  return ve(
-    () => s.get("/status", { muteError: !0 }).then(() => n(!0)).catch(() => n(!1)),
+}, Ie = () => {
+  const [e, n] = Q(!0);
+  return Ce(
+    () => i.get("/status", { muteError: !0 }).then(() => n(!0)).catch(() => n(!1)),
     { cacheKey: "discuss-kit-status", staleTime: -1 }
   ), { available: e };
 };
-function B({
+function K({
   ref: e = void 0,
   displayReaction: n = !0,
   object: o,
-  onChange: l = () => {
+  // onChange = () => {},
+  onSendComment: s = () => {
   },
-  onSendComment: f = () => {
+  commentInputPosition: l = "top",
+  autoFocus: g = !1,
+  disabledSend: w = void 0,
+  initialContent: y = "",
+  sendText: x = "",
+  sendIcon: v = null,
+  showTopbar: A = !0,
+  sendComment: m = null,
+  reactionAppend: I = null,
+  skeleton: P = null,
+  placeholder: $ = "",
+  onInput: S = () => {
   },
-  commentInputPosition: h = "top",
-  autoFocus: x = !1,
-  disabledSend: A = void 0,
-  initialContent: v = "",
-  sendText: I = "",
-  sendIcon: P = null,
-  showTopbar: S = !0,
-  sendComment: C = null,
-  reactionAppend: T = null,
-  skeleton: $ = null,
-  placeholder: R = "",
-  onInput: k = () => {
-  },
-  draftKey: b = "",
-  inputSx: g = {},
-  editorRef: w = null,
-  disableCmdEnter: L = !1
+  draftKey: k = "",
+  inputSx: p = {},
+  editorRef: f = null,
+  disableCmdEnter: h = !1
 }) {
-  he({
-    request: s
+  ce({
+    request: i
   });
-  const { available: U } = De(), { session: q } = Z(oe) || {}, { state: M, sort: W, add: N, updateCommentState: j, interactive: D, findById: z, renderInnerFooter: G } = Ce(), { total: E, order: _, initialized: H } = M, { t: u } = O();
-  $e(o);
-  const V = {
-    ADD_COMMENT: (r) => {
-      N(c(r)), l?.();
-    },
-    UPDATE_COMMENT: (r) => {
-      const a = z(r.id);
-      a && a.content !== r.content && j(r.id, (m) => (m.content = r.content, m.updatedAt = r.updatedAt, m.synced = Date.now(), m));
-    },
-    RATING_COMMENT: async ({ commentId: r }) => {
-      const a = await Te(r);
-      j(r, (m) => ({
-        ...m,
-        rating: a
-      }));
-    }
-  };
-  if (be(
-    o.id,
-    ({ event: r, data: a }) => {
-      V[r]?.(a);
-    },
-    [o.id, M]
-  ), !U)
-    return /* @__PURE__ */ d(ie, { severity: "info", children: [
-      /* @__PURE__ */ i(re, { children: u("apiUnavailable.title") }),
-      u("apiUnavailable.desc")
+  const { available: L } = Ie(), { session: q } = J(Z) || {}, { state: B, sort: N, add: W, interactive: R, renderInnerFooter: z } = ue(), { total: T, order: O, initialized: U } = B, { t: d } = F();
+  if (xe(o), !L)
+    return /* @__PURE__ */ a(_, { severity: "info", children: [
+      /* @__PURE__ */ r(ee, { children: d("apiUnavailable.title") }),
+      d("apiUnavailable.desc")
     ] });
-  if (!H)
-    return $ || /* @__PURE__ */ i(
-      p,
+  if (!U)
+    return P || /* @__PURE__ */ r(
+      c,
       {
         sx: {
           width: "100%",
           display: "flex",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ i(se, {})
+        children: /* @__PURE__ */ r(te, {})
       }
     );
-  const J = async (r) => {
-    const { data: a } = await (C ? C({ content: r, object: o }) : s.post("/comments", { content: r, object: o }));
-    N(c(a)), f?.(a);
-  }, F = () => /* @__PURE__ */ i(
-    te,
+  const G = async (b) => {
+    const { data: E } = await (m ? m({ content: b, object: o }) : i.post("/comments", { content: b, object: o }));
+    W(u(E)), s?.(E);
+  }, D = () => /* @__PURE__ */ r(
+    X,
     {
-      fallback: /* @__PURE__ */ d(K, { children: [
-        /* @__PURE__ */ i(y, {}),
-        /* @__PURE__ */ i(y, { width: "80%" }),
-        /* @__PURE__ */ i(y, { width: "60%" }),
-        /* @__PURE__ */ i(y, { width: "40%" })
+      fallback: /* @__PURE__ */ a(j, { children: [
+        /* @__PURE__ */ r(C, {}),
+        /* @__PURE__ */ r(C, { width: "80%" }),
+        /* @__PURE__ */ r(C, { width: "60%" }),
+        /* @__PURE__ */ r(C, { width: "40%" })
       ] }),
-      children: /* @__PURE__ */ i(
-        Ae,
+      children: /* @__PURE__ */ r(
+        be,
         {
-          editorRef: w,
-          placeholder: R,
-          send: J,
-          draftKey: b || `object-${o.id}`,
-          autoFocus: x,
-          disabledSend: A,
-          initialContent: v,
-          sendText: I,
-          sendIcon: P,
-          renderInnerFooter: G,
-          onChange: k,
-          disableCmdEnter: L
+          editorRef: f,
+          placeholder: $,
+          send: G,
+          draftKey: k || `object-${o.id}`,
+          autoFocus: g,
+          disabledSend: w,
+          initialContent: y,
+          sendText: x,
+          sendIcon: v,
+          renderInnerFooter: z,
+          onChange: S,
+          disableCmdEnter: h
         }
       )
     }
   );
-  return /* @__PURE__ */ d(qe, { ref: e, children: [
-    /* @__PURE__ */ d(K, { children: [
-      /* @__PURE__ */ i(
-        p,
+  return /* @__PURE__ */ a($e, { ref: e, children: [
+    /* @__PURE__ */ a(j, { children: [
+      /* @__PURE__ */ r(
+        c,
         {
           sx: {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "end"
           },
-          children: n && /* @__PURE__ */ d(ge, { sx: { alignItems: "flex-end" }, children: [
-            /* @__PURE__ */ i(we, { id: o.id, request: s, interactive: D }),
-            T
+          children: n && /* @__PURE__ */ a(me, { sx: { alignItems: "flex-end" }, children: [
+            /* @__PURE__ */ r(pe, { id: o.id, request: i, interactive: R }),
+            I
           ] })
         }
       ),
-      q.user && D && h === "top" && /* @__PURE__ */ i(
-        p,
+      q.user && R && l === "top" && /* @__PURE__ */ r(
+        c,
         {
           className: "comment-editor",
           sx: {
             mt: 2
           },
-          children: F()
+          children: D()
         }
       )
     ] }),
-    !!E && S && /* @__PURE__ */ d(
-      p,
+    !!T && A && /* @__PURE__ */ a(
+      c,
       {
         sx: {
           display: "flex",
@@ -219,33 +195,33 @@ function B({
           mt: 3
         },
         children: [
-          /* @__PURE__ */ d(p, { sx: { fontWeight: "medium" }, children: [
-            E > 0 ? `${E} ${u("comments")}` : u("comment"),
+          /* @__PURE__ */ a(c, { sx: { fontWeight: "medium" }, children: [
+            T > 0 ? `${T} ${d("comments")}` : d("comment"),
             " "
           ] }),
-          /* @__PURE__ */ i(
-            ye,
+          /* @__PURE__ */ r(
+            fe,
             {
-              value: _,
+              value: O,
               options: [
-                { value: "desc", label: u("newest") },
-                { value: "asc", label: u("oldest") }
+                { value: "desc", label: d("newest") },
+                { value: "asc", label: d("oldest") }
               ],
-              onChange: (r) => W(r)
+              onChange: (b) => N(b)
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ i(xe, { className: "comment-list" }),
-    q.user && D && h === "bottom" && /* @__PURE__ */ i(p, { sx: { mt: 6, ...g }, children: F() })
+    /* @__PURE__ */ r(he, { className: "comment-list" }),
+    q.user && R && l === "bottom" && /* @__PURE__ */ r(c, { sx: { mt: 6, ...p }, children: D() })
   ] });
 }
-B.propTypes = {
+K.propTypes = {
   ref: t.any,
   displayReaction: t.bool,
   object: t.object.isRequired,
-  onChange: t.func,
+  // onChange: PropTypes.func,
   onSendComment: t.func,
   disabledSend: t.bool,
   autoFocus: t.bool,
@@ -264,24 +240,24 @@ B.propTypes = {
   inputSx: t.object,
   disableCmdEnter: t.bool
 };
-function Ee({
+function Pe({
   target: e,
   flatView: n = !1,
   autoCollapse: o = !1,
-  autoLoadComments: l = !0,
-  order: f = void 0,
-  allowCopyLink: h = !1,
-  showProfileCard: x = !1,
-  interactive: A = !0,
-  renderComments: v = null,
-  renderDonation: I = null,
-  renderActions: P = null,
-  renderEditorPlugins: S = null,
-  enableAutoTranslate: C = !1,
-  renderInnerFooter: T = null,
+  autoLoadComments: s = !0,
+  order: l = void 0,
+  allowCopyLink: g = !1,
+  showProfileCard: w = !1,
+  interactive: y = !0,
+  renderComments: x = null,
+  renderDonation: v = null,
+  renderActions: A = null,
+  renderEditorPlugins: m = null,
+  enableAutoTranslate: I = !1,
+  renderInnerFooter: P = null,
   ...$
 }) {
-  const R = Object.assign(
+  const S = Object.assign(
     {},
     {
       displayReaction: !0,
@@ -297,41 +273,41 @@ function Ee({
   );
   if (!e?.id)
     throw new Error("target is required.");
-  const { locale: k = "en" } = O() || {}, b = Q(), g = X(
+  const { locale: k = "en" } = F() || {}, p = M(), f = H(
     () => ({
       link: window.location.href,
-      blockletName: Re(),
+      blockletName: ve(),
       ...e
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [e]
-  ), w = de(Se);
-  return Y(() => (w.connect(), () => {
-    w.isConnected();
-  }), []), /* @__PURE__ */ i(le, { FallbackComponent: Ie, children: /* @__PURE__ */ i(ae, { translations: Pe, locale: k, children: /* @__PURE__ */ i(ce, { children: /* @__PURE__ */ i(ue, { children: /* @__PURE__ */ i(me, { children: /* @__PURE__ */ i(pe, { request: s, children: /* @__PURE__ */ i(
-    fe,
+  ), h = re(ye);
+  return V(() => (h.connect(), () => {
+    h.isConnected();
+  }), []), /* @__PURE__ */ r(oe, { FallbackComponent: ge, children: /* @__PURE__ */ r(ne, { translations: we, locale: k, children: /* @__PURE__ */ r(ie, { children: /* @__PURE__ */ r(se, { children: /* @__PURE__ */ r(ae, { children: /* @__PURE__ */ r(le, { request: i, children: /* @__PURE__ */ r(
+    de,
     {
-      target: g,
-      api: ke,
+      target: f,
+      api: Ae,
       flatView: n,
-      order: f,
+      order: l,
       autoCollapse: o,
-      autoLoadComments: l,
-      allowCopyLink: h,
-      showProfileCard: x,
-      interactive: A,
-      containerRef: b,
-      renderDonation: I,
-      renderActions: P,
-      renderEditorPlugins: S,
-      enableAutoTranslate: C,
-      renderComments: v,
-      renderInnerFooter: T,
-      children: /* @__PURE__ */ i(B, { ...R, object: g, ref: b })
+      autoLoadComments: s,
+      allowCopyLink: g,
+      showProfileCard: w,
+      interactive: y,
+      containerRef: p,
+      renderDonation: v,
+      renderActions: A,
+      renderEditorPlugins: m,
+      enableAutoTranslate: I,
+      renderComments: x,
+      renderInnerFooter: P,
+      children: /* @__PURE__ */ r(K, { ...S, object: f, ref: p })
     }
   ) }) }) }) }) }) });
 }
-Ee.propTypes = {
+Pe.propTypes = {
   target: t.shape({
     id: t.string.isRequired,
     title: t.string,
@@ -357,7 +333,7 @@ Ee.propTypes = {
   sendComment: t.func,
   reactionAppend: t.any
 };
-const qe = ne("div")`
+const $e = Y("div")`
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
@@ -366,5 +342,5 @@ const qe = ne("div")`
   border-radius: 6px;
 `;
 export {
-  Ee as default
+  Pe as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/discuss-kit",
-  "version": "2.5.31",
+  "version": "2.5.33",
   "description": "A react component for Discuss Kit blocklet.",
   "main": "./lib/cjs/index.js",
   "module": "./lib/es/index.js",
@@ -49,8 +49,8 @@
     "rehype-sanitize": "^5.0.1",
     "timeago.js": "^4.0.2",
     "url-join": "^4.0.1",
-    "@blocklet/discuss-kit-ux": "2.5.31",
-    "@blocklet/editor": "2.5.31"
+    "@blocklet/discuss-kit-ux": "2.5.33",
+    "@blocklet/editor": "2.5.33"
   },
   "peerDependencies": {
     "@arcblock/did-connect-react": "^3.1.5",