@univerjs/thread-comment-ui 0.20.1 → 0.21.0

package/lib/index.js

@@ -1,4 +1,828 @@
-import{BuildTextUtils as e,CommandType as t,CustomRangeType as n,DOCS_COMMENT_EDITOR_UNIT_ID_KEY as r,DOCS_NORMAL_EDITOR_UNIT_ID_KEY as i,DependentOn as a,Disposable as o,ICommandService as s,IConfigService as c,IUniverInstanceService as l,Inject as u,Injector as d,LocaleService as f,Plugin as p,Tools as m,UniverInstanceType as h,UserManagerService as g,generateRandomId as _,getBodySlice as v,merge as y,mergeOverrideWithDependencies as b}from"@univerjs/core";import{ISidebarService as x,KeyCode as S,UI_PLUGIN_CONFIG_KEY as C,useConfigValue as w,useDependency as T,useObservable as E}from"@univerjs/ui";import{BehaviorSubject as D,debounceTime as O,filter as k}from"rxjs";import{AddCommentCommand as A,DeleteCommentCommand as j,DeleteCommentTreeCommand as ee,ResolveCommentCommand as te,ThreadCommentModel as ne,UniverThreadCommentPlugin as M,UpdateCommentCommand as N,getDT as P}from"@univerjs/thread-comment";import{Button as F,Dropdown as I,Select as L,Tooltip as R,borderClassName as re,clsx as z,scrollbarClassName as ie}from"@univerjs/design";import{DeleteIcon as ae,IncreaseIcon as B,MoreHorizontalIcon as oe,ReplyToCommentIcon as V,ResolvedIcon as se,SolveIcon as ce}from"@univerjs/icons";import{forwardRef as H,useEffect as le,useImperativeHandle as ue,useMemo as U,useRef as de,useState as W}from"react";import{BreakLineCommand as fe,IEditorService as G,RichTextEditor as pe}from"@univerjs/docs-ui";import{jsx as K,jsxs as q}from"react/jsx-runtime";function J(e){"@babel/helpers - typeof";return J=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},J(e)}function me(e,t){if(J(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(J(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function he(e){var t=me(e,`string`);return J(t)==`symbol`?t:t+``}function Y(e,t,n){return(t=he(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function X(e,t){return function(n,r){t(n,r,e)}}function ge(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let Z=class extends o{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,Y(this,`_panelVisible`,!1),Y(this,`_panelVisible$`,new D(!1)),Y(this,`_activeCommentId`,void 0),Y(this,`_activeCommentId$`,new D(void 0)),Y(this,`panelVisible$`,this._panelVisible$.asObservable()),Y(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(h.UNIVER_SHEET).pipe(k(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};Z=ge([X(0,u(x)),X(1,l)],Z);const Q={id:`thread-comment-ui.operation.set-active-comment`,type:t.OPERATION,handler(e,t){return e.get(Z).setActiveComment(t),!0}};var _e=`@univerjs/thread-comment-ui`,ve=`0.20.1`;const ye=`thread-comment-ui.config`;Symbol(ye);const be={};let $=class extends p{constructor(e=be,t,n,r){super(),this._config=e,this._injector=t,this._commandService=n,this._configService=r;let{menu:i,...a}=y({},be,this._config);i&&this._configService.setConfig(`menu`,i,{merge:!0}),this._configService.setConfig(ye,a)}onStarting(){var e;b([[Z]],(e=this._config)==null?void 0:e.overrides).forEach(e=>{this._injector.add(e)}),[Q].forEach(e=>{this._commandService.registerCommand(e)})}};Y($,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),Y($,`packageName`,_e),Y($,`version`,ve),Y($,`type`,h.UNIVER_UNKNOWN),$=ge([a(M),X(1,u(d)),X(2,s),X(3,c)],$);function xe(e){return{id:`d`,body:e,documentStyle:{}}}const Se=H((t,n)=>{var r;let{comment:a,onSave:o,id:c,onCancel:l,autoFocus:u,unitId:d,type:p,editorId:g}=t,_=T(s),v=T(f),[y,b]=W(!1),x=T(G),C=de(null),w=p===h.UNIVER_DOC?i:d,[E,D]=W(()=>{var t,n;return e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t)});le(()=>{var t,n,r;D(e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t));let i=(r=C.current)==null?void 0:r.selectionChange$.subscribe(()=>{var t,n;D(e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t))});return()=>i==null?void 0:i.unsubscribe()},[(r=C.current)==null?void 0:r.selectionChange$]);let O=U(()=>({keyCodes:[{keyCode:S.ENTER}],handler:e=>{e===S.ENTER&&_.executeCommand(fe.id)}}),[_]);return ue(n,()=>({reply(e){var t,n;if(!C.current)return;x.focus((t=C.current.getEditorId())==null?``:t);let r=xe(e);(n=C.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}])}})),q(`div`,{onClick:e=>e.preventDefault(),children:[K(pe,{className:`univer-w-full`,editorRef:C,editorId:g,autoFocus:u,keyboardEventConfig:O,placeholder:v.t(`threadCommentUI.editor.placeholder`),initialValue:(a==null?void 0:a.text)&&xe(a.text),onFocusChange:e=>e&&b(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{x.focus(w)},30)}}),y?q(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[K(F,{onClick:()=>{var e;l==null||l(),b(!1),(e=C.current)==null||e.replaceText(``,!0),_.executeCommand(Q.id)},children:v.t(`threadCommentUI.editor.cancel`)}),K(F,{variant:`primary`,disabled:!E,onClick:()=>{if(C.current){let e=m.deepClone(C.current.getDocumentData().body);b(!1),o==null||o({...a,text:e}),C.current.replaceText(``),setTimeout(()=>{var e,t;(e=C.current)==null||e.setSelectionRanges([]),(t=C.current)==null||t.blur()},10)}},children:v.t(c?`threadCommentUI.editor.save`:`threadCommentUI.editor.reply`)})]}):null]})}),Ce=e=>{let{dataStream:t,customRanges:n}=e,r=t.endsWith(`\r
-`)?t.length-2:t.length,i=[],a=0;return n==null||n.forEach(e=>{a<e.startIndex&&i.push({type:`text`,content:t.slice(a,e.startIndex)}),i.push({type:`mention`,content:{label:t.slice(e.startIndex,e.endIndex+1),id:e.rangeId}}),a=e.endIndex+1}),i.push({type:`text`,content:t.slice(a,r)}),i},we=e=>{if(!e)return[];let{paragraphs:t=[]}=e;return t.map((n,r)=>Ce(v(e,r===0?0:t[r-1].startIndex+1,n.startIndex)))},Te=e=>{let t=``,r=[];return e.forEach(e=>{switch(e.type){case`text`:t+=e.content;break;case`mention`:{let i=t.length;t+=e.content.label;let a=t.length-1;r.push({rangeId:e.content.id,rangeType:n.MENTION,startIndex:i,endIndex:a,properties:{},wholeEntity:!0});break}default:break}}),t+=`\r
-`,{textRuns:[],paragraphs:[{startIndex:t.length-2,paragraphStyle:{}}],sectionBreaks:[{startIndex:t.length-1}],dataStream:t,customRanges:r}};let Ee=function(e){return e.CELL=`CELL`,e.PANEL=`PANEL`,e}({});const De=`__mock__`,Oe=e=>{let{item:t,unitId:n,subUnitId:r,editing:i,onEditingChange:a,onReply:o,resolved:c,isRoot:l,onClose:u,onDeleteComment:d,type:p,threadCommentEditorId:m}=e,h=T(s),_=T(f),v=T(g),y=v.getUser(t.personId),b=E(v.currentUser$),x=(b==null?void 0:b.userID)===t.personId,S=t.id===De,[D,O]=W(!1),k=w(C),A=k==null?void 0:k.avatarFallback;return q(`div`,{className:`univer-relative univer-mb-3 univer-pl-[30px]`,onMouseLeave:()=>O(!1),onMouseEnter:()=>O(!0),children:[K(`div`,{className:`univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat`,style:{backgroundImage:`url(${(y==null?void 0:y.avatar)||A})`}}),y?q(`div`,{className:`univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between`,children:[K(`div`,{className:`univer-text-sm univer-font-medium univer-leading-5`,children:(y==null?void 0:y.name)||` `}),q(`div`,{children:[S||c?null:D&&y?K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,onClick:()=>o(y),children:K(V,{})}):null,x&&!S&&!c?K(I,{overlay:K(`div`,{className:`univer-rounded-lg`,children:q(`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`,children:[K(`li`,{children:K(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>a==null?void 0:a(!0),children:_.t(`threadCommentUI.item.edit`)})}),K(`li`,{children:K(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>{(d==null?void 0:d(t))!==!1&&(h.executeCommand(l?ee.id:j.id,{unitId:n,subUnitId:r,commentId:t.id}),l&&(u==null||u()))},children:_.t(`threadCommentUI.item.delete`)})})]})}),children:K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,children:K(oe,{})})}):null]})]}):null,K(`time`,{className:`univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200`,children:t.dT}),i?K(Se,{type:p,id:t.id,comment:t,onCancel:()=>a==null?void 0:a(!1),autoFocus:!0,unitId:n,subUnitId:r,editorId:m,onSave:({text:e,attachments:i})=>{a==null||a(!1),h.executeCommand(N.id,{unitId:n,subUnitId:r,payload:{commentId:t.id,text:e,attachments:i}})}}):K(`div`,{className:`univer-text-sm univer-text-gray-900 dark:!univer-text-white`,children:we(t.text).map((e,t)=>K(`div`,{className:`univer-break-words`,children:e.map((e,t)=>{switch(e.type){case`mention`:return q(`a`,{className:`univer-text-primary-600`,children:[e.content.label,` `]},t);default:return e.content}})},t))})]})},ke=e=>{var t,n,i;let{id:a,unitId:o,subUnitId:c,refStr:l,showEdit:u=!0,onClick:d,showHighlight:f,onClose:p,getSubUnitName:m,location:h,autoFocus:v,onMouseEnter:y,onMouseLeave:b,onAddComment:x,onDeleteComment:S,onResolve:C,type:w,style:D,full:k}=e,j=T(ne),[M,N]=W(!1),[F,I]=W(``);E(U(()=>j.commentUpdate$.pipe(O(16)),[j]));let L=a?j.getCommentWithChildren(o,c,a):null,B=T(s),oe=T(g),V=L==null?void 0:L.root.resolved,H=E(oe.currentUser$),ue=de(null),fe=[...L?[L.root]:[{id:De,text:{dataStream:`
-\r`},personId:(t=H==null?void 0:H.userID)==null?``:t,ref:l==null?``:l,dT:``,unitId:o,subUnitId:c,threadId:``}],...(n=L==null?void 0:L.children)==null?[]:n],G=de(null),pe=e=>{e.stopPropagation(),V?B.executeCommand(Q.id,{unitId:o,subUnitId:c,commentId:a}):B.executeCommand(Q.id),B.executeCommand(te.id,{unitId:o,subUnitId:c,commentId:a,resolved:!V}),C==null||C(!V)},J=e=>{e.stopPropagation(),B.executeCommand(Q.id),!(L!=null&&L.root&&(S==null?void 0:S(L.root))===!1)&&(B.executeCommand(ee.id,{unitId:o,subUnitId:c,commentId:a}),p==null||p())};le(()=>b==null?void 0:b(),[]);let me=m((i=L==null?void 0:L.root.subUnitId)==null?c:i),he=u&&!F&&!V,Y=`${l||(L==null?void 0:L.root.ref)||``}${me?` · `:``}${me}`,X=`${r}_${h}`;return q(`div`,{id:`${h}-${o}-${c}-${a}`,className:z(`univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white`,re,{"univer-w-[278px]":!k,"univer-w-full":k,"univer-shadow":!V&&(f||M||h===Ee.CELL)}),style:D,onClick:d,onMouseEnter:()=>{y==null||y(),N(!0)},onMouseLeave:()=>{b==null||b(),N(!1)},children:[!V&&f&&K(`div`,{className:`univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400`}),q(`div`,{className:`univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5`,children:[q(`div`,{className:`univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden`,children:[K(`div`,{className:`univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500`}),K(R,{showIfEllipsis:!0,title:Y,children:K(`span`,{className:`univer-flex-1 univer-truncate`,children:Y})})]}),!!L&&q(`div`,{className:`univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row`,children:[K(`div`,{className:z(`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,{"univer-text-green-500":V}),onClick:pe,children:K(V?se:ce,{})}),(H==null?void 0:H.userID)===L.root.personId?K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,onClick:J,children:K(ae,{})}):null]})]}),K(`div`,{ref:G,className:z(`univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden`,ie),children:fe.map(e=>K(Oe,{unitId:o,subUnitId:c,item:e,isRoot:e.id===(L==null?void 0:L.root.id),editing:F===e.id,resolved:L==null?void 0:L.root.resolved,type:w,threadCommentEditorId:X,onClose:p,onEditingChange:t=>{I(t?e.id:``)},onReply:e=>{e&&requestAnimationFrame(()=>{var t;(t=ue.current)==null||t.reply(Te([{type:`mention`,content:{id:e.userID,label:`@${e.name}`}},{type:`text`,content:` `}]))})},onAddComment:x,onDeleteComment:S},e.id))}),he&&K(`div`,{children:K(Se,{ref:ue,type:w,unitId:o,subUnitId:c,editorId:X,onSave:async({text:e,attachments:t})=>{var n,r;let i={text:e,attachments:t,dT:P(),id:_(),ref:l,personId:(n=H==null?void 0:H.userID)==null?``:n,parentId:L==null?void 0:L.root.id,unitId:o,subUnitId:c,threadId:(r=L==null?void 0:L.root.threadId)==null?``:r};(x==null?void 0:x(i))!==!1&&(await B.executeCommand(A.id,{unitId:o,subUnitId:c,comment:i}),G.current&&(G.current.scrollTop=G.current.scrollHeight))},autoFocus:v||!L,onCancel:()=>{L||p==null||p()}},`${v}`)})]})},Ae=e=>{let{unitId:t,subUnitId$:n,type:r,onAdd:i,getSubUnitName:a,onResolve:o,sortComments:c,onItemLeave:l,onItemEnter:u,disableAdd:d,tempComment:p,onAddComment:m,onDeleteComment:_,showComments:v}=e,[y,b]=W(`all`),[x,S]=W(`all`),C=T(f),w=T(g),D=T(ne),[O,k]=W(()=>D.getUnit(t)),A=E(T(Z).activeCommentId$),j=E(D.commentUpdate$),ee=T(s),te=E(n),M=de(!0),N=Ee.PANEL,P=E(w.currentUser$),I=U(()=>{var e;let t=y===`all`?O:(e=O.filter(e=>e.subUnitId===te))==null?[]:e,n=c==null?(e=>e):c,r=t.map(e=>{var t;return{...e.root,children:(t=e.children)==null?[]:t,users:e.relativeUsers}});if(v){let e=new Map;return r.forEach(t=>{e.set(t.id,t)}),[...v,``].map(t=>e.get(t)).filter(Boolean)}else return n(r)},[v,y,O,c,te]),R=U(()=>[...I.filter(e=>!e.resolved),...I.filter(e=>e.resolved)],[I]),re=U(()=>x===`resolved`?R.filter(e=>e.resolved):x===`unsolved`?R.filter(e=>!e.resolved):x===`concern_me`&&P!=null&&P.userID?R.filter(e=>e==null?void 0:e.users.has(P.userID)):R,[R,P==null?void 0:P.userID,x]),z=p?[p,...re]:re,ie=z.filter(e=>!e.resolved),ae=z.filter(e=>e.resolved),oe=x!==`all`||y!==`all`,V=()=>{S(`all`),b(`all`)};le(()=>{t&&k(D.getUnit(t))},[t,D,j]),le(()=>{var e;if(!A)return;if(!M.current){M.current=!0;return}let{unitId:t,subUnitId:n,commentId:r}=A,i=`${N}-${t}-${n}-${r}`;(e=document.getElementById(i))==null||e.scrollIntoView({block:`center`})},[A]);let se=e=>K(ke,{location:N,getSubUnitName:a,id:e.id,unitId:e.unitId,subUnitId:e.subUnitId,refStr:e.ref,type:r,showEdit:(A==null?void 0:A.commentId)===e.id,showHighlight:(A==null?void 0:A.commentId)===e.id,onClick:()=>{M.current=!1,e.resolved?ee.executeCommand(Q.id):ee.executeCommand(Q.id,{unitId:e.unitId,subUnitId:e.subUnitId,commentId:e.id,temp:!1})},onMouseEnter:()=>u==null?void 0:u(e),onMouseLeave:()=>l==null?void 0:l(e),onAddComment:m,onDeleteComment:_,onResolve:t=>o==null?void 0:o(e.id,t)},e.id);return q(`div`,{className:`univer-flex univer-min-h-full univer-flex-col univer-pb-3`,children:[q(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-between`,children:[r===h.UNIVER_SHEET?K(L,{borderless:!0,value:y,options:[{value:`current`,label:C.t(`threadCommentUI.filter.sheet.current`)},{value:`all`,label:C.t(`threadCommentUI.filter.sheet.all`)}],onChange:b}):null,K(L,{borderless:!0,value:x,options:[{value:`all`,label:C.t(`threadCommentUI.filter.status.all`)},{value:`resolved`,label:C.t(`threadCommentUI.filter.status.resolved`)},{value:`unsolved`,label:C.t(`threadCommentUI.filter.status.unsolved`)},{value:`concern_me`,label:C.t(`threadCommentUI.filter.status.concernMe`)}],onChange:S})]}),z.length===0?q(`div`,{className:`univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:[C.t(`threadCommentUI.panel.empty`),oe?K(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:K(F,{onClick:V,children:C.t(`threadCommentUI.panel.reset`)})}):d?null:K(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:q(F,{onClick:i,children:[K(B,{className:`univer-mr-1.5`}),C.t(`threadCommentUI.panel.addComment`)]})})]}):q(`div`,{className:`univer-mt-3 univer-flex univer-flex-col univer-gap-3`,children:[ie.map(se),ae.length>0&&K(`div`,{className:`univer-text-xs`,children:C.t(`threadCommentUI.panel.solved`)}),ae.map(se)]})]})};export{Q as SetActiveCommentOperation,Ae as ThreadCommentPanel,Z as ThreadCommentPanelService,ke as ThreadCommentTree,Ee as ThreadCommentTreeLocation,$ as UniverThreadCommentUIPlugin};
+import { BuildTextUtils, CommandType, CustomRangeType, DOCS_COMMENT_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, Tools, UniverInstanceType, UserManagerService, generateRandomId, getBodySlice, merge, mergeOverrideWithDependencies } from "@univerjs/core";
+import { ISidebarService, KeyCode, UI_PLUGIN_CONFIG_KEY, useConfigValue, useDependency, useObservable } from "@univerjs/ui";
+import { BehaviorSubject, debounceTime, filter } from "rxjs";
+import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ResolveCommentCommand, ThreadCommentModel, UniverThreadCommentPlugin, UpdateCommentCommand, getDT } from "@univerjs/thread-comment";
+import { Button, Dropdown, Select, Tooltip, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
+import { DeleteIcon, IncreaseIcon, MoreHorizontalIcon, ReplyToCommentIcon, ResolvedIcon, SolveIcon } from "@univerjs/icons";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { BreakLineCommand, IEditorService, RichTextEditor } from "@univerjs/docs-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region \0@oxc-project+runtime@0.124.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/services/thread-comment-panel.service.ts
+let ThreadCommentPanelService = class ThreadCommentPanelService extends Disposable {
+	constructor(_sidebarService, _univerInstanceService) {
+		super();
+		this._sidebarService = _sidebarService;
+		this._univerInstanceService = _univerInstanceService;
+		_defineProperty(this, "_panelVisible", false);
+		_defineProperty(this, "_panelVisible$", new BehaviorSubject(false));
+		_defineProperty(this, "_activeCommentId", void 0);
+		_defineProperty(this, "_activeCommentId$", new BehaviorSubject(void 0));
+		_defineProperty(this, "panelVisible$", this._panelVisible$.asObservable());
+		_defineProperty(this, "activeCommentId$", this._activeCommentId$.asObservable());
+		this._init();
+		this.disposeWithMe(() => {
+			this._activeCommentId$.complete();
+			this._panelVisible$.complete();
+		});
+	}
+	_init() {
+		this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe((opt) => {
+			if (!opt.visible) this.setPanelVisible(false);
+		}));
+		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(filter((sheet) => !sheet)).subscribe(() => {
+			this._sidebarService.close();
+		}));
+	}
+	get panelVisible() {
+		return this._panelVisible;
+	}
+	get activeCommentId() {
+		return this._activeCommentId;
+	}
+	setPanelVisible(visible) {
+		this._panelVisible = visible;
+		this._panelVisible$.next(visible);
+	}
+	setActiveComment(commentInfo) {
+		this._activeCommentId = commentInfo;
+		this._activeCommentId$.next(commentInfo);
+	}
+};
+ThreadCommentPanelService = __decorate([__decorateParam(0, Inject(ISidebarService)), __decorateParam(1, IUniverInstanceService)], ThreadCommentPanelService);
+
+//#endregion
+//#region src/commands/operations/comment.operations.ts
+const SetActiveCommentOperation = {
+	id: "thread-comment-ui.operation.set-active-comment",
+	type: CommandType.OPERATION,
+	handler(accessor, params) {
+		accessor.get(ThreadCommentPanelService).setActiveComment(params);
+		return true;
+	}
+};
+
+//#endregion
+//#region package.json
+var name = "@univerjs/thread-comment-ui";
+var version = "0.21.0";
+
+//#endregion
+//#region src/config/config.ts
+const THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY = "thread-comment-ui.config";
+const configSymbol = Symbol(THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/types/const.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const PLUGIN_NAME = "UNIVER_THREAD_COMMENT_UI_PLUGIN";
+
+//#endregion
+//#region src/plugin.ts
+let UniverThreadCommentUIPlugin = class UniverThreadCommentUIPlugin extends Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _commandService, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._commandService = _commandService;
+		this._configService = _configService;
+		const { menu, ...rest } = merge({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(THREAD_COMMENT_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		var _this$_config;
+		mergeOverrideWithDependencies([[ThreadCommentPanelService]], (_this$_config = this._config) === null || _this$_config === void 0 ? void 0 : _this$_config.overrides).forEach((dep) => {
+			this._injector.add(dep);
+		});
+		[SetActiveCommentOperation].forEach((command) => {
+			this._commandService.registerCommand(command);
+		});
+	}
+};
+_defineProperty(UniverThreadCommentUIPlugin, "pluginName", PLUGIN_NAME);
+_defineProperty(UniverThreadCommentUIPlugin, "packageName", name);
+_defineProperty(UniverThreadCommentUIPlugin, "version", version);
+_defineProperty(UniverThreadCommentUIPlugin, "type", UniverInstanceType.UNIVER_UNKNOWN);
+UniverThreadCommentUIPlugin = __decorate([
+	DependentOn(UniverThreadCommentPlugin),
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, ICommandService),
+	__decorateParam(3, IConfigService)
+], UniverThreadCommentUIPlugin);
+
+//#endregion
+//#region src/views/thread-comment-editor/index.tsx
+function getSnapshot(body) {
+	return {
+		id: "d",
+		body,
+		documentStyle: {}
+	};
+}
+const ThreadCommentEditor = forwardRef((props, ref) => {
+	var _editor$current5;
+	const { comment, onSave, id, onCancel, autoFocus, unitId, type, editorId } = props;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [editing, setEditing] = useState(false);
+	const editorService = useDependency(IEditorService);
+	const editor = useRef(null);
+	const rootEditorId = type === UniverInstanceType.UNIVER_DOC ? DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
+	const [canSubmit, setCanSubmit] = useState(() => {
+		var _editor$current$getDo, _editor$current;
+		return BuildTextUtils.transform.getPlainText((_editor$current$getDo = (_editor$current = editor.current) === null || _editor$current === void 0 || (_editor$current = _editor$current.getDocumentData().body) === null || _editor$current === void 0 ? void 0 : _editor$current.dataStream) !== null && _editor$current$getDo !== void 0 ? _editor$current$getDo : "");
+	});
+	useEffect(() => {
+		var _editor$current$getDo2, _editor$current2, _editor$current3;
+		setCanSubmit(BuildTextUtils.transform.getPlainText((_editor$current$getDo2 = (_editor$current2 = editor.current) === null || _editor$current2 === void 0 || (_editor$current2 = _editor$current2.getDocumentData().body) === null || _editor$current2 === void 0 ? void 0 : _editor$current2.dataStream) !== null && _editor$current$getDo2 !== void 0 ? _editor$current$getDo2 : ""));
+		const sub = (_editor$current3 = editor.current) === null || _editor$current3 === void 0 ? void 0 : _editor$current3.selectionChange$.subscribe(() => {
+			var _editor$current$getDo3, _editor$current4;
+			setCanSubmit(BuildTextUtils.transform.getPlainText((_editor$current$getDo3 = (_editor$current4 = editor.current) === null || _editor$current4 === void 0 || (_editor$current4 = _editor$current4.getDocumentData().body) === null || _editor$current4 === void 0 ? void 0 : _editor$current4.dataStream) !== null && _editor$current$getDo3 !== void 0 ? _editor$current$getDo3 : ""));
+		});
+		return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
+	}, [(_editor$current5 = editor.current) === null || _editor$current5 === void 0 ? void 0 : _editor$current5.selectionChange$]);
+	const keyboardEventConfig = useMemo(() => ({
+		keyCodes: [{ keyCode: KeyCode.ENTER }],
+		handler: (keyCode) => {
+			if (keyCode === KeyCode.ENTER) commandService.executeCommand(BreakLineCommand.id);
+		}
+	}), [commandService]);
+	useImperativeHandle(ref, () => ({ reply(text) {
+		var _getEditorId, _editor$current6;
+		if (!editor.current) return;
+		editorService.focus((_getEditorId = editor.current.getEditorId()) !== null && _getEditorId !== void 0 ? _getEditorId : "");
+		const documentData = getSnapshot(text);
+		(_editor$current6 = editor.current) === null || _editor$current6 === void 0 || _editor$current6.setDocumentData(documentData, [{
+			startOffset: documentData.body.dataStream.length - 2,
+			endOffset: documentData.body.dataStream.length - 2,
+			collapsed: true
+		}]);
+	} }));
+	const handleSave = () => {
+		if (editor.current) {
+			const newText = Tools.deepClone(editor.current.getDocumentData().body);
+			setEditing(false);
+			onSave === null || onSave === void 0 || onSave({
+				...comment,
+				text: newText
+			});
+			editor.current.replaceText("");
+			setTimeout(() => {
+				var _editor$current7, _editor$current8;
+				(_editor$current7 = editor.current) === null || _editor$current7 === void 0 || _editor$current7.setSelectionRanges([]);
+				(_editor$current8 = editor.current) === null || _editor$current8 === void 0 || _editor$current8.blur();
+			}, 10);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		onClick: (e) => e.preventDefault(),
+		children: [/* @__PURE__ */ jsx(RichTextEditor, {
+			className: "univer-w-full",
+			editorRef: editor,
+			editorId,
+			autoFocus,
+			keyboardEventConfig,
+			placeholder: localeService.t("threadCommentUI.editor.placeholder"),
+			initialValue: (comment === null || comment === void 0 ? void 0 : comment.text) && getSnapshot(comment.text),
+			onFocusChange: (isFocus) => isFocus && setEditing(isFocus),
+			isSingle: false,
+			maxHeight: 64,
+			onClickOutside: () => {
+				setTimeout(() => {
+					editorService.focus(rootEditorId);
+				}, 30);
+			}
+		}), editing ? /* @__PURE__ */ jsxs("div", {
+			className: "univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				onClick: () => {
+					var _editor$current9;
+					onCancel === null || onCancel === void 0 || onCancel();
+					setEditing(false);
+					(_editor$current9 = editor.current) === null || _editor$current9 === void 0 || _editor$current9.replaceText("", true);
+					commandService.executeCommand(SetActiveCommentOperation.id);
+				},
+				children: localeService.t("threadCommentUI.editor.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				disabled: !canSubmit,
+				onClick: handleSave,
+				children: localeService.t(id ? "threadCommentUI.editor.save" : "threadCommentUI.editor.reply")
+			})]
+		}) : null]
+	});
+});
+
+//#endregion
+//#region src/views/thread-comment-editor/util.ts
+const transformDocument2TextNodesInParagraph = (doc) => {
+	const { dataStream, customRanges } = doc;
+	const end = dataStream.endsWith("\r\n") ? dataStream.length - 2 : dataStream.length;
+	const textNodes = [];
+	let lastIndex = 0;
+	customRanges === null || customRanges === void 0 || customRanges.forEach((range) => {
+		if (lastIndex < range.startIndex) textNodes.push({
+			type: "text",
+			content: dataStream.slice(lastIndex, range.startIndex)
+		});
+		textNodes.push({
+			type: "mention",
+			content: {
+				label: dataStream.slice(range.startIndex, range.endIndex + 1),
+				id: range.rangeId
+			}
+		});
+		lastIndex = range.endIndex + 1;
+	});
+	textNodes.push({
+		type: "text",
+		content: dataStream.slice(lastIndex, end)
+	});
+	return textNodes;
+};
+const transformDocument2TextNodes = (doc) => {
+	if (!doc) return [];
+	const { paragraphs = [] } = doc;
+	return paragraphs.map((paragraph, index) => {
+		return transformDocument2TextNodesInParagraph(getBodySlice(doc, index === 0 ? 0 : paragraphs[index - 1].startIndex + 1, paragraph.startIndex));
+	});
+};
+const transformTextNodes2Document = (nodes) => {
+	let str = "";
+	const customRanges = [];
+	nodes.forEach((node) => {
+		switch (node.type) {
+			case "text":
+				str += node.content;
+				break;
+			case "mention": {
+				const start = str.length;
+				str += node.content.label;
+				const end = str.length - 1;
+				customRanges.push({
+					rangeId: node.content.id,
+					rangeType: CustomRangeType.MENTION,
+					startIndex: start,
+					endIndex: end,
+					properties: {},
+					wholeEntity: true
+				});
+				break;
+			}
+			default: break;
+		}
+	});
+	str += "\r\n";
+	return {
+		textRuns: [],
+		paragraphs: [{
+			startIndex: str.length - 2,
+			paragraphStyle: {}
+		}],
+		sectionBreaks: [{ startIndex: str.length - 1 }],
+		dataStream: str,
+		customRanges
+	};
+};
+
+//#endregion
+//#region src/views/thread-comment-tree/index.tsx
+let ThreadCommentTreeLocation = /* @__PURE__ */ function(ThreadCommentTreeLocation) {
+	ThreadCommentTreeLocation["CELL"] = "CELL";
+	ThreadCommentTreeLocation["PANEL"] = "PANEL";
+	return ThreadCommentTreeLocation;
+}({});
+const MOCK_ID = "__mock__";
+const ThreadCommentItem = (props) => {
+	const { item, unitId, subUnitId, editing, onEditingChange, onReply, resolved, isRoot, onClose, onDeleteComment, type, threadCommentEditorId } = props;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const userManagerService = useDependency(UserManagerService);
+	const user = userManagerService.getUser(item.personId);
+	const currentUser = useObservable(userManagerService.currentUser$);
+	const isCommentBySelf = (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) === item.personId;
+	const isMock = item.id === MOCK_ID;
+	const [showReply, setShowReply] = useState(false);
+	const uiConfig = useConfigValue(UI_PLUGIN_CONFIG_KEY);
+	const avatarFallback = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.avatarFallback;
+	const handleDeleteItem = () => {
+		if ((onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(item)) === false) return;
+		commandService.executeCommand(isRoot ? DeleteCommentTreeCommand.id : DeleteCommentCommand.id, {
+			unitId,
+			subUnitId,
+			commentId: item.id
+		});
+		if (isRoot) onClose === null || onClose === void 0 || onClose();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-relative univer-mb-3 univer-pl-[30px]",
+		onMouseLeave: () => setShowReply(false),
+		onMouseEnter: () => setShowReply(true),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat",
+				style: { backgroundImage: `url(${(user === null || user === void 0 ? void 0 : user.avatar) || avatarFallback})` }
+			}),
+			user ? /* @__PURE__ */ jsxs("div", {
+				className: "univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "univer-text-sm univer-font-medium univer-leading-5",
+					children: (user === null || user === void 0 ? void 0 : user.name) || " "
+				}), /* @__PURE__ */ jsxs("div", { children: [isMock || resolved ? null : showReply && user ? /* @__PURE__ */ jsx("div", {
+					className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50",
+					onClick: () => onReply(user),
+					children: /* @__PURE__ */ jsx(ReplyToCommentIcon, {})
+				}) : null, isCommentBySelf && !isMock && !resolved ? /* @__PURE__ */ jsx(Dropdown, {
+					overlay: /* @__PURE__ */ jsx("div", {
+						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",
+							children: [/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+								className: "hover:univer-bg-gray-200",
+								onClick: () => onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(true),
+								children: localeService.t("threadCommentUI.item.edit")
+							}) }), /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+								className: "hover:univer-bg-gray-200",
+								onClick: handleDeleteItem,
+								children: localeService.t("threadCommentUI.item.delete")
+							}) })]
+						})
+					}),
+					children: /* @__PURE__ */ jsx("div", {
+						className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50",
+						children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {})
+					})
+				}) : null] })]
+			}) : null,
+			/* @__PURE__ */ jsx("time", {
+				className: "univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
+				children: item.dT
+			}),
+			editing ? /* @__PURE__ */ jsx(ThreadCommentEditor, {
+				type,
+				id: item.id,
+				comment: item,
+				onCancel: () => onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(false),
+				autoFocus: true,
+				unitId,
+				subUnitId,
+				editorId: threadCommentEditorId,
+				onSave: ({ text, attachments }) => {
+					onEditingChange === null || onEditingChange === void 0 || onEditingChange(false);
+					commandService.executeCommand(UpdateCommentCommand.id, {
+						unitId,
+						subUnitId,
+						payload: {
+							commentId: item.id,
+							text,
+							attachments
+						}
+					});
+				}
+			}) : /* @__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))
+			})
+		]
+	});
+};
+const ThreadCommentTree = (props) => {
+	var _currentUser$userID, _comments$children, _comments$root$subUni;
+	const { id, unitId, subUnitId, refStr, showEdit = true, onClick, showHighlight, onClose, getSubUnitName, location, autoFocus, onMouseEnter, onMouseLeave, onAddComment, onDeleteComment, onResolve, type, style, full } = props;
+	const threadCommentModel = useDependency(ThreadCommentModel);
+	const [isHover, setIsHover] = useState(false);
+	const [editingId, setEditingId] = useState("");
+	useObservable(useMemo(() => threadCommentModel.commentUpdate$.pipe(debounceTime(16)), [threadCommentModel]));
+	const comments = id ? threadCommentModel.getCommentWithChildren(unitId, subUnitId, id) : null;
+	const commandService = useDependency(ICommandService);
+	const userManagerService = useDependency(UserManagerService);
+	const resolved = comments === null || comments === void 0 ? void 0 : comments.root.resolved;
+	const currentUser = useObservable(userManagerService.currentUser$);
+	const editorRef = useRef(null);
+	const renderComments = [...comments ? [comments.root] : [{
+		id: MOCK_ID,
+		text: { dataStream: "\n\r" },
+		personId: (_currentUser$userID = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID !== void 0 ? _currentUser$userID : "",
+		ref: refStr !== null && refStr !== void 0 ? refStr : "",
+		dT: "",
+		unitId,
+		subUnitId,
+		threadId: ""
+	}], ...(_comments$children = comments === null || comments === void 0 ? void 0 : comments.children) !== null && _comments$children !== void 0 ? _comments$children : []];
+	const scroller = useRef(null);
+	const handleResolve = (e) => {
+		e.stopPropagation();
+		if (!resolved) commandService.executeCommand(SetActiveCommentOperation.id);
+		else commandService.executeCommand(SetActiveCommentOperation.id, {
+			unitId,
+			subUnitId,
+			commentId: id
+		});
+		commandService.executeCommand(ResolveCommentCommand.id, {
+			unitId,
+			subUnitId,
+			commentId: id,
+			resolved: !resolved
+		});
+		onResolve === null || onResolve === void 0 || onResolve(!resolved);
+	};
+	const handleDeleteRoot = (e) => {
+		e.stopPropagation();
+		commandService.executeCommand(SetActiveCommentOperation.id);
+		if ((comments === null || comments === void 0 ? void 0 : comments.root) && (onDeleteComment === null || onDeleteComment === void 0 ? void 0 : onDeleteComment(comments.root)) === false) return;
+		commandService.executeCommand(DeleteCommentTreeCommand.id, {
+			unitId,
+			subUnitId,
+			commentId: id
+		});
+		onClose === null || onClose === void 0 || onClose();
+	};
+	useEffect(() => {
+		return onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
+	}, []);
+	const subUnitName = getSubUnitName((_comments$root$subUni = comments === null || comments === void 0 ? void 0 : comments.root.subUnitId) !== null && _comments$root$subUni !== void 0 ? _comments$root$subUni : subUnitId);
+	const editorVisible = showEdit && !editingId && !resolved;
+	const title = `${refStr || (comments === null || comments === void 0 ? void 0 : comments.root.ref) || ""}${subUnitName ? " · " : ""}${subUnitName}`;
+	const threadCommentEditorId = `${DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${location}`;
+	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, {
+			"univer-w-[278px]": !full,
+			"univer-w-full": full,
+			"univer-shadow": !resolved && (showHighlight || isHover || location === ThreadCommentTreeLocation.CELL)
+		}),
+		style,
+		onClick,
+		onMouseEnter: () => {
+			onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter();
+			setIsHover(true);
+		},
+		onMouseLeave: () => {
+			onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave();
+			setIsHover(false);
+		},
+		children: [
+			!resolved && showHighlight && /* @__PURE__ */ jsx("div", { className: "univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden",
+					children: [/* @__PURE__ */ jsx("div", { className: "univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500" }), /* @__PURE__ */ jsx(Tooltip, {
+						showIfEllipsis: true,
+						title,
+						children: /* @__PURE__ */ jsx("span", {
+							className: "univer-flex-1 univer-truncate",
+							children: title
+						})
+					})]
+				}), !!comments && /* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: clsx("univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800", { "univer-text-green-500": resolved }),
+						onClick: handleResolve,
+						children: resolved ? /* @__PURE__ */ jsx(ResolvedIcon, {}) : /* @__PURE__ */ jsx(SolveIcon, {})
+					}), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) === comments.root.personId ? /* @__PURE__ */ jsx("div", {
+						className: "univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800",
+						onClick: handleDeleteRoot,
+						children: /* @__PURE__ */ jsx(DeleteIcon, {})
+					}) : null]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scroller,
+				className: clsx("univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName),
+				children: renderComments.map((item) => /* @__PURE__ */ jsx(ThreadCommentItem, {
+					unitId,
+					subUnitId,
+					item,
+					isRoot: item.id === (comments === null || comments === void 0 ? void 0 : comments.root.id),
+					editing: editingId === item.id,
+					resolved: comments === null || comments === void 0 ? void 0 : comments.root.resolved,
+					type,
+					threadCommentEditorId,
+					onClose,
+					onEditingChange: (editing) => {
+						if (editing) setEditingId(item.id);
+						else setEditingId("");
+					},
+					onReply: (user) => {
+						if (!user) return;
+						requestAnimationFrame(() => {
+							var _editorRef$current;
+							(_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.reply(transformTextNodes2Document([{
+								type: "mention",
+								content: {
+									id: user.userID,
+									label: `@${user.name}`
+								}
+							}, {
+								type: "text",
+								content: " "
+							}]));
+						});
+					},
+					onAddComment,
+					onDeleteComment
+				}, item.id))
+			}),
+			editorVisible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ThreadCommentEditor, {
+				ref: editorRef,
+				type,
+				unitId,
+				subUnitId,
+				editorId: threadCommentEditorId,
+				onSave: async ({ text, attachments }) => {
+					var _currentUser$userID2, _comments$root$thread;
+					const comment = {
+						text,
+						attachments,
+						dT: getDT(),
+						id: generateRandomId(),
+						ref: refStr,
+						personId: (_currentUser$userID2 = currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) !== null && _currentUser$userID2 !== void 0 ? _currentUser$userID2 : "",
+						parentId: comments === null || comments === void 0 ? void 0 : comments.root.id,
+						unitId,
+						subUnitId,
+						threadId: (_comments$root$thread = comments === null || comments === void 0 ? void 0 : comments.root.threadId) !== null && _comments$root$thread !== void 0 ? _comments$root$thread : ""
+					};
+					if ((onAddComment === null || onAddComment === void 0 ? void 0 : onAddComment(comment)) === false) return;
+					await commandService.executeCommand(AddCommentCommand.id, {
+						unitId,
+						subUnitId,
+						comment
+					});
+					if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight;
+				},
+				autoFocus: autoFocus || !comments,
+				onCancel: () => {
+					if (!comments) onClose === null || onClose === void 0 || onClose();
+				}
+			}, `${autoFocus}`) })
+		]
+	});
+};
+
+//#endregion
+//#region src/views/thread-comment-panel/index.tsx
+const ThreadCommentPanel = (props) => {
+	const { unitId, subUnitId$, type, onAdd, getSubUnitName, onResolve, sortComments, onItemLeave, onItemEnter, disableAdd, tempComment, onAddComment, onDeleteComment, showComments } = props;
+	const [unit, setUnit] = useState("all");
+	const [status, setStatus] = useState("all");
+	const localeService = useDependency(LocaleService);
+	const userService = useDependency(UserManagerService);
+	const threadCommentModel = useDependency(ThreadCommentModel);
+	const [unitComments, setUnitComments] = useState(() => threadCommentModel.getUnit(unitId));
+	const activeCommentId = useObservable(useDependency(ThreadCommentPanelService).activeCommentId$);
+	const update = useObservable(threadCommentModel.commentUpdate$);
+	const commandService = useDependency(ICommandService);
+	const subUnitId = useObservable(subUnitId$);
+	const shouldScroll = useRef(true);
+	const location = ThreadCommentTreeLocation.PANEL;
+	const currentUser = useObservable(userService.currentUser$);
+	const comments = useMemo(() => {
+		var _unitComments$filter;
+		const allComments = unit === "all" ? unitComments : (_unitComments$filter = unitComments.filter((i) => i.subUnitId === subUnitId)) !== null && _unitComments$filter !== void 0 ? _unitComments$filter : [];
+		const sort = sortComments !== null && sortComments !== void 0 ? sortComments : ((a) => a);
+		const res = allComments.map((i) => {
+			var _i$children;
+			return {
+				...i.root,
+				children: (_i$children = i.children) !== null && _i$children !== void 0 ? _i$children : [],
+				users: i.relativeUsers
+			};
+		});
+		if (showComments) {
+			const map = /* @__PURE__ */ new Map();
+			res.forEach((comment) => {
+				map.set(comment.id, comment);
+			});
+			return [...showComments, ""].map((id) => map.get(id)).filter(Boolean);
+		} else return sort(res);
+	}, [
+		showComments,
+		unit,
+		unitComments,
+		sortComments,
+		subUnitId
+	]);
+	const commentsSorted = useMemo(() => [...comments.filter((comment) => !comment.resolved), ...comments.filter((comment) => comment.resolved)], [comments]);
+	const statuedComments = useMemo(() => {
+		if (status === "resolved") return commentsSorted.filter((comment) => comment.resolved);
+		if (status === "unsolved") return commentsSorted.filter((comment) => !comment.resolved);
+		if (status === "concern_me") {
+			if (!(currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID)) return commentsSorted;
+			return commentsSorted.filter((comment) => comment === null || comment === void 0 ? void 0 : comment.users.has(currentUser.userID));
+		}
+		return commentsSorted;
+	}, [
+		commentsSorted,
+		currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID,
+		status
+	]);
+	const renderComments = tempComment ? [tempComment, ...statuedComments] : statuedComments;
+	const unSolvedComments = renderComments.filter((comment) => !comment.resolved);
+	const solvedComments = renderComments.filter((comment) => comment.resolved);
+	const isFiltering = status !== "all" || unit !== "all";
+	const onReset = () => {
+		setStatus("all");
+		setUnit("all");
+	};
+	useEffect(() => {
+		if (unitId) setUnitComments(threadCommentModel.getUnit(unitId));
+	}, [
+		unitId,
+		threadCommentModel,
+		update
+	]);
+	useEffect(() => {
+		var _document$getElementB;
+		if (!activeCommentId) return;
+		if (!shouldScroll.current) {
+			shouldScroll.current = true;
+			return;
+		}
+		const { unitId, subUnitId, commentId } = activeCommentId;
+		const id = `${location}-${unitId}-${subUnitId}-${commentId}`;
+		(_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 || _document$getElementB.scrollIntoView({ block: "center" });
+	}, [activeCommentId]);
+	const renderComment = (comment) => /* @__PURE__ */ jsx(ThreadCommentTree, {
+		location,
+		getSubUnitName,
+		id: comment.id,
+		unitId: comment.unitId,
+		subUnitId: comment.subUnitId,
+		refStr: comment.ref,
+		type,
+		showEdit: (activeCommentId === null || activeCommentId === void 0 ? void 0 : activeCommentId.commentId) === comment.id,
+		showHighlight: (activeCommentId === null || activeCommentId === void 0 ? void 0 : activeCommentId.commentId) === comment.id,
+		onClick: () => {
+			shouldScroll.current = false;
+			if (!comment.resolved) commandService.executeCommand(SetActiveCommentOperation.id, {
+				unitId: comment.unitId,
+				subUnitId: comment.subUnitId,
+				commentId: comment.id,
+				temp: false
+			});
+			else commandService.executeCommand(SetActiveCommentOperation.id);
+		},
+		onMouseEnter: () => onItemEnter === null || onItemEnter === void 0 ? void 0 : onItemEnter(comment),
+		onMouseLeave: () => onItemLeave === null || onItemLeave === void 0 ? void 0 : onItemLeave(comment),
+		onAddComment,
+		onDeleteComment,
+		onResolve: (resolved) => onResolve === null || onResolve === void 0 ? void 0 : onResolve(comment.id, resolved)
+	}, comment.id);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "univer-mt-3 univer-flex univer-flex-row univer-justify-between",
+			children: [type === UniverInstanceType.UNIVER_SHEET ? /* @__PURE__ */ jsx(Select, {
+				borderless: true,
+				value: unit,
+				options: [{
+					value: "current",
+					label: localeService.t("threadCommentUI.filter.sheet.current")
+				}, {
+					value: "all",
+					label: localeService.t("threadCommentUI.filter.sheet.all")
+				}],
+				onChange: setUnit
+			}) : null, /* @__PURE__ */ jsx(Select, {
+				borderless: true,
+				value: status,
+				options: [
+					{
+						value: "all",
+						label: localeService.t("threadCommentUI.filter.status.all")
+					},
+					{
+						value: "resolved",
+						label: localeService.t("threadCommentUI.filter.status.resolved")
+					},
+					{
+						value: "unsolved",
+						label: localeService.t("threadCommentUI.filter.status.unsolved")
+					},
+					{
+						value: "concern_me",
+						label: localeService.t("threadCommentUI.filter.status.concernMe")
+					}
+				],
+				onChange: setStatus
+			})]
+		}), renderComments.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
+			children: [localeService.t("threadCommentUI.panel.empty"), isFiltering ? /* @__PURE__ */ jsx("div", {
+				className: "univer-mt-2 univer-flex univer-flex-row",
+				children: /* @__PURE__ */ jsx(Button, {
+					onClick: onReset,
+					children: localeService.t("threadCommentUI.panel.reset")
+				})
+			}) : !disableAdd ? /* @__PURE__ */ jsx("div", {
+				className: "univer-mt-2 univer-flex univer-flex-row",
+				children: /* @__PURE__ */ jsxs(Button, {
+					onClick: onAdd,
+					children: [/* @__PURE__ */ jsx(IncreaseIcon, { className: "univer-mr-1.5" }), localeService.t("threadCommentUI.panel.addComment")]
+				})
+			}) : null]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "univer-mt-3 univer-flex univer-flex-col univer-gap-3",
+			children: [
+				unSolvedComments.map(renderComment),
+				solvedComments.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "univer-text-xs",
+					children: localeService.t("threadCommentUI.panel.solved")
+				}),
+				solvedComments.map(renderComment)
+			]
+		})]
+	});
+};
+
+//#endregion
+export { SetActiveCommentOperation, ThreadCommentPanel, ThreadCommentPanelService, ThreadCommentTree, ThreadCommentTreeLocation, UniverThreadCommentUIPlugin };