@univerjs/thread-comment-ui 0.4.2 → 0.5.0-beta.0

package/lib/es/index.js

@@ -1,330 +1,40 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { Inject, Disposable, UniverInstanceType, IUniverInstanceService, CommandType, createIdentifier, DependentOn, Injector, Plugin, mergeOverrideWithDependencies, ICommandService, IConfigService, CustomRangeType, useDependency, LocaleService, UserManagerService, generateRandomId } from "@univerjs/core";
-import { UniverThreadCommentPlugin, ThreadCommentModel, AddCommentCommand, UpdateCommentCommand, ResolveCommentCommand, DeleteCommentTreeCommand, DeleteCommentCommand } from "@univerjs/thread-comment";
-import { ISidebarService, useObservable } from "@univerjs/ui";
-import { BehaviorSubject, filter, debounceTime } from "rxjs";
-import { Mentions, Mention, Button, Tooltip, Dropdown, Menu, MenuItem, Select } from "@univerjs/design";
-import React, { forwardRef, useRef, createElement, useState, useImperativeHandle, useMemo, useEffect } from "react";
-import { DocSelectionManagerService } from "@univerjs/docs";
-import { DocSelectionRenderService } from "@univerjs/docs-ui";
-import { IRenderManagerService } from "@univerjs/engine-render";
-import { IThreadCommentMentionDataService as IThreadCommentMentionDataService$1 } from "@univerjs/thread-comment-ui";
-var commonjsGlobal = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
-__name(getDefaultExportFromCjs, "getDefaultExportFromCjs");
-var dayjs_min = { exports: {} };
-(function(module, exports) {
-  (function(t, e) {
-    module.exports = e();
-  })(commonjsGlobal, function() {
-    var t = 1e3, e = 6e4, n = 36e5, r2 = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", c = "month", f = "quarter", h = "year", d = "date", l = "Invalid Date", $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: /* @__PURE__ */ __name(function(t2) {
-      var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
-      return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
-    }, "ordinal") }, m = /* @__PURE__ */ __name(function(t2, e2, n2) {
-      var r3 = String(t2);
-      return !r3 || r3.length >= e2 ? t2 : "" + Array(e2 + 1 - r3.length).join(n2) + t2;
-    }, "m"), v = { s: m, z: /* @__PURE__ */ __name(function(t2) {
-      var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r3 = Math.floor(n2 / 60), i2 = n2 % 60;
-      return (e2 <= 0 ? "+" : "-") + m(r3, 2, "0") + ":" + m(i2, 2, "0");
-    }, "z"), m: /* @__PURE__ */ __name(function t2(e2, n2) {
-      if (e2.date() < n2.date()) return -t2(n2, e2);
-      var r3 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r3, c), s2 = n2 - i2 < 0, u2 = e2.clone().add(r3 + (s2 ? -1 : 1), c);
-      return +(-(r3 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0);
-    }, "t"), a: /* @__PURE__ */ __name(function(t2) {
-      return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
-    }, "a"), p: /* @__PURE__ */ __name(function(t2) {
-      return { M: c, y: h, w: o, d: a, D: d, h: u, m: s, s: i, ms: r2, Q: f }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
-    }, "p"), u: /* @__PURE__ */ __name(function(t2) {
-      return t2 === void 0;
-    }, "u") }, g = "en", D = {};
-    D[g] = M;
-    var p = "$isDayjsObject", S = /* @__PURE__ */ __name(function(t2) {
-      return t2 instanceof _ || !(!t2 || !t2[p]);
-    }, "S"), w = /* @__PURE__ */ __name(function t2(e2, n2, r3) {
-      var i2;
-      if (!e2) return g;
-      if (typeof e2 == "string") {
-        var s2 = e2.toLowerCase();
-        D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2);
-        var u2 = e2.split("-");
-        if (!i2 && u2.length > 1) return t2(u2[0]);
-      } else {
-        var a2 = e2.name;
-        D[a2] = e2, i2 = a2;
-      }
-      return !r3 && i2 && (g = i2), i2 || !r3 && g;
-    }, "t"), O = /* @__PURE__ */ __name(function(t2, e2) {
-      if (S(t2)) return t2.clone();
-      var n2 = typeof e2 == "object" ? e2 : {};
-      return n2.date = t2, n2.args = arguments, new _(n2);
-    }, "O"), b = v;
-    b.l = w, b.i = S, b.w = function(t2, e2) {
-      return O(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
-    };
-    var _ = function() {
-      function M2(t2) {
-        this.$L = w(t2.locale, null, !0), this.parse(t2), this.$x = this.$x || t2.x || {}, this[p] = !0;
-      }
-      __name(M2, "M");
-      var m2 = M2.prototype;
-      return m2.parse = function(t2) {
-        this.$d = function(t3) {
-          var e2 = t3.date, n2 = t3.utc;
-          if (e2 === null) return /* @__PURE__ */ new Date(NaN);
-          if (b.u(e2)) return /* @__PURE__ */ new Date();
-          if (e2 instanceof Date) return new Date(e2);
-          if (typeof e2 == "string" && !/Z$/i.test(e2)) {
-            var r3 = e2.match($);
-            if (r3) {
-              var i2 = r3[2] - 1 || 0, s2 = (r3[7] || "0").substring(0, 3);
-              return n2 ? new Date(Date.UTC(r3[1], i2, r3[3] || 1, r3[4] || 0, r3[5] || 0, r3[6] || 0, s2)) : new Date(r3[1], i2, r3[3] || 1, r3[4] || 0, r3[5] || 0, r3[6] || 0, s2);
-            }
-          }
-          return new Date(e2);
-        }(t2), this.init();
-      }, m2.init = function() {
-        var t2 = this.$d;
-        this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
-      }, m2.$utils = function() {
-        return b;
-      }, m2.isValid = function() {
-        return this.$d.toString() !== l;
-      }, m2.isSame = function(t2, e2) {
-        var n2 = O(t2);
-        return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
-      }, m2.isAfter = function(t2, e2) {
-        return O(t2) < this.startOf(e2);
-      }, m2.isBefore = function(t2, e2) {
-        return this.endOf(e2) < O(t2);
-      }, m2.$g = function(t2, e2, n2) {
-        return b.u(t2) ? this[e2] : this.set(n2, t2);
-      }, m2.unix = function() {
-        return Math.floor(this.valueOf() / 1e3);
-      }, m2.valueOf = function() {
-        return this.$d.getTime();
-      }, m2.startOf = function(t2, e2) {
-        var n2 = this, r3 = !!b.u(e2) || e2, f2 = b.p(t2), l2 = /* @__PURE__ */ __name(function(t3, e3) {
-          var i2 = b.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
-          return r3 ? i2 : i2.endOf(a);
-        }, "l"), $2 = /* @__PURE__ */ __name(function(t3, e3) {
-          return b.w(n2.toDate()[t3].apply(n2.toDate("s"), (r3 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
-        }, "$"), y2 = this.$W, M3 = this.$M, m3 = this.$D, v2 = "set" + (this.$u ? "UTC" : "");
-        switch (f2) {
-          case h:
-            return r3 ? l2(1, 0) : l2(31, 11);
-          case c:
-            return r3 ? l2(1, M3) : l2(0, M3 + 1);
-          case o:
-            var g2 = this.$locale().weekStart || 0, D2 = (y2 < g2 ? y2 + 7 : y2) - g2;
-            return l2(r3 ? m3 - D2 : m3 + (6 - D2), M3);
-          case a:
-          case d:
-            return $2(v2 + "Hours", 0);
-          case u:
-            return $2(v2 + "Minutes", 1);
-          case s:
-            return $2(v2 + "Seconds", 2);
-          case i:
-            return $2(v2 + "Milliseconds", 3);
-          default:
-            return this.clone();
-        }
-      }, m2.endOf = function(t2) {
-        return this.startOf(t2, !1);
-      }, m2.$set = function(t2, e2) {
-        var n2, o2 = b.p(t2), f2 = "set" + (this.$u ? "UTC" : ""), l2 = (n2 = {}, n2[a] = f2 + "Date", n2[d] = f2 + "Date", n2[c] = f2 + "Month", n2[h] = f2 + "FullYear", n2[u] = f2 + "Hours", n2[s] = f2 + "Minutes", n2[i] = f2 + "Seconds", n2[r2] = f2 + "Milliseconds", n2)[o2], $2 = o2 === a ? this.$D + (e2 - this.$W) : e2;
-        if (o2 === c || o2 === h) {
-          var y2 = this.clone().set(d, 1);
-          y2.$d[l2]($2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d;
-        } else l2 && this.$d[l2]($2);
-        return this.init(), this;
-      }, m2.set = function(t2, e2) {
-        return this.clone().$set(t2, e2);
-      }, m2.get = function(t2) {
-        return this[b.p(t2)]();
-      }, m2.add = function(r3, f2) {
-        var d2, l2 = this;
-        r3 = Number(r3);
-        var $2 = b.p(f2), y2 = /* @__PURE__ */ __name(function(t2) {
-          var e2 = O(l2);
-          return b.w(e2.date(e2.date() + Math.round(t2 * r3)), l2);
-        }, "y");
-        if ($2 === c) return this.set(c, this.$M + r3);
-        if ($2 === h) return this.set(h, this.$y + r3);
-        if ($2 === a) return y2(1);
-        if ($2 === o) return y2(7);
-        var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[$2] || 1, m3 = this.$d.getTime() + r3 * M3;
-        return b.w(m3, this);
-      }, m2.subtract = function(t2, e2) {
-        return this.add(-1 * t2, e2);
-      }, m2.format = function(t2) {
-        var e2 = this, n2 = this.$locale();
-        if (!this.isValid()) return n2.invalidDate || l;
-        var r3 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = b.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, c2 = n2.months, f2 = n2.meridiem, h2 = /* @__PURE__ */ __name(function(t3, n3, i3, s3) {
-          return t3 && (t3[n3] || t3(e2, r3)) || i3[n3].slice(0, s3);
-        }, "h"), d2 = /* @__PURE__ */ __name(function(t3) {
-          return b.s(s2 % 12 || 12, t3, "0");
-        }, "d"), $2 = f2 || function(t3, e3, n3) {
-          var r4 = t3 < 12 ? "AM" : "PM";
-          return n3 ? r4.toLowerCase() : r4;
-        };
-        return r3.replace(y, function(t3, r4) {
-          return r4 || function(t4) {
-            switch (t4) {
-              case "YY":
-                return String(e2.$y).slice(-2);
-              case "YYYY":
-                return b.s(e2.$y, 4, "0");
-              case "M":
-                return a2 + 1;
-              case "MM":
-                return b.s(a2 + 1, 2, "0");
-              case "MMM":
-                return h2(n2.monthsShort, a2, c2, 3);
-              case "MMMM":
-                return h2(c2, a2);
-              case "D":
-                return e2.$D;
-              case "DD":
-                return b.s(e2.$D, 2, "0");
-              case "d":
-                return String(e2.$W);
-              case "dd":
-                return h2(n2.weekdaysMin, e2.$W, o2, 2);
-              case "ddd":
-                return h2(n2.weekdaysShort, e2.$W, o2, 3);
-              case "dddd":
-                return o2[e2.$W];
-              case "H":
-                return String(s2);
-              case "HH":
-                return b.s(s2, 2, "0");
-              case "h":
-                return d2(1);
-              case "hh":
-                return d2(2);
-              case "a":
-                return $2(s2, u2, !0);
-              case "A":
-                return $2(s2, u2, !1);
-              case "m":
-                return String(u2);
-              case "mm":
-                return b.s(u2, 2, "0");
-              case "s":
-                return String(e2.$s);
-              case "ss":
-                return b.s(e2.$s, 2, "0");
-              case "SSS":
-                return b.s(e2.$ms, 3, "0");
-              case "Z":
-                return i2;
-            }
-            return null;
-          }(t3) || i2.replace(":", "");
-        });
-      }, m2.utcOffset = function() {
-        return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
-      }, m2.diff = function(r3, d2, l2) {
-        var $2, y2 = this, M3 = b.p(d2), m3 = O(r3), v2 = (m3.utcOffset() - this.utcOffset()) * e, g2 = this - m3, D2 = /* @__PURE__ */ __name(function() {
-          return b.m(y2, m3);
-        }, "D");
-        switch (M3) {
-          case h:
-            $2 = D2() / 12;
-            break;
-          case c:
-            $2 = D2();
-            break;
-          case f:
-            $2 = D2() / 3;
-            break;
-          case o:
-            $2 = (g2 - v2) / 6048e5;
-            break;
-          case a:
-            $2 = (g2 - v2) / 864e5;
-            break;
-          case u:
-            $2 = g2 / n;
-            break;
-          case s:
-            $2 = g2 / e;
-            break;
-          case i:
-            $2 = g2 / t;
-            break;
-          default:
-            $2 = g2;
-        }
-        return l2 ? $2 : b.a($2);
-      }, m2.daysInMonth = function() {
-        return this.endOf(c).$D;
-      }, m2.$locale = function() {
-        return D[this.$L];
-      }, m2.locale = function(t2, e2) {
-        if (!t2) return this.$L;
-        var n2 = this.clone(), r3 = w(t2, e2, !0);
-        return r3 && (n2.$L = r3), n2;
-      }, m2.clone = function() {
-        return b.w(this.$d, this);
-      }, m2.toDate = function() {
-        return new Date(this.valueOf());
-      }, m2.toJSON = function() {
-        return this.isValid() ? this.toISOString() : null;
-      }, m2.toISOString = function() {
-        return this.$d.toISOString();
-      }, m2.toString = function() {
-        return this.$d.toUTCString();
-      }, M2;
-    }(), k = _.prototype;
-    return O.prototype = k, [["$ms", r2], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", c], ["$y", h], ["$D", d]].forEach(function(t2) {
-      k[t2[1]] = function(e2) {
-        return this.$g(e2, t2[0], t2[1]);
-      };
-    }), O.extend = function(t2, e2) {
-      return t2.$i || (t2(e2, _, O), t2.$i = !0), O;
-    }, O.locale = w, O.isDayjs = S, O.unix = function(t2) {
-      return O(1e3 * t2);
-    }, O.en = D[g], O.Ls = D, O.p = {}, O;
-  });
-})(dayjs_min);
-var dayjs_minExports = dayjs_min.exports;
-const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
-function getDT() {
-  return dayjs().format("YYYY/MM/DD HH:mm");
-}
-__name(getDT, "getDT");
-var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$1(target, key, result), result;
-}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a;
-let ThreadCommentPanelService = (_a = class extends Disposable {
-  constructor(_sidebarService, _univerInstanceService) {
+var We = Object.defineProperty;
+var ze = (t, e, r) => e in t ? We(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var w = (t, e, r) => ze(t, typeof e != "symbol" ? e + "" : e, r);
+import { Inject as Se, Disposable as Ze, UniverInstanceType as he, IUniverInstanceService as Ge, CommandType as ye, createIdentifier as qe, DependentOn as Ke, Injector as Ye, Plugin as Je, mergeOverrideWithDependencies as Qe, ICommandService as re, IConfigService as Xe, CustomRangeType as et, useDependency as x, LocaleService as fe, UserManagerService as ge, generateRandomId as tt } from "@univerjs/core";
+import { UniverThreadCommentPlugin as nt, ThreadCommentModel as _e, getDT as rt, AddCommentCommand as ot, UpdateCommentCommand as it, ResolveCommentCommand as st, DeleteCommentTreeCommand as je, DeleteCommentCommand as at } from "@univerjs/thread-comment";
+import { ISidebarService as Ne, useObservable as F } from "@univerjs/ui";
+import { BehaviorSubject as pe, filter as lt, debounceTime as dt } from "rxjs";
+import mt, { forwardRef as A, useRef as ne, createElement as z, useState as k, useImperativeHandle as ct, useMemo as le, useEffect as Ce } from "react";
+import { Mentions as ht, Mention as ut, Button as de, Tooltip as vt, Dropdown as Ct, Menu as ft, MenuItem as Ie, Select as xe } from "@univerjs/design";
+import { DocSelectionManagerService as gt } from "@univerjs/docs";
+import { DocSelectionRenderService as pt } from "@univerjs/docs-ui";
+import { IRenderManagerService as It } from "@univerjs/engine-render";
+var xt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, St = (t, e, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? bt(e, r) : e, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (o = (n ? d(e, r, o) : d(o)) || o);
+  return n && o && xt(e, r, o), o;
+}, be = (t, e) => (r, n) => e(r, n, t);
+let q = class extends Ze {
+  constructor(e, r) {
     super();
-    __publicField(this, "_panelVisible", !1);
-    __publicField(this, "_panelVisible$", new BehaviorSubject(!1));
-    __publicField(this, "_activeCommentId");
-    __publicField(this, "_activeCommentId$", new BehaviorSubject(void 0));
-    __publicField(this, "panelVisible$", this._panelVisible$.asObservable());
-    __publicField(this, "activeCommentId$", this._activeCommentId$.asObservable());
-    this._sidebarService = _sidebarService, this._univerInstanceService = _univerInstanceService, this._init(), this.disposeWithMe(() => {
+    w(this, "_panelVisible", !1);
+    w(this, "_panelVisible$", new pe(!1));
+    w(this, "_activeCommentId");
+    w(this, "_activeCommentId$", new pe(void 0));
+    w(this, "panelVisible$", this._panelVisible$.asObservable());
+    w(this, "activeCommentId$", this._activeCommentId$.asObservable());
+    this._sidebarService = e, this._univerInstanceService = r, this._init(), this.disposeWithMe(() => {
       this._activeCommentId$.complete(), this._panelVisible$.complete();
     });
   }
   _init() {
     this.disposeWithMe(
-      this._sidebarService.sidebarOptions$.subscribe((opt) => {
-        opt.visible || this.setPanelVisible(!1);
+      this._sidebarService.sidebarOptions$.subscribe((e) => {
+        e.visible || this.setPanelVisible(!1);
       })
     ), this.disposeWithMe(
-      this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(filter((sheet) => !sheet)).subscribe(() => {
+      this._univerInstanceService.getCurrentTypeOfUnit$(he.UNIVER_SHEET).pipe(lt((e) => !e)).subscribe(() => {
         this._sidebarService.close();
       })
     );
@@ -335,733 +45,800 @@ let ThreadCommentPanelService = (_a = class extends Disposable {
   get activeCommentId() {
     return this._activeCommentId;
   }
-  setPanelVisible(visible) {
-    this._panelVisible = visible, this._panelVisible$.next(visible);
+  setPanelVisible(e) {
+    this._panelVisible = e, this._panelVisible$.next(e);
   }
-  setActiveComment(commentInfo) {
-    this._activeCommentId = commentInfo, this._activeCommentId$.next(commentInfo);
+  setActiveComment(e) {
+    this._activeCommentId = e, this._activeCommentId$.next(e);
   }
-}, __name(_a, "ThreadCommentPanelService"), _a);
-ThreadCommentPanelService = __decorateClass$1([
-  __decorateParam$1(0, Inject(ISidebarService)),
-  __decorateParam$1(1, IUniverInstanceService)
-], ThreadCommentPanelService);
-const THREAD_COMMENT_PANEL = "thread-comment-panel", PLUGIN_NAME = "UNIVER_THREAD_COMMENT_UI_PLUGIN", ToggleSheetCommentPanelOperation = {
+};
+q = St([
+  be(0, Se(Ne)),
+  be(1, Ge)
+], q);
+const yt = "thread-comment-panel", _t = "UNIVER_THREAD_COMMENT_UI_PLUGIN", jt = {
   id: "thread-comment-ui.operation.toggle-panel",
-  type: CommandType.OPERATION,
-  handler(accessor) {
-    const sidebarService = accessor.get(ISidebarService), panelService = accessor.get(ThreadCommentPanelService);
-    return panelService.panelVisible ? (sidebarService.close(), panelService.setPanelVisible(!1)) : (sidebarService.open({
+  type: ye.OPERATION,
+  handler(t) {
+    const e = t.get(Ne), r = t.get(q);
+    return r.panelVisible ? (e.close(), r.setPanelVisible(!1)) : (e.open({
       header: { title: "threadCommentUI.panel.title" },
-      children: { label: THREAD_COMMENT_PANEL },
+      children: { label: yt },
       width: 330
-    }), panelService.setPanelVisible(!0)), !0;
+    }), r.setPanelVisible(!0)), !0;
   }
-}, SetActiveCommentOperation = {
+}, W = {
   id: "thread-comment-ui.operation.set-active-comment",
-  type: CommandType.OPERATION,
-  handler(accessor, params) {
-    return accessor.get(ThreadCommentPanelService).setActiveComment(params), !0;
+  type: ye.OPERATION,
+  handler(t, e) {
+    return t.get(q).setActiveComment(e), !0;
   }
-}, PLUGIN_CONFIG_KEY = "thread-comment-ui.config", defaultPluginConfig = {}, _ThreadCommentMentionDataService = class _ThreadCommentMentionDataService {
+}, Nt = "thread-comment-ui.config", Tt = {};
+class Ut {
   constructor() {
-    __publicField(this, "dataSource");
-    __publicField(this, "renderSuggestion");
-    __publicField(this, "trigger", "@");
+    w(this, "dataSource");
+    w(this, "renderSuggestion");
+    w(this, "trigger", "@");
   }
-  async getMentions(search, unitId, subUnitId) {
-    return this.dataSource ? this.dataSource.getMentions(search, unitId, subUnitId) : [];
+  async getMentions(e, r, n) {
+    return this.dataSource ? this.dataSource.getMentions(e, r, n) : [];
   }
-};
-__name(_ThreadCommentMentionDataService, "ThreadCommentMentionDataService");
-let ThreadCommentMentionDataService = _ThreadCommentMentionDataService;
-const IThreadCommentMentionDataService = createIdentifier("thread-comment.mention-data.service");
-var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __defNormalProp2 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp"), __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
-    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp2(target, key, result), result;
-}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField"), _a2;
-let UniverThreadCommentUIPlugin = (_a2 = class extends Plugin {
-  constructor(_config = defaultPluginConfig, _injector, _commandService, _configService) {
-    super(), this._config = _config, this._injector = _injector, this._commandService = _commandService, this._configService = _configService;
-    const { menu, ...rest } = this._config;
-    menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest);
+}
+const Te = qe("thread-comment.mention-data.service");
+var Ue = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, Mt = (t, e, r) => e in t ? Ue(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Ot = (t, e, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? Et(e, r) : e, a = t.length - 1, d; a >= 0; a--)
+    (d = t[a]) && (o = (n ? d(e, r, o) : d(o)) || o);
+  return n && o && Ue(e, r, o), o;
+}, ve = (t, e) => (r, n) => e(r, n, t), Ee = (t, e, r) => Mt(t, typeof e != "symbol" ? e + "" : e, r);
+let me = class extends Je {
+  constructor(t = Tt, e, r, n) {
+    super(), this._config = t, this._injector = e, this._commandService = r, this._configService = n;
+    const { menu: o, ...a } = this._config;
+    o && this._configService.setConfig("menu", o, { merge: !0 }), this._configService.setConfig(Nt, a);
   }
   onStarting() {
-    var _a3;
-    mergeOverrideWithDependencies([
-      [ThreadCommentPanelService],
-      [IThreadCommentMentionDataService, { useClass: ThreadCommentMentionDataService }]
-    ], (_a3 = this._config) == null ? void 0 : _a3.overrides).forEach((dep) => {
-      this._injector.add(dep);
-    }), [ToggleSheetCommentPanelOperation, SetActiveCommentOperation].forEach((command) => {
-      this._commandService.registerCommand(command);
+    var t;
+    Qe([
+      [q],
+      [Te, { useClass: Ut }]
+    ], (t = this._config) == null ? void 0 : t.overrides).forEach((e) => {
+      this._injector.add(e);
+    }), [jt, W].forEach((e) => {
+      this._commandService.registerCommand(e);
     });
   }
-}, __name(_a2, "UniverThreadCommentUIPlugin"), _a2);
-__publicField2(UniverThreadCommentUIPlugin, "pluginName", PLUGIN_NAME);
-__publicField2(UniverThreadCommentUIPlugin, "type", UniverInstanceType.UNIVER_UNKNOWN);
-UniverThreadCommentUIPlugin = __decorateClass([
-  DependentOn(UniverThreadCommentPlugin),
-  __decorateParam(1, Inject(Injector)),
-  __decorateParam(2, ICommandService),
-  __decorateParam(3, IConfigService)
-], UniverThreadCommentUIPlugin);
-var __assign = function() {
-  return __assign = Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
+};
+Ee(me, "pluginName", _t);
+Ee(me, "type", he.UNIVER_UNKNOWN);
+me = Ot([
+  Ke(nt),
+  ve(1, Se(Ye)),
+  ve(2, re),
+  ve(3, Xe)
+], me);
+var Me = { exports: {} }, ue = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Pt = mt, $t = Symbol.for("react.element"), wt = Symbol.for("react.fragment"), Rt = Object.prototype.hasOwnProperty, Ht = Pt.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, Dt = { key: !0, ref: !0, __self: !0, __source: !0 };
+function Oe(t, e, r) {
+  var n, o = {}, a = null, d = null;
+  r !== void 0 && (a = "" + r), e.key !== void 0 && (a = "" + e.key), e.ref !== void 0 && (d = e.ref);
+  for (n in e) Rt.call(e, n) && !Dt.hasOwnProperty(n) && (o[n] = e[n]);
+  if (t && t.defaultProps) for (n in e = t.defaultProps, e) o[n] === void 0 && (o[n] = e[n]);
+  return { $$typeof: $t, type: t, key: a, ref: d, props: o, _owner: Ht.current };
+}
+ue.Fragment = wt;
+ue.jsx = Oe;
+ue.jsxs = Oe;
+Me.exports = ue;
+var i = Me.exports, M = function() {
+  return M = Object.assign || function(t) {
+    for (var e, r = 1, n = arguments.length; r < n; r++) {
+      e = arguments[r];
+      for (var o in e) Object.prototype.hasOwnProperty.call(e, o) && (t[o] = e[o]);
     }
     return t;
-  }, __assign.apply(this, arguments);
-}, __rest = function(s, e) {
-  var t = {};
-  for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
-  if (s != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++)
-      e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
-  return t;
-}, IconBase = forwardRef(function(props, ref) {
-  var icon = props.icon, id = props.id, className = props.className, extend = props.extend, restProps = __rest(props, ["icon", "id", "className", "extend"]), cls = "univerjs-icon univerjs-icon-".concat(id, " ").concat(className || "").trim(), idSuffix = useRef("_".concat(generateShortUuid()));
-  return render(icon, "".concat(id), { defIds: icon.defIds, idSuffix: idSuffix.current }, __assign({ ref, className: cls }, restProps), extend);
+  }, M.apply(this, arguments);
+}, kt = function(t, e) {
+  var r = {};
+  for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && e.indexOf(n) < 0 && (r[n] = t[n]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var o = 0, n = Object.getOwnPropertySymbols(t); o < n.length; o++)
+      e.indexOf(n[o]) < 0 && Object.prototype.propertyIsEnumerable.call(t, n[o]) && (r[n[o]] = t[n[o]]);
+  return r;
+}, Z = A(function(t, e) {
+  var r = t.icon, n = t.id, o = t.className, a = t.extend, d = kt(t, ["icon", "id", "className", "extend"]), c = "univerjs-icon univerjs-icon-".concat(n, " ").concat(o || "").trim(), v = ne("_".concat(Vt()));
+  return Pe(r, "".concat(n), { defIds: r.defIds, idSuffix: v.current }, M({ ref: e, className: c }, d), a);
 });
-function render(node, id, runtimeProps, rootProps, extend) {
-  return createElement(node.tag, __assign(__assign({ key: id }, replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend)), rootProps), (replaceRuntimeIdsInDefs(node, runtimeProps).children || []).map(function(child, index) {
-    return render(child, "".concat(id, "-").concat(node.tag, "-").concat(index), runtimeProps, void 0, extend);
+function Pe(t, e, r, n, o) {
+  return z(t.tag, M(M({ key: e }, At(t, r, o)), n), (Lt(t, r).children || []).map(function(a, d) {
+    return Pe(a, "".concat(e, "-").concat(t.tag, "-").concat(d), r, void 0, o);
   }));
 }
-__name(render, "render");
-function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
-  var attrs = __assign({}, node.attrs);
-  extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
-  var defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a3) {
-    var key = _a3[0], value = _a3[1];
-    typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
-  })), attrs;
+function At(t, e, r) {
+  var n = M({}, t.attrs);
+  r != null && r.colorChannel1 && n.fill === "colorChannel1" && (n.fill = r.colorChannel1);
+  var o = e.defIds;
+  return !o || o.length === 0 || (t.tag === "use" && n["xlink:href"] && (n["xlink:href"] = n["xlink:href"] + e.idSuffix), Object.entries(n).forEach(function(a) {
+    var d = a[0], c = a[1];
+    typeof c == "string" && (n[d] = c.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
+  })), n;
 }
-__name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
-function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a3, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a3 = node.children) === null || _a3 === void 0) && _a3.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
-    return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
-  }) }) : node;
+function Lt(t, e) {
+  var r, n = e.defIds;
+  return !n || n.length === 0 ? t : t.tag === "defs" && (!((r = t.children) === null || r === void 0) && r.length) ? M(M({}, t), { children: t.children.map(function(o) {
+    return typeof o.attrs.id == "string" && n && n.indexOf(o.attrs.id) > -1 ? M(M({}, o), { attrs: M(M({}, o.attrs), { id: o.attrs.id + e.idSuffix }) }) : o;
+  }) }) : t;
 }
-__name(replaceRuntimeIdsInDefs, "replaceRuntimeIdsInDefs");
-function generateShortUuid() {
+function Vt() {
   return Math.random().toString(36).substring(2, 8);
 }
-__name(generateShortUuid, "generateShortUuid");
-IconBase.displayName = "UniverIcon";
-var element$5 = { 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" } }] }, DeleteSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+Z.displayName = "UniverIcon";
+var Bt = { 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" } }] }, $e = A(function(t, e) {
+  return z(Z, Object.assign({}, t, {
     id: "delete-single",
-    ref,
-    icon: element$5
+    ref: e,
+    icon: Bt
   }));
 });
-DeleteSingle.displayName = "DeleteSingle";
-var element$4 = { 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" } }] }, IncreaseSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+$e.displayName = "DeleteSingle";
+var Ft = { 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" } }] }, we = A(function(t, e) {
+  return z(Z, Object.assign({}, t, {
     id: "increase-single",
-    ref,
-    icon: element$4
+    ref: e,
+    icon: Ft
   }));
 });
-IncreaseSingle.displayName = "IncreaseSingle";
-var element$3 = { 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" } }] }, MoreHorizontalSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+we.displayName = "IncreaseSingle";
+var Wt = { 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" } }] }, Re = A(function(t, e) {
+  return z(Z, Object.assign({}, t, {
     id: "more-horizontal-single",
-    ref,
-    icon: element$3
+    ref: e,
+    icon: Wt
   }));
 });
-MoreHorizontalSingle.displayName = "MoreHorizontalSingle";
-var element$2 = { 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 } }] }, ReplyToCommentSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+Re.displayName = "MoreHorizontalSingle";
+var zt = { 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 } }] }, He = A(function(t, e) {
+  return z(Z, Object.assign({}, t, {
     id: "reply-to-comment-single",
-    ref,
-    icon: element$2
+    ref: e,
+    icon: zt
   }));
 });
-ReplyToCommentSingle.displayName = "ReplyToCommentSingle";
-var element$1 = { 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" } }] }, ResolvedSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+He.displayName = "ReplyToCommentSingle";
+var Zt = { 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" } }] }, De = A(function(t, e) {
+  return z(Z, Object.assign({}, t, {
     id: "resolved-single",
-    ref,
-    icon: element$1
+    ref: e,
+    icon: Zt
   }));
 });
-ResolvedSingle.displayName = "ResolvedSingle";
-var element = { 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 } }] }, SolveSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
+De.displayName = "ResolvedSingle";
+var Gt = { 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 } }] }, ke = A(function(t, e) {
+  return z(Z, Object.assign({}, t, {
     id: "solve-single",
-    ref,
-    icon: element
+    ref: e,
+    icon: Gt
   }));
 });
-SolveSingle.displayName = "SolveSingle";
-function r(e) {
-  var t, f, n = "";
-  if (typeof e == "string" || typeof e == "number") n += e;
-  else if (typeof e == "object") if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
+ke.displayName = "SolveSingle";
+function Ae(t) {
+  var e, r, n = "";
+  if (typeof t == "string" || typeof t == "number") n += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var o = t.length;
+    for (e = 0; e < o; e++) t[e] && (r = Ae(t[e])) && (n && (n += " "), n += r);
+  } else for (r in t) t[r] && (n && (n += " "), n += r);
   return n;
 }
-__name(r, "r");
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+function qt() {
+  for (var t, e, r = 0, n = "", o = arguments.length; r < o; r++) (t = arguments[r]) && (e = Ae(t)) && (n && (n += " "), n += e);
   return n;
 }
-__name(clsx, "clsx");
-const threadCommentEditorButtons = "univer-thread-comment-editor-buttons", threadCommentEditorSuggestion = "univer-thread-comment-editor-suggestion", threadCommentEditorSuggestionActive = "univer-thread-comment-editor-suggestionActive", threadCommentEditorSuggestionIcon = "univer-thread-comment-editor-suggestion-icon", styles$2 = {
-  threadCommentEditorButtons,
-  threadCommentEditorSuggestion,
-  threadCommentEditorSuggestionActive,
-  threadCommentEditorSuggestionIcon
-}, parseMentions = /* @__PURE__ */ __name((text) => {
-  const regex = /@\[(.*?)\]\((.*?)\)|(\w+)/g;
-  let match, lastIndex = 0;
-  const result = [];
-  for (; (match = regex.exec(text)) !== null; )
-    match.index > lastIndex && result.push({
+const Kt = "univer-thread-comment-editor-buttons", Yt = "univer-thread-comment-editor-suggestion", Jt = "univer-thread-comment-editor-suggestionActive", Qt = "univer-thread-comment-editor-suggestion-icon", ce = {
+  threadCommentEditorButtons: Kt,
+  threadCommentEditorSuggestion: Yt,
+  threadCommentEditorSuggestionActive: Jt,
+  threadCommentEditorSuggestionIcon: Qt
+}, Xt = (t) => {
+  const e = /@\[(.*?)\]\((.*?)\)|(\w+)/g;
+  let r, n = 0;
+  const o = [];
+  for (; (r = e.exec(t)) !== null; )
+    r.index > n && o.push({
       type: "text",
-      content: text.substring(lastIndex, match.index)
-    }), match[1] && match[2] ? result.push({
+      content: t.substring(n, r.index)
+    }), r[1] && r[2] ? o.push({
       type: "mention",
       content: {
-        label: match[1],
-        id: match[2]
+        label: r[1],
+        id: r[2]
       }
-    }) : match[3] && result.push({
+    }) : r[3] && o.push({
       type: "text",
-      content: match[3]
-    }), lastIndex = regex.lastIndex;
-  return lastIndex < text.length && result.push({
+      content: r[3]
+    }), n = e.lastIndex;
+  return n < t.length && o.push({
     type: "text",
-    content: text.substring(lastIndex)
-  }), result;
-}, "parseMentions"), transformTextNode2Text = /* @__PURE__ */ __name((nodes) => nodes.map((item) => {
-  switch (item.type) {
+    content: t.substring(n)
+  }), o;
+}, en = (t) => t.map((e) => {
+  switch (e.type) {
     case "mention":
-      return `@[${item.content.label}](${item.content.id})`;
+      return `@[${e.content.label}](${e.content.id})`;
     default:
-      return item.content;
+      return e.content;
   }
-}).join(""), "transformTextNode2Text"), transformDocument2TextNodes = /* @__PURE__ */ __name((doc) => {
-  const { dataStream, customRanges } = doc, end = dataStream.length - 2, textNodes = [];
-  let lastIndex = 0;
-  return customRanges == null || customRanges.forEach((range) => {
-    lastIndex < range.startIndex && textNodes.push({
+}).join(""), Le = (t) => {
+  const { dataStream: e, customRanges: r } = t, n = e.length - 2, o = [];
+  let a = 0;
+  return r == null || r.forEach((d) => {
+    a < d.startIndex && o.push({
       type: "text",
-      content: dataStream.slice(lastIndex, range.startIndex)
-    }), textNodes.push({
+      content: e.slice(a, d.startIndex)
+    }), o.push({
       type: "mention",
       content: {
-        label: dataStream.slice(range.startIndex, range.endIndex).slice(1, -1),
-        id: range.rangeId
+        label: e.slice(d.startIndex, d.endIndex).slice(1, -1),
+        id: d.rangeId
       }
-    }), lastIndex = range.endIndex;
-  }), textNodes.push({
+    }), a = d.endIndex;
+  }), o.push({
     type: "text",
-    content: dataStream.slice(lastIndex, end)
-  }), textNodes;
-}, "transformDocument2TextNodes"), transformTextNodes2Document = /* @__PURE__ */ __name((nodes) => {
-  let str = "";
-  const customRanges = [];
-  return nodes.forEach((node) => {
-    switch (node.type) {
+    content: e.slice(a, n)
+  }), o;
+}, Ve = (t) => {
+  let e = "";
+  const r = [];
+  return t.forEach((n) => {
+    switch (n.type) {
       case "text":
-        str += node.content;
+        e += n.content;
         break;
       case "mention": {
-        const start = str.length;
-        str += `${node.content.label}`;
-        const end = str.length;
-        customRanges.push({
-          rangeId: node.content.id,
-          rangeType: CustomRangeType.MENTION,
-          startIndex: start,
-          endIndex: end
+        const o = e.length;
+        e += `${n.content.label}`;
+        const a = e.length;
+        r.push({
+          rangeId: n.content.id,
+          rangeType: et.MENTION,
+          startIndex: o,
+          endIndex: a,
+          properties: {}
         });
         break;
       }
     }
-  }), str += `
+  }), e += `
 \r`, {
     textRuns: [],
     paragraphs: [
       {
-        startIndex: str.length - 2,
+        startIndex: e.length - 2,
         paragraphStyle: {}
       }
     ],
     sectionBreaks: [
       {
-        startIndex: str.length - 1
+        startIndex: e.length - 1
       }
     ],
-    dataStream: str,
-    customRanges
+    dataStream: e,
+    customRanges: r
   };
-}, "transformTextNodes2Document"), transformMention = /* @__PURE__ */ __name((mention) => ({
-  display: mention.label,
-  id: `${mention.id}`,
-  raw: mention
-}), "transformMention"), defaultRenderSuggestion = /* @__PURE__ */ __name((mention, search, highlightedDisplay, index, focused) => {
-  var _a3, _b;
-  const icon = (_a3 = mention.raw) == null ? void 0 : _a3.icon;
-  return /* @__PURE__ */ React.createElement("div", { className: styles$2.threadCommentEditorSuggestion }, icon ? /* @__PURE__ */ React.createElement("img", { className: styles$2.threadCommentEditorSuggestionIcon, src: icon }) : null, /* @__PURE__ */ React.createElement("div", null, (_b = mention.display) != null ? _b : mention.id));
-}, "defaultRenderSuggestion"), ThreadCommentEditor = forwardRef((props, ref) => {
-  var _a3, _b;
-  const { comment, onSave, id, onCancel, autoFocus, unitId, subUnitId } = props, mentionDataService = useDependency(IThreadCommentMentionDataService$1), commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), [localComment, setLocalComment] = useState({ ...comment }), [editing, setEditing] = useState(!1), inputRef = useRef(null), docSelectionManagerService = useDependency(DocSelectionManagerService), docSelectionRenderService = (_a3 = useDependency(IRenderManagerService).getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a3.with(DocSelectionRenderService);
-  useImperativeHandle(ref, () => ({
-    reply(text) {
-      var _a4;
-      setLocalComment({
-        ...comment,
-        text,
+}, tn = (t) => ({
+  display: t.label,
+  id: `${t.id}`,
+  raw: t
+}), nn = (t, e, r, n, o) => {
+  var d, c;
+  const a = (d = t.raw) == null ? void 0 : d.icon;
+  return /* @__PURE__ */ i.jsxs("div", { className: ce.threadCommentEditorSuggestion, children: [
+    a ? /* @__PURE__ */ i.jsx("img", { className: ce.threadCommentEditorSuggestionIcon, src: a }) : null,
+    /* @__PURE__ */ i.jsx("div", { children: (c = t.display) != null ? c : t.id })
+  ] });
+}, Be = A((t, e) => {
+  var p, U;
+  const { comment: r, onSave: n, id: o, onCancel: a, autoFocus: d, unitId: c, subUnitId: v } = t, S = x(Te), O = x(re), N = x(fe), [f, u] = k({ ...r }), [C, g] = k(!1), T = ne(null), b = x(gt), m = (p = x(It).getCurrentTypeOfRenderer(he.UNIVER_DOC)) == null ? void 0 : p.with(pt);
+  ct(e, () => ({
+    reply(s) {
+      var I;
+      u({
+        ...r,
+        text: s,
         attachments: []
-      }), (_a4 = inputRef.current) == null || _a4.inputElement.focus();
+      }), (I = T.current) == null || I.inputElement.focus();
     }
   }));
-  const handleSave = /* @__PURE__ */ __name(() => {
-    var _a4;
-    localComment.text && (onSave == null || onSave({
-      ...localComment,
-      text: localComment.text
-    }), setEditing(!1), setLocalComment({ text: void 0 }), (_a4 = inputRef.current) == null || _a4.inputElement.blur());
-  }, "handleSave");
-  return /* @__PURE__ */ React.createElement("div", { className: styles$2.threadCommentEditor, onClick: /* @__PURE__ */ __name((e) => e.preventDefault(), "onClick") }, /* @__PURE__ */ React.createElement(
-    Mentions,
-    {
-      ref: inputRef,
-      autoFocus,
-      style: { width: "100%" },
-      placeholder: localeService.t("threadCommentUI.editor.placeholder"),
-      value: localComment != null && localComment.text ? transformTextNode2Text(transformDocument2TextNodes(localComment.text)) : "",
-      onChange: /* @__PURE__ */ __name((e) => {
-        e.target.value || setLocalComment({ ...comment, text: void 0 }), setLocalComment == null || setLocalComment({ ...comment, text: transformTextNodes2Document(parseMentions(e.target.value)) });
-      }, "onChange"),
-      onFocus: /* @__PURE__ */ __name(() => {
-        const activeRange = docSelectionManagerService.getActiveTextRange();
-        activeRange && activeRange.collapsed && (docSelectionRenderService == null || docSelectionRenderService.removeAllRanges()), docSelectionRenderService == null || docSelectionRenderService.blur(), setEditing(!0);
-      }, "onFocus")
-    },
-    /* @__PURE__ */ React.createElement(
-      Mention,
+  const D = () => {
+    var s;
+    f.text && (n == null || n({
+      ...f,
+      text: f.text
+    }), g(!1), u({ text: void 0 }), (s = T.current) == null || s.inputElement.blur());
+  };
+  return /* @__PURE__ */ i.jsxs("div", { className: ce.threadCommentEditor, onClick: (s) => s.preventDefault(), children: [
+    /* @__PURE__ */ i.jsx(
+      ht,
       {
-        key: mentionDataService.trigger,
-        trigger: mentionDataService.trigger,
-        data: /* @__PURE__ */ __name((query, callback) => mentionDataService.getMentions(query, unitId, subUnitId).then((res) => res.map(transformMention)).then(callback), "data"),
-        displayTransform: /* @__PURE__ */ __name((id2, label) => `@${label} `, "displayTransform"),
-        renderSuggestion: (_b = mentionDataService.renderSuggestion) != null ? _b : defaultRenderSuggestion
+        ref: T,
+        autoFocus: d,
+        style: { width: "100%" },
+        placeholder: N.t("threadCommentUI.editor.placeholder"),
+        value: f != null && f.text ? en(Le(f.text)) : "",
+        onChange: (s) => {
+          s.target.value || u({ ...r, text: void 0 }), u == null || u({ ...r, text: Ve(Xt(s.target.value)) });
+        },
+        onFocus: () => {
+          const s = b.getActiveTextRange();
+          s && s.collapsed && (m == null || m.removeAllRanges()), m == null || m.blur(), g(!0);
+        },
+        children: /* @__PURE__ */ i.jsx(
+          ut,
+          {
+            trigger: S.trigger,
+            data: (s, I) => S.getMentions(s, c, v).then((y) => y.map(tn)).then(I),
+            displayTransform: (s, I) => `@${I} `,
+            renderSuggestion: (U = S.renderSuggestion) != null ? U : nn
+          },
+          S.trigger
+        )
       }
-    )
-  ), editing ? /* @__PURE__ */ React.createElement("div", { className: styles$2.threadCommentEditorButtons }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      style: { marginRight: 12 },
-      onClick: /* @__PURE__ */ __name(() => {
-        onCancel == null || onCancel(), setEditing(!1), setLocalComment({ text: void 0 }), commandService.executeCommand(SetActiveCommentOperation.id);
-      }, "onClick")
-    },
-    localeService.t("threadCommentUI.editor.cancel")
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "primary",
-      disabled: !localComment.text,
-      onClick: handleSave
-    },
-    localeService.t(id ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
-  )) : null);
-}), threadComment$1 = "univer-thread-comment", threadCommentActive = "univer-thread-comment-active", threadCommentContent = "univer-thread-comment-content", threadCommentHighlight = "univer-thread-comment-highlight", threadCommentIconContainer = "univer-thread-comment-icon-container", threadCommentIcon = "univer-thread-comment-icon", threadCommentTitle = "univer-thread-comment-title", threadCommentTitlePosition = "univer-thread-comment-title-position", threadCommentTitleHighlight = "univer-thread-comment-title-highlight", threadCommentTitlePositionText = "univer-thread-comment-title-position-text", threadCommentUsername = "univer-thread-comment-username", threadCommentItem = "univer-thread-comment-item", threadCommentItemHead = "univer-thread-comment-item-head", threadCommentItemTitle = "univer-thread-comment-item-title", threadCommentItemTitlePosition = "univer-thread-comment-item-title-position", threadCommentItemTitleHighlight = "univer-thread-comment-item-title-highlight", threadCommentItemTime = "univer-thread-comment-item-time", threadCommentItemContent = "univer-thread-comment-item-content", threadCommentItemAt = "univer-thread-comment-item-at", styles$1 = {
-  threadComment: threadComment$1,
-  threadCommentActive,
-  threadCommentContent,
-  threadCommentHighlight,
-  threadCommentIconContainer,
-  threadCommentIcon,
-  threadCommentTitle,
-  threadCommentTitlePosition,
-  threadCommentTitleHighlight,
-  threadCommentTitlePositionText,
-  threadCommentUsername,
-  threadCommentItem,
-  threadCommentItemHead,
-  threadCommentItemTitle,
-  threadCommentItemTitlePosition,
-  threadCommentItemTitleHighlight,
-  threadCommentItemTime,
-  threadCommentItemContent,
-  threadCommentItemAt
-}, MOCK_ID = "__mock__", ThreadCommentItem = /* @__PURE__ */ __name((props) => {
-  const { item, unitId, subUnitId, editing, onEditingChange, onReply, resolved, isRoot, onClose, onDeleteComment } = props, commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), userManagerService = useDependency(UserManagerService), user = userManagerService.getUser(item.personId), currentUser = useObservable(userManagerService.currentUser$), isCommentBySelf = (currentUser == null ? void 0 : currentUser.userID) === item.personId, isMock = item.id === MOCK_ID, [showReply, setShowReply] = useState(!1), handleDeleteItem = /* @__PURE__ */ __name(() => {
-    (onDeleteComment == null ? void 0 : onDeleteComment(item)) !== !1 && (commandService.executeCommand(
-      isRoot ? DeleteCommentTreeCommand.id : DeleteCommentCommand.id,
+    ),
+    C ? /* @__PURE__ */ i.jsxs("div", { className: ce.threadCommentEditorButtons, children: [
+      /* @__PURE__ */ i.jsx(
+        de,
+        {
+          style: { marginRight: 12 },
+          onClick: () => {
+            a == null || a(), g(!1), u({ text: void 0 }), O.executeCommand(W.id);
+          },
+          children: N.t("threadCommentUI.editor.cancel")
+        }
+      ),
+      /* @__PURE__ */ i.jsx(
+        de,
+        {
+          type: "primary",
+          disabled: !f.text,
+          onClick: D,
+          children: N.t(o ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
+        }
+      )
+    ] }) : null
+  ] });
+}), rn = "univer-thread-comment", on = "univer-thread-comment-active", sn = "univer-thread-comment-content", an = "univer-thread-comment-highlight", ln = "univer-thread-comment-icon-container", dn = "univer-thread-comment-icon", mn = "univer-thread-comment-title", cn = "univer-thread-comment-title-position", hn = "univer-thread-comment-title-highlight", un = "univer-thread-comment-title-position-text", vn = "univer-thread-comment-username", Cn = "univer-thread-comment-item", fn = "univer-thread-comment-item-head", gn = "univer-thread-comment-item-title", pn = "univer-thread-comment-item-title-position", In = "univer-thread-comment-item-title-highlight", xn = "univer-thread-comment-item-time", bn = "univer-thread-comment-item-content", Sn = "univer-thread-comment-item-at", h = {
+  threadComment: rn,
+  threadCommentActive: on,
+  threadCommentContent: sn,
+  threadCommentHighlight: an,
+  threadCommentIconContainer: ln,
+  threadCommentIcon: dn,
+  threadCommentTitle: mn,
+  threadCommentTitlePosition: cn,
+  threadCommentTitleHighlight: hn,
+  threadCommentTitlePositionText: un,
+  threadCommentUsername: vn,
+  threadCommentItem: Cn,
+  threadCommentItemHead: fn,
+  threadCommentItemTitle: gn,
+  threadCommentItemTitlePosition: pn,
+  threadCommentItemTitleHighlight: In,
+  threadCommentItemTime: xn,
+  threadCommentItemContent: bn,
+  threadCommentItemAt: Sn
+}, Fe = "__mock__", yn = (t) => {
+  const { item: e, unitId: r, subUnitId: n, editing: o, onEditingChange: a, onReply: d, resolved: c, isRoot: v, onClose: S, onDeleteComment: O } = t, N = x(re), f = x(fe), u = x(ge), C = u.getUser(e.personId), g = F(u.currentUser$), T = (g == null ? void 0 : g.userID) === e.personId, b = e.id === Fe, [L, m] = k(!1), D = () => {
+    (O == null ? void 0 : O(e)) !== !1 && (N.executeCommand(
+      v ? je.id : at.id,
       {
-        unitId,
-        subUnitId,
-        commentId: item.id
+        unitId: r,
+        subUnitId: n,
+        commentId: e.id
       }
-    ), isRoot && (onClose == null || onClose()));
-  }, "handleDeleteItem");
-  return /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentItem, onMouseLeave: /* @__PURE__ */ __name(() => setShowReply(!1), "onMouseLeave"), onMouseEnter: /* @__PURE__ */ __name(() => setShowReply(!0), "onMouseEnter") }, /* @__PURE__ */ React.createElement("img", { className: styles$1.threadCommentItemHead, src: user == null ? void 0 : user.avatar }), /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentItemTitle }, /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentUsername }, (user == null ? void 0 : user.name) || " "), /* @__PURE__ */ React.createElement("div", null, isMock || resolved ? null : showReply ? /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentIcon, onClick: /* @__PURE__ */ __name(() => onReply(user), "onClick") }, /* @__PURE__ */ React.createElement(ReplyToCommentSingle, null)) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ React.createElement(
-    Dropdown,
-    {
-      overlay: /* @__PURE__ */ React.createElement(Menu, null, /* @__PURE__ */ React.createElement(MenuItem, { key: "edit", onClick: /* @__PURE__ */ __name(() => onEditingChange == null ? void 0 : onEditingChange(!0), "onClick") }, localeService.t("threadCommentUI.item.edit")), /* @__PURE__ */ React.createElement(MenuItem, { key: "delete", onClick: handleDeleteItem }, localeService.t("threadCommentUI.item.delete")))
-    },
-    /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentIcon }, /* @__PURE__ */ React.createElement(MoreHorizontalSingle, null))
-  ) : null)), /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentItemTime }, item.dT), editing ? /* @__PURE__ */ React.createElement(
-    ThreadCommentEditor,
-    {
-      id: item.id,
-      comment: item,
-      onCancel: /* @__PURE__ */ __name(() => onEditingChange == null ? void 0 : onEditingChange(!1), "onCancel"),
-      autoFocus: !0,
-      unitId,
-      subUnitId,
-      onSave: /* @__PURE__ */ __name(({ text, attachments }) => {
-        onEditingChange == null || onEditingChange(!1), commandService.executeCommand(
-          UpdateCommentCommand.id,
+    ), v && (S == null || S()));
+  };
+  return /* @__PURE__ */ i.jsxs("div", { className: h.threadCommentItem, onMouseLeave: () => m(!1), onMouseEnter: () => m(!0), children: [
+    /* @__PURE__ */ i.jsx("img", { className: h.threadCommentItemHead, src: C == null ? void 0 : C.avatar }),
+    /* @__PURE__ */ i.jsxs("div", { className: h.threadCommentItemTitle, children: [
+      /* @__PURE__ */ i.jsx("div", { className: h.threadCommentUsername, children: (C == null ? void 0 : C.name) || " " }),
+      /* @__PURE__ */ i.jsxs("div", { children: [
+        b || c ? null : L ? /* @__PURE__ */ i.jsx("div", { className: h.threadCommentIcon, onClick: () => d(C), children: /* @__PURE__ */ i.jsx(He, {}) }) : null,
+        T && !b && !c ? /* @__PURE__ */ i.jsx(
+          Ct,
           {
-            unitId,
-            subUnitId,
-            payload: {
-              commentId: item.id,
-              text,
-              attachments
-            }
+            overlay: /* @__PURE__ */ i.jsxs(ft, { children: [
+              /* @__PURE__ */ i.jsx(Ie, { onClick: () => a == null ? void 0 : a(!0), children: f.t("threadCommentUI.item.edit") }, "edit"),
+              /* @__PURE__ */ i.jsx(Ie, { onClick: D, children: f.t("threadCommentUI.item.delete") }, "delete")
+            ] }),
+            children: /* @__PURE__ */ i.jsx("div", { className: h.threadCommentIcon, children: /* @__PURE__ */ i.jsx(Re, {}) })
           }
-        );
-      }, "onSave")
-    }
-  ) : /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentItemContent }, transformDocument2TextNodes(item.text).map((item2, i) => {
-    switch (item2.type) {
-      case "mention":
-        return /* @__PURE__ */ React.createElement("a", { className: styles$1.threadCommentItemAt, key: i }, "@", item2.content.label, " ");
-      default:
-        return item2.content;
-    }
-  })));
-}, "ThreadCommentItem"), ThreadCommentTree = /* @__PURE__ */ __name((props) => {
-  var _a3, _b, _c;
+        ) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ i.jsx("div", { className: h.threadCommentItemTime, children: e.dT }),
+    o ? /* @__PURE__ */ i.jsx(
+      Be,
+      {
+        id: e.id,
+        comment: e,
+        onCancel: () => a == null ? void 0 : a(!1),
+        autoFocus: !0,
+        unitId: r,
+        subUnitId: n,
+        onSave: ({ text: p, attachments: U }) => {
+          a == null || a(!1), N.executeCommand(
+            it.id,
+            {
+              unitId: r,
+              subUnitId: n,
+              payload: {
+                commentId: e.id,
+                text: p,
+                attachments: U
+              }
+            }
+          );
+        }
+      }
+    ) : /* @__PURE__ */ i.jsx("div", { className: h.threadCommentItemContent, children: Le(e.text).map((p, U) => {
+      switch (p.type) {
+        case "mention":
+          return /* @__PURE__ */ i.jsxs("a", { className: h.threadCommentItemAt, children: [
+            "@",
+            p.content.label,
+            " "
+          ] }, U);
+        default:
+          return p.content;
+      }
+    }) })
+  ] });
+}, _n = (t) => {
+  var ie, Q, X;
   const {
-    id,
-    unitId,
-    subUnitId,
-    refStr,
-    showEdit = !0,
-    onClick,
-    showHighlight,
-    onClose,
-    getSubUnitName,
-    prefix,
-    autoFocus,
-    onMouseEnter,
-    onMouseLeave,
-    onAddComment,
-    onDeleteComment,
-    onResolve
-  } = props, threadCommentModel = useDependency(ThreadCommentModel), [isHover, setIsHover] = useState(!1), [editingId, setEditingId] = useState(""), updte$ = useMemo(() => threadCommentModel.commentUpdate$.pipe(debounceTime(16)), [threadCommentModel]);
-  useObservable(updte$);
-  const comments = id ? threadCommentModel.getCommentWithChildren(unitId, subUnitId, id) : null, commandService = useDependency(ICommandService), userManagerService = useDependency(UserManagerService), resolved = comments == null ? void 0 : comments.root.resolved, currentUser = useObservable(userManagerService.currentUser$), editorRef = useRef(null), renderComments = [
-    ...comments ? [comments.root] : (
+    id: e,
+    unitId: r,
+    subUnitId: n,
+    refStr: o,
+    showEdit: a = !0,
+    onClick: d,
+    showHighlight: c,
+    onClose: v,
+    getSubUnitName: S,
+    prefix: O,
+    autoFocus: N,
+    onMouseEnter: f,
+    onMouseLeave: u,
+    onAddComment: C,
+    onDeleteComment: g,
+    onResolve: T
+  } = t, b = x(_e), [L, m] = k(!1), [D, p] = k(""), U = le(() => b.commentUpdate$.pipe(dt(16)), [b]);
+  F(U);
+  const s = e ? b.getCommentWithChildren(r, n, e) : null, I = x(re), y = x(ge), P = s == null ? void 0 : s.root.resolved, E = F(y.currentUser$), K = ne(null), Y = [
+    ...s ? [s.root] : (
       // mock empty comment
       [{
-        id: MOCK_ID,
+        id: Fe,
         text: {
           dataStream: `
 \r`
         },
-        personId: (_a3 = currentUser == null ? void 0 : currentUser.userID) != null ? _a3 : "",
-        ref: refStr != null ? refStr : "",
+        personId: (ie = E == null ? void 0 : E.userID) != null ? ie : "",
+        ref: o != null ? o : "",
         dT: "",
-        unitId,
-        subUnitId,
+        unitId: r,
+        subUnitId: n,
         threadId: ""
       }]
     ),
-    ...(_b = comments == null ? void 0 : comments.children) != null ? _b : []
-  ], scroller = useRef(null), handleResolve = /* @__PURE__ */ __name((e) => {
-    e.stopPropagation(), resolved ? commandService.executeCommand(SetActiveCommentOperation.id, {
-      unitId,
-      subUnitId,
-      commentId: id
-    }) : commandService.executeCommand(SetActiveCommentOperation.id), commandService.executeCommand(ResolveCommentCommand.id, {
-      unitId,
-      subUnitId,
-      commentId: id,
-      resolved: !resolved
-    }), onResolve == null || onResolve(!resolved);
-  }, "handleResolve"), handleDeleteRoot = /* @__PURE__ */ __name((e) => {
-    e.stopPropagation(), commandService.executeCommand(SetActiveCommentOperation.id), !(comments != null && comments.root && (onDeleteComment == null ? void 0 : onDeleteComment(comments.root)) === !1) && (commandService.executeCommand(
-      DeleteCommentTreeCommand.id,
+    ...(Q = s == null ? void 0 : s.children) != null ? Q : []
+  ], V = ne(null), R = (_) => {
+    _.stopPropagation(), P ? I.executeCommand(W.id, {
+      unitId: r,
+      subUnitId: n,
+      commentId: e
+    }) : I.executeCommand(W.id), I.executeCommand(st.id, {
+      unitId: r,
+      subUnitId: n,
+      commentId: e,
+      resolved: !P
+    }), T == null || T(!P);
+  }, J = (_) => {
+    _.stopPropagation(), I.executeCommand(W.id), !(s != null && s.root && (g == null ? void 0 : g(s.root)) === !1) && (I.executeCommand(
+      je.id,
       {
-        unitId,
-        subUnitId,
-        commentId: id
+        unitId: r,
+        subUnitId: n,
+        commentId: e
       }
-    ), onClose == null || onClose());
-  }, "handleDeleteRoot");
-  useEffect(() => onMouseLeave == null ? void 0 : onMouseLeave(), []);
-  const subUnitName = getSubUnitName((_c = comments == null ? void 0 : comments.root.subUnitId) != null ? _c : subUnitId), editorVisible = showEdit && !editingId && !resolved, title = `${refStr || (comments == null ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
-  return /* @__PURE__ */ React.createElement(
+    ), v == null || v());
+  };
+  Ce(() => u == null ? void 0 : u(), []);
+  const H = S((X = s == null ? void 0 : s.root.subUnitId) != null ? X : n), oe = a && !D && !P, G = `${o || (s == null ? void 0 : s.root.ref) || ""}${H ? " · " : ""}${H}`;
+  return /* @__PURE__ */ i.jsxs(
     "div",
     {
-      className: clsx(styles$1.threadComment, {
-        [styles$1.threadCommentActive]: !resolved && (showHighlight || isHover || prefix === "cell")
+      className: qt(h.threadComment, {
+        [h.threadCommentActive]: !P && (c || L || O === "cell")
       }),
-      onClick,
-      id: `${prefix}-${unitId}-${subUnitId}-${id}`,
-      onMouseEnter: /* @__PURE__ */ __name(() => {
-        onMouseEnter == null || onMouseEnter(), setIsHover(!0);
-      }, "onMouseEnter"),
-      onMouseLeave: /* @__PURE__ */ __name(() => {
-        onMouseLeave == null || onMouseLeave(), setIsHover(!1);
-      }, "onMouseLeave")
-    },
-    !resolved && showHighlight ? /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentHighlight }) : null,
-    /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentTitle }, /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentTitlePosition }, /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentTitleHighlight }), /* @__PURE__ */ React.createElement(Tooltip, { showIfEllipsis: !0, title }, /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentTitlePositionText }, title))), comments ? /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentIconContainer }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        onClick: handleResolve,
-        className: styles$1.threadCommentIcon,
-        style: { color: resolved ? "rgb(var(--green-500))" : "" }
+      onClick: d,
+      id: `${O}-${r}-${n}-${e}`,
+      onMouseEnter: () => {
+        f == null || f(), m(!0);
       },
-      resolved ? /* @__PURE__ */ React.createElement(ResolvedSingle, null) : /* @__PURE__ */ React.createElement(SolveSingle, null)
-    ), (currentUser == null ? void 0 : currentUser.userID) === comments.root.personId ? /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentIcon, onClick: handleDeleteRoot }, /* @__PURE__ */ React.createElement(DeleteSingle, null)) : null) : null),
-    /* @__PURE__ */ React.createElement("div", { className: styles$1.threadCommentContent, ref: scroller }, renderComments.map(
-      (item) => /* @__PURE__ */ React.createElement(
-        ThreadCommentItem,
-        {
-          onClose,
-          unitId,
-          subUnitId,
-          item,
-          key: item.id,
-          isRoot: item.id === (comments == null ? void 0 : comments.root.id),
-          editing: editingId === item.id,
-          resolved: comments == null ? void 0 : comments.root.resolved,
-          onEditingChange: /* @__PURE__ */ __name((editing) => {
-            setEditingId(editing ? item.id : "");
-          }, "onEditingChange"),
-          onReply: /* @__PURE__ */ __name((user) => {
-            user && requestAnimationFrame(() => {
-              var _a4;
-              (_a4 = editorRef.current) == null || _a4.reply(transformTextNodes2Document([{
-                type: "mention",
-                content: {
-                  id: user.userID,
-                  label: user.name
-                }
-              }]));
-            });
-          }, "onReply"),
-          onAddComment,
-          onDeleteComment
-        }
-      )
-    )),
-    editorVisible ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-      ThreadCommentEditor,
-      {
-        key: `${autoFocus}`,
-        ref: editorRef,
-        unitId,
-        subUnitId,
-        onSave: /* @__PURE__ */ __name(async ({ text, attachments }) => {
-          const comment = {
-            text,
-            attachments,
-            dT: getDT(),
-            id: generateRandomId(),
-            ref: refStr,
-            personId: currentUser == null ? void 0 : currentUser.userID,
-            parentId: comments == null ? void 0 : comments.root.id,
-            unitId,
-            subUnitId,
-            threadId: comments == null ? void 0 : comments.root.threadId
-          };
-          (onAddComment == null ? void 0 : onAddComment(comment)) !== !1 && (await commandService.executeCommand(
-            AddCommentCommand.id,
+      onMouseLeave: () => {
+        u == null || u(), m(!1);
+      },
+      children: [
+        !P && c ? /* @__PURE__ */ i.jsx("div", { className: h.threadCommentHighlight }) : null,
+        /* @__PURE__ */ i.jsxs("div", { className: h.threadCommentTitle, children: [
+          /* @__PURE__ */ i.jsxs("div", { className: h.threadCommentTitlePosition, children: [
+            /* @__PURE__ */ i.jsx("div", { className: h.threadCommentTitleHighlight }),
+            /* @__PURE__ */ i.jsx(vt, { showIfEllipsis: !0, title: G, children: /* @__PURE__ */ i.jsx("div", { className: h.threadCommentTitlePositionText, children: G }) })
+          ] }),
+          s ? /* @__PURE__ */ i.jsxs("div", { className: h.threadCommentIconContainer, children: [
+            /* @__PURE__ */ i.jsx(
+              "div",
+              {
+                onClick: R,
+                className: h.threadCommentIcon,
+                style: { color: P ? "rgb(var(--green-500))" : "" },
+                children: P ? /* @__PURE__ */ i.jsx(De, {}) : /* @__PURE__ */ i.jsx(ke, {})
+              }
+            ),
+            (E == null ? void 0 : E.userID) === s.root.personId ? /* @__PURE__ */ i.jsx("div", { className: h.threadCommentIcon, onClick: J, children: /* @__PURE__ */ i.jsx($e, {}) }) : null
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ i.jsx("div", { className: h.threadCommentContent, ref: V, children: Y.map(
+          (_) => /* @__PURE__ */ i.jsx(
+            yn,
             {
-              unitId,
-              subUnitId,
-              comment
+              onClose: v,
+              unitId: r,
+              subUnitId: n,
+              item: _,
+              isRoot: _.id === (s == null ? void 0 : s.root.id),
+              editing: D === _.id,
+              resolved: s == null ? void 0 : s.root.resolved,
+              onEditingChange: ($) => {
+                p($ ? _.id : "");
+              },
+              onReply: ($) => {
+                $ && requestAnimationFrame(() => {
+                  var l;
+                  (l = K.current) == null || l.reply(Ve([{
+                    type: "mention",
+                    content: {
+                      id: $.userID,
+                      label: $.name
+                    }
+                  }]));
+                });
+              },
+              onAddComment: C,
+              onDeleteComment: g
+            },
+            _.id
+          )
+        ) }),
+        oe ? /* @__PURE__ */ i.jsx("div", { children: /* @__PURE__ */ i.jsx(
+          Be,
+          {
+            ref: K,
+            unitId: r,
+            subUnitId: n,
+            onSave: async ({ text: _, attachments: $ }) => {
+              const l = {
+                text: _,
+                attachments: $,
+                dT: rt(),
+                id: tt(),
+                ref: o,
+                personId: E == null ? void 0 : E.userID,
+                parentId: s == null ? void 0 : s.root.id,
+                unitId: r,
+                subUnitId: n,
+                threadId: s == null ? void 0 : s.root.threadId
+              };
+              (C == null ? void 0 : C(l)) !== !1 && (await I.executeCommand(
+                ot.id,
+                {
+                  unitId: r,
+                  subUnitId: n,
+                  comment: l
+                }
+              ), V.current && (V.current.scrollTop = V.current.scrollHeight));
+            },
+            autoFocus: N || !s,
+            onCancel: () => {
+              s || v == null || v();
             }
-          ), scroller.current && (scroller.current.scrollTop = scroller.current.scrollHeight));
-        }, "onSave"),
-        autoFocus: autoFocus || !comments,
-        onCancel: /* @__PURE__ */ __name(() => {
-          comments || onClose == null || onClose();
-        }, "onCancel")
-      }
-    )) : null
+          },
+          `${N}`
+        ) }) : null
+      ]
+    }
   );
-}, "ThreadCommentTree"), threadCommentPanel = "univer-thread-comment-panel", threadComment = "univer-thread-comment", threadCommentPanelForms = "univer-thread-comment-panel-forms", select = "univer-select", threadCommentPanelEmpty = "univer-thread-comment-panel-empty", threadCommentPanelAdd = "univer-thread-comment-panel-add", threadCommentPanelSolved = "univer-thread-comment-panel-solved", styles = {
-  threadCommentPanel,
-  threadComment,
-  threadCommentPanelForms,
-  select,
-  threadCommentPanelEmpty,
-  threadCommentPanelAdd,
-  threadCommentPanelSolved
-}, ThreadCommentPanel = /* @__PURE__ */ __name((props) => {
+}, jn = "univer-thread-comment-panel", Nn = "univer-thread-comment", Tn = "univer-thread-comment-panel-forms", Un = "univer-select", En = "univer-thread-comment-panel-empty", Mn = "univer-thread-comment-panel-add", On = "univer-thread-comment-panel-solved", te = {
+  threadCommentPanel: jn,
+  threadComment: Nn,
+  threadCommentPanelForms: Tn,
+  select: Un,
+  threadCommentPanelEmpty: En,
+  threadCommentPanelAdd: Mn,
+  threadCommentPanelSolved: On
+}, Bn = (t) => {
   const {
-    unitId,
-    subUnitId$,
-    type,
-    onAdd,
-    getSubUnitName,
-    onResolve,
-    sortComments,
-    onItemLeave,
-    onItemEnter,
-    disableAdd,
-    tempComment,
-    onAddComment,
-    onDeleteComment,
-    showComments
-  } = props, [unit, setUnit] = useState("all"), [status, setStatus] = useState("all"), localeService = useDependency(LocaleService), userService = useDependency(UserManagerService), threadCommentModel = useDependency(ThreadCommentModel), [unitComments, setUnitComments] = useState(() => threadCommentModel.getUnit(unitId)), panelService = useDependency(ThreadCommentPanelService), activeCommentId = useObservable(panelService.activeCommentId$), update = useObservable(threadCommentModel.commentUpdate$), commandService = useDependency(ICommandService), subUnitId = useObservable(subUnitId$), shouldScroll = useRef(!0), prefix = "panel", currentUser = useObservable(userService.currentUser$), comments = useMemo(() => {
-    var _a3;
-    const allComments = unit === "all" ? unitComments : (_a3 = unitComments.filter((i) => i.subUnitId === subUnitId)) != null ? _a3 : [], sort = sortComments != null ? sortComments : (a) => a, res = allComments.map((i) => {
-      var _a4;
-      return { ...i.root, children: (_a4 = i.children) != null ? _a4 : [], users: i.relativeUsers };
+    unitId: e,
+    subUnitId$: r,
+    type: n,
+    onAdd: o,
+    getSubUnitName: a,
+    onResolve: d,
+    sortComments: c,
+    onItemLeave: v,
+    onItemEnter: S,
+    disableAdd: O,
+    tempComment: N,
+    onAddComment: f,
+    onDeleteComment: u,
+    showComments: C
+  } = t, [g, T] = k("all"), [b, L] = k("all"), m = x(fe), D = x(ge), p = x(_e), [U, s] = k(() => p.getUnit(e)), I = x(q), y = F(I.activeCommentId$), P = F(p.commentUpdate$), E = x(re), K = F(r), Y = ne(!0), V = "panel", R = F(D.currentUser$), J = le(() => {
+    var ae;
+    const l = g === "all" ? U : (ae = U.filter((j) => j.subUnitId === K)) != null ? ae : [], ee = c != null ? c : (j) => j, se = l.map((j) => {
+      var B;
+      return { ...j.root, children: (B = j.children) != null ? B : [], users: j.relativeUsers };
     });
-    if (showComments) {
-      const map = /* @__PURE__ */ new Map();
-      return res.forEach((comment) => {
-        map.set(comment.id, comment);
-      }), [...showComments, ""].map((id) => map.get(id)).filter(Boolean);
+    if (C) {
+      const j = /* @__PURE__ */ new Map();
+      return se.forEach((B) => {
+        j.set(B.id, B);
+      }), [...C, ""].map((B) => j.get(B)).filter(Boolean);
     } else
-      return sort(res);
-  }, [showComments, unit, unitComments, sortComments, subUnitId]), commentsSorted = useMemo(() => [
-    ...comments.filter((comment) => !comment.resolved),
-    ...comments.filter((comment) => comment.resolved)
-  ], [comments]), statuedComments = useMemo(() => status === "resolved" ? commentsSorted.filter((comment) => comment.resolved) : status === "unsolved" ? commentsSorted.filter((comment) => !comment.resolved) : status === "concern_me" && currentUser != null && currentUser.userID ? commentsSorted.filter((comment) => comment == null ? void 0 : comment.users.has(currentUser.userID)) : commentsSorted, [commentsSorted, currentUser == null ? void 0 : currentUser.userID, status]), renderComments = tempComment ? [tempComment, ...statuedComments] : statuedComments, unSolvedComments = renderComments.filter((comment) => !comment.resolved), solvedComments = renderComments.filter((comment) => comment.resolved), isFiltering = status !== "all" || unit !== "all", onReset = /* @__PURE__ */ __name(() => {
-    setStatus("all"), setUnit("all");
-  }, "onReset");
-  useEffect(() => {
-    unitId && setUnitComments(
-      threadCommentModel.getUnit(unitId)
+      return ee(se);
+  }, [C, g, U, c, K]), H = le(() => [
+    ...J.filter((l) => !l.resolved),
+    ...J.filter((l) => l.resolved)
+  ], [J]), oe = le(() => b === "resolved" ? H.filter((l) => l.resolved) : b === "unsolved" ? H.filter((l) => !l.resolved) : b === "concern_me" && R != null && R.userID ? H.filter((l) => l == null ? void 0 : l.users.has(R.userID)) : H, [H, R == null ? void 0 : R.userID, b]), G = N ? [N, ...oe] : oe, ie = G.filter((l) => !l.resolved), Q = G.filter((l) => l.resolved), X = b !== "all" || g !== "all", _ = () => {
+    L("all"), T("all");
+  };
+  Ce(() => {
+    e && s(
+      p.getUnit(e)
     );
-  }, [unitId, threadCommentModel, update]), useEffect(() => {
-    var _a3;
-    if (!activeCommentId)
+  }, [e, p, P]), Ce(() => {
+    var j;
+    if (!y)
       return;
-    if (!shouldScroll.current) {
-      shouldScroll.current = !0;
+    if (!Y.current) {
+      Y.current = !0;
       return;
     }
-    const { unitId: unitId2, subUnitId: subUnitId2, commentId } = activeCommentId, id = `${prefix}-${unitId2}-${subUnitId2}-${commentId}`;
-    (_a3 = document.getElementById(id)) == null || _a3.scrollIntoView({ block: "center" });
-  }, [activeCommentId]);
-  const renderComment = /* @__PURE__ */ __name((comment) => /* @__PURE__ */ React.createElement(
-    ThreadCommentTree,
+    const { unitId: l, subUnitId: ee, commentId: se } = y, ae = `${V}-${l}-${ee}-${se}`;
+    (j = document.getElementById(ae)) == null || j.scrollIntoView({ block: "center" });
+  }, [y]);
+  const $ = (l) => /* @__PURE__ */ i.jsx(
+    _n,
     {
-      prefix,
-      getSubUnitName,
-      key: comment.id,
-      id: comment.id,
-      unitId: comment.unitId,
-      subUnitId: comment.subUnitId,
-      refStr: comment.ref,
-      type,
-      showEdit: (activeCommentId == null ? void 0 : activeCommentId.commentId) === comment.id,
-      showHighlight: (activeCommentId == null ? void 0 : activeCommentId.commentId) === comment.id,
-      onClick: /* @__PURE__ */ __name(() => {
-        shouldScroll.current = !1, comment.resolved ? commandService.executeCommand(SetActiveCommentOperation.id) : commandService.executeCommand(
-          SetActiveCommentOperation.id,
+      prefix: V,
+      getSubUnitName: a,
+      id: l.id,
+      unitId: l.unitId,
+      subUnitId: l.subUnitId,
+      refStr: l.ref,
+      type: n,
+      showEdit: (y == null ? void 0 : y.commentId) === l.id,
+      showHighlight: (y == null ? void 0 : y.commentId) === l.id,
+      onClick: () => {
+        Y.current = !1, l.resolved ? E.executeCommand(W.id) : E.executeCommand(
+          W.id,
           {
-            unitId: comment.unitId,
-            subUnitId: comment.subUnitId,
-            commentId: comment.id,
+            unitId: l.unitId,
+            subUnitId: l.subUnitId,
+            commentId: l.id,
             temp: !1
           }
         );
-      }, "onClick"),
-      onMouseEnter: /* @__PURE__ */ __name(() => onItemEnter == null ? void 0 : onItemEnter(comment), "onMouseEnter"),
-      onMouseLeave: /* @__PURE__ */ __name(() => onItemLeave == null ? void 0 : onItemLeave(comment), "onMouseLeave"),
-      onAddComment,
-      onDeleteComment,
-      onResolve: /* @__PURE__ */ __name((resolved) => onResolve == null ? void 0 : onResolve(comment.id, resolved), "onResolve")
-    }
-  ), "renderComment");
-  return /* @__PURE__ */ React.createElement("div", { className: styles.threadCommentPanel }, /* @__PURE__ */ React.createElement("div", { className: styles.threadCommentPanelForms }, type === UniverInstanceType.UNIVER_SHEET ? /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      borderless: !0,
-      value: unit,
-      onChange: /* @__PURE__ */ __name((e) => setUnit(e), "onChange"),
-      options: [
-        {
-          value: "current",
-          label: localeService.t("threadCommentUI.filter.sheet.current")
-        },
+      },
+      onMouseEnter: () => S == null ? void 0 : S(l),
+      onMouseLeave: () => v == null ? void 0 : v(l),
+      onAddComment: f,
+      onDeleteComment: u,
+      onResolve: (ee) => d == null ? void 0 : d(l.id, ee)
+    },
+    l.id
+  );
+  return /* @__PURE__ */ i.jsxs("div", { className: te.threadCommentPanel, children: [
+    /* @__PURE__ */ i.jsxs("div", { className: te.threadCommentPanelForms, children: [
+      n === he.UNIVER_SHEET ? /* @__PURE__ */ i.jsx(
+        xe,
         {
-          value: "all",
-          label: localeService.t("threadCommentUI.filter.sheet.all")
+          borderless: !0,
+          value: g,
+          onChange: (l) => T(l),
+          options: [
+            {
+              value: "current",
+              label: m.t("threadCommentUI.filter.sheet.current")
+            },
+            {
+              value: "all",
+              label: m.t("threadCommentUI.filter.sheet.all")
+            }
+          ]
         }
-      ]
-    }
-  ) : null, /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      borderless: !0,
-      value: status,
-      onChange: /* @__PURE__ */ __name((e) => setStatus(e), "onChange"),
-      options: [
+      ) : null,
+      /* @__PURE__ */ i.jsx(
+        xe,
         {
-          value: "all",
-          label: localeService.t("threadCommentUI.filter.status.all")
-        },
-        {
-          value: "resolved",
-          label: localeService.t("threadCommentUI.filter.status.resolved")
-        },
+          borderless: !0,
+          value: b,
+          onChange: (l) => L(l),
+          options: [
+            {
+              value: "all",
+              label: m.t("threadCommentUI.filter.status.all")
+            },
+            {
+              value: "resolved",
+              label: m.t("threadCommentUI.filter.status.resolved")
+            },
+            {
+              value: "unsolved",
+              label: m.t("threadCommentUI.filter.status.unsolved")
+            },
+            {
+              value: "concern_me",
+              label: m.t("threadCommentUI.filter.status.concernMe")
+            }
+          ]
+        }
+      )
+    ] }),
+    ie.map($),
+    Q.length ? /* @__PURE__ */ i.jsx("div", { className: te.threadCommentPanelSolved, children: "已解决" }) : null,
+    Q.map($),
+    G.length ? null : /* @__PURE__ */ i.jsxs("div", { className: te.threadCommentPanelEmpty, children: [
+      X ? m.t("threadCommentUI.panel.filterEmpty") : m.t("threadCommentUI.panel.empty"),
+      X ? /* @__PURE__ */ i.jsx(
+        de,
         {
-          value: "unsolved",
-          label: localeService.t("threadCommentUI.filter.status.unsolved")
-        },
+          onClick: _,
+          type: "link",
+          children: m.t("threadCommentUI.panel.reset")
+        }
+      ) : /* @__PURE__ */ i.jsxs(
+        de,
         {
-          value: "concern_me",
-          label: localeService.t("threadCommentUI.filter.status.concernMe")
+          id: "thread-comment-add",
+          className: te.threadCommentPanelAdd,
+          type: "primary",
+          onClick: o,
+          disabled: O,
+          children: [
+            /* @__PURE__ */ i.jsx(we, {}),
+            m.t("threadCommentUI.panel.addComment")
+          ]
         }
-      ]
-    }
-  )), unSolvedComments.map(renderComment), solvedComments.length ? /* @__PURE__ */ React.createElement("div", { className: styles.threadCommentPanelSolved }, "已解决") : null, solvedComments.map(renderComment), renderComments.length ? null : /* @__PURE__ */ React.createElement("div", { className: styles.threadCommentPanelEmpty }, isFiltering ? localeService.t("threadCommentUI.panel.filterEmpty") : localeService.t("threadCommentUI.panel.empty"), isFiltering ? /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      onClick: onReset,
-      type: "link"
-    },
-    localeService.t("threadCommentUI.panel.reset")
-  ) : /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      id: "thread-comment-add",
-      className: styles.threadCommentPanelAdd,
-      type: "primary",
-      onClick: onAdd,
-      disabled: disableAdd
-    },
-    /* @__PURE__ */ React.createElement(IncreaseSingle, null),
-    localeService.t("threadCommentUI.panel.addComment")
-  )));
-}, "ThreadCommentPanel");
+      )
+    ] })
+  ] });
+};
 export {
-  IThreadCommentMentionDataService,
-  SetActiveCommentOperation,
-  THREAD_COMMENT_PANEL,
-  ThreadCommentPanel,
-  ThreadCommentPanelService,
-  ThreadCommentTree,
-  ToggleSheetCommentPanelOperation,
-  UniverThreadCommentUIPlugin,
-  getDT
+  Te as IThreadCommentMentionDataService,
+  W as SetActiveCommentOperation,
+  yt as THREAD_COMMENT_PANEL,
+  Bn as ThreadCommentPanel,
+  q as ThreadCommentPanelService,
+  _n as ThreadCommentTree,
+  jt as ToggleSheetCommentPanelOperation,
+  me as UniverThreadCommentUIPlugin
 };