@univerjs/thread-comment-ui 0.6.10 → 0.7.0-beta.1

package/lib/es/index.js

@@ -1,28 +1,28 @@
-var je = Object.defineProperty;
-var Ae = (t, e, n) => e in t ? je(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var B = (t, e, n) => Ae(t, typeof e != "symbol" ? e + "" : e, n);
-import { Inject as Ne, IUniverInstanceService as Be, Disposable as We, UniverInstanceType as he, CommandType as Te, DependentOn as Fe, Injector as ze, ICommandService as ie, IConfigService as Ze, Plugin as Ke, merge as Ge, mergeOverrideWithDependencies as Ye, LocaleService as fe, DOCS_NORMAL_EDITOR_UNIT_ID_KEY as qe, BuildTextUtils as ve, Tools as Je, CustomRangeType as Qe, getBodySlice as Xe, UserManagerService as pe, generateRandomId as et } from "@univerjs/core";
-import { UniverThreadCommentPlugin as tt, ThreadCommentModel as Ue, getDT as nt, AddCommentCommand as rt, ResolveCommentCommand as it, DeleteCommentTreeCommand as Ee, UpdateCommentCommand as ot, DeleteCommentCommand as at } from "@univerjs/thread-comment";
-import { ISidebarService as Oe, useDependency as N, KeyCode as ge, useObservable as W } from "@univerjs/ui";
-import { BehaviorSubject as Ie, filter as st, debounceTime as lt } from "rxjs";
-import { jsxs as S, jsx as l } from "react/jsx-runtime";
-import { Button as ce, clsx as dt, Tooltip as ct, Dropdown as mt, Select as be } from "@univerjs/design";
-import { forwardRef as j, useRef as re, createElement as z, useState as V, useEffect as me, useMemo as ne, useImperativeHandle as ut } from "react";
-import { IEditorService as ht, BreakLineCommand as vt, RichTextEditor as Ct } from "@univerjs/docs-ui";
-var ft = Object.getOwnPropertyDescriptor, pt = (t, e, n, r) => {
-  for (var i = r > 1 ? void 0 : r ? ft(e, n) : e, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (i = d(i) || i);
+var Le = Object.defineProperty;
+var Pe = (t, e, n) => e in t ? Le(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var z = (t, e, n) => Pe(t, typeof e != "symbol" ? e + "" : e, n);
+import { Inject as Se, IUniverInstanceService as Ve, Disposable as Ae, UniverInstanceType as ce, CommandType as _e, DependentOn as Be, Injector as We, ICommandService as ne, IConfigService as Fe, Plugin as ze, merge as Ge, mergeOverrideWithDependencies as Ke, LocaleService as fe, DOCS_NORMAL_EDITOR_UNIT_ID_KEY as Ze, BuildTextUtils as ve, Tools as Ye, CustomRangeType as qe, getBodySlice as Je, UserManagerService as he, generateRandomId as Qe } from "@univerjs/core";
+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 ot, UI_PLUGIN_CONFIG_KEY as lt } from "@univerjs/ui";
+import { BehaviorSubject as ge, filter as at, debounceTime as st } from "rxjs";
+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, o = t.length - 1, d; o >= 0; o--)
+    (d = t[o]) && (i = d(i) || i);
   return i;
-}, Se = (t, e) => (n, r) => e(n, r, t);
-let Y = class extends We {
+}, xe = (t, e) => (n, r) => e(n, r, t);
+let q = class extends Ae {
   constructor(e, n) {
     super();
-    B(this, "_panelVisible", !1);
-    B(this, "_panelVisible$", new Ie(!1));
-    B(this, "_activeCommentId");
-    B(this, "_activeCommentId$", new Ie(void 0));
-    B(this, "panelVisible$", this._panelVisible$.asObservable());
-    B(this, "activeCommentId$", this._activeCommentId$.asObservable());
+    z(this, "_panelVisible", !1);
+    z(this, "_panelVisible$", new ge(!1));
+    z(this, "_activeCommentId");
+    z(this, "_activeCommentId$", new ge(void 0));
+    z(this, "panelVisible$", this._panelVisible$.asObservable());
+    z(this, "activeCommentId$", this._activeCommentId$.asObservable());
     this._sidebarService = e, this._univerInstanceService = n, this._init(), this.disposeWithMe(() => {
       this._activeCommentId$.complete(), this._panelVisible$.complete();
     });
@@ -33,7 +33,7 @@ let Y = class extends We {
         e.visible || this.setPanelVisible(!1);
       })
     ), this.disposeWithMe(
-      this._univerInstanceService.getCurrentTypeOfUnit$(he.UNIVER_SHEET).pipe(st((e) => !e)).subscribe(() => {
+      this._univerInstanceService.getCurrentTypeOfUnit$(ce.UNIVER_SHEET).pipe(at((e) => !e)).subscribe(() => {
         this._sidebarService.close();
       })
     );
@@ -51,277 +51,282 @@ let Y = class extends We {
     this._activeCommentId = e, this._activeCommentId$.next(e);
   }
 };
-Y = pt([
-  Se(0, Ne(Oe)),
-  Se(1, Be)
-], Y);
-const gt = "thread-comment-panel", It = "UNIVER_THREAD_COMMENT_UI_PLUGIN", bt = {
+q = pt([
+  xe(0, Se(Ue)),
+  xe(1, Ve)
+], q);
+const gt = "thread-comment-panel", Ct = "UNIVER_THREAD_COMMENT_UI_PLUGIN", It = {
   id: "thread-comment-ui.operation.toggle-panel",
-  type: Te.OPERATION,
+  type: _e.OPERATION,
   handler(t) {
-    const e = t.get(Oe), n = t.get(Y);
+    const e = t.get(Ue), n = t.get(q);
     return n.panelVisible ? (e.close(), n.setPanelVisible(!1)) : (e.open({
       header: { title: "threadCommentUI.panel.title" },
       children: { label: gt },
       width: 330
     }), n.setPanelVisible(!0)), !0;
   }
-}, F = {
+}, K = {
   id: "thread-comment-ui.operation.set-active-comment",
-  type: Te.OPERATION,
+  type: _e.OPERATION,
   handler(t, e) {
-    return t.get(Y).setActiveComment(e), !0;
+    return t.get(q).setActiveComment(e), !0;
   }
-}, St = "thread-comment-ui.config", ye = {};
-var yt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, xt = (t, e, n) => e in t ? yt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n, Nt = (t, e, n, r) => {
-  for (var i = r > 1 ? void 0 : r ? _t(e, n) : e, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (i = d(i) || i);
+}, 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, o = t.length - 1, d; o >= 0; o--)
+    (d = t[o]) && (i = d(i) || i);
   return i;
-}, Ce = (t, e) => (n, r) => e(n, r, t), Pe = (t, e, n) => xt(t, typeof e != "symbol" ? e + "" : e, n);
-let ue = class extends Ke {
-  constructor(t = ye, e, n, r) {
+}, me = (t, e) => (n, r) => e(n, r, t), Oe = (t, e, n) => St(t, typeof e != "symbol" ? e + "" : e, n);
+let ue = class extends ze {
+  constructor(t = be, e, n, r) {
     super(), this._config = t, this._injector = e, this._commandService = n, this._configService = r;
-    const { menu: i, ...a } = Ge(
+    const { menu: i, ...o } = Ge(
       {},
-      ye,
+      be,
       this._config
     );
-    i && this._configService.setConfig("menu", i, { merge: !0 }), this._configService.setConfig(St, a);
+    i && this._configService.setConfig("menu", i, { merge: !0 }), this._configService.setConfig(xt, o);
   }
   onStarting() {
     var t;
-    Ye([
-      [Y]
+    Ke([
+      [q]
     ], (t = this._config) == null ? void 0 : t.overrides).forEach((e) => {
       this._injector.add(e);
-    }), [bt, F].forEach((e) => {
+    }), [It, K].forEach((e) => {
       this._commandService.registerCommand(e);
     });
   }
 };
-Pe(ue, "pluginName", It);
-Pe(ue, "type", he.UNIVER_UNKNOWN);
-ue = Nt([
-  Fe(tt),
-  Ce(1, Ne(ze)),
-  Ce(2, ie),
-  Ce(3, Ze)
+Oe(ue, "pluginName", Ct);
+Oe(ue, "type", ce.UNIVER_UNKNOWN);
+ue = _t([
+  Be(Xe),
+  me(1, Se(We)),
+  me(2, ne),
+  me(3, Fe)
 ], ue);
-var H = function() {
-  return H = Object.assign || function(t) {
+var M = function() {
+  return M = Object.assign || function(t) {
     for (var e, n = 1, r = arguments.length; n < r; n++) {
       e = arguments[n];
       for (var i in e) Object.prototype.hasOwnProperty.call(e, i) && (t[i] = e[i]);
     }
     return t;
-  }, H.apply(this, arguments);
-}, Tt = function(t, e) {
+  }, M.apply(this, arguments);
+}, Nt = function(t, e) {
   var n = {};
   for (var r in t) Object.prototype.hasOwnProperty.call(t, r) && e.indexOf(r) < 0 && (n[r] = t[r]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
     for (var i = 0, r = Object.getOwnPropertySymbols(t); i < r.length; i++)
       e.indexOf(r[i]) < 0 && Object.prototype.propertyIsEnumerable.call(t, r[i]) && (n[r[i]] = t[r[i]]);
   return n;
-}, Z = j(function(t, e) {
-  var n = t.icon, r = t.id, i = t.className, a = t.extend, d = Tt(t, ["icon", "id", "className", "extend"]), v = "univerjs-icon univerjs-icon-".concat(r, " ").concat(i || "").trim(), g = re("_".concat(Ot()));
-  return $e(n, "".concat(r), { defIds: n.defIds, idSuffix: g.current }, H({ ref: e, className: v }, d), a);
+}, Y = B(function(t, e) {
+  var n = t.icon, r = t.id, i = t.className, o = t.extend, d = Nt(t, ["icon", "id", "className", "extend"]), f = "univerjs-icon univerjs-icon-".concat(r, " ").concat(i || "").trim(), h = te("_".concat(Ot()));
+  return Te(n, "".concat(r), { defIds: n.defIds, idSuffix: h.current }, M({ ref: e, className: f }, d), o);
 });
-function $e(t, e, n, r, i) {
-  return z(t.tag, H(H({ key: e }, Ut(t, n, i)), r), (Et(t, n).children || []).map(function(a, d) {
-    return $e(a, "".concat(e, "-").concat(t.tag, "-").concat(d), n, void 0, i);
+function Te(t, e, n, r, i) {
+  return Z(t.tag, M(M({ key: e }, wt(t, n, i)), r), (Ut(t, n).children || []).map(function(o, d) {
+    return Te(o, "".concat(e, "-").concat(t.tag, "-").concat(d), n, void 0, i);
   }));
 }
-function Ut(t, e, n) {
-  var r = H({}, t.attrs);
-  n != null && n.colorChannel1 && r.fill === "colorChannel1" && (r.fill = n.colorChannel1), t.tag === "mask" && r.id && (r.id = r.id + e.idSuffix), Object.entries(r).forEach(function(a) {
-    var d = a[0], v = a[1];
-    d === "mask" && typeof v == "string" && (r[d] = v.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+function wt(t, e, n) {
+  var r = M({}, t.attrs);
+  n != null && n.colorChannel1 && r.fill === "colorChannel1" && (r.fill = n.colorChannel1), t.tag === "mask" && r.id && (r.id = r.id + e.idSuffix), Object.entries(r).forEach(function(o) {
+    var d = o[0], f = o[1];
+    d === "mask" && typeof f == "string" && (r[d] = f.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
   });
   var i = e.defIds;
-  return !i || i.length === 0 || (t.tag === "use" && r["xlink:href"] && (r["xlink:href"] = r["xlink:href"] + e.idSuffix), Object.entries(r).forEach(function(a) {
-    var d = a[0], v = a[1];
-    typeof v == "string" && (r[d] = v.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  return !i || i.length === 0 || (t.tag === "use" && r["xlink:href"] && (r["xlink:href"] = r["xlink:href"] + e.idSuffix), Object.entries(r).forEach(function(o) {
+    var d = o[0], f = o[1];
+    typeof f == "string" && (r[d] = f.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
   })), r;
 }
-function Et(t, e) {
+function Ut(t, e) {
   var n, r = e.defIds;
-  return !r || r.length === 0 ? t : t.tag === "defs" && (!((n = t.children) === null || n === void 0) && n.length) ? H(H({}, t), { children: t.children.map(function(i) {
-    return typeof i.attrs.id == "string" && r && r.indexOf(i.attrs.id) > -1 ? H(H({}, i), { attrs: H(H({}, i.attrs), { id: i.attrs.id + e.idSuffix }) }) : i;
+  return !r || r.length === 0 ? t : t.tag === "defs" && (!((n = t.children) === null || n === void 0) && n.length) ? M(M({}, t), { children: t.children.map(function(i) {
+    return typeof i.attrs.id == "string" && r && r.indexOf(i.attrs.id) > -1 ? M(M({}, i), { attrs: M(M({}, i.attrs), { id: i.attrs.id + e.idSuffix }) }) : i;
   }) }) : t;
 }
 function Ot() {
   return Math.random().toString(36).substring(2, 8);
 }
-Z.displayName = "UniverIcon";
-var Pt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M5.3313 1.4667C5.3313 1.13533 5.59993.866699 5.9313.866699H10.069C10.4004.866699 10.669 1.13533 10.669 1.4667 10.669 1.79807 10.4004 2.0667 10.069 2.0667H5.9313C5.59993 2.0667 5.3313 1.79807 5.3313 1.4667zM1.09985 3.64443C1.09985 3.31306 1.36848 3.04443 1.69985 3.04443H14.2999C14.6312 3.04443 14.8999 3.31306 14.8999 3.64443 14.8999 3.9758 14.6312 4.24443 14.2999 4.24443H1.69985C1.36848 4.24443 1.09985 3.9758 1.09985 3.64443zM6.12398 8.30171C6.35829 8.0674 6.73819 8.0674 6.97251 8.30171L8.00007 9.32928 9.02764 8.30171C9.26195 8.0674 9.64185 8.0674 9.87617 8.30171 10.1105 8.53603 10.1105 8.91593 9.87617 9.15024L8.8486 10.1778 9.87617 11.2054C10.1105 11.4397 10.1105 11.8196 9.87617 12.0539 9.64185 12.2882 9.26195 12.2882 9.02764 12.0539L8.00007 11.0263 6.97251 12.0539C6.73819 12.2882 6.35829 12.2882 6.12398 12.0539 5.88966 11.8196 5.88966 11.4397 6.12398 11.2054L7.15154 10.1778 6.12398 9.15024C5.88966 8.91593 5.88966 8.53603 6.12398 8.30171z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M4.75332 5.22217C3.86966 5.22217 3.15332 5.93851 3.15332 6.82217V12.5331C3.15332 13.9691 4.31738 15.1332 5.75332 15.1332H10.2465C11.6825 15.1332 12.8465 13.9691 12.8465 12.5331V6.82217C12.8465 5.93851 12.1302 5.22217 11.2465 5.22217H4.75332ZM4.35332 6.82217C4.35332 6.60125 4.53241 6.42217 4.75332 6.42217H11.2465C11.4674 6.42217 11.6465 6.60125 11.6465 6.82217V12.5331C11.6465 13.3063 11.0197 13.9332 10.2465 13.9332H5.75332C4.98012 13.9332 4.35332 13.3063 4.35332 12.5331V6.82217Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, De = j(function(t, e) {
-  return z(Z, Object.assign({}, t, {
+Y.displayName = "UniverIcon";
+var Tt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M5.3313 1.4667C5.3313 1.13533 5.59993.866699 5.9313.866699H10.069C10.4004.866699 10.669 1.13533 10.669 1.4667 10.669 1.79807 10.4004 2.0667 10.069 2.0667H5.9313C5.59993 2.0667 5.3313 1.79807 5.3313 1.4667zM1.09985 3.64443C1.09985 3.31306 1.36848 3.04443 1.69985 3.04443H14.2999C14.6312 3.04443 14.8999 3.31306 14.8999 3.64443 14.8999 3.9758 14.6312 4.24443 14.2999 4.24443H1.69985C1.36848 4.24443 1.09985 3.9758 1.09985 3.64443zM6.12398 8.30171C6.35829 8.0674 6.73819 8.0674 6.97251 8.30171L8.00007 9.32928 9.02764 8.30171C9.26195 8.0674 9.64185 8.0674 9.87617 8.30171 10.1105 8.53603 10.1105 8.91593 9.87617 9.15024L8.8486 10.1778 9.87617 11.2054C10.1105 11.4397 10.1105 11.8196 9.87617 12.0539 9.64185 12.2882 9.26195 12.2882 9.02764 12.0539L8.00007 11.0263 6.97251 12.0539C6.73819 12.2882 6.35829 12.2882 6.12398 12.0539 5.88966 11.8196 5.88966 11.4397 6.12398 11.2054L7.15154 10.1778 6.12398 9.15024C5.88966 8.91593 5.88966 8.53603 6.12398 8.30171z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M4.75332 5.22217C3.86966 5.22217 3.15332 5.93851 3.15332 6.82217V12.5331C3.15332 13.9691 4.31738 15.1332 5.75332 15.1332H10.2465C11.6825 15.1332 12.8465 13.9691 12.8465 12.5331V6.82217C12.8465 5.93851 12.1302 5.22217 11.2465 5.22217H4.75332ZM4.35332 6.82217C4.35332 6.60125 4.53241 6.42217 4.75332 6.42217H11.2465C11.4674 6.42217 11.6465 6.60125 11.6465 6.82217V12.5331C11.6465 13.3063 11.0197 13.9332 10.2465 13.9332H5.75332C4.98012 13.9332 4.35332 13.3063 4.35332 12.5331V6.82217Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Ee = B(function(t, e) {
+  return Z(Y, Object.assign({}, t, {
     id: "delete-single",
     ref: e,
-    icon: Pt
+    icon: Tt
   }));
 });
-De.displayName = "DeleteSingle";
-var $t = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.6 1.99991C8.60001 1.66854 8.33138 1.39991 8.00001 1.3999C7.66864 1.3999 7.40001 1.66853 7.4 1.9999L7.39996 7.3999H1.9999C1.66853 7.3999 1.3999 7.66853 1.3999 7.9999C1.3999 8.33127 1.66853 8.5999 1.9999 8.5999H7.39995L7.3999 13.9999C7.3999 14.3313 7.66853 14.5999 7.9999 14.5999C8.33127 14.5999 8.5999 14.3313 8.5999 13.9999L8.59995 8.5999H13.9999C14.3313 8.5999 14.5999 8.33127 14.5999 7.9999C14.5999 7.66853 14.3313 7.3999 13.9999 7.3999H8.59996L8.6 1.99991Z" } }] }, He = j(function(t, e) {
-  return z(Z, Object.assign({}, t, {
+Ee.displayName = "DeleteSingle";
+var Et = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.6 1.99991C8.60001 1.66854 8.33138 1.39991 8.00001 1.3999C7.66864 1.3999 7.40001 1.66853 7.4 1.9999L7.39996 7.3999H1.9999C1.66853 7.3999 1.3999 7.66853 1.3999 7.9999C1.3999 8.33127 1.66853 8.5999 1.9999 8.5999H7.39995L7.3999 13.9999C7.3999 14.3313 7.66853 14.5999 7.9999 14.5999C8.33127 14.5999 8.5999 14.3313 8.5999 13.9999L8.59995 8.5999H13.9999C14.3313 8.5999 14.5999 8.33127 14.5999 7.9999C14.5999 7.66853 14.3313 7.3999 13.9999 7.3999H8.59996L8.6 1.99991Z" } }] }, ke = B(function(t, e) {
+  return Z(Y, Object.assign({}, t, {
     id: "increase-single",
     ref: e,
-    icon: $t
+    icon: Et
   }));
 });
-He.displayName = "IncreaseSingle";
-var Dt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M3 9C3.55228 9 4 8.55228 4 8 4 7.44772 3.55228 7 3 7 2.44772 7 2 7.44772 2 8 2 8.55228 2.44772 9 3 9zM8 9C8.55228 9 9 8.55228 9 8 9 7.44772 8.55228 7 8 7 7.44772 7 7 7.44772 7 8 7 8.55228 7.44772 9 8 9zM13 9C13.5523 9 14 8.55228 14 8 14 7.44772 13.5523 7 13 7 12.4477 7 12 7.44772 12 8 12 8.55228 12.4477 9 13 9z" } }] }, Me = j(function(t, e) {
-  return z(Z, Object.assign({}, t, {
+ke.displayName = "IncreaseSingle";
+var kt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M3 9C3.55228 9 4 8.55228 4 8 4 7.44772 3.55228 7 3 7 2.44772 7 2 7.44772 2 8 2 8.55228 2.44772 9 3 9zM8 9C8.55228 9 9 8.55228 9 8 9 7.44772 8.55228 7 8 7 7.44772 7 7 7.44772 7 8 7 8.55228 7.44772 9 8 9zM13 9C13.5523 9 14 8.55228 14 8 14 7.44772 13.5523 7 13 7 12.4477 7 12 7.44772 12 8 12 8.55228 12.4477 9 13 9z" } }] }, De = B(function(t, e) {
+  return Z(Y, Object.assign({}, t, {
     id: "more-horizontal-single",
     ref: e,
-    icon: Dt
+    icon: kt
   }));
 });
-Me.displayName = "MoreHorizontalSingle";
-var Ht = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { stroke: "currentColor", d: "M7.48389 10.3267V12.1905C7.48389 12.7428 7.9316 13.1905 8.48389 13.1905H11.2216L12.2955 14.2644L13.3695 13.1905H14.1593C14.7116 13.1905 15.1593 12.7428 15.1593 12.1905V8.46289C15.1593 7.91061 14.7116 7.46289 14.1593 7.46289H12.2955", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M0.840332 3.73535C0.840332 2.63078 1.73576 1.73535 2.84033 1.73535H10.2955C11.4001 1.73535 12.2955 2.63078 12.2955 3.73535V8.32676C12.2955 9.43132 11.4001 10.3268 10.2955 10.3268H5.6014L4.1695 11.7587L3.05978 10.3268H2.84033C1.73576 10.3268 0.840332 9.43133 0.840332 8.32676V3.73535Z", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M6.41016 6.1311H6.76813M8.91626 6.1311H9.27424M3.90454 6.1311H4.26252", strokeLinecap: "round", strokeWidth: 1.2 } }] }, ke = j(function(t, e) {
-  return z(Z, Object.assign({}, t, {
+De.displayName = "MoreHorizontalSingle";
+var Dt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { stroke: "currentColor", d: "M7.48389 10.3267V12.1905C7.48389 12.7428 7.9316 13.1905 8.48389 13.1905H11.2216L12.2955 14.2644L13.3695 13.1905H14.1593C14.7116 13.1905 15.1593 12.7428 15.1593 12.1905V8.46289C15.1593 7.91061 14.7116 7.46289 14.1593 7.46289H12.2955", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M0.840332 3.73535C0.840332 2.63078 1.73576 1.73535 2.84033 1.73535H10.2955C11.4001 1.73535 12.2955 2.63078 12.2955 3.73535V8.32676C12.2955 9.43132 11.4001 10.3268 10.2955 10.3268H5.6014L4.1695 11.7587L3.05978 10.3268H2.84033C1.73576 10.3268 0.840332 9.43133 0.840332 8.32676V3.73535Z", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M6.41016 6.1311H6.76813M8.91626 6.1311H9.27424M3.90454 6.1311H4.26252", strokeLinecap: "round", strokeWidth: 1.2 } }] }, $e = B(function(t, e) {
+  return Z(Y, Object.assign({}, t, {
     id: "reply-to-comment-single",
     ref: e,
-    icon: Ht
+    icon: Dt
   }));
 });
-ke.displayName = "ReplyToCommentSingle";
-var Mt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.6106 15.4036C12.4766 15.4036 15.6106 12.2696 15.6106 8.40356C15.6106 4.53757 12.4766 1.40356 8.6106 1.40356C4.7446 1.40356 1.6106 4.53757 1.6106 8.40356C1.6106 12.2696 4.7446 15.4036 8.6106 15.4036ZM12.3351 6.82773C12.5694 6.59342 12.5694 6.21352 12.3351 5.9792C12.1007 5.74489 11.7208 5.74489 11.4865 5.9792L7.91079 9.55494L6.33506 7.9792C6.10074 7.74489 5.72084 7.74489 5.48653 7.9792C5.25221 8.21352 5.25221 8.59342 5.48653 8.82773L7.48653 10.8277C7.72084 11.062 8.10074 11.062 8.33506 10.8277L12.3351 6.82773Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Re = j(function(t, e) {
-  return z(Z, Object.assign({}, t, {
+$e.displayName = "ReplyToCommentSingle";
+var $t = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M8.6106 15.4036C12.4766 15.4036 15.6106 12.2696 15.6106 8.40356C15.6106 4.53757 12.4766 1.40356 8.6106 1.40356C4.7446 1.40356 1.6106 4.53757 1.6106 8.40356C1.6106 12.2696 4.7446 15.4036 8.6106 15.4036ZM12.3351 6.82773C12.5694 6.59342 12.5694 6.21352 12.3351 5.9792C12.1007 5.74489 11.7208 5.74489 11.4865 5.9792L7.91079 9.55494L6.33506 7.9792C6.10074 7.74489 5.72084 7.74489 5.48653 7.9792C5.25221 8.21352 5.25221 8.59342 5.48653 8.82773L7.48653 10.8277C7.72084 11.062 8.10074 11.062 8.33506 10.8277L12.3351 6.82773Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Me = B(function(t, e) {
+  return Z(Y, Object.assign({}, t, {
     id: "resolved-single",
     ref: e,
-    icon: Mt
+    icon: $t
   }));
 });
-Re.displayName = "ResolvedSingle";
-var kt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em", height: "1em" }, children: [{ tag: "circle", attrs: { cx: 8.73, cy: 8.4, r: 6.4, stroke: "currentColor", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M6.02637 8.40356L8.02637 10.4036L12.0264 6.40356", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }] }, we = j(function(t, e) {
-  return z(Z, Object.assign({}, t, {
+Me.displayName = "ResolvedSingle";
+var Mt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em", height: "1em" }, children: [{ tag: "circle", attrs: { cx: 8.73, cy: 8.4, r: 6.4, stroke: "currentColor", strokeWidth: 1.2 } }, { tag: "path", attrs: { stroke: "currentColor", d: "M6.02637 8.40356L8.02637 10.4036L12.0264 6.40356", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2 } }] }, Re = B(function(t, e) {
+  return Z(Y, Object.assign({}, t, {
     id: "solve-single",
     ref: e,
-    icon: kt
+    icon: Mt
   }));
 });
-we.displayName = "SolveSingle";
-const Rt = "univer-thread-comment-editor-buttons", _e = {
-  threadCommentEditorButtons: Rt
-};
-function xe(t) {
+Re.displayName = "SolveSingle";
+function ye(t) {
   return {
     id: "d",
     body: t,
     documentStyle: {}
   };
 }
-const Le = j((t, e) => {
+const je = B((t, e) => {
   var R;
-  const { comment: n, onSave: r, id: i, onCancel: a, autoFocus: d, unitId: v, type: g } = t, T = N(ie), O = N(fe), [w, P] = V(!1), U = N(ht), m = re(null), f = g === he.UNIVER_SHEET ? qe : v, [$, y] = V(() => {
-    var c, u, p;
-    return ve.transform.getPlainText((p = (u = (c = m.current) == null ? void 0 : c.getDocumentData().body) == null ? void 0 : u.dataStream) != null ? p : "");
+  const { comment: n, onSave: r, id: i, onCancel: o, autoFocus: d, unitId: f, type: h } = t, w = N(ne), O = N(fe), [P, T] = A(!1), b = N(vt), c = te(null), v = h === ce.UNIVER_SHEET ? Ze : f, [E, y] = A(() => {
+    var u, m, p;
+    return ve.transform.getPlainText((p = (m = (u = c.current) == null ? void 0 : u.getDocumentData().body) == null ? void 0 : m.dataStream) != null ? p : "");
   });
-  me(() => {
-    var u, p, s, h;
-    y(ve.transform.getPlainText((s = (p = (u = m.current) == null ? void 0 : u.getDocumentData().body) == null ? void 0 : p.dataStream) != null ? s : ""));
-    const c = (h = m.current) == null ? void 0 : h.selectionChange$.subscribe(() => {
-      var K, _, b;
-      y(ve.transform.getPlainText((b = (_ = (K = m.current) == null ? void 0 : K.getDocumentData().body) == null ? void 0 : _.dataStream) != null ? b : ""));
+  de(() => {
+    var m, p, S, g;
+    y(ve.transform.getPlainText((S = (p = (m = c.current) == null ? void 0 : m.getDocumentData().body) == null ? void 0 : p.dataStream) != null ? S : ""));
+    const u = (g = c.current) == null ? void 0 : g.selectionChange$.subscribe(() => {
+      var l, _, W;
+      y(ve.transform.getPlainText((W = (_ = (l = c.current) == null ? void 0 : l.getDocumentData().body) == null ? void 0 : _.dataStream) != null ? W : ""));
     });
-    return () => c == null ? void 0 : c.unsubscribe();
-  }, [(R = m.current) == null ? void 0 : R.selectionChange$]);
-  const M = ne(() => ({
-    keyCodes: [{ keyCode: ge.ENTER }],
-    handler: (c) => {
-      c === ge.ENTER && T.executeCommand(
-        vt.id
+    return () => u == null ? void 0 : u.unsubscribe();
+  }, [(R = c.current) == null ? void 0 : R.selectionChange$]);
+  const V = ee(() => ({
+    keyCodes: [{ keyCode: pe.ENTER }],
+    handler: (u) => {
+      u === pe.ENTER && w.executeCommand(
+        mt.id
       );
     }
-  }), [T]);
-  ut(e, () => ({
-    reply(c) {
-      var u, p;
-      (u = m.current) == null || u.focus(), (p = m.current) == null || p.setDocumentData(xe(c));
+  }), [w]);
+  ct(e, () => ({
+    reply(u) {
+      var p, S;
+      if (!c.current)
+        return;
+      b.focus((p = c.current.getEditorId()) != null ? p : "");
+      const m = ye(u);
+      (S = c.current) == null || S.setDocumentData(m, [{
+        startOffset: m.body.dataStream.length - 2,
+        endOffset: m.body.dataStream.length - 2,
+        collapsed: !0
+      }]);
     }
   }));
   const I = () => {
-    if (m.current) {
-      const c = Je.deepClone(m.current.getDocumentData().body);
-      P(!1), r == null || r({
+    if (c.current) {
+      const u = Ye.deepClone(c.current.getDocumentData().body);
+      T(!1), r == null || r({
         ...n,
-        text: c
-      }), m.current.replaceText(""), setTimeout(() => {
-        var u, p;
-        (u = m.current) == null || u.setSelectionRanges([]), (p = m.current) == null || p.blur();
+        text: u
+      }), c.current.replaceText(""), setTimeout(() => {
+        var m, p;
+        (m = c.current) == null || m.setSelectionRanges([]), (p = c.current) == null || p.blur();
       }, 10);
     }
   };
-  return /* @__PURE__ */ S("div", { className: _e.threadCommentEditor, onClick: (c) => c.preventDefault(), children: [
-    /* @__PURE__ */ l(
-      Ct,
+  return /* @__PURE__ */ x("div", { onClick: (u) => u.preventDefault(), children: [
+    /* @__PURE__ */ a(
+      ft,
       {
-        editorRef: m,
+        className: "univer-w-full",
+        editorRef: c,
         autoFocus: d,
-        style: { width: "100%" },
-        keyboardEventConfig: M,
+        keyboardEventConfig: V,
         placeholder: O.t("threadCommentUI.editor.placeholder"),
-        initialValue: (n == null ? void 0 : n.text) && xe(n.text),
-        onFocusChange: (c) => c && P(c),
+        initialValue: (n == null ? void 0 : n.text) && ye(n.text),
+        onFocusChange: (u) => u && T(u),
         isSingle: !1,
         maxHeight: 64,
         onClickOutside: () => {
           setTimeout(() => {
-            U.focus(f);
+            b.focus(v);
           }, 30);
         }
       }
     ),
-    w ? /* @__PURE__ */ S("div", { className: _e.threadCommentEditorButtons, children: [
-      /* @__PURE__ */ l(
-        ce,
+    P ? /* @__PURE__ */ x("div", { className: "univer-mt-3 univer-flex univer-flex-row univer-justify-end", children: [
+      /* @__PURE__ */ a(
+        se,
         {
           style: { marginRight: 12 },
           onClick: () => {
-            var c;
-            a == null || a(), P(!1), (c = m.current) == null || c.replaceText("", !0), T.executeCommand(F.id);
+            var u;
+            o == null || o(), T(!1), (u = c.current) == null || u.replaceText("", !0), w.executeCommand(K.id);
           },
           children: O.t("threadCommentUI.editor.cancel")
         }
       ),
-      /* @__PURE__ */ l(
-        ce,
+      /* @__PURE__ */ a(
+        se,
         {
           variant: "primary",
-          disabled: !$,
+          disabled: !E,
           onClick: I,
           children: O.t(i ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
         }
       )
     ] }) : null
   ] });
-}), wt = (t) => {
+}), Rt = (t) => {
   const { dataStream: e, customRanges: n } = t, r = e.endsWith(`\r
 `) ? e.length - 2 : e.length, i = [];
-  let a = 0;
+  let o = 0;
   return n == null || n.forEach((d) => {
-    a < d.startIndex && i.push({
+    o < d.startIndex && i.push({
       type: "text",
-      content: e.slice(a, d.startIndex)
+      content: e.slice(o, d.startIndex)
     }), i.push({
       type: "mention",
       content: {
         label: e.slice(d.startIndex, d.endIndex + 1),
         id: d.rangeId
       }
-    }), a = d.endIndex + 1;
+    }), o = d.endIndex + 1;
   }), i.push({
     type: "text",
-    content: e.slice(a, r)
+    content: e.slice(o, r)
   }), i;
-}, Lt = (t) => {
+}, jt = (t) => {
   const { paragraphs: e = [] } = t;
   let n = 0;
   return e.map((r) => {
-    const i = Xe(t, n, r.startIndex);
-    return n = r.startIndex + 1, wt(i);
+    const i = Je(t, n, r.startIndex);
+    return n = r.startIndex + 1, Rt(i);
   });
-}, Vt = (t) => {
+}, Ht = (t) => {
   let e = "";
   const n = [];
   return t.forEach((r) => {
@@ -332,19 +337,20 @@ const Le = j((t, e) => {
       case "mention": {
         const i = e.length;
         e += r.content.label;
-        const a = e.length - 1;
+        const o = e.length - 1;
         n.push({
           rangeId: r.content.id,
-          rangeType: Qe.MENTION,
+          rangeType: qe.MENTION,
           startIndex: i,
-          endIndex: a,
-          properties: {}
+          endIndex: o,
+          properties: {},
+          wholeEntity: !0
         });
         break;
       }
     }
-  }), e += `
-\r`, {
+  }), e += `\r
+`, {
     textRuns: [],
     paragraphs: [
       {
@@ -360,147 +366,167 @@ const Le = j((t, e) => {
     dataStream: e,
     customRanges: n
   };
-}, jt = "univer-thread-comment", At = "univer-thread-comment-active", Bt = "univer-thread-comment-content", Wt = "univer-thread-comment-highlight", Ft = "univer-thread-comment-icon-container", zt = "univer-thread-comment-icon", Zt = "univer-thread-comment-title", Kt = "univer-thread-comment-title-position", Gt = "univer-thread-comment-title-highlight", Yt = "univer-thread-comment-title-position-text", qt = "univer-thread-comment-username", Jt = "univer-thread-comment-item", Qt = "univer-thread-comment-item-head", Xt = "univer-thread-comment-item-title", en = "univer-thread-comment-item-time", tn = "univer-thread-comment-item-content", nn = "univer-thread-comment-item-at", C = {
-  threadComment: jt,
-  threadCommentActive: At,
-  threadCommentContent: Bt,
-  threadCommentHighlight: Wt,
-  threadCommentIconContainer: Ft,
-  threadCommentIcon: zt,
-  threadCommentTitle: Zt,
-  threadCommentTitlePosition: Kt,
-  threadCommentTitleHighlight: Gt,
-  threadCommentTitlePositionText: Yt,
-  threadCommentUsername: qt,
-  threadCommentItem: Jt,
-  threadCommentItemHead: Qt,
-  threadCommentItemTitle: Xt,
-  threadCommentItemTime: en,
-  threadCommentItemContent: tn,
-  threadCommentItemAt: nn
-}, Ve = "__mock__", rn = (t) => {
-  const { item: e, unitId: n, subUnitId: r, editing: i, onEditingChange: a, onReply: d, resolved: v, isRoot: g, onClose: T, onDeleteComment: O, type: w } = t, P = N(ie), U = N(fe), m = N(pe), f = m.getUser(e.personId), $ = W(m.currentUser$), y = ($ == null ? void 0 : $.userID) === e.personId, M = e.id === Ve, [I, R] = V(!1), c = () => {
-    (O == null ? void 0 : O(e)) !== !1 && (P.executeCommand(
-      g ? Ee.id : at.id,
+}, He = "__mock__", Lt = (t) => {
+  const { item: e, unitId: n, subUnitId: r, editing: i, onEditingChange: o, 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 = ot(lt), m = u == null ? void 0 : u.avatarFallback, p = () => {
+    (O == null ? void 0 : O(e)) !== !1 && (T.executeCommand(
+      h ? we.id : it.id,
       {
         unitId: n,
         subUnitId: r,
         commentId: e.id
       }
-    ), g && (T == null || T()));
+    ), h && (w == null || w()));
   };
-  return /* @__PURE__ */ S("div", { className: C.threadCommentItem, onMouseLeave: () => R(!1), onMouseEnter: () => R(!0), children: [
-    /* @__PURE__ */ l("img", { className: C.threadCommentItemHead, src: f == null ? void 0 : f.avatar }),
-    /* @__PURE__ */ S("div", { className: C.threadCommentItemTitle, children: [
-      /* @__PURE__ */ l("div", { className: C.threadCommentUsername, children: (f == null ? void 0 : f.name) || " " }),
-      /* @__PURE__ */ S("div", { children: [
-        M || v ? null : I ? /* @__PURE__ */ l("div", { className: C.threadCommentIcon, onClick: () => d(f), children: /* @__PURE__ */ l(ke, {}) }) : null,
-        y && !M && !v ? /* @__PURE__ */ l(
-          mt,
+  return /* @__PURE__ */ x("div", { className: "univer-relative univer-mb-3 univer-pl-[30px]", onMouseLeave: () => R(!1), onMouseEnter: () => R(!0), children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: `
+                  univer-absolute univer-left-0 univer-top-0 univer-h-6 univer-w-6 univer-rounded-full univer-bg-cover
+                  univer-bg-center univer-bg-no-repeat
+                `,
+        style: {
+          backgroundImage: `url(${(v == null ? void 0 : v.avatar) || m})`
+        }
+      }
+    ),
+    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",
           {
-            overlay: /* @__PURE__ */ l("div", { className: "univer-rounded-lg univer-p-4 univer-theme", children: /* @__PURE__ */ S(
+            className: `
+                                                  univer-ml-1 univer-inline-flex univer-h-6 univer-w-6
+                                                  univer-cursor-pointer univer-items-center univer-justify-center
+                                                  univer-rounded-sm univer-text-base
+                                                  hover:univer-bg-gray-50
+                                                `,
+            onClick: () => d(v),
+            children: /* @__PURE__ */ a($e, {})
+          }
+        ) : null,
+        y && !V && !f ? /* @__PURE__ */ a(
+          ut,
+          {
+            overlay: /* @__PURE__ */ a("div", { className: "univer-rounded-lg", children: /* @__PURE__ */ x(
               "ul",
               {
                 className: `
-                                              univer-m-0 univer-grid univer-list-none univer-gap-2 univer-p-0
-                                              univer-text-sm
-                                              [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-p-1
-                                            `,
+                                                      univer-m-0 univer-box-border univer-grid univer-list-none
+                                                      univer-p-1.5 univer-text-[13px] univer-text-sm
+                                                      [&_a]:univer-block [&_a]:univer-cursor-pointer
+                                                      [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5
+                                                      [&_a]:univer-transition-colors
+                                                    `,
                 children: [
-                  /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+                  /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
                     "a",
                     {
                       className: "hover:univer-bg-gray-200",
-                      onClick: () => a == null ? void 0 : a(!0),
-                      children: U.t("threadCommentUI.item.edit")
+                      onClick: () => o == null ? void 0 : o(!0),
+                      children: b.t("threadCommentUI.item.edit")
                     }
                   ) }),
-                  /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(
+                  /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
                     "a",
                     {
                       className: "hover:univer-bg-gray-200",
-                      onClick: c,
-                      children: U.t("threadCommentUI.item.delete")
+                      onClick: p,
+                      children: b.t("threadCommentUI.item.delete")
                     }
                   ) })
                 ]
               }
             ) }),
-            children: /* @__PURE__ */ l("div", { className: C.threadCommentIcon, children: /* @__PURE__ */ l(Me, {}) })
+            children: /* @__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-sm
+                                              univer-text-base
+                                              hover:univer-bg-gray-50
+                                            `,
+                children: /* @__PURE__ */ a(De, {})
+              }
+            )
           }
         ) : null
       ] })
-    ] }),
-    /* @__PURE__ */ l("div", { className: C.threadCommentItemTime, children: e.dT }),
-    i ? /* @__PURE__ */ l(
-      Le,
+    ] }) : null,
+    /* @__PURE__ */ a("div", { className: "univer-mb-1 univer-text-xs/normal univer-text-gray-600", children: e.dT }),
+    i ? /* @__PURE__ */ a(
+      je,
       {
-        type: w,
+        type: P,
         id: e.id,
         comment: e,
-        onCancel: () => a == null ? void 0 : a(!1),
+        onCancel: () => o == null ? void 0 : o(!1),
         autoFocus: !0,
         unitId: n,
         subUnitId: r,
-        onSave: ({ text: u, attachments: p }) => {
-          a == null || a(!1), P.executeCommand(
-            ot.id,
+        onSave: ({ text: S, attachments: g }) => {
+          o == null || o(!1), T.executeCommand(
+            rt.id,
             {
               unitId: n,
               subUnitId: r,
               payload: {
                 commentId: e.id,
-                text: u,
-                attachments: p
+                text: S,
+                attachments: g
               }
             }
           );
         }
       }
-    ) : /* @__PURE__ */ l("div", { className: C.threadCommentItemContent, children: Lt(e.text).map((u, p) => /* @__PURE__ */ l("div", { className: "univer-break-words", children: u.map((s, h) => {
-      switch (s.type) {
+    ) : /* @__PURE__ */ a("div", { className: "univer-text-[13px]/normal univer-text-gray-900", children: jt(e.text).map((S, g) => /* @__PURE__ */ a("div", { className: "univer-break-words", children: S.map((l, _) => {
+      switch (l.type) {
         case "mention":
-          return /* @__PURE__ */ S("a", { className: C.threadCommentItemAt, children: [
-            s.content.label,
+          return /* @__PURE__ */ x("a", { className: "univer-text-primary-600", children: [
+            l.content.label,
             " "
-          ] }, h);
+          ] }, _);
         default:
-          return s.content;
+          return l.content;
       }
-    }) }, p)) })
+    }) }, g)) })
   ] });
-}, on = (t) => {
-  var X, ee, se;
+}, Pt = (t) => {
+  var ae, X, s;
   const {
     id: e,
     unitId: n,
     subUnitId: r,
     refStr: i,
-    showEdit: a = !0,
+    showEdit: o = !0,
     onClick: d,
-    showHighlight: v,
-    onClose: g,
-    getSubUnitName: T,
+    showHighlight: f,
+    onClose: h,
+    getSubUnitName: w,
     prefix: O,
-    autoFocus: w,
-    onMouseEnter: P,
-    onMouseLeave: U,
-    onAddComment: m,
-    onDeleteComment: f,
-    onResolve: $,
-    type: y
-  } = t, M = N(Ue), [I, R] = V(!1), [c, u] = V(""), p = ne(() => M.commentUpdate$.pipe(lt(16)), [M]);
-  W(p);
-  const s = e ? M.getCommentWithChildren(n, r, e) : null, h = N(ie), K = N(pe), _ = s == null ? void 0 : s.root.resolved, b = W(K.currentUser$), G = re(null), oe = [
-    ...s ? [s.root] : (
+    autoFocus: P,
+    onMouseEnter: T,
+    onMouseLeave: b,
+    onAddComment: c,
+    onDeleteComment: v,
+    onResolve: E,
+    type: y,
+    style: V,
+    full: I
+  } = t, R = N(Ne), [u, m] = A(!1), [p, S] = A(""), g = ee(() => R.commentUpdate$.pipe(st(16)), [R]);
+  G(g);
+  const l = e ? R.getCommentWithChildren(n, r, e) : null, _ = N(ne), W = N(he), k = l == null ? void 0 : l.root.resolved, D = G(W.currentUser$), H = te(null), J = [
+    ...l ? [l.root] : (
       // mock empty comment
       [{
-        id: Ve,
+        id: He,
         text: {
           dataStream: `
 \r`
         },
-        personId: (X = b == null ? void 0 : b.userID) != null ? X : "",
+        personId: (ae = D == null ? void 0 : D.userID) != null ? ae : "",
         ref: i != null ? i : "",
         dT: "",
         unitId: n,
@@ -508,231 +534,299 @@ const Le = j((t, e) => {
         threadId: ""
       }]
     ),
-    ...(ee = s == null ? void 0 : s.children) != null ? ee : []
-  ], D = re(null), q = (x) => {
-    x.stopPropagation(), _ ? h.executeCommand(F.id, {
+    ...(X = l == null ? void 0 : l.children) != null ? X : []
+  ], j = te(null), re = (C) => {
+    C.stopPropagation(), k ? _.executeCommand(K.id, {
       unitId: n,
       subUnitId: r,
       commentId: e
-    }) : h.executeCommand(F.id), h.executeCommand(it.id, {
+    }) : _.executeCommand(K.id), _.executeCommand(nt.id, {
       unitId: n,
       subUnitId: r,
       commentId: e,
-      resolved: !_
-    }), $ == null || $(!_);
-  }, L = (x) => {
-    x.stopPropagation(), h.executeCommand(F.id), !(s != null && s.root && (f == null ? void 0 : f(s.root)) === !1) && (h.executeCommand(
-      Ee.id,
+      resolved: !k
+    }), E == null || E(!k);
+  }, Q = (C) => {
+    C.stopPropagation(), _.executeCommand(K.id), !(l != null && l.root && (v == null ? void 0 : v(l.root)) === !1) && (_.executeCommand(
+      we.id,
       {
         unitId: n,
         subUnitId: r,
         commentId: e
       }
-    ), g == null || g());
+    ), h == null || h());
   };
-  me(() => U == null ? void 0 : U(), []);
-  const J = T((se = s == null ? void 0 : s.root.subUnitId) != null ? se : r), Q = a && !c && !_, ae = `${i || (s == null ? void 0 : s.root.ref) || ""}${J ? " · " : ""}${J}`;
-  return /* @__PURE__ */ S(
+  de(() => b == null ? void 0 : b(), []);
+  const ie = w((s = l == null ? void 0 : l.root.subUnitId) != null ? s : r), oe = o && !p && !k, le = `${i || (l == null ? void 0 : l.root.ref) || ""}${ie ? " · " : ""}${ie}`;
+  return /* @__PURE__ */ x(
     "div",
     {
-      className: dt(C.threadComment, {
-        [C.threadCommentActive]: !_ && (v || I || O === "cell")
-      }),
+      className: Ce(
+        `
+                  univer-relative univer-box-border univer-rounded-md univer-border univer-border-solid
+                  univer-border-gray-200 univer-bg-white univer-p-4
+                `,
+        I ? "univer-w-full" : "univer-w-[278px]",
+        {
+          "univer-shadow": !k && (f || u || O === "cell")
+        }
+      ),
+      style: V,
       onClick: d,
       id: `${O}-${n}-${r}-${e}`,
       onMouseEnter: () => {
-        P == null || P(), R(!0);
+        T == null || T(), m(!0);
       },
       onMouseLeave: () => {
-        U == null || U(), R(!1);
+        b == null || b(), m(!1);
       },
       children: [
-        !_ && v ? /* @__PURE__ */ l("div", { className: C.threadCommentHighlight }) : null,
-        /* @__PURE__ */ S("div", { className: C.threadCommentTitle, children: [
-          /* @__PURE__ */ S("div", { className: C.threadCommentTitlePosition, children: [
-            /* @__PURE__ */ l("div", { className: C.threadCommentTitleHighlight }),
-            /* @__PURE__ */ l(ct, { showIfEllipsis: !0, title: ae, children: /* @__PURE__ */ l("div", { className: C.threadCommentTitlePositionText, children: ae }) })
-          ] }),
-          s ? /* @__PURE__ */ S("div", { className: C.threadCommentIconContainer, children: [
-            /* @__PURE__ */ l(
-              "div",
-              {
-                onClick: q,
-                className: C.threadCommentIcon,
-                style: { color: _ ? "rgb(var(--green-500))" : "" },
-                children: _ ? /* @__PURE__ */ l(Re, {}) : /* @__PURE__ */ l(we, {})
-              }
-            ),
-            (b == null ? void 0 : b.userID) === s.root.personId ? /* @__PURE__ */ l("div", { className: C.threadCommentIcon, onClick: L, children: /* @__PURE__ */ l(De, {}) }) : null
-          ] }) : null
-        ] }),
-        /* @__PURE__ */ l("div", { className: C.threadCommentContent, ref: D, children: oe.map(
-          (x) => /* @__PURE__ */ l(
-            rn,
-            {
-              onClose: g,
-              unitId: n,
-              subUnitId: r,
-              item: x,
-              isRoot: x.id === (s == null ? void 0 : s.root.id),
-              editing: c === x.id,
-              resolved: s == null ? void 0 : s.root.resolved,
-              type: y,
-              onEditingChange: (o) => {
-                u(o ? x.id : "");
-              },
-              onReply: (o) => {
-                o && requestAnimationFrame(() => {
-                  var k;
-                  (k = G.current) == null || k.reply(Vt([{
-                    type: "mention",
-                    content: {
-                      id: o.userID,
-                      label: o.name
-                    }
-                  }]));
-                });
-              },
-              onAddComment: m,
-              onDeleteComment: f
-            },
-            x.id
-          )
-        ) }),
-        Q ? /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(
-          Le,
+        !k && f ? /* @__PURE__ */ a(
+          "div",
+          {
+            className: `
+                          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__ */ x(
+          "div",
           {
-            ref: G,
+            className: `
+                  univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm
+                  univer-leading-5
+                `,
+            children: [
+              /* @__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-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0
+                          univer-rounded-sm univer-bg-yellow-400
+                        `
+                  }
+                ),
+                /* @__PURE__ */ a(dt, { showIfEllipsis: !0, title: le, children: /* @__PURE__ */ a(
+                  "div",
+                  {
+                    className: `
+                              univer-flex-1 univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap
+                            `,
+                    children: le
+                  }
+                ) })
+              ] }),
+              l ? /* @__PURE__ */ x("div", { className: "univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row", children: [
+                /* @__PURE__ */ a(
+                  "div",
+                  {
+                    onClick: re,
+                    className: Ce(
+                      `
+                                      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
+                                      hover:univer-bg-gray-50
+                                    `,
+                      {
+                        "univer-text-green-500": k
+                      }
+                    ),
+                    children: k ? /* @__PURE__ */ a(Me, {}) : /* @__PURE__ */ a(Re, {})
+                  }
+                ),
+                (D == null ? void 0 : D.userID) === l.root.personId ? /* @__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
+                                          hover:univer-bg-gray-50
+                                        `,
+                    onClick: Q,
+                    children: /* @__PURE__ */ a(Ee, {})
+                  }
+                ) : null
+              ] }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            ref: j,
+            className: "univer-max-h-[300px] univer-overflow-y-auto univer-overflow-x-hidden",
+            children: J.map(
+              (C) => /* @__PURE__ */ a(
+                Lt,
+                {
+                  onClose: h,
+                  unitId: n,
+                  subUnitId: r,
+                  item: C,
+                  isRoot: C.id === (l == null ? void 0 : l.root.id),
+                  editing: p === C.id,
+                  resolved: l == null ? void 0 : l.root.resolved,
+                  type: y,
+                  onEditingChange: ($) => {
+                    S($ ? C.id : "");
+                  },
+                  onReply: ($) => {
+                    $ && requestAnimationFrame(() => {
+                      var L;
+                      (L = H.current) == null || L.reply(Ht([
+                        {
+                          type: "mention",
+                          content: {
+                            id: $.userID,
+                            label: `@${$.name}`
+                          }
+                        },
+                        {
+                          type: "text",
+                          content: " "
+                        }
+                      ]));
+                    });
+                  },
+                  onAddComment: c,
+                  onDeleteComment: v
+                },
+                C.id
+              )
+            )
+          }
+        ),
+        oe ? /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(
+          je,
+          {
+            ref: H,
             type: y,
             unitId: n,
             subUnitId: r,
-            onSave: async ({ text: x, attachments: o }) => {
-              const k = {
-                text: x,
-                attachments: o,
-                dT: nt(),
-                id: et(),
+            onSave: async ({ text: C, attachments: $ }) => {
+              const L = {
+                text: C,
+                attachments: $,
+                dT: et(),
+                id: Qe(),
                 ref: i,
-                personId: b == null ? void 0 : b.userID,
-                parentId: s == null ? void 0 : s.root.id,
+                personId: D == null ? void 0 : D.userID,
+                parentId: l == null ? void 0 : l.root.id,
                 unitId: n,
                 subUnitId: r,
-                threadId: s == null ? void 0 : s.root.threadId
+                threadId: l == null ? void 0 : l.root.threadId
               };
-              (m == null ? void 0 : m(k)) !== !1 && (await h.executeCommand(
-                rt.id,
+              (c == null ? void 0 : c(L)) !== !1 && (await _.executeCommand(
+                tt.id,
                 {
                   unitId: n,
                   subUnitId: r,
-                  comment: k
+                  comment: L
                 }
-              ), D.current && (D.current.scrollTop = D.current.scrollHeight));
+              ), j.current && (j.current.scrollTop = j.current.scrollHeight));
             },
-            autoFocus: w || !s,
+            autoFocus: P || !l,
             onCancel: () => {
-              s || g == null || g();
+              l || h == null || h();
             }
           },
-          `${w}`
+          `${P}`
         ) }) : null
       ]
     }
   );
-}, an = "univer-thread-comment-panel", sn = "univer-thread-comment-panel-forms", ln = "univer-thread-comment-panel-empty", dn = "univer-thread-comment-panel-add", cn = "univer-thread-comment-panel-solved", te = {
-  threadCommentPanel: an,
-  threadCommentPanelForms: sn,
-  threadCommentPanelEmpty: ln,
-  threadCommentPanelAdd: dn,
-  threadCommentPanelSolved: cn
-}, bn = (t) => {
+}, Yt = (t) => {
   const {
     unitId: e,
     subUnitId$: n,
     type: r,
     onAdd: i,
-    getSubUnitName: a,
+    getSubUnitName: o,
     onResolve: d,
-    sortComments: v,
-    onItemLeave: g,
-    onItemEnter: T,
+    sortComments: f,
+    onItemLeave: h,
+    onItemEnter: w,
     disableAdd: O,
-    tempComment: w,
-    onAddComment: P,
-    onDeleteComment: U,
-    showComments: m
-  } = t, [f, $] = V("all"), [y, M] = V("all"), I = N(fe), R = N(pe), c = N(Ue), [u, p] = V(() => c.getUnit(e)), s = N(Y), h = W(s.activeCommentId$), K = W(c.commentUpdate$), _ = N(ie), b = W(n), G = re(!0), oe = "panel", D = W(R.currentUser$), q = ne(() => {
-    var de;
-    const o = f === "all" ? u : (de = u.filter((E) => E.subUnitId === b)) != null ? de : [], k = v != null ? v : (E) => E, le = o.map((E) => {
-      var A;
-      return { ...E.root, children: (A = E.children) != null ? A : [], users: E.relativeUsers };
+    tempComment: P,
+    onAddComment: T,
+    onDeleteComment: b,
+    showComments: c
+  } = 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$), l = G(u.commentUpdate$), _ = N(ne), W = G(n), k = te(!0), D = "panel", H = G(R.currentUser$), J = ee(() => {
+    var L;
+    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 };
     });
-    if (m) {
-      const E = /* @__PURE__ */ new Map();
-      return le.forEach((A) => {
-        E.set(A.id, A);
-      }), [...m, ""].map((A) => E.get(A)).filter(Boolean);
+    if (c) {
+      const U = /* @__PURE__ */ new Map();
+      return $.forEach((F) => {
+        U.set(F.id, F);
+      }), [...c, ""].map((F) => U.get(F)).filter(Boolean);
     } else
-      return k(le);
-  }, [m, f, u, v, b]), L = ne(() => [
-    ...q.filter((o) => !o.resolved),
-    ...q.filter((o) => o.resolved)
-  ], [q]), J = ne(() => y === "resolved" ? L.filter((o) => o.resolved) : y === "unsolved" ? L.filter((o) => !o.resolved) : y === "concern_me" && D != null && D.userID ? L.filter((o) => o == null ? void 0 : o.users.has(D.userID)) : L, [L, D == null ? void 0 : D.userID, y]), Q = w ? [w, ...J] : J, ae = Q.filter((o) => !o.resolved), X = Q.filter((o) => o.resolved), ee = y !== "all" || f !== "all", se = () => {
-    M("all"), $("all");
+      return C($);
+  }, [c, v, m, f, W]), j = ee(() => [
+    ...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), oe = Q.filter((s) => s.resolved), le = y !== "all" || v !== "all", ae = () => {
+    V("all"), E("all");
   };
-  me(() => {
+  de(() => {
     e && p(
-      c.getUnit(e)
+      u.getUnit(e)
     );
-  }, [e, c, K]), me(() => {
-    var E;
-    if (!h)
+  }, [e, u, l]), de(() => {
+    var U;
+    if (!g)
       return;
-    if (!G.current) {
-      G.current = !0;
+    if (!k.current) {
+      k.current = !0;
       return;
     }
-    const { unitId: o, subUnitId: k, commentId: le } = h, de = `${oe}-${o}-${k}-${le}`;
-    (E = document.getElementById(de)) == null || E.scrollIntoView({ block: "center" });
-  }, [h]);
-  const x = (o) => /* @__PURE__ */ l(
-    on,
+    const { unitId: s, subUnitId: C, commentId: $ } = g, L = `${D}-${s}-${C}-${$}`;
+    (U = document.getElementById(L)) == null || U.scrollIntoView({ block: "center" });
+  }, [g]);
+  const X = (s) => /* @__PURE__ */ a(
+    Pt,
     {
-      prefix: oe,
-      getSubUnitName: a,
-      id: o.id,
-      unitId: o.unitId,
-      subUnitId: o.subUnitId,
-      refStr: o.ref,
+      full: !0,
+      prefix: D,
+      getSubUnitName: o,
+      id: s.id,
+      unitId: s.unitId,
+      subUnitId: s.subUnitId,
+      refStr: s.ref,
       type: r,
-      showEdit: (h == null ? void 0 : h.commentId) === o.id,
-      showHighlight: (h == null ? void 0 : h.commentId) === o.id,
+      showEdit: (g == null ? void 0 : g.commentId) === s.id,
+      showHighlight: (g == null ? void 0 : g.commentId) === s.id,
       onClick: () => {
-        G.current = !1, o.resolved ? _.executeCommand(F.id) : _.executeCommand(
-          F.id,
+        k.current = !1, s.resolved ? _.executeCommand(K.id) : _.executeCommand(
+          K.id,
           {
-            unitId: o.unitId,
-            subUnitId: o.subUnitId,
-            commentId: o.id,
+            unitId: s.unitId,
+            subUnitId: s.subUnitId,
+            commentId: s.id,
             temp: !1
           }
         );
       },
-      onMouseEnter: () => T == null ? void 0 : T(o),
-      onMouseLeave: () => g == null ? void 0 : g(o),
-      onAddComment: P,
-      onDeleteComment: U,
-      onResolve: (k) => d == null ? void 0 : d(o.id, k)
+      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(s.id, C)
     },
-    o.id
+    s.id
   );
-  return /* @__PURE__ */ S("div", { className: te.threadCommentPanel, children: [
-    /* @__PURE__ */ S("div", { className: te.threadCommentPanelForms, children: [
-      r === he.UNIVER_SHEET ? /* @__PURE__ */ l(
-        be,
+  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: f,
-          onChange: (o) => $(o),
+          value: v,
           options: [
             {
               value: "current",
@@ -742,15 +836,15 @@ const Le = j((t, e) => {
               value: "all",
               label: I.t("threadCommentUI.filter.sheet.all")
             }
-          ]
+          ],
+          onChange: E
         }
       ) : null,
-      /* @__PURE__ */ l(
-        be,
+      /* @__PURE__ */ a(
+        Ie,
         {
           borderless: !0,
           value: y,
-          onChange: (o) => M(o),
           options: [
             {
               value: "all",
@@ -768,45 +862,39 @@ const Le = j((t, e) => {
               value: "concern_me",
               label: I.t("threadCommentUI.filter.status.concernMe")
             }
-          ]
+          ],
+          onChange: V
         }
       )
     ] }),
-    ae.map(x),
-    X.length ? /* @__PURE__ */ l("div", { className: te.threadCommentPanelSolved, children: "已解决" }) : null,
-    X.map(x),
-    Q.length ? null : /* @__PURE__ */ S("div", { className: te.threadCommentPanelEmpty, children: [
-      ee ? I.t("threadCommentUI.panel.filterEmpty") : I.t("threadCommentUI.panel.empty"),
-      ee ? /* @__PURE__ */ l(
-        ce,
-        {
-          variant: "link",
-          onClick: se,
-          children: I.t("threadCommentUI.panel.reset")
-        }
-      ) : /* @__PURE__ */ S(
-        ce,
-        {
-          id: "thread-comment-add",
-          className: te.threadCommentPanelAdd,
-          variant: "primary",
-          onClick: i,
-          disabled: O,
-          children: [
-            /* @__PURE__ */ l(He, {}),
-            I.t("threadCommentUI.panel.addComment")
-          ]
-        }
-      )
+    Q.length === 0 ? /* @__PURE__ */ x(
+      "div",
+      {
+        className: `
+                          univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center
+                          univer-text-[13px] univer-text-gray-600
+                        `,
+        children: [
+          I.t("threadCommentUI.panel.empty"),
+          le ? /* @__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__ */ x("div", { className: "univer-mt-3 univer-flex univer-flex-col univer-gap-3", children: [
+      ie.map(X),
+      oe.length > 0 && /* @__PURE__ */ a("div", { className: "univer-text-xs", children: I.t("threadCommentUI.panel.solved") }),
+      oe.map(X)
     ] })
   ] });
 };
 export {
-  F as SetActiveCommentOperation,
+  K as SetActiveCommentOperation,
   gt as THREAD_COMMENT_PANEL,
-  bn as ThreadCommentPanel,
-  Y as ThreadCommentPanelService,
-  on as ThreadCommentTree,
-  bt as ToggleSheetCommentPanelOperation,
+  Yt as ThreadCommentPanel,
+  q as ThreadCommentPanelService,
+  Pt as ThreadCommentTree,
+  It as ToggleSheetCommentPanelOperation,
   ue as UniverThreadCommentUIPlugin
 };