box-annotations 5.2.1-beta.14 → 5.2.1-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.14",
+    "version": "5.2.1-beta.18",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -28,13 +28,13 @@
         "@babel/preset-react": "^7.25.9",
         "@babel/preset-typescript": "^7.25.9",
         "@box/frontend": "^10.0.0",
-        "@box/blueprint-web": "^14.31.0",
-        "@box/blueprint-web-assets": "^4.118.3",
-        "@box/collaboration-popover": "^1.62.9",
+        "@box/blueprint-web": "^14.38.0",
+        "@box/blueprint-web-assets": "^4.120.5",
+        "@box/collaboration-popover": "^1.62.27",
         "@box/languages": "^1.1.0",
-        "@box/readable-time": "^1.41.9",
-        "@box/threaded-annotations": "^1.89.8",
-        "@box/user-selector": "^1.76.9",
+        "@box/readable-time": "^1.41.27",
+        "@box/threaded-annotations": "^1.93.2",
+        "@box/user-selector": "^1.76.27",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
@@ -128,12 +128,12 @@
         "worker-farm": "^1.7.0"
     },
     "peerDependencies": {
-        "@box/blueprint-web": "^14.31.0",
-        "@box/blueprint-web-assets": "^4.118.3",
-        "@box/collaboration-popover": "^1.62.9",
-        "@box/readable-time": "^1.41.9",
-        "@box/threaded-annotations": "^1.89.8",
-        "@box/user-selector": "^1.76.9"
+        "@box/blueprint-web": "^14.38.0",
+        "@box/blueprint-web-assets": "^4.120.5",
+        "@box/collaboration-popover": "^1.62.27",
+        "@box/readable-time": "^1.41.27",
+        "@box/threaded-annotations": "^1.93.2",
+        "@box/user-selector": "^1.76.27"
     },
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",

package/src/@types/api.ts

@@ -10,5 +10,6 @@ export interface Permissions {
 }
 
 export type TokenLiteral = null | undefined | string | { read: string; write?: string };
-export type TokenResolver = () => TokenLiteral | Promise<TokenLiteral>;
-export type Token = TokenLiteral | TokenResolver;
+export type TokenMap = { [typedFileId: string]: TokenLiteral };
+export type TokenResolver = (typedFileId?: string) => TokenLiteral | TokenMap | Promise<TokenLiteral | TokenMap>;
+export type Token = TokenLiteral | TokenMap | TokenResolver;

package/src/@types/events.ts

@@ -1,19 +1,36 @@
 enum Event {
-    ACTIVE_CHANGE = 'annotations_active_change',
+    // Inbound: emitted by the host; box-annotations listens.
     ACTIVE_SET = 'annotations_active_set',
-    CREATOR_STAGED_CHANGE = 'creator_staged_change',
-    CREATOR_STATUS_CHANGE = 'creator_status_change',
+    ANNOTATION_REMOVE = 'annotations_remove',
+    BOUNDING_BOX_HIGHLIGHTS_SET = 'bounding_box_highlights_set',
+    BOUNDING_BOX_HIGHLIGHT_SELECT = 'bounding_box_highlight_select',
+    COLOR_SET = 'annotations_color_set',
+    VIEW_MODE_SET = 'view_mode_set',
+    VISIBLE_SET = 'annotations_visible_set',
+
+    // Outbound: emitted by box-annotations; the host listens.
+    ACTIVE_CHANGE = 'annotations_active_change',
     ANNOTATION_CREATE = 'annotations_create',
+    ANNOTATION_DELETE = 'annotations_delete',
     ANNOTATION_FETCH_ERROR = 'annotations_fetch_error',
-    ANNOTATION_REMOVE = 'annotations_remove',
+    ANNOTATION_REPLY_CREATE = 'annotations_reply_create',
+    ANNOTATION_REPLY_DELETE = 'annotations_reply_delete',
+    ANNOTATION_REPLY_UPDATE = 'annotations_reply_update',
+    ANNOTATION_UPDATE = 'annotations_update',
     ANNOTATIONS_INITIALIZED = 'annotations_initialized',
     ANNOTATIONS_MODE_CHANGE = 'annotations_mode_change',
-    COLOR_SET = 'annotations_color_set',
-    BOUNDING_BOX_HIGHLIGHTS_SET = 'bounding_box_highlights_set',
+    CREATOR_STAGED_CHANGE = 'creator_staged_change',
+    CREATOR_STATUS_CHANGE = 'creator_status_change',
+
+    // Internal: box-annotations emits and listens to itself (redux state change → DOM side effect).
     BOUNDING_BOX_HIGHLIGHT_NAVIGATE = 'bounding_box_highlight_navigate',
-    BOUNDING_BOX_HIGHLIGHT_SELECT = 'bounding_box_highlight_select',
-    VISIBLE_SET = 'annotations_visible_set',
-    VIEW_MODE_SET = 'view_mode_set',
+}
+
+enum SidebarEvent {
+    SIDEBAR_ANNOTATION_UPDATE = 'sidebar.annotations_update',
+    SIDEBAR_REPLY_CREATE = 'sidebar.annotations_reply_create',
+    SIDEBAR_REPLY_DELETE = 'sidebar.annotations_reply_delete',
+    SIDEBAR_REPLY_UPDATE = 'sidebar.annotations_reply_update',
 }
 
 // Existing legacy events, don't rename
