@univerjs/thread-comment-ui 0.6.10-nightly.202504271606 → 0.6.10-nightly.202504281607

package/lib/index.js

@@ -5,15 +5,15 @@ import { Inject as Se, IUniverInstanceService as Ve, Disposable as Ae, UniverIns
 import { UniverThreadCommentPlugin as Xe, ThreadCommentModel as Ne, getDT as et, AddCommentCommand as tt, ResolveCommentCommand as nt, DeleteCommentTreeCommand as we, UpdateCommentCommand as rt, DeleteCommentCommand as it } from "@univerjs/thread-comment";
 import { ISidebarService as Ue, useDependency as N, KeyCode as pe, useObservable as G, useConfigValue as lt, UI_PLUGIN_CONFIG_KEY as ot } from "@univerjs/ui";
 import { BehaviorSubject as ge, filter as at, debounceTime as st } from "rxjs";
-import { jsxs as I, jsx as s } from "react/jsx-runtime";
-import { Button as se, clsx as Ce, Tooltip as dt, Dropdown as ut, Select as xe } from "@univerjs/design";
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { Button as se, clsx as Ce, Tooltip as dt, Dropdown as ut, Select as Ie } from "@univerjs/design";
 import { forwardRef as B, useRef as te, createElement as Z, useState as A, useEffect as de, useMemo as ee, useImperativeHandle as ct } from "react";
 import { IEditorService as vt, BreakLineCommand as mt, RichTextEditor as ft } from "@univerjs/docs-ui";
 var ht = Object.getOwnPropertyDescriptor, pt = (t, e, n, r) => {
   for (var i = r > 1 ? void 0 : r ? ht(e, n) : e, l = t.length - 1, d; l >= 0; l--)
     (d = t[l]) && (i = d(i) || i);
   return i;
-}, Ie = (t, e) => (n, r) => e(n, r, t);
+}, xe = (t, e) => (n, r) => e(n, r, t);
 let q = class extends Ae {
   constructor(e, n) {
     super();
@@ -52,10 +52,10 @@ let q = class extends Ae {
   }
 };
 q = pt([
-  Ie(0, Se(Ue)),
-  Ie(1, Ve)
+  xe(0, Se(Ue)),
+  xe(1, Ve)
 ], q);
-const gt = "thread-comment-panel", Ct = "UNIVER_THREAD_COMMENT_UI_PLUGIN", xt = {
+const gt = "thread-comment-panel", Ct = "UNIVER_THREAD_COMMENT_UI_PLUGIN", It = {
   id: "thread-comment-ui.operation.toggle-panel",
   type: _e.OPERATION,
   handler(t) {
@@ -72,7 +72,7 @@ const gt = "thread-comment-panel", Ct = "UNIVER_THREAD_COMMENT_UI_PLUGIN", xt =
   handler(t, e) {
     return t.get(q).setActiveComment(e), !0;
   }
-}, It = "thread-comment-ui.config", be = {};
+}, xt = "thread-comment-ui.config", be = {};
 var bt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, St = (t, e, n) => e in t ? bt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, _t = (t, e, n, r) => {
   for (var i = r > 1 ? void 0 : r ? yt(e, n) : e, l = t.length - 1, d; l >= 0; l--)
     (d = t[l]) && (i = d(i) || i);
@@ -86,7 +86,7 @@ let ue = class extends ze {
       be,
       this._config
     );
-    i && this._configService.setConfig("menu", i, { merge: !0 }), this._configService.setConfig(It, l);
+    i && this._configService.setConfig("menu", i, { merge: !0 }), this._configService.setConfig(xt, l);
   }
   onStarting() {
     var t;
@@ -94,7 +94,7 @@ let ue = class extends ze {
       [q]
     ], (t = this._config) == null ? void 0 : t.overrides).forEach((e) => {
       this._injector.add(e);
-    }), [xt, K].forEach((e) => {
+    }), [It, K].forEach((e) => {
       this._commandService.registerCommand(e);
     });
   }
@@ -201,7 +201,6 @@ var Mt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em"
   }));
 });
 Re.displayName = "SolveSingle";
-const Rt = {};
 function ye(t) {
   return {
     id: "d",
@@ -246,7 +245,7 @@ const je = B((t, e) => {
       }]);
     }
   }));
-  const x = () => {
+  const I = () => {
     if (c.current) {
       const u = Ye.deepClone(c.current.getDocumentData().body);
       T(!1), r == null || r({
@@ -258,13 +257,13 @@ const je = B((t, e) => {
       }, 10);
     }
   };
-  return /* @__PURE__ */ I("div", { className: Rt.threadCommentEditor, onClick: (u) => u.preventDefault(), children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ x("div", { onClick: (u) => u.preventDefault(), children: [
+    /* @__PURE__ */ a(
       ft,
       {
+        className: "univer-w-full",
         editorRef: c,
         autoFocus: d,
-        style: { width: "100%" },
         keyboardEventConfig: V,
         placeholder: O.t("threadCommentUI.editor.placeholder"),
         initialValue: (n == null ? void 0 : n.text) && ye(n.text),
@@ -278,8 +277,8 @@ const je = B((t, e) => {
         }
       }
     ),
-    P ? /* @__PURE__ */ I("div", { className: "univer-mt-3 univer-flex univer-flex-row univer-justify-end", children: [
-      /* @__PURE__ */ s(
+    P ? /* @__PURE__ */ x("div", { className: "univer-mt-3 univer-flex univer-flex-row univer-justify-end", children: [
+      /* @__PURE__ */ a(
         se,
         {
           style: { marginRight: 12 },
@@ -290,18 +289,18 @@ const je = B((t, e) => {
           children: O.t("threadCommentUI.editor.cancel")
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ a(
         se,
         {
           variant: "primary",
           disabled: !E,
-          onClick: x,
+          onClick: I,
           children: O.t(i ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
         }
       )
     ] }) : null
   ] });
-}), jt = (t) => {
+}), Rt = (t) => {
   const { dataStream: e, customRanges: n } = t, r = e.endsWith(`\r
 `) ? e.length - 2 : e.length, i = [];
   let l = 0;
@@ -320,14 +319,14 @@ const je = B((t, e) => {
     type: "text",
     content: e.slice(l, r)
   }), i;
-}, Ht = (t) => {
+}, jt = (t) => {
   const { paragraphs: e = [] } = t;
   let n = 0;
   return e.map((r) => {
     const i = Je(t, n, r.startIndex);
-    return n = r.startIndex + 1, jt(i);
+    return n = r.startIndex + 1, Rt(i);
   });
-}, Lt = (t) => {
+}, Ht = (t) => {
   let e = "";
   const n = [];
   return t.forEach((r) => {
@@ -367,8 +366,8 @@ const je = B((t, e) => {
     dataStream: e,
     customRanges: n
   };
-}, He = "__mock__", Pt = (t) => {
-  const { item: e, unitId: n, subUnitId: r, editing: i, onEditingChange: l, onReply: d, resolved: f, isRoot: h, onClose: w, onDeleteComment: O, type: P } = t, T = N(ne), b = N(fe), c = N(he), v = c.getUser(e.personId), E = G(c.currentUser$), y = (E == null ? void 0 : E.userID) === e.personId, V = e.id === He, [x, R] = A(!1), u = lt(ot), m = u == null ? void 0 : u.avatarFallback, p = () => {
+}, He = "__mock__", Lt = (t) => {
+  const { item: e, unitId: n, subUnitId: r, editing: i, onEditingChange: l, onReply: d, resolved: f, isRoot: h, onClose: w, onDeleteComment: O, type: P } = t, T = N(ne), b = N(fe), c = N(he), v = c.getUser(e.personId), E = G(c.currentUser$), y = (E == null ? void 0 : E.userID) === e.personId, V = e.id === He, [I, R] = A(!1), u = lt(ot), m = u == null ? void 0 : u.avatarFallback, p = () => {
     (O == null ? void 0 : O(e)) !== !1 && (T.executeCommand(
       h ? we.id : it.id,
       {
@@ -378,8 +377,8 @@ const je = B((t, e) => {
       }
     ), h && (w == null || w()));
   };
-  return /* @__PURE__ */ I("div", { className: "univer-relative univer-mb-3 univer-pl-[30px]", onMouseLeave: () => R(!1), onMouseEnter: () => R(!0), children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ x("div", { className: "univer-relative univer-mb-3 univer-pl-[30px]", onMouseLeave: () => R(!1), onMouseEnter: () => R(!0), children: [
+    /* @__PURE__ */ a(
       "div",
       {
         className: `
@@ -391,26 +390,26 @@ const je = B((t, e) => {
         }
       }
     ),
-    v ? /* @__PURE__ */ I("div", { className: "univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between", children: [
-      /* @__PURE__ */ s("div", { className: "univer-text-sm univer-font-medium univer-leading-5", children: (v == null ? void 0 : v.name) || " " }),
-      /* @__PURE__ */ I("div", { children: [
-        V || f ? null : x && v ? /* @__PURE__ */ s(
+    v ? /* @__PURE__ */ x("div", { className: "univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between", children: [
+      /* @__PURE__ */ a("div", { className: "univer-text-sm univer-font-medium univer-leading-5", children: (v == null ? void 0 : v.name) || " " }),
+      /* @__PURE__ */ x("div", { children: [
+        V || f ? null : I && v ? /* @__PURE__ */ a(
           "div",
           {
             className: `
                                                   univer-ml-1 univer-inline-flex univer-h-6 univer-w-6
                                                   univer-cursor-pointer univer-items-center univer-justify-center
-                                                  univer-rounded-[3px] univer-text-base
+                                                  univer-rounded-sm univer-text-base
                                                   hover:univer-bg-gray-50
                                                 `,
             onClick: () => d(v),
-            children: /* @__PURE__ */ s($e, {})
+            children: /* @__PURE__ */ a($e, {})
           }
         ) : null,
-        y && !V && !f ? /* @__PURE__ */ s(
+        y && !V && !f ? /* @__PURE__ */ a(
           ut,
           {
-            overlay: /* @__PURE__ */ s("div", { className: "univer-rounded-lg univer-p-4 univer-theme", children: /* @__PURE__ */ I(
+            overlay: /* @__PURE__ */ a("div", { className: "univer-rounded-lg univer-p-4 univer-theme", children: /* @__PURE__ */ x(
               "ul",
               {
                 className: `
@@ -419,7 +418,7 @@ const je = B((t, e) => {
                                                       [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-p-1
                                                     `,
                 children: [
-                  /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+                  /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
                     "a",
                     {
                       className: "hover:univer-bg-gray-200",
@@ -427,7 +426,7 @@ const je = B((t, e) => {
                       children: b.t("threadCommentUI.item.edit")
                     }
                   ) }),
-                  /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+                  /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
                     "a",
                     {
                       className: "hover:univer-bg-gray-200",
@@ -438,7 +437,7 @@ const je = B((t, e) => {
                 ]
               }
             ) }),
-            children: /* @__PURE__ */ s(
+            children: /* @__PURE__ */ a(
               "div",
               {
                 className: `
@@ -447,15 +446,15 @@ const je = B((t, e) => {
                                               univer-text-base
                                               hover:univer-bg-gray-50
                                             `,
-                children: /* @__PURE__ */ s(De, {})
+                children: /* @__PURE__ */ a(De, {})
               }
             )
           }
         ) : null
       ] })
     ] }) : null,
-    /* @__PURE__ */ s("div", { className: "univer-mb-1 univer-text-xs univer-leading-[1.5] univer-text-gray-600", children: e.dT }),
-    i ? /* @__PURE__ */ s(
+    /* @__PURE__ */ a("div", { className: "univer-mb-1 univer-text-xs univer-leading-[1.5] univer-text-gray-600", children: e.dT }),
+    i ? /* @__PURE__ */ a(
       je,
       {
         type: P,
@@ -480,10 +479,10 @@ const je = B((t, e) => {
           );
         }
       }
-    ) : /* @__PURE__ */ s("div", { className: "univer-text-[13px] univer-leading-5 univer-text-black", children: Ht(e.text).map((S, g) => /* @__PURE__ */ s("div", { className: "univer-break-words", children: S.map((o, _) => {
+    ) : /* @__PURE__ */ a("div", { className: "univer-text-[13px] univer-leading-5 univer-text-gray-900", children: jt(e.text).map((S, g) => /* @__PURE__ */ a("div", { className: "univer-break-words", children: S.map((o, _) => {
       switch (o.type) {
         case "mention":
-          return /* @__PURE__ */ I("a", { className: "univer-text-blue-600", children: [
+          return /* @__PURE__ */ x("a", { className: "univer-text-primary-600", children: [
             o.content.label,
             " "
           ] }, _);
@@ -492,8 +491,8 @@ const je = B((t, e) => {
       }
     }) }, g)) })
   ] });
-}, Vt = (t) => {
-  var ae, X, a;
+}, Pt = (t) => {
+  var ae, X, s;
   const {
     id: e,
     unitId: n,
@@ -513,7 +512,7 @@ const je = B((t, e) => {
     onResolve: E,
     type: y,
     style: V,
-    full: x
+    full: I
   } = t, R = N(Ne), [u, m] = A(!1), [p, S] = A(""), g = ee(() => R.commentUpdate$.pipe(st(16)), [R]);
   G(g);
   const o = e ? R.getCommentWithChildren(n, r, e) : null, _ = N(ne), W = N(he), k = o == null ? void 0 : o.root.resolved, D = G(W.currentUser$), H = te(null), J = [
@@ -556,8 +555,8 @@ const je = B((t, e) => {
     ), h == null || h());
   };
   de(() => b == null ? void 0 : b(), []);
-  const ie = w((a = o == null ? void 0 : o.root.subUnitId) != null ? a : r), le = l && !p && !k, oe = `${i || (o == null ? void 0 : o.root.ref) || ""}${ie ? " · " : ""}${ie}`;
-  return /* @__PURE__ */ I(
+  const ie = w((s = o == null ? void 0 : o.root.subUnitId) != null ? s : r), le = l && !p && !k, oe = `${i || (o == null ? void 0 : o.root.ref) || ""}${ie ? " · " : ""}${ie}`;
+  return /* @__PURE__ */ x(
     "div",
     {
       className: Ce(
@@ -565,7 +564,7 @@ const je = B((t, e) => {
                   univer-relative univer-box-border univer-rounded-lg univer-border univer-border-solid
                   univer-border-gray-200 univer-bg-white univer-p-4
                 `,
-        x ? "univer-w-full" : "univer-w-[278px]",
+        I ? "univer-w-full" : "univer-w-[278px]",
         {
           "univer-shadow": !k && (f || u || O === "cell")
         }
@@ -580,16 +579,16 @@ const je = B((t, e) => {
         b == null || b(), m(!1);
       },
       children: [
-        !k && f ? /* @__PURE__ */ s(
+        !k && f ? /* @__PURE__ */ a(
           "div",
           {
             className: `
-                          univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-[6px]
-                          univer-rounded-t-[6px] univer-bg-yellow-400
+                          univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md
+                          univer-bg-yellow-400
                         `
           }
         ) : null,
-        /* @__PURE__ */ I(
+        /* @__PURE__ */ x(
           "div",
           {
             className: `
@@ -597,17 +596,17 @@ const je = B((t, e) => {
                   univer-leading-5
                 `,
             children: [
-              /* @__PURE__ */ I("div", { className: "univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden", children: [
-                /* @__PURE__ */ s(
+              /* @__PURE__ */ x("div", { className: "univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden", children: [
+                /* @__PURE__ */ a(
                   "div",
                   {
                     className: `
-                          univer-mr-2 univer-h-[14px] univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0
-                          univer-rounded-[1.5px] univer-bg-yellow-400
+                          univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0
+                          univer-rounded-sm univer-bg-yellow-400
                         `
                   }
                 ),
-                /* @__PURE__ */ s(dt, { showIfEllipsis: !0, title: oe, children: /* @__PURE__ */ s(
+                /* @__PURE__ */ a(dt, { showIfEllipsis: !0, title: oe, children: /* @__PURE__ */ a(
                   "div",
                   {
                     className: `
@@ -617,8 +616,8 @@ const je = B((t, e) => {
                   }
                 ) })
               ] }),
-              o ? /* @__PURE__ */ I("div", { className: "univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row", children: [
-                /* @__PURE__ */ s(
+              o ? /* @__PURE__ */ x("div", { className: "univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row", children: [
+                /* @__PURE__ */ a(
                   "div",
                   {
                     onClick: re,
@@ -632,10 +631,10 @@ const je = B((t, e) => {
                         "univer-text-green-500": k
                       }
                     ),
-                    children: k ? /* @__PURE__ */ s(Me, {}) : /* @__PURE__ */ s(Re, {})
+                    children: k ? /* @__PURE__ */ a(Me, {}) : /* @__PURE__ */ a(Re, {})
                   }
                 ),
-                (D == null ? void 0 : D.userID) === o.root.personId ? /* @__PURE__ */ s(
+                (D == null ? void 0 : D.userID) === o.root.personId ? /* @__PURE__ */ a(
                   "div",
                   {
                     className: `
@@ -645,25 +644,21 @@ const je = B((t, e) => {
                                           hover:univer-bg-gray-50
                                         `,
                     onClick: Q,
-                    children: /* @__PURE__ */ s(Ee, {})
+                    children: /* @__PURE__ */ a(Ee, {})
                   }
                 ) : null
               ] }) : null
             ]
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ a(
           "div",
           {
-            className: `
-                  univer-max-h-[300px] univer-overflow-y-auto univer-overflow-x-hidden
-                  [scrollbar-gutter:auto]
-                  [scrollbar-width:thin]
-                `,
             ref: j,
+            className: "univer-max-h-[300px] univer-overflow-y-auto univer-overflow-x-hidden",
             children: J.map(
-              (C) => /* @__PURE__ */ s(
-                Pt,
+              (C) => /* @__PURE__ */ a(
+                Lt,
                 {
                   onClose: h,
                   unitId: n,
@@ -679,7 +674,7 @@ const je = B((t, e) => {
                   onReply: ($) => {
                     $ && requestAnimationFrame(() => {
                       var L;
-                      (L = H.current) == null || L.reply(Lt([
+                      (L = H.current) == null || L.reply(Ht([
                         {
                           type: "mention",
                           content: {
@@ -702,7 +697,7 @@ const je = B((t, e) => {
             )
           }
         ),
-        le ? /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(
+        le ? /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
           je,
           {
             ref: H,
@@ -741,7 +736,7 @@ const je = B((t, e) => {
       ]
     }
   );
-}, qt = (t) => {
+}, Yt = (t) => {
   const {
     unitId: e,
     subUnitId$: n,
@@ -757,9 +752,9 @@ const je = B((t, e) => {
     onAddComment: T,
     onDeleteComment: b,
     showComments: c
-  } = t, [v, E] = A("all"), [y, V] = A("all"), x = N(fe), R = N(he), u = N(Ne), [m, p] = A(() => u.getUnit(e)), S = N(q), g = G(S.activeCommentId$), o = G(u.commentUpdate$), _ = N(ne), W = G(n), k = te(!0), D = "panel", H = G(R.currentUser$), J = ee(() => {
+  } = t, [v, E] = A("all"), [y, V] = A("all"), I = N(fe), R = N(he), u = N(Ne), [m, p] = A(() => u.getUnit(e)), S = N(q), g = G(S.activeCommentId$), o = G(u.commentUpdate$), _ = N(ne), W = G(n), k = te(!0), D = "panel", H = G(R.currentUser$), J = ee(() => {
     var L;
-    const a = v === "all" ? m : (L = m.filter((U) => U.subUnitId === W)) != null ? L : [], C = f != null ? f : (U) => U, $ = a.map((U) => {
+    const s = v === "all" ? m : (L = m.filter((U) => U.subUnitId === W)) != null ? L : [], C = f != null ? f : (U) => U, $ = s.map((U) => {
       var F;
       return { ...U.root, children: (F = U.children) != null ? F : [], users: U.relativeUsers };
     });
@@ -771,9 +766,9 @@ const je = B((t, e) => {
     } else
       return C($);
   }, [c, v, m, f, W]), j = ee(() => [
-    ...J.filter((a) => !a.resolved),
-    ...J.filter((a) => a.resolved)
-  ], [J]), re = ee(() => y === "resolved" ? j.filter((a) => a.resolved) : y === "unsolved" ? j.filter((a) => !a.resolved) : y === "concern_me" && H != null && H.userID ? j.filter((a) => a == null ? void 0 : a.users.has(H.userID)) : j, [j, H == null ? void 0 : H.userID, y]), Q = P ? [P, ...re] : re, ie = Q.filter((a) => !a.resolved), le = Q.filter((a) => a.resolved), oe = y !== "all" || v !== "all", ae = () => {
+    ...J.filter((s) => !s.resolved),
+    ...J.filter((s) => s.resolved)
+  ], [J]), re = ee(() => y === "resolved" ? j.filter((s) => s.resolved) : y === "unsolved" ? j.filter((s) => !s.resolved) : y === "concern_me" && H != null && H.userID ? j.filter((s) => s == null ? void 0 : s.users.has(H.userID)) : j, [j, H == null ? void 0 : H.userID, y]), Q = P ? [P, ...re] : re, ie = Q.filter((s) => !s.resolved), le = Q.filter((s) => s.resolved), oe = y !== "all" || v !== "all", ae = () => {
     V("all"), E("all");
   };
   de(() => {
@@ -788,89 +783,89 @@ const je = B((t, e) => {
       k.current = !0;
       return;
     }
-    const { unitId: a, subUnitId: C, commentId: $ } = g, L = `${D}-${a}-${C}-${$}`;
+    const { unitId: s, subUnitId: C, commentId: $ } = g, L = `${D}-${s}-${C}-${$}`;
     (U = document.getElementById(L)) == null || U.scrollIntoView({ block: "center" });
   }, [g]);
-  const X = (a) => /* @__PURE__ */ s(
-    Vt,
+  const X = (s) => /* @__PURE__ */ a(
+    Pt,
     {
       full: !0,
       prefix: D,
       getSubUnitName: l,
-      id: a.id,
-      unitId: a.unitId,
-      subUnitId: a.subUnitId,
-      refStr: a.ref,
+      id: s.id,
+      unitId: s.unitId,
+      subUnitId: s.subUnitId,
+      refStr: s.ref,
       type: r,
-      showEdit: (g == null ? void 0 : g.commentId) === a.id,
-      showHighlight: (g == null ? void 0 : g.commentId) === a.id,
+      showEdit: (g == null ? void 0 : g.commentId) === s.id,
+      showHighlight: (g == null ? void 0 : g.commentId) === s.id,
       onClick: () => {
-        k.current = !1, a.resolved ? _.executeCommand(K.id) : _.executeCommand(
+        k.current = !1, s.resolved ? _.executeCommand(K.id) : _.executeCommand(
           K.id,
           {
-            unitId: a.unitId,
-            subUnitId: a.subUnitId,
-            commentId: a.id,
+            unitId: s.unitId,
+            subUnitId: s.subUnitId,
+            commentId: s.id,
             temp: !1
           }
         );
       },
-      onMouseEnter: () => w == null ? void 0 : w(a),
-      onMouseLeave: () => h == null ? void 0 : h(a),
+      onMouseEnter: () => w == null ? void 0 : w(s),
+      onMouseLeave: () => h == null ? void 0 : h(s),
       onAddComment: T,
       onDeleteComment: b,
-      onResolve: (C) => d == null ? void 0 : d(a.id, C)
+      onResolve: (C) => d == null ? void 0 : d(s.id, C)
     },
-    a.id
+    s.id
   );
-  return /* @__PURE__ */ I("div", { className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3", children: [
-    /* @__PURE__ */ I("div", { className: "univer-mt-3 univer-flex univer-flex-row univer-justify-between", children: [
-      r === ce.UNIVER_SHEET ? /* @__PURE__ */ s(
-        xe,
+  return /* @__PURE__ */ x("div", { className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3", children: [
+    /* @__PURE__ */ x("div", { className: "univer-mt-3 univer-flex univer-flex-row univer-justify-between", children: [
+      r === ce.UNIVER_SHEET ? /* @__PURE__ */ a(
+        Ie,
         {
           borderless: !0,
           value: v,
-          onChange: (a) => E(a),
           options: [
             {
               value: "current",
-              label: x.t("threadCommentUI.filter.sheet.current")
+              label: I.t("threadCommentUI.filter.sheet.current")
             },
             {
               value: "all",
-              label: x.t("threadCommentUI.filter.sheet.all")
+              label: I.t("threadCommentUI.filter.sheet.all")
             }
-          ]
+          ],
+          onChange: E
         }
       ) : null,
-      /* @__PURE__ */ s(
-        xe,
+      /* @__PURE__ */ a(
+        Ie,
         {
           borderless: !0,
           value: y,
-          onChange: (a) => V(a),
           options: [
             {
               value: "all",
-              label: x.t("threadCommentUI.filter.status.all")
+              label: I.t("threadCommentUI.filter.status.all")
             },
             {
               value: "resolved",
-              label: x.t("threadCommentUI.filter.status.resolved")
+              label: I.t("threadCommentUI.filter.status.resolved")
             },
             {
               value: "unsolved",
-              label: x.t("threadCommentUI.filter.status.unsolved")
+              label: I.t("threadCommentUI.filter.status.unsolved")
             },
             {
               value: "concern_me",
-              label: x.t("threadCommentUI.filter.status.concernMe")
+              label: I.t("threadCommentUI.filter.status.concernMe")
             }
-          ]
+          ],
+          onChange: V
         }
       )
     ] }),
-    Q.length === 0 ? /* @__PURE__ */ I(
+    Q.length === 0 ? /* @__PURE__ */ x(
       "div",
       {
         className: `
@@ -878,16 +873,16 @@ const je = B((t, e) => {
                           univer-text-[13px] univer-text-gray-600
                         `,
         children: [
-          x.t("threadCommentUI.panel.empty"),
-          oe ? /* @__PURE__ */ s("div", { className: "univer-mt-2 univer-flex univer-flex-row", children: /* @__PURE__ */ s(se, { onClick: ae, children: x.t("threadCommentUI.panel.reset") }) }) : O ? null : /* @__PURE__ */ s("div", { className: "univer-mt-2 univer-flex univer-flex-row", children: /* @__PURE__ */ I(se, { onClick: i, children: [
-            /* @__PURE__ */ s(ke, { className: "univer-mr-[6px]" }),
-            x.t("threadCommentUI.panel.add")
+          I.t("threadCommentUI.panel.empty"),
+          oe ? /* @__PURE__ */ a("div", { className: "univer-mt-2 univer-flex univer-flex-row", children: /* @__PURE__ */ a(se, { onClick: ae, children: I.t("threadCommentUI.panel.reset") }) }) : O ? null : /* @__PURE__ */ a("div", { className: "univer-mt-2 univer-flex univer-flex-row", children: /* @__PURE__ */ x(se, { onClick: i, children: [
+            /* @__PURE__ */ a(ke, { className: "univer-mr-1.5" }),
+            I.t("threadCommentUI.panel.add")
           ] }) })
         ]
       }
-    ) : /* @__PURE__ */ I("div", { className: "univer-mt-3 univer-flex univer-flex-col univer-gap-3", children: [
+    ) : /* @__PURE__ */ x("div", { className: "univer-mt-3 univer-flex univer-flex-col univer-gap-3", children: [
       ie.map(X),
-      le.length > 0 && /* @__PURE__ */ s("div", { className: "univer-text-xs", children: x.t("threadCommentUI.panel.solved") }),
+      le.length > 0 && /* @__PURE__ */ a("div", { className: "univer-text-xs", children: I.t("threadCommentUI.panel.solved") }),
       le.map(X)
     ] })
   ] });
@@ -895,9 +890,9 @@ const je = B((t, e) => {
 export {
   K as SetActiveCommentOperation,
   gt as THREAD_COMMENT_PANEL,
-  qt as ThreadCommentPanel,
+  Yt as ThreadCommentPanel,
   q as ThreadCommentPanelService,
-  Vt as ThreadCommentTree,
-  xt as ToggleSheetCommentPanelOperation,
+  Pt as ThreadCommentTree,
+  It as ToggleSheetCommentPanelOperation,
   ue as UniverThreadCommentUIPlugin
 };

package/lib/types/views/thread-comment-editor/index.d.ts

@@ -1,6 +1,5 @@
 import { IDocumentBody, IUser, UniverInstanceType } from '@univerjs/core';
 import { IThreadComment } from '@univerjs/thread-comment';
-import { default as React } from 'react';
 export interface IThreadCommentEditorProps {
     id?: string;
     comment?: Pick<IThreadComment, 'attachments' | 'text' | 'mentions'>;
@@ -14,7 +13,7 @@ export interface IThreadCommentEditorProps {
 export interface IThreadCommentEditorInstance {
     reply: (text: IDocumentBody) => void;
 }
-export declare const ThreadCommentEditor: React.ForwardRefExoticComponent<IThreadCommentEditorProps & React.RefAttributes<IThreadCommentEditorInstance>>;
+export declare const ThreadCommentEditor: import('react').ForwardRefExoticComponent<IThreadCommentEditorProps & import('react').RefAttributes<IThreadCommentEditorInstance>>;
 export declare const ThreadCommentSuggestion: ({ active, user }: {
     active: boolean;
     user: IUser;