@univerjs/thread-comment-ui 1.0.0-beta.0 → 1.0.0-beta.2

package/lib/cjs/index.js

@@ -125,7 +125,7 @@ const SetActiveCommentOperation = {
 //#endregion
 //#region package.json
 var name = "@univerjs/thread-comment-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -429,7 +429,8 @@ function formatCommentDateTime(value, region) {
 		day: "numeric",
 		hour: "2-digit",
 		minute: "2-digit",
-		hour12: false
+		hour12: false,
+		numberingSystem: "latn"
 	});
 }
 const ThreadCommentItem = (props) => {
@@ -446,6 +447,7 @@ const ThreadCommentItem = (props) => {
 	const uiConfig = (0, _univerjs_ui.useConfigValue)(_univerjs_ui.UI_PLUGIN_CONFIG_KEY);
 	const avatarFallback = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.avatarFallback;
 	const currentRegion = (0, _univerjs_ui.useObservable)(regionService.currentRegion$, regionService.getCurrentRegion());
+	const direction = (0, _univerjs_ui.useObservable)(localeService.direction$, localeService.getDirection());
 	const dateText = isMock ? null : formatCommentDateTime(item.dT, currentRegion);
 	const handleDeleteItem = () => {
 		if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
@@ -476,9 +478,10 @@ const ThreadCommentItem = (props) => {
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ReplyToCommentIcon, {})
 				}) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
 					overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						dir: direction,
 						className: "univer-rounded-lg",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
-							className: "univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors",
+							className: "univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm rtl:univer-text-right [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 								className: "hover:univer-bg-gray-200",
 								onClick: () => onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(true),
@@ -497,9 +500,11 @@ const ThreadCommentItem = (props) => {
 				}) : null] })]
 			}) : null,
 			dateText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
-				dir: "ltr",
-				className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
-				children: dateText
+				className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 rtl:univer-text-right dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("bdo", {
+					dir: "ltr",
+					children: dateText
+				})
 			}),
 			editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentEditor, {
 				type,
@@ -523,19 +528,25 @@ const ThreadCommentItem = (props) => {
 					});
 				}
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-white",
-				children: transformDocument2TextNodes(item.text).map((paragraph, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-break-words",
-					children: paragraph.map((item, i) => {
-						switch (item.type) {
-							case "mention": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-								className: "univer-text-primary-600",
-								children: [item.content.label, " "]
-							}, i);
-							default: return item.content;
-						}
-					})
-				}, i))
+				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0",
+				children: transformDocument2TextNodes(item.text).map((paragraph, paragraphIndex) => {
+					var _item$text$paragraphs;
+					let offset = 0;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-break-words",
+						children: paragraph.map((node) => {
+							const key = offset;
+							offset += node.type === "mention" ? node.content.label.length : node.content.length;
+							switch (node.type) {
+								case "mention": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+									className: "univer-text-primary-600",
+									children: [node.content.label, " "]
+								}, key);
+								default: return node.content;
+							}
+						})
+					}, (_item$text$paragraphs = item.text.paragraphs) === null || _item$text$paragraphs === void 0 || (_item$text$paragraphs = _item$text$paragraphs[paragraphIndex]) === null || _item$text$paragraphs === void 0 ? void 0 : _item$text$paragraphs.paragraphId);
+				})
 			})
 		]
 	});
@@ -569,7 +580,8 @@ const ThreadCommentTree = (props) => {
 		subUnitId,
 		threadId: ""
 	}], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
-	const scroller = (0, react.useRef)(null);
+	const scrollerRef = (0, react.useRef)(null);
+	const handleMouseLeave = (0, _univerjs_ui.useEvent)(onMouseLeave);
 	const handleResolve = (e) => {
 		e.stopPropagation();
 		if (!resolved) commandService.executeCommand(SetActiveCommentOperation.id);
@@ -598,8 +610,8 @@ const ThreadCommentTree = (props) => {
 		onClose === null || onClose === void 0 || onClose();
 	};
 	(0, react.useEffect)(() => {
-		return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-	}, []);
+		return handleMouseLeave;
+	}, [handleMouseLeave]);
 	const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
 	const editorVisible = showEdit && !editingId && !resolved;
 	const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
@@ -612,7 +624,7 @@ const ThreadCommentTree = (props) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		id: `${location}-${unitId}-${subUnitId}-${id}`,
-		className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white", _univerjs_design.borderClassName, {
+		className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-rounded-md univer-bg-gray-0 univer-p-4 univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-gray-0", _univerjs_design.borderClassName, {
 			"univer-w-[278px]": !full,
 			"univer-w-full": full,
 			"univer-shadow": !resolved && (showHighlight || isHover || location === "CELL")
@@ -655,8 +667,8 @@ const ThreadCommentTree = (props) => {
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: scroller,
-				className: (0, _univerjs_design.clsx)("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", _univerjs_design.scrollbarClassName),
+				ref: scrollerRef,
+				className: (0, _univerjs_design.clsx)("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", _univerjs_design.scrollbarClassName, location === "PANEL" && "-univer-mx-4 univer-px-4"),
 				children: renderComments.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentItem, {
 					unitId,
 					subUnitId,
@@ -716,7 +728,7 @@ const ThreadCommentTree = (props) => {
 						subUnitId,
 						comment
 					});
-					if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight;
+					if (scrollerRef.current) scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
 				},
 				autoFocus: autoFocus || !comments,
 				onCancel: () => {

package/lib/cjs/locale/ar-SA.js

@@ -2,9 +2,7 @@
 //#region src/locale/ar-SA.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "إدارة التعليقات",
 		empty: "لا توجد تعليقات بعد",
-		filterEmpty: "لا توجد نتائج مطابقة",
 		reset: "إعادة ضبط التصفية",
 		addComment: "إضافة تعليق",
 		solved: "تم الحل"

package/lib/cjs/locale/ca-ES.js

@@ -2,9 +2,7 @@
 //#region src/locale/ca-ES.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestió de comentaris",
 		empty: "Encara no hi ha comentaris",
-		filterEmpty: "Cap resultat coincident",
 		reset: "Restableix el filtre",
 		addComment: "Afegeix un comentari",
 		solved: "Resolut"

package/lib/cjs/locale/de-DE.js

@@ -2,9 +2,7 @@
 //#region src/locale/de-DE.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Kommentarverwaltung",
 		empty: "Noch keine Kommentare",
-		filterEmpty: "Kein Treffer",
 		reset: "Filter zurücksetzen",
 		addComment: "Kommentar hinzufügen",
 		solved: "Gelöst"

package/lib/cjs/locale/en-US.js

@@ -17,9 +17,7 @@
 */
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Comment Management",
 		empty: "No comments yet",
-		filterEmpty: "No match result",
 		reset: "Reset Filter",
 		addComment: "Add Comment",
 		solved: "Solved"

package/lib/cjs/locale/es-ES.js

@@ -2,9 +2,7 @@
 //#region src/locale/es-ES.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestión de comentarios",
 		empty: "Aún no hay comentarios",
-		filterEmpty: "Sin resultados coincidentes",
 		reset: "Restablecer filtro",
 		addComment: "Añadir comentario",
 		solved: "Resuelto"

package/lib/cjs/locale/fa-IR.js

@@ -2,9 +2,7 @@
 //#region src/locale/fa-IR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "مدیریت نظرات",
 		empty: "هنوز نظری وجود ندارد",
-		filterEmpty: "نتیجه ای یافت نشد",
 		reset: "بازنشانی فیلتر",
 		addComment: "افزودن نظر",
 		solved: "حل شده"

package/lib/cjs/locale/fr-FR.js

@@ -2,9 +2,7 @@
 //#region src/locale/fr-FR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestion des commentaires",
 		empty: "Pas encore de commentaires",
-		filterEmpty: "Aucun résultat correspondant",
 		reset: "Réinitialiser le filtre",
 		addComment: "Ajouter un commentaire",
 		solved: "Résolu"

package/lib/cjs/locale/id-ID.js

@@ -2,9 +2,7 @@
 //#region src/locale/id-ID.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Manajemen Komentar",
 		empty: "Belum ada komentar",
-		filterEmpty: "Tidak ada hasil yang cocok",
 		reset: "Atur Ulang Filter",
 		addComment: "Tambah Komentar",
 		solved: "Terselesaikan"

package/lib/cjs/locale/it-IT.js

@@ -2,9 +2,7 @@
 //#region src/locale/it-IT.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestione commenti",
 		empty: "Nessun commento",
-		filterEmpty: "Nessun risultato",
 		reset: "Reimposta filtro",
 		addComment: "Aggiungi commento",
 		solved: "Risolto"

package/lib/cjs/locale/ja-JP.js

@@ -2,9 +2,7 @@
 //#region src/locale/ja-JP.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "コメント管理",
 		empty: "まだコメントはありません",
-		filterEmpty: "一致する結果がありません",
 		reset: "フィルタをリセット",
 		addComment: "コメントを追加",
 		solved: "解決済み"

package/lib/cjs/locale/ko-KR.js

@@ -2,9 +2,7 @@
 //#region src/locale/ko-KR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "댓글 관리",
 		empty: "아직 댓글이 없습니다",
-		filterEmpty: "일치하는 결과가 없습니다",
 		reset: "필터 초기화",
 		addComment: "댓글 추가",
 		solved: "해결됨"

package/lib/cjs/locale/pl-PL.js

@@ -2,9 +2,7 @@
 //#region src/locale/pl-PL.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Zarządzanie komentarzami",
 		empty: "Brak komentarzy",
-		filterEmpty: "Brak wyników",
 		reset: "Resetuj filtr",
 		addComment: "Dodaj komentarz",
 		solved: "Rozwiązane"

package/lib/cjs/locale/pt-BR.js

@@ -2,9 +2,7 @@
 //#region src/locale/pt-BR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gerenciamento de Comentários",
 		empty: "Nenhum comentário ainda",
-		filterEmpty: "Nenhum resultado correspondente",
 		reset: "Redefinir Filtro",
 		addComment: "Adicionar Comentário",
 		solved: "Resolvido"

package/lib/cjs/locale/ru-RU.js

@@ -2,9 +2,7 @@
 //#region src/locale/ru-RU.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Управление комментариями",
 		empty: "Комментариев пока нет",
-		filterEmpty: "Нет совпадений",
 		reset: "Сбросить фильтр",
 		addComment: "Добавить комментарий",
 		solved: "Решено"

package/lib/cjs/locale/sk-SK.js

@@ -2,9 +2,7 @@
 //#region src/locale/sk-SK.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Správa komentárov",
 		empty: "Zatiaľ žiadne komentáre",
-		filterEmpty: "Žiadne zodpovedajúce výsledky",
 		reset: "Obnoviť filter",
 		addComment: "Pridať komentár",
 		solved: "Vyriešené"

package/lib/cjs/locale/vi-VN.js

@@ -2,9 +2,7 @@
 //#region src/locale/vi-VN.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Quản lý Bình luận",
 		empty: "Chưa có bình luận",
-		filterEmpty: "Không có kết quả phù hợp",
 		reset: "Đặt lại",
 		addComment: "Thêm bình luận",
 		solved: "Đã giải quyết"

package/lib/cjs/locale/zh-CN.js

@@ -2,9 +2,7 @@
 //#region src/locale/zh-CN.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "评论管理",
 		empty: "暂无评论",
-		filterEmpty: "没有匹配的结果",
 		reset: "重置",
 		addComment: "添加评论",
 		solved: "已解决"

package/lib/cjs/locale/zh-HK.js

@@ -2,9 +2,7 @@
 //#region src/locale/zh-HK.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "評論管理",
 		empty: "暫無評論",
-		filterEmpty: "沒有符合的結果",
 		reset: "重置",
 		addComment: "新增評論",
 		solved: "已解決"

package/lib/cjs/locale/zh-TW.js

@@ -2,9 +2,7 @@
 //#region src/locale/zh-TW.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "評論管理",
 		empty: "暫無評論",
-		filterEmpty: "沒有符合的結果",
 		reset: "重置",
 		addComment: "新增評論",
 		solved: "已解決"

package/lib/es/index.js

@@ -1,5 +1,5 @@
 import { BuildTextUtils, CommandType, CustomRangeType, DOCS_COMMENT_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LOCALE_META, LocaleService, Plugin, RegionService, Tools, UniverInstanceType, UserManagerService, createParagraphId, createSectionId, dateKit, generateRandomId, getBodySlice, merge, mergeOverrideWithDependencies } from "@univerjs/core";
-import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY, useConfigValue, useDependency, useObservable } from "@univerjs/ui";
+import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY, useConfigValue, useDependency, useEvent, useObservable } from "@univerjs/ui";
 import { BehaviorSubject, debounceTime, filter, map, of, startWith } from "rxjs";
 import { BreakLineCommand, IEditorService, RichTextEditor, UniverDocsUIPlugin } from "@univerjs/docs-ui";
 import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UniverThreadCommentPlugin, UpdateCommentCommand, getDT } from "@univerjs/thread-comment";
@@ -124,7 +124,7 @@ const SetActiveCommentOperation = {
 //#endregion
 //#region package.json
 var name = "@univerjs/thread-comment-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.2";
 
 //#endregion
 //#region src/config/config.ts
@@ -428,7 +428,8 @@ function formatCommentDateTime(value, region) {
 		day: "numeric",
 		hour: "2-digit",
 		minute: "2-digit",
-		hour12: false
+		hour12: false,
+		numberingSystem: "latn"
 	});
 }
 const ThreadCommentItem = (props) => {
@@ -445,6 +446,7 @@ const ThreadCommentItem = (props) => {
 	const uiConfig = useConfigValue(UI_PLUGIN_CONFIG_KEY);
 	const avatarFallback = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.avatarFallback;
 	const currentRegion = useObservable(regionService.currentRegion$, regionService.getCurrentRegion());
+	const direction = useObservable(localeService.direction$, localeService.getDirection());
 	const dateText = isMock ? null : formatCommentDateTime(item.dT, currentRegion);
 	const handleDeleteItem = () => {
 		if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
@@ -475,9 +477,10 @@ const ThreadCommentItem = (props) => {
 					children: /* @__PURE__ */ jsx(ReplyToCommentIcon, {})
 				}) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ jsx(Dropdown, {
 					overlay: /* @__PURE__ */ jsx("div", {
+						dir: direction,
 						className: "univer-rounded-lg",
 						children: /* @__PURE__ */ jsxs("ul", {
-							className: "univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors",
+							className: "univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm rtl:univer-text-right [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors",
 							children: [/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 								className: "hover:univer-bg-gray-200",
 								onClick: () => onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(true),
@@ -496,9 +499,11 @@ const ThreadCommentItem = (props) => {
 				}) : null] })]
 			}) : null,
 			dateText && /* @__PURE__ */ jsx("time", {
-				dir: "ltr",
-				className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
-				children: dateText
+				className: "univer-mb-1 univer-block univer-text-xs/normal univer-text-gray-600 rtl:univer-text-right dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ jsx("bdo", {
+					dir: "ltr",
+					children: dateText
+				})
 			}),
 			editing ? /* @__PURE__ */ jsx(ThreadCommentEditor, {
 				type,
@@ -522,19 +527,25 @@ const ThreadCommentItem = (props) => {
 					});
 				}
 			}) : /* @__PURE__ */ jsx("div", {
-				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-white",
-				children: transformDocument2TextNodes(item.text).map((paragraph, i) => /* @__PURE__ */ jsx("div", {
-					className: "univer-break-words",
-					children: paragraph.map((item, i) => {
-						switch (item.type) {
-							case "mention": return /* @__PURE__ */ jsxs("a", {
-								className: "univer-text-primary-600",
-								children: [item.content.label, " "]
-							}, i);
-							default: return item.content;
-						}
-					})
-				}, i))
+				className: "univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0",
+				children: transformDocument2TextNodes(item.text).map((paragraph, paragraphIndex) => {
+					var _item$text$paragraphs;
+					let offset = 0;
+					return /* @__PURE__ */ jsx("div", {
+						className: "univer-break-words",
+						children: paragraph.map((node) => {
+							const key = offset;
+							offset += node.type === "mention" ? node.content.label.length : node.content.length;
+							switch (node.type) {
+								case "mention": return /* @__PURE__ */ jsxs("a", {
+									className: "univer-text-primary-600",
+									children: [node.content.label, " "]
+								}, key);
+								default: return node.content;
+							}
+						})
+					}, (_item$text$paragraphs = item.text.paragraphs) === null || _item$text$paragraphs === void 0 || (_item$text$paragraphs = _item$text$paragraphs[paragraphIndex]) === null || _item$text$paragraphs === void 0 ? void 0 : _item$text$paragraphs.paragraphId);
+				})
 			})
 		]
 	});
@@ -568,7 +579,8 @@ const ThreadCommentTree = (props) => {
 		subUnitId,
 		threadId: ""
 	}], ...(comments === null || comments === void 0 ? void 0 : comments.children) ?? []];
-	const scroller = useRef(null);
+	const scrollerRef = useRef(null);
+	const handleMouseLeave = useEvent(onMouseLeave);
 	const handleResolve = (e) => {
 		e.stopPropagation();
 		if (!resolved) commandService.executeCommand(SetActiveCommentOperation.id);
@@ -597,8 +609,8 @@ const ThreadCommentTree = (props) => {
 		onClose === null || onClose === void 0 || onClose();
 	};
 	useEffect(() => {
-		return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
-	}, []);
+		return handleMouseLeave;
+	}, [handleMouseLeave]);
 	const subUnitName = getSubUnitName((comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) ?? subUnitId);
 	const editorVisible = showEdit && !editingId && !resolved;
 	const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
@@ -611,7 +623,7 @@ const ThreadCommentTree = (props) => {
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		id: `${location}-${unitId}-${subUnitId}-${id}`,
-		className: clsx("univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white", borderClassName, {
+		className: clsx("univer-relative univer-box-border univer-rounded-md univer-bg-gray-0 univer-p-4 univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-gray-0", borderClassName, {
 			"univer-w-[278px]": !full,
 			"univer-w-full": full,
 			"univer-shadow": !resolved && (showHighlight || isHover || location === "CELL")
@@ -654,8 +666,8 @@ const ThreadCommentTree = (props) => {
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				ref: scroller,
-				className: clsx("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName),
+				ref: scrollerRef,
+				className: clsx("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName, location === "PANEL" && "-univer-mx-4 univer-px-4"),
 				children: renderComments.map((item) => /* @__PURE__ */ jsx(ThreadCommentItem, {
 					unitId,
 					subUnitId,
@@ -715,7 +727,7 @@ const ThreadCommentTree = (props) => {
 						subUnitId,
 						comment
 					});
-					if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight;
+					if (scrollerRef.current) scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
 				},
 				autoFocus: autoFocus || !comments,
 				onCancel: () => {

package/lib/es/locale/ar-SA.js

@@ -1,9 +1,7 @@
 //#region src/locale/ar-SA.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "إدارة التعليقات",
 		empty: "لا توجد تعليقات بعد",
-		filterEmpty: "لا توجد نتائج مطابقة",
 		reset: "إعادة ضبط التصفية",
 		addComment: "إضافة تعليق",
 		solved: "تم الحل"

package/lib/es/locale/ca-ES.js

@@ -1,9 +1,7 @@
 //#region src/locale/ca-ES.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestió de comentaris",
 		empty: "Encara no hi ha comentaris",
-		filterEmpty: "Cap resultat coincident",
 		reset: "Restableix el filtre",
 		addComment: "Afegeix un comentari",
 		solved: "Resolut"

package/lib/es/locale/de-DE.js

@@ -1,9 +1,7 @@
 //#region src/locale/de-DE.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Kommentarverwaltung",
 		empty: "Noch keine Kommentare",
-		filterEmpty: "Kein Treffer",
 		reset: "Filter zurücksetzen",
 		addComment: "Kommentar hinzufügen",
 		solved: "Gelöst"

package/lib/es/locale/en-US.js

@@ -16,9 +16,7 @@
 */
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Comment Management",
 		empty: "No comments yet",
-		filterEmpty: "No match result",
 		reset: "Reset Filter",
 		addComment: "Add Comment",
 		solved: "Solved"

package/lib/es/locale/es-ES.js

@@ -1,9 +1,7 @@
 //#region src/locale/es-ES.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestión de comentarios",
 		empty: "Aún no hay comentarios",
-		filterEmpty: "Sin resultados coincidentes",
 		reset: "Restablecer filtro",
 		addComment: "Añadir comentario",
 		solved: "Resuelto"

package/lib/es/locale/fa-IR.js

@@ -1,9 +1,7 @@
 //#region src/locale/fa-IR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "مدیریت نظرات",
 		empty: "هنوز نظری وجود ندارد",
-		filterEmpty: "نتیجه ای یافت نشد",
 		reset: "بازنشانی فیلتر",
 		addComment: "افزودن نظر",
 		solved: "حل شده"

package/lib/es/locale/fr-FR.js

@@ -1,9 +1,7 @@
 //#region src/locale/fr-FR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestion des commentaires",
 		empty: "Pas encore de commentaires",
-		filterEmpty: "Aucun résultat correspondant",
 		reset: "Réinitialiser le filtre",
 		addComment: "Ajouter un commentaire",
 		solved: "Résolu"

package/lib/es/locale/id-ID.js

@@ -1,9 +1,7 @@
 //#region src/locale/id-ID.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Manajemen Komentar",
 		empty: "Belum ada komentar",
-		filterEmpty: "Tidak ada hasil yang cocok",
 		reset: "Atur Ulang Filter",
 		addComment: "Tambah Komentar",
 		solved: "Terselesaikan"

package/lib/es/locale/it-IT.js

@@ -1,9 +1,7 @@
 //#region src/locale/it-IT.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gestione commenti",
 		empty: "Nessun commento",
-		filterEmpty: "Nessun risultato",
 		reset: "Reimposta filtro",
 		addComment: "Aggiungi commento",
 		solved: "Risolto"

package/lib/es/locale/ja-JP.js

@@ -1,9 +1,7 @@
 //#region src/locale/ja-JP.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "コメント管理",
 		empty: "まだコメントはありません",
-		filterEmpty: "一致する結果がありません",
 		reset: "フィルタをリセット",
 		addComment: "コメントを追加",
 		solved: "解決済み"

package/lib/es/locale/ko-KR.js

@@ -1,9 +1,7 @@
 //#region src/locale/ko-KR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "댓글 관리",
 		empty: "아직 댓글이 없습니다",
-		filterEmpty: "일치하는 결과가 없습니다",
 		reset: "필터 초기화",
 		addComment: "댓글 추가",
 		solved: "해결됨"

package/lib/es/locale/pl-PL.js

@@ -1,9 +1,7 @@
 //#region src/locale/pl-PL.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Zarządzanie komentarzami",
 		empty: "Brak komentarzy",
-		filterEmpty: "Brak wyników",
 		reset: "Resetuj filtr",
 		addComment: "Dodaj komentarz",
 		solved: "Rozwiązane"

package/lib/es/locale/pt-BR.js

@@ -1,9 +1,7 @@
 //#region src/locale/pt-BR.ts
 const locale = { "thread-comment-ui": {
 	panel: {
-		title: "Gerenciamento de Comentários",
 		empty: "Nenhum comentário ainda",
-		filterEmpty: "Nenhum resultado correspondente",
 		reset: "Redefinir Filtro",
 		addComment: "Adicionar Comentário",
 		solved: "Resolvido"