@@ -23,4 +40,4 @@ enum LegacyEvent {
     SCALE = 'scaleannotations',
 }
 
-export { Event, LegacyEvent };
+export { Event, LegacyEvent, SidebarEvent };

package/src/@types/model.ts

@@ -98,6 +98,7 @@ export interface Reply {
     created_by: User;
     id: string;
     message: string;
+    modified_at?: string;
     parent: {
         id: string;
         type: string;

package/src/adapters/threadedAnnotationsAdapters.ts

@@ -69,6 +69,20 @@ export const deserializeMentionMarkup = (text: string): DocumentNodeV2 => {
     return { type: 'doc', content };
 };
 
+/**
+ * Returns the edit timestamp consumers use to render an edited indicator.
+ * Compares parsed instants, not raw strings, so equivalent ISO formats
+ * (Z vs +00:00, fractional precision) are treated as unedited.
+ */
+const toUpdatedAt = (createdAt: string, modifiedAt: string | undefined): number | undefined => {
+    if (!modifiedAt) return undefined;
+    const modifiedMs = new Date(modifiedAt).getTime();
+    if (Number.isNaN(modifiedMs)) return undefined;
+    const createdMs = new Date(createdAt).getTime();
+    if (modifiedMs === createdMs) return undefined;
+    return modifiedMs;
+};
+
 /**
  * Converts a box-annotations Reply to a threaded-annotations TextMessageType.
  */
@@ -83,10 +97,11 @@ export const replyToTextMessage = (reply: Reply): TextMessageTypeV2 => ({
     message: deserializeMentionMarkup(reply.message),
     permissions: {
         canDelete: reply.permissions?.can_delete ?? false,
-        canEdit: false,
+        canEdit: reply.permissions?.can_edit ?? false,
         canReply: reply.permissions?.can_reply ?? false,
         canResolve: reply.permissions?.can_resolve ?? false,
     },
+    updatedAt: toUpdatedAt(reply.created_at, reply.modified_at),
 });
 
 // The root message shares the annotation's author and permissions; description
@@ -106,6 +121,7 @@ const descriptionToTextMessage = (annotation: Annotation): TextMessageTypeV2 =>
         canReply: annotation.permissions?.can_reply ?? false,
         canResolve: annotation.permissions?.can_resolve ?? false,
     },
+    updatedAt: toUpdatedAt(annotation.created_at, annotation.modified_at),
 });
 
 /**

package/src/api/APIFactory.ts

@@ -1,7 +1,8 @@
 import Annotations from 'box-ui-elements/es/api/Annotations';
 import FileCollaborators from 'box-ui-elements/es/api/FileCollaborators';
+import ThreadedComments from 'box-ui-elements/es/api/ThreadedComments';
 import { DEFAULT_HOSTNAME_API } from 'box-ui-elements/es/constants';
-import { AnnotationsAPI, CollaboratorsAPI, APIOptions } from './types';
+import { AnnotationsAPI, CollaboratorsAPI, APIOptions, ThreadedCommentsAPI } from './types';
 
 export default class APIFactory {
     options: APIOptions;
@@ -21,4 +22,8 @@ export default class APIFactory {
     getCollaboratorsAPI(): CollaboratorsAPI {
         return new FileCollaborators(this.options);
     }
+
+    getThreadedCommentsAPI(): ThreadedCommentsAPI {
+        return new ThreadedComments(this.options);
+    }
 }

package/src/api/types.ts

@@ -1,4 +1,4 @@
-import { Annotation, Collaborator, NewAnnotation, Permissions, Reply, Token } from '../@types';
+import { Annotation, Collaborator, NewAnnotation, Permissions, Reply, ReplyPermissions, Token } from '../@types';
 
 export type APICollection<R> = {
     entries: R[];
@@ -73,6 +73,28 @@ export interface AnnotationsAPI {
     destroy(): void;
 }
 
+export interface ThreadedCommentsAPI {
+    deleteComment(args: {
+        commentId: string;
+        errorCallback: (error: APIError) => void;
+        fileId: string | null;
+        permissions: ReplyPermissions;
+        successCallback: () => void;
+    }): void;
+
+    updateComment(args: {
+        commentId: string;
+        errorCallback: (error: APIError) => void;
+        fileId: string | null;
+        message?: string;
+        permissions: ReplyPermissions;
+        status?: string;
+        successCallback: (reply: Reply) => void;
+    }): void;
+
+    destroy(): void;
+}
+
 export interface CollaboratorsAPI {
     getFileCollaborators(
         fileId: string | null,

package/src/common/BaseAnnotator.scss

@@ -34,7 +34,8 @@
     z-index: 10;
     pointer-events: none;
 
-    .ba-Popup {
+    .ba-Popup,
+    .ba-PopupV2 {
         z-index: 150;
         pointer-events: auto;
     }

package/src/common/BaseAnnotator.ts

@@ -6,7 +6,7 @@ import DeselectManager from './DeselectManager';
 import EventEmitter from './EventEmitter';
 import i18n from '../utils/i18n';
 import messages from '../messages';
-import { Event, IntlOptions, LegacyEvent, Permissions } from '../@types';
+import { Event, IntlOptions, LegacyEvent, Permissions, SidebarEvent, Token } from '../@types';
 import { BoundingBox, getBoundingBoxHighlights } from '../store/boundingBoxHighlights';
 import { ViewMode } from '../store/options/types';
 import { Features } from '../BoxAnnotations';
@@ -45,7 +45,7 @@ export type Options = {
     intl: IntlOptions;
     locale?: string;
     onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
-    token: string;
+    token: Token;
 };
 
 export const CSS_CONTAINER_CLASS = 'ba';
@@ -131,6 +131,11 @@ export default class BaseAnnotator extends EventEmitter {
         this.addListener(Event.BOUNDING_BOX_HIGHLIGHT_SELECT, this.handleSelectBoundingBoxHighlight);
         this.addListener(Event.VIEW_MODE_SET, this.handleSetViewMode);
 
+        this.addListener(SidebarEvent.SIDEBAR_ANNOTATION_UPDATE, this.handleSidebarAnnotationUpdate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_CREATE, this.handleSidebarReplyCreate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_UPDATE, this.handleSidebarReplyUpdate);
+        this.addListener(SidebarEvent.SIDEBAR_REPLY_DELETE, this.handleSidebarReplyDelete);
+
         // Load any required data at startup
         this.hydrate();
     }
@@ -164,6 +169,10 @@ export default class BaseAnnotator extends EventEmitter {
         this.removeListener(Event.BOUNDING_BOX_HIGHLIGHT_NAVIGATE, this.handleNavigateBoundingBoxHighlight);
         this.removeListener(Event.BOUNDING_BOX_HIGHLIGHT_SELECT, this.handleSelectBoundingBoxHighlight);
         this.removeListener(Event.VIEW_MODE_SET, this.handleSetViewMode);
+        this.removeListener(SidebarEvent.SIDEBAR_ANNOTATION_UPDATE, this.handleSidebarAnnotationUpdate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_CREATE, this.handleSidebarReplyCreate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_UPDATE, this.handleSidebarReplyUpdate);
+        this.removeListener(SidebarEvent.SIDEBAR_REPLY_DELETE, this.handleSidebarReplyDelete);
     }
 
     public init(scale = 1, rotation = 0): void {
@@ -357,6 +366,22 @@ export default class BaseAnnotator extends EventEmitter {
         this.setViewMode(viewMode);
     };
 
+    protected handleSidebarAnnotationUpdate = (annotation: store.SidebarAnnotationUpdatePayload): void => {
+        this.store.dispatch(store.applySidebarAnnotationUpdateAction(annotation));
+    };
+
+    protected handleSidebarReplyCreate = (payload: store.SidebarReplyMutationPayload): void => {
+        this.store.dispatch(store.applySidebarReplyCreateAction(payload));
+    };
+
+    protected handleSidebarReplyUpdate = (payload: store.SidebarReplyMutationPayload): void => {
+        this.store.dispatch(store.applySidebarReplyUpdateAction(payload));
+    };
+
+    protected handleSidebarReplyDelete = ({ annotationId, id }: { annotationId: string; id: string }): void => {
+        this.store.dispatch(store.applySidebarReplyDeleteAction({ annotationId, replyId: id }));
+    };
+
     protected hydrate(): void {
         // Redux dispatch method signature doesn't seem to like async actions
         this.store.dispatch<any>(store.fetchAnnotationsAction()); // eslint-disable-line @typescript-eslint/no-explicit-any

package/src/components/Popups/PopupV2.tsx

@@ -21,13 +21,16 @@ import AnnotationCallbacksContext from '../../common/AnnotationCallbacksContext'
 import {
     createReplyAction,
     deleteAnnotationAction,
+    deleteReplyAction,
     setActiveAnnotationIdAction,
     updateAnnotationAction,
+    updateReplyAction,
 } from '../../store/annotations/actions';
 import { getAnnotation } from '../../store/annotations/selectors';
-import { getApiHost, getFileVersionId, getToken } from '../../store/options';
+import { getApiHost, getFileId, getFileVersionId, getToken } from '../../store/options';
 import { fetchCollaboratorsAction } from '../../store/users/actions';
 
+import type { Token, TokenLiteral, TokenMap } from '../../@types';
 import type { AppState, AppThunkDispatch } from '../../store/types';
 
 import createPopper, { PopupReference } from './Popper';
@@ -63,12 +66,32 @@ const createDocumentNode = (content: JSONContent | null): DocumentNodeV2 => {
     return { type: 'doc', content: [content] } as DocumentNodeV2;
 };
 
-// Callers render initials as a fallback on null.
-// A persistent null across all users usually indicates a stale token.
-const fetchAvatarBlob = async (apiHost: string, token: string, userId: string): Promise<string | null> => {
+const literalToString = (literal: TokenLiteral): string | null => {
+    if (!literal) return null;
+    if (typeof literal === 'string') return literal;
+    return literal.read ?? literal.write ?? null;
+};
+
+const resolveStringToken = async (token: Token, typedFileId: string): Promise<string | null> => {
+    const resolved = typeof token === 'function' ? await token(typedFileId) : token;
+    if (!resolved) return null;
+    if (typeof resolved === 'string') return resolved;
+    if (typedFileId in resolved) return literalToString((resolved as TokenMap)[typedFileId]);
+    return literalToString(resolved as TokenLiteral);
+};
+
+const fetchAvatarBlob = async (
+    apiHost: string,
+    token: Token,
+    fileId: string | null,
+    userId: string,
+): Promise<string | null> => {
     try {
+        if (!fileId) return null;
+        const stringToken = await resolveStringToken(token, `file_${fileId}`);
+        if (!stringToken) return null;
         const response = await fetch(`${apiHost}/2.0/users/${userId}/avatar?pic_type=large`, {
-            headers: { Authorization: `Bearer ${token}` },
+            headers: { Authorization: `Bearer ${stringToken}` },
         });
         if (!response.ok) return null;
         const blob = await response.blob();
@@ -87,6 +110,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
     const optionsRef = React.useRef<Partial<Options>>(getPopupOptions());
 
     const apiHost = useSelector(getApiHost);
+    const fileId = useSelector(getFileId);
     const fileVersionId = useSelector(getFileVersionId);
     const token = useSelector(getToken);
     const onCopyLink = React.useMemo(
@@ -111,7 +135,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             if (cached) return cached;
             const capturedApiHost = apiHost;
             const capturedToken = token;
-            const url = await fetchAvatarBlob(capturedApiHost, capturedToken, userId);
+            const url = await fetchAvatarBlob(capturedApiHost, capturedToken, fileId, userId);
             if (!url) return null;
             if (
                 credentialsRef.current.apiHost !== capturedApiHost ||
@@ -128,7 +152,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             avatarCacheRef.current.set(userId, url);
             return url;
         },
-        [apiHost, token],
+        [apiHost, fileId, token],
     );
 
     React.useEffect(() => {
@@ -247,10 +271,14 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
 
     const handleEdit = React.useCallback(
         async (id: string, content: JSONContent | null): Promise<void> => {
-            if (!annotationId || id !== annotationId) return;
+            if (!annotationId) return;
             const doc = createDocumentNode(content);
             const { text } = serializeMentionMarkup(doc);
-            await dispatch(updateAnnotationAction({ annotationId, payload: { message: text } }));
+            if (id === annotationId) {
+                await dispatch(updateAnnotationAction({ annotationId, payload: { message: text } }));
+                return;
+            }
+            await dispatch(updateReplyAction({ annotationId, replyId: id, payload: { message: text } }));
         },
         [annotationId, dispatch],
     );
@@ -264,6 +292,14 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         [annotationId, dispatch],
     );
 
+    const handleDelete = React.useCallback(
+        async (id: string): Promise<void> => {
+            if (!annotationId || id === annotationId) return;
+            await dispatch(deleteReplyAction({ annotationId, replyId: id }));
+        },
+        [annotationId, dispatch],
+    );
+
     const handleResolve = React.useCallback(
         async (): Promise<void> => {
             if (!annotationId) return;
@@ -314,7 +350,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
                                     messages={threadMessages}
                                     onAvatarClick={noop}
                                     onCopyLink={onCopyLink}
-                                    onDelete={noop}
+                                    onDelete={handleDelete}
                                     onEdit={handleEdit}
                                     onPost={handlePost}
                                     onResolve={handleResolve}

package/src/drawing/DrawingAnnotations.tsx

@@ -179,8 +179,8 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                 />
             )}
 
-            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && popupPortalEl &&
-                ReactDOM.createPortal(
+            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (() => {
+                const toolbar = (
                     <PopupDrawingToolbar
                         ref={popupDrawingToolbarRef}
                         canComment={hasDrawnPathGroups}
@@ -192,9 +192,10 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                         onReply={handleReply}
                         onUndo={handleUndo}
                         reference={drawingSVGGroup}
-                    />,
-                    popupPortalEl,
-                )}
+                    />
+                );
+                return popupPortalEl ? ReactDOM.createPortal(toolbar, popupPortalEl) : toolbar;
+            })()}
         </>
     );
 };

package/src/popup/PopupLayer.tsx

@@ -45,6 +45,8 @@ const modeStagedMap: { [M in Mode]?: (staged: CreatorItem | null) => boolean } =
     [Mode.REGION]: isCreatorStagedRegion,
 };
 
+const ACTIVE_TARGET_OBSERVER_TIMEOUT_MS = 10000;
+
 const PopupLayer = (props: Props): JSX.Element | null => {
     const {
         activeAnnotationId,
@@ -98,13 +100,39 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setReference(referenceId ? document.querySelector(`[data-ba-reference-id="${referenceId}"]`) : null);
     }, [referenceId]);
 
+    // activeAnnotationId can be set (e.g. via deep link) before the target DOM node mounts;
+    // observe until it appears, or give up after ACTIVE_TARGET_OBSERVER_TIMEOUT_MS.
     React.useEffect(() => {
-        if (activeAnnotationId && isThreadedAnnotation) {
-            const el = document.querySelector(`[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`);
-            setActiveReference(el);
-        } else {
+        if (!activeAnnotationId || !isThreadedAnnotation) {
             setActiveReference(null);
+            return noop;
+        }
+
+        const selector = `[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`;
+        const existing = document.querySelector(selector);
+        if (existing) {
+            setActiveReference(existing);
+            return noop;
         }
+
+        setActiveReference(null);
+        const observer = new MutationObserver(() => {
+            const el = document.querySelector(selector);
+            if (el) {
+                setActiveReference(el);
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+
+        const timeoutId = window.setTimeout(() => {
+            observer.disconnect();
+        }, ACTIVE_TARGET_OBSERVER_TIMEOUT_MS);
+
+        return () => {
+            observer.disconnect();
+            window.clearTimeout(timeoutId);
+        };
     }, [activeAnnotationId, isThreadedAnnotation]);
 
     const showCreator = canCreate && canReply && reference && staged;

package/src/store/annotations/actions.ts

@@ -121,6 +121,95 @@ export const updateAnnotationAction = createAsyncThunk<
     },
 );
 
+export const updateReplyAction = createAsyncThunk<
+    { annotationId: string; reply: Reply },
+    { annotationId: string; replyId: string; payload: { message?: string; status?: string } },
+    AppThunkAPI
+>(
+    'UPDATE_REPLY',
+    async ({ annotationId, replyId, payload }, { extra, getState, signal }) => {
+        const client = extra.api.getThreadedCommentsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const annotation = getAnnotation(state, annotationId);
+        const reply = annotation?.replies?.find(r => r.id === replyId);
+
+        if (!reply) {
+            throw new Error(`updateReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
+        }
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        const updated = await new Promise<Reply>((resolve, reject) => {
+            client.updateComment({
+                commentId: replyId,
+                errorCallback: reject,
+                fileId,
+                message: payload.message,
+                permissions: reply.permissions ?? {},
+                status: payload.status,
+                successCallback: resolve,
+            });
+        });
+
+        return { annotationId, reply: updated };
+    },
+);
+
+export const deleteReplyAction = createAsyncThunk<
+    { annotationId: string; replyId: string },
+    { annotationId: string; replyId: string },
+    AppThunkAPI
+>(
+    'DELETE_REPLY',
+    async ({ annotationId, replyId }, { extra, getState, signal }) => {
+        const client = extra.api.getThreadedCommentsAPI();
+        const state = getState();
+        const fileId = getFileId(state);
+        const annotation = getAnnotation(state, annotationId);
+        const reply = annotation?.replies?.find(r => r.id === replyId);
+
+        if (!reply) {
+            throw new Error(`deleteReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
+        }
+
+        signal.addEventListener('abort', () => {
+            client.destroy();
+        });
+
+        await new Promise<void>((resolve, reject) => {
+            client.deleteComment({
+                commentId: replyId,
+                errorCallback: reject,
+                fileId,
+                permissions: reply.permissions ?? {},
+                successCallback: resolve,
+            });
+        });
+
+        return { annotationId, replyId };
+    },
+);
+
+export type SidebarAnnotationUpdatePayload = Partial<Annotation> & { id: string };
+export type SidebarReplyMutationPayload = { annotationId: string; reply: Reply };
+export type SidebarReplyDeletePayload = { annotationId: string; replyId: string };
+
+export const applySidebarAnnotationUpdateAction = createAction<SidebarAnnotationUpdatePayload>(
+    'APPLY_SIDEBAR_ANNOTATION_UPDATE',
+);
+export const applySidebarReplyCreateAction = createAction<SidebarReplyMutationPayload>(
+    'APPLY_SIDEBAR_REPLY_CREATE',
+);
+export const applySidebarReplyDeleteAction = createAction<SidebarReplyDeletePayload>(
+    'APPLY_SIDEBAR_REPLY_DELETE',
+);
+export const applySidebarReplyUpdateAction = createAction<SidebarReplyMutationPayload>(
+    'APPLY_SIDEBAR_REPLY_UPDATE',
+);
+
 export const removeAnnotationAction = createAction<string>('REMOVE_ANNOTATION');
 export const setActiveAnnotationIdAction = createAction<string | null>('SET_ACTIVE_ANNOTATION_ID');
 export const setIsInitialized = createAction('SET_IS_INITIALIZED');

package/src/store/annotations/reducer.ts

@@ -2,14 +2,20 @@ import { createReducer, combineReducers } from '@reduxjs/toolkit';
 import { formatDrawing, isDrawing } from '../../drawing/drawingUtil';
 import { AnnotationsState } from './types';
 import {
+    applySidebarAnnotationUpdateAction,
+    applySidebarReplyCreateAction,
+    applySidebarReplyDeleteAction,
+    applySidebarReplyUpdateAction,
     createAnnotationAction,
     createReplyAction,
     deleteAnnotationAction,
+    deleteReplyAction,
     fetchAnnotationsAction,
     removeAnnotationAction,
     setActiveAnnotationIdAction,
     setIsInitialized,
     updateAnnotationAction,
+    updateReplyAction,
 } from './actions';
 import { setViewModeAction } from '../options/actions';
 
@@ -58,6 +64,48 @@ const annotationsById = createReducer<AnnotationsState['byId']>({}, builder =>
         .addCase(updateAnnotationAction.fulfilled, (state, { payload }) => {
             state[payload.id] = isDrawing(payload) ? formatDrawing(payload) : payload;
         })
+        .addCase(updateReplyAction.fulfilled, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (annotation && annotation.replies) {
+                annotation.replies = annotation.replies.map(existing =>
+                    existing.id === reply.id ? reply : existing,
+                );
+            }
+        })
+        .addCase(deleteReplyAction.fulfilled, (state, { payload: { annotationId, replyId } }) => {
+            const annotation = state[annotationId];
+            if (annotation && annotation.replies) {
+                annotation.replies = annotation.replies.filter(existing => existing.id !== replyId);
+            }
+        })
+        .addCase(applySidebarAnnotationUpdateAction, (state, { payload }) => {
+            const existing = state[payload.id];
+            if (!existing) return;
+            Object.entries(payload).forEach(([key, value]) => {
+                if (value !== undefined) {
+                    (existing as Record<string, unknown>)[key] = value;
+                }
+            });
+        })
+        .addCase(applySidebarReplyCreateAction, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (!annotation) return;
+            const replies = annotation.replies ?? [];
+            if (replies.some(existing => existing.id === reply.id)) return;
+            annotation.replies = [...replies, reply];
+        })
+        .addCase(applySidebarReplyUpdateAction, (state, { payload: { annotationId, reply } }) => {
+            const annotation = state[annotationId];
+            if (!annotation || !annotation.replies) return;
+            annotation.replies = annotation.replies.map(existing =>
+                existing.id === reply.id ? { ...existing, ...reply } : existing,
+            );
+        })
+        .addCase(applySidebarReplyDeleteAction, (state, { payload: { annotationId, replyId } }) => {
+            const annotation = state[annotationId];
+            if (!annotation || !annotation.replies) return;
+            annotation.replies = annotation.replies.filter(existing => existing.id !== replyId);
+        })
         .addCase(fetchAnnotationsAction.fulfilled, (state, { payload }) => {
             payload.entries.forEach(annotation => {
                 state[annotation.id] = isDrawing(annotation) ? formatDrawing(annotation) : annotation;