@univerjs/thread-comment-ui 0.20.1 → 0.21.0-insiders.20260422-d7fcb4d

package/lib/cjs/index.js

@@ -1,4 +1,844 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/core`),t=require(`@univerjs/ui`),n=require(`rxjs`),r=require(`@univerjs/thread-comment`),i=require(`@univerjs/design`),a=require(`@univerjs/icons`),o=require(`react`),s=require(`@univerjs/docs-ui`),c=require(`react/jsx-runtime`);function l(e){"@babel/helpers - typeof";return l=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},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){return function(n,r){t(n,r,e)}}function m(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 h=class extends e.Disposable{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,f(this,`_panelVisible`,!1),f(this,`_panelVisible$`,new n.BehaviorSubject(!1)),f(this,`_activeCommentId`,void 0),f(this,`_activeCommentId$`,new n.BehaviorSubject(void 0)),f(this,`panelVisible$`,this._panelVisible$.asObservable()),f(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$(e.UniverInstanceType.UNIVER_SHEET).pipe((0,n.filter)(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)}};h=m([p(0,(0,e.Inject)(t.ISidebarService)),p(1,e.IUniverInstanceService)],h);const g={id:`thread-comment-ui.operation.set-active-comment`,type:e.CommandType.OPERATION,handler(e,t){return e.get(h).setActiveComment(t),!0}};var _=`@univerjs/thread-comment-ui`,v=`0.20.1`;const y=`thread-comment-ui.config`;Symbol(y);const b={};let x=class extends e.Plugin{constructor(t=b,n,r,i){super(),this._config=t,this._injector=n,this._commandService=r,this._configService=i;let{menu:a,...o}=(0,e.merge)({},b,this._config);a&&this._configService.setConfig(`menu`,a,{merge:!0}),this._configService.setConfig(y,o)}onStarting(){var t;(0,e.mergeOverrideWithDependencies)([[h]],(t=this._config)==null?void 0:t.overrides).forEach(e=>{this._injector.add(e)}),[g].forEach(e=>{this._commandService.registerCommand(e)})}};f(x,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),f(x,`packageName`,_),f(x,`version`,v),f(x,`type`,e.UniverInstanceType.UNIVER_UNKNOWN),x=m([(0,e.DependentOn)(r.UniverThreadCommentPlugin),p(1,(0,e.Inject)(e.Injector)),p(2,e.ICommandService),p(3,e.IConfigService)],x);function S(e){return{id:`d`,body:e,documentStyle:{}}}const C=(0,o.forwardRef)((n,r)=>{var a;let{comment:l,onSave:u,id:d,onCancel:f,autoFocus:p,unitId:m,type:h,editorId:_}=n,v=(0,t.useDependency)(e.ICommandService),y=(0,t.useDependency)(e.LocaleService),[b,x]=(0,o.useState)(!1),C=(0,t.useDependency)(s.IEditorService),w=(0,o.useRef)(null),T=h===e.UniverInstanceType.UNIVER_DOC?e.DOCS_NORMAL_EDITOR_UNIT_ID_KEY:m,[E,D]=(0,o.useState)(()=>{var t,n;return e.BuildTextUtils.transform.getPlainText((t=(n=w.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t)});(0,o.useEffect)(()=>{var t,n,r;D(e.BuildTextUtils.transform.getPlainText((t=(n=w.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t));let i=(r=w.current)==null?void 0:r.selectionChange$.subscribe(()=>{var t,n;D(e.BuildTextUtils.transform.getPlainText((t=(n=w.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t))});return()=>i==null?void 0:i.unsubscribe()},[(a=w.current)==null?void 0:a.selectionChange$]);let O=(0,o.useMemo)(()=>({keyCodes:[{keyCode:t.KeyCode.ENTER}],handler:e=>{e===t.KeyCode.ENTER&&v.executeCommand(s.BreakLineCommand.id)}}),[v]);return(0,o.useImperativeHandle)(r,()=>({reply(e){var t,n;if(!w.current)return;C.focus((t=w.current.getEditorId())==null?``:t);let r=S(e);(n=w.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}])}})),(0,c.jsxs)(`div`,{onClick:e=>e.preventDefault(),children:[(0,c.jsx)(s.RichTextEditor,{className:`univer-w-full`,editorRef:w,editorId:_,autoFocus:p,keyboardEventConfig:O,placeholder:y.t(`threadCommentUI.editor.placeholder`),initialValue:(l==null?void 0:l.text)&&S(l.text),onFocusChange:e=>e&&x(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{C.focus(T)},30)}}),b?(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[(0,c.jsx)(i.Button,{onClick:()=>{var e;f==null||f(),x(!1),(e=w.current)==null||e.replaceText(``,!0),v.executeCommand(g.id)},children:y.t(`threadCommentUI.editor.cancel`)}),(0,c.jsx)(i.Button,{variant:`primary`,disabled:!E,onClick:()=>{if(w.current){let t=e.Tools.deepClone(w.current.getDocumentData().body);x(!1),u==null||u({...l,text:t}),w.current.replaceText(``),setTimeout(()=>{var e,t;(e=w.current)==null||e.setSelectionRanges([]),(t=w.current)==null||t.blur()},10)}},children:y.t(d?`threadCommentUI.editor.save`:`threadCommentUI.editor.reply`)})]}):null]})}),w=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},T=t=>{if(!t)return[];let{paragraphs:n=[]}=t;return n.map((r,i)=>w((0,e.getBodySlice)(t,i===0?0:n[i-1].startIndex+1,r.startIndex)))},E=t=>{let n=``,r=[];return t.forEach(t=>{switch(t.type){case`text`:n+=t.content;break;case`mention`:{let i=n.length;n+=t.content.label;let a=n.length-1;r.push({rangeId:t.content.id,rangeType:e.CustomRangeType.MENTION,startIndex:i,endIndex:a,properties:{},wholeEntity:!0});break}default:break}}),n+=`\r
-`,{textRuns:[],paragraphs:[{startIndex:n.length-2,paragraphStyle:{}}],sectionBreaks:[{startIndex:n.length-1}],dataStream:n,customRanges:r}};let D=function(e){return e.CELL=`CELL`,e.PANEL=`PANEL`,e}({});const O=`__mock__`,k=n=>{let{item:s,unitId:l,subUnitId:u,editing:d,onEditingChange:f,onReply:p,resolved:m,isRoot:h,onClose:g,onDeleteComment:_,type:v,threadCommentEditorId:y}=n,b=(0,t.useDependency)(e.ICommandService),x=(0,t.useDependency)(e.LocaleService),S=(0,t.useDependency)(e.UserManagerService),w=S.getUser(s.personId),E=(0,t.useObservable)(S.currentUser$),D=(E==null?void 0:E.userID)===s.personId,k=s.id===O,[A,j]=(0,o.useState)(!1),M=(0,t.useConfigValue)(t.UI_PLUGIN_CONFIG_KEY),N=M==null?void 0:M.avatarFallback;return(0,c.jsxs)(`div`,{className:`univer-relative univer-mb-3 univer-pl-[30px]`,onMouseLeave:()=>j(!1),onMouseEnter:()=>j(!0),children:[(0,c.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(${(w==null?void 0:w.avatar)||N})`}}),w?(0,c.jsxs)(`div`,{className:`univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between`,children:[(0,c.jsx)(`div`,{className:`univer-text-sm univer-font-medium univer-leading-5`,children:(w==null?void 0:w.name)||` `}),(0,c.jsxs)(`div`,{children:[k||m?null:A&&w?(0,c.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:()=>p(w),children:(0,c.jsx)(a.ReplyToCommentIcon,{})}):null,D&&!k&&!m?(0,c.jsx)(i.Dropdown,{overlay:(0,c.jsx)(`div`,{className:`univer-rounded-lg`,children:(0,c.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:[(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>f==null?void 0:f(!0),children:x.t(`threadCommentUI.item.edit`)})}),(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>{(_==null?void 0:_(s))!==!1&&(b.executeCommand(h?r.DeleteCommentTreeCommand.id:r.DeleteCommentCommand.id,{unitId:l,subUnitId:u,commentId:s.id}),h&&(g==null||g()))},children:x.t(`threadCommentUI.item.delete`)})})]})}),children:(0,c.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:(0,c.jsx)(a.MoreHorizontalIcon,{})})}):null]})]}):null,(0,c.jsx)(`time`,{className:`univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200`,children:s.dT}),d?(0,c.jsx)(C,{type:v,id:s.id,comment:s,onCancel:()=>f==null?void 0:f(!1),autoFocus:!0,unitId:l,subUnitId:u,editorId:y,onSave:({text:e,attachments:t})=>{f==null||f(!1),b.executeCommand(r.UpdateCommentCommand.id,{unitId:l,subUnitId:u,payload:{commentId:s.id,text:e,attachments:t}})}}):(0,c.jsx)(`div`,{className:`univer-text-sm univer-text-gray-900 dark:!univer-text-white`,children:T(s.text).map((e,t)=>(0,c.jsx)(`div`,{className:`univer-break-words`,children:e.map((e,t)=>{switch(e.type){case`mention`:return(0,c.jsxs)(`a`,{className:`univer-text-primary-600`,children:[e.content.label,` `]},t);default:return e.content}})},t))})]})},A=s=>{var l,u,d;let{id:f,unitId:p,subUnitId:m,refStr:h,showEdit:_=!0,onClick:v,showHighlight:y,onClose:b,getSubUnitName:x,location:S,autoFocus:w,onMouseEnter:T,onMouseLeave:A,onAddComment:j,onDeleteComment:M,onResolve:N,type:P,style:F,full:I}=s,L=(0,t.useDependency)(r.ThreadCommentModel),[R,z]=(0,o.useState)(!1),[B,V]=(0,o.useState)(``);(0,t.useObservable)((0,o.useMemo)(()=>L.commentUpdate$.pipe((0,n.debounceTime)(16)),[L]));let H=f?L.getCommentWithChildren(p,m,f):null,U=(0,t.useDependency)(e.ICommandService),W=(0,t.useDependency)(e.UserManagerService),G=H==null?void 0:H.root.resolved,K=(0,t.useObservable)(W.currentUser$),q=(0,o.useRef)(null),J=[...H?[H.root]:[{id:O,text:{dataStream:`
-\r`},personId:(l=K==null?void 0:K.userID)==null?``:l,ref:h==null?``:h,dT:``,unitId:p,subUnitId:m,threadId:``}],...(u=H==null?void 0:H.children)==null?[]:u],Y=(0,o.useRef)(null),X=e=>{e.stopPropagation(),G?U.executeCommand(g.id,{unitId:p,subUnitId:m,commentId:f}):U.executeCommand(g.id),U.executeCommand(r.ResolveCommentCommand.id,{unitId:p,subUnitId:m,commentId:f,resolved:!G}),N==null||N(!G)},ee=e=>{e.stopPropagation(),U.executeCommand(g.id),!(H!=null&&H.root&&(M==null?void 0:M(H.root))===!1)&&(U.executeCommand(r.DeleteCommentTreeCommand.id,{unitId:p,subUnitId:m,commentId:f}),b==null||b())};(0,o.useEffect)(()=>A==null?void 0:A(),[]);let Z=x((d=H==null?void 0:H.root.subUnitId)==null?m:d),te=_&&!B&&!G,Q=`${h||(H==null?void 0:H.root.ref)||``}${Z?` · `:``}${Z}`,$=`${e.DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${S}`;return(0,c.jsxs)(`div`,{id:`${S}-${p}-${m}-${f}`,className:(0,i.clsx)(`univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white`,i.borderClassName,{"univer-w-[278px]":!I,"univer-w-full":I,"univer-shadow":!G&&(y||R||S===D.CELL)}),style:F,onClick:v,onMouseEnter:()=>{T==null||T(),z(!0)},onMouseLeave:()=>{A==null||A(),z(!1)},children:[!G&&y&&(0,c.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`}),(0,c.jsxs)(`div`,{className:`univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5`,children:[(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden`,children:[(0,c.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`}),(0,c.jsx)(i.Tooltip,{showIfEllipsis:!0,title:Q,children:(0,c.jsx)(`span`,{className:`univer-flex-1 univer-truncate`,children:Q})})]}),!!H&&(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row`,children:[(0,c.jsx)(`div`,{className:(0,i.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":G}),onClick:X,children:G?(0,c.jsx)(a.ResolvedIcon,{}):(0,c.jsx)(a.SolveIcon,{})}),(K==null?void 0:K.userID)===H.root.personId?(0,c.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:ee,children:(0,c.jsx)(a.DeleteIcon,{})}):null]})]}),(0,c.jsx)(`div`,{ref:Y,className:(0,i.clsx)(`univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden`,i.scrollbarClassName),children:J.map(e=>(0,c.jsx)(k,{unitId:p,subUnitId:m,item:e,isRoot:e.id===(H==null?void 0:H.root.id),editing:B===e.id,resolved:H==null?void 0:H.root.resolved,type:P,threadCommentEditorId:$,onClose:b,onEditingChange:t=>{V(t?e.id:``)},onReply:e=>{e&&requestAnimationFrame(()=>{var t;(t=q.current)==null||t.reply(E([{type:`mention`,content:{id:e.userID,label:`@${e.name}`}},{type:`text`,content:` `}]))})},onAddComment:j,onDeleteComment:M},e.id))}),te&&(0,c.jsx)(`div`,{children:(0,c.jsx)(C,{ref:q,type:P,unitId:p,subUnitId:m,editorId:$,onSave:async({text:t,attachments:n})=>{var i,a;let o={text:t,attachments:n,dT:(0,r.getDT)(),id:(0,e.generateRandomId)(),ref:h,personId:(i=K==null?void 0:K.userID)==null?``:i,parentId:H==null?void 0:H.root.id,unitId:p,subUnitId:m,threadId:(a=H==null?void 0:H.root.threadId)==null?``:a};(j==null?void 0:j(o))!==!1&&(await U.executeCommand(r.AddCommentCommand.id,{unitId:p,subUnitId:m,comment:o}),Y.current&&(Y.current.scrollTop=Y.current.scrollHeight))},autoFocus:w||!H,onCancel:()=>{H||b==null||b()}},`${w}`)})]})},j=n=>{let{unitId:s,subUnitId$:l,type:u,onAdd:d,getSubUnitName:f,onResolve:p,sortComments:m,onItemLeave:_,onItemEnter:v,disableAdd:y,tempComment:b,onAddComment:x,onDeleteComment:S,showComments:C}=n,[w,T]=(0,o.useState)(`all`),[E,O]=(0,o.useState)(`all`),k=(0,t.useDependency)(e.LocaleService),j=(0,t.useDependency)(e.UserManagerService),M=(0,t.useDependency)(r.ThreadCommentModel),[N,P]=(0,o.useState)(()=>M.getUnit(s)),F=(0,t.useObservable)((0,t.useDependency)(h).activeCommentId$),I=(0,t.useObservable)(M.commentUpdate$),L=(0,t.useDependency)(e.ICommandService),R=(0,t.useObservable)(l),z=(0,o.useRef)(!0),B=D.PANEL,V=(0,t.useObservable)(j.currentUser$),H=(0,o.useMemo)(()=>{var e;let t=w===`all`?N:(e=N.filter(e=>e.subUnitId===R))==null?[]:e,n=m==null?(e=>e):m,r=t.map(e=>{var t;return{...e.root,children:(t=e.children)==null?[]:t,users:e.relativeUsers}});if(C){let e=new Map;return r.forEach(t=>{e.set(t.id,t)}),[...C,``].map(t=>e.get(t)).filter(Boolean)}else return n(r)},[C,w,N,m,R]),U=(0,o.useMemo)(()=>[...H.filter(e=>!e.resolved),...H.filter(e=>e.resolved)],[H]),W=(0,o.useMemo)(()=>E===`resolved`?U.filter(e=>e.resolved):E===`unsolved`?U.filter(e=>!e.resolved):E===`concern_me`&&V!=null&&V.userID?U.filter(e=>e==null?void 0:e.users.has(V.userID)):U,[U,V==null?void 0:V.userID,E]),G=b?[b,...W]:W,K=G.filter(e=>!e.resolved),q=G.filter(e=>e.resolved),J=E!==`all`||w!==`all`,Y=()=>{O(`all`),T(`all`)};(0,o.useEffect)(()=>{s&&P(M.getUnit(s))},[s,M,I]),(0,o.useEffect)(()=>{var e;if(!F)return;if(!z.current){z.current=!0;return}let{unitId:t,subUnitId:n,commentId:r}=F,i=`${B}-${t}-${n}-${r}`;(e=document.getElementById(i))==null||e.scrollIntoView({block:`center`})},[F]);let X=e=>(0,c.jsx)(A,{location:B,getSubUnitName:f,id:e.id,unitId:e.unitId,subUnitId:e.subUnitId,refStr:e.ref,type:u,showEdit:(F==null?void 0:F.commentId)===e.id,showHighlight:(F==null?void 0:F.commentId)===e.id,onClick:()=>{z.current=!1,e.resolved?L.executeCommand(g.id):L.executeCommand(g.id,{unitId:e.unitId,subUnitId:e.subUnitId,commentId:e.id,temp:!1})},onMouseEnter:()=>v==null?void 0:v(e),onMouseLeave:()=>_==null?void 0:_(e),onAddComment:x,onDeleteComment:S,onResolve:t=>p==null?void 0:p(e.id,t)},e.id);return(0,c.jsxs)(`div`,{className:`univer-flex univer-min-h-full univer-flex-col univer-pb-3`,children:[(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-between`,children:[u===e.UniverInstanceType.UNIVER_SHEET?(0,c.jsx)(i.Select,{borderless:!0,value:w,options:[{value:`current`,label:k.t(`threadCommentUI.filter.sheet.current`)},{value:`all`,label:k.t(`threadCommentUI.filter.sheet.all`)}],onChange:T}):null,(0,c.jsx)(i.Select,{borderless:!0,value:E,options:[{value:`all`,label:k.t(`threadCommentUI.filter.status.all`)},{value:`resolved`,label:k.t(`threadCommentUI.filter.status.resolved`)},{value:`unsolved`,label:k.t(`threadCommentUI.filter.status.unsolved`)},{value:`concern_me`,label:k.t(`threadCommentUI.filter.status.concernMe`)}],onChange:O})]}),G.length===0?(0,c.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:[k.t(`threadCommentUI.panel.empty`),J?(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsx)(i.Button,{onClick:Y,children:k.t(`threadCommentUI.panel.reset`)})}):y?null:(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsxs)(i.Button,{onClick:d,children:[(0,c.jsx)(a.IncreaseIcon,{className:`univer-mr-1.5`}),k.t(`threadCommentUI.panel.addComment`)]})})]}):(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-col univer-gap-3`,children:[K.map(X),q.length>0&&(0,c.jsx)(`div`,{className:`univer-text-xs`,children:k.t(`threadCommentUI.panel.solved`)}),q.map(X)]})]})};exports.SetActiveCommentOperation=g,exports.ThreadCommentPanel=j,Object.defineProperty(exports,`ThreadCommentPanelService`,{enumerable:!0,get:function(){return h}}),exports.ThreadCommentTree=A,exports.ThreadCommentTreeLocation=D,Object.defineProperty(exports,`UniverThreadCommentUIPlugin`,{enumerable:!0,get:function(){return x}});
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _univerjs_core = require("@univerjs/core");
+let _univerjs_ui = require("@univerjs/ui");
+let rxjs = require("rxjs");
+let _univerjs_thread_comment = require("@univerjs/thread-comment");
+let _univerjs_design = require("@univerjs/design");
+let _univerjs_icons = require("@univerjs/icons");
+let react = require("react");
+let _univerjs_docs_ui = require("@univerjs/docs-ui");
+let react_jsx_runtime = require("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 _univerjs_core.Disposable {
+	constructor(_sidebarService, _univerInstanceService) {
+		super();
+		this._sidebarService = _sidebarService;
+		this._univerInstanceService = _univerInstanceService;
+		_defineProperty(this, "_panelVisible", false);
+		_defineProperty(this, "_panelVisible$", new rxjs.BehaviorSubject(false));
+		_defineProperty(this, "_activeCommentId", void 0);
+		_defineProperty(this, "_activeCommentId$", new rxjs.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$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.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, (0, _univerjs_core.Inject)(_univerjs_ui.ISidebarService)), __decorateParam(1, _univerjs_core.IUniverInstanceService)], ThreadCommentPanelService);
+
+//#endregion
+//#region src/commands/operations/comment.operations.ts
+const SetActiveCommentOperation = {
+	id: "thread-comment-ui.operation.set-active-comment",
+	type: _univerjs_core.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-insiders.20260422-d7fcb4d";
+
+//#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 _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _commandService, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._commandService = _commandService;
+		this._configService = _configService;
+		const { menu, ...rest } = (0, _univerjs_core.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;
+		(0, _univerjs_core.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", _univerjs_core.UniverInstanceType.UNIVER_UNKNOWN);
+UniverThreadCommentUIPlugin = __decorate([
+	(0, _univerjs_core.DependentOn)(_univerjs_thread_comment.UniverThreadCommentPlugin),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, _univerjs_core.ICommandService),
+	__decorateParam(3, _univerjs_core.IConfigService)
+], UniverThreadCommentUIPlugin);
+
+//#endregion
+//#region src/views/thread-comment-editor/index.tsx
+function getSnapshot(body) {
+	return {
+		id: "d",
+		body,
+		documentStyle: {}
+	};
+}
+const ThreadCommentEditor = (0, react.forwardRef)((props, ref) => {
+	var _editor$current5;
+	const { comment, onSave, id, onCancel, autoFocus, unitId, type, editorId } = props;
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const [editing, setEditing] = (0, react.useState)(false);
+	const editorService = (0, _univerjs_ui.useDependency)(_univerjs_docs_ui.IEditorService);
+	const editor = (0, react.useRef)(null);
+	const rootEditorId = type === _univerjs_core.UniverInstanceType.UNIVER_DOC ? _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY : unitId;
+	const [canSubmit, setCanSubmit] = (0, react.useState)(() => {
+		var _editor$current$getDo, _editor$current;
+		return _univerjs_core.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 : "");
+	});
+	(0, react.useEffect)(() => {
+		var _editor$current$getDo2, _editor$current2, _editor$current3;
+		setCanSubmit(_univerjs_core.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(_univerjs_core.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 = (0, react.useMemo)(() => ({
+		keyCodes: [{ keyCode: _univerjs_ui.KeyCode.ENTER }],
+		handler: (keyCode) => {
+			if (keyCode === _univerjs_ui.KeyCode.ENTER) commandService.executeCommand(_univerjs_docs_ui.BreakLineCommand.id);
+		}
+	}), [commandService]);
+	(0, react.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 = _univerjs_core.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		onClick: (e) => e.preventDefault(),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_docs_ui.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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((0, _univerjs_core.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: _univerjs_core.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const userManagerService = (0, _univerjs_ui.useDependency)(_univerjs_core.UserManagerService);
+	const user = userManagerService.getUser(item.personId);
+	const currentUser = (0, _univerjs_ui.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] = (0, react.useState)(false);
+	const uiConfig = (0, _univerjs_ui.useConfigValue)(_univerjs_ui.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 ? _univerjs_thread_comment.DeleteCommentTreeCommand.id : _univerjs_thread_comment.DeleteCommentCommand.id, {
+			unitId,
+			subUnitId,
+			commentId: item.id
+		});
+		if (isRoot) onClose === null || onClose === void 0 || onClose();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-relative univer-mb-3 univer-pl-[30px]",
+		onMouseLeave: () => setShowReply(false),
+		onMouseEnter: () => setShowReply(true),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-text-sm univer-font-medium univer-leading-5",
+					children: (user === null || user === void 0 ? void 0 : user.name) || " "
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [isMock || resolved ? null : showReply && user ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (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", {
+						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",
+							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),
+								children: localeService.t("threadCommentUI.item.edit")
+							}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+								className: "hover:univer-bg-gray-200",
+								onClick: handleDeleteItem,
+								children: localeService.t("threadCommentUI.item.delete")
+							}) })]
+						})
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreHorizontalIcon, {})
+					})
+				}) : null] })]
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+				className: "univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200",
+				children: item.dT
+			}),
+			editing ? /* @__PURE__ */ (0, react_jsx_runtime.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(_univerjs_thread_comment.UpdateCommentCommand.id, {
+						unitId,
+						subUnitId,
+						payload: {
+							commentId: item.id,
+							text,
+							attachments
+						}
+					});
+				}
+			}) : /* @__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))
+			})
+		]
+	});
+};
+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 = (0, _univerjs_ui.useDependency)(_univerjs_thread_comment.ThreadCommentModel);
+	const [isHover, setIsHover] = (0, react.useState)(false);
+	const [editingId, setEditingId] = (0, react.useState)("");
+	(0, _univerjs_ui.useObservable)((0, react.useMemo)(() => threadCommentModel.commentUpdate$.pipe((0, rxjs.debounceTime)(16)), [threadCommentModel]));
+	const comments = id ? threadCommentModel.getCommentWithChildren(unitId, subUnitId, id) : null;
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const userManagerService = (0, _univerjs_ui.useDependency)(_univerjs_core.UserManagerService);
+	const resolved = comments === null || comments === void 0 ? void 0 : comments.root.resolved;
+	const currentUser = (0, _univerjs_ui.useObservable)(userManagerService.currentUser$);
+	const editorRef = (0, react.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 = (0, react.useRef)(null);
+	const handleResolve = (e) => {
+		e.stopPropagation();
+		if (!resolved) commandService.executeCommand(SetActiveCommentOperation.id);
+		else commandService.executeCommand(SetActiveCommentOperation.id, {
+			unitId,
+			subUnitId,
+			commentId: id
+		});
+		commandService.executeCommand(_univerjs_thread_comment.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(_univerjs_thread_comment.DeleteCommentTreeCommand.id, {
+			unitId,
+			subUnitId,
+			commentId: id
+		});
+		onClose === null || onClose === void 0 || onClose();
+	};
+	(0, react.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 = `${_univerjs_core.DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${location}`;
+	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, {
+			"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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+						showIfEllipsis: true,
+						title,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-flex-1 univer-truncate",
+							children: title
+						})
+					})]
+				}), !!comments && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ResolvedIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SolveIcon, {})
+					}), (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userID) === comments.root.personId ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
+					}) : null]
+				})]
+			}),
+			/* @__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),
+				children: renderComments.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCommentEditor, {
+				ref: editorRef,
+				type,
+				unitId,
+				subUnitId,
+				editorId: threadCommentEditorId,
+				onSave: async ({ text, attachments }) => {
+					var _currentUser$userID2, _comments$root$thread;
+					const comment = {
+						text,
+						attachments,
+						dT: (0, _univerjs_thread_comment.getDT)(),
+						id: (0, _univerjs_core.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(_univerjs_thread_comment.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] = (0, react.useState)("all");
+	const [status, setStatus] = (0, react.useState)("all");
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const userService = (0, _univerjs_ui.useDependency)(_univerjs_core.UserManagerService);
+	const threadCommentModel = (0, _univerjs_ui.useDependency)(_univerjs_thread_comment.ThreadCommentModel);
+	const [unitComments, setUnitComments] = (0, react.useState)(() => threadCommentModel.getUnit(unitId));
+	const activeCommentId = (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(ThreadCommentPanelService).activeCommentId$);
+	const update = (0, _univerjs_ui.useObservable)(threadCommentModel.commentUpdate$);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const subUnitId = (0, _univerjs_ui.useObservable)(subUnitId$);
+	const shouldScroll = (0, react.useRef)(true);
+	const location = ThreadCommentTreeLocation.PANEL;
+	const currentUser = (0, _univerjs_ui.useObservable)(userService.currentUser$);
+	const comments = (0, react.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 = (0, react.useMemo)(() => [...comments.filter((comment) => !comment.resolved), ...comments.filter((comment) => comment.resolved)], [comments]);
+	const statuedComments = (0, react.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");
+	};
+	(0, react.useEffect)(() => {
+		if (unitId) setUnitComments(threadCommentModel.getUnit(unitId));
+	}, [
+		unitId,
+		threadCommentModel,
+		update
+	]);
+	(0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-min-h-full univer-flex-col univer-pb-3",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-mt-3 univer-flex univer-flex-row univer-justify-between",
+			children: [type === _univerjs_core.UniverInstanceType.UNIVER_SHEET ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mt-2 univer-flex univer-flex-row",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					onClick: onReset,
+					children: localeService.t("threadCommentUI.panel.reset")
+				})
+			}) : !disableAdd ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mt-2 univer-flex univer-flex-row",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+					onClick: onAdd,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-mr-1.5" }), localeService.t("threadCommentUI.panel.addComment")]
+				})
+			}) : null]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-mt-3 univer-flex univer-flex-col univer-gap-3",
+			children: [
+				unSolvedComments.map(renderComment),
+				solvedComments.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-text-xs",
+					children: localeService.t("threadCommentUI.panel.solved")
+				}),
+				solvedComments.map(renderComment)
+			]
+		})]
+	});
+};
+
+//#endregion
+exports.SetActiveCommentOperation = SetActiveCommentOperation;
+exports.ThreadCommentPanel = ThreadCommentPanel;
+Object.defineProperty(exports, 'ThreadCommentPanelService', {
+  enumerable: true,
+  get: function () {
+    return ThreadCommentPanelService;
+  }
+});
+exports.ThreadCommentTree = ThreadCommentTree;
+exports.ThreadCommentTreeLocation = ThreadCommentTreeLocation;
+Object.defineProperty(exports, 'UniverThreadCommentUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverThreadCommentUIPlugin;
+  }
+});