From 1452f77c85cc49c306c3cf19015dd80d3380d6f1 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Fri, 4 Jul 2025 19:02:09 +0800
Subject: [PATCH] fix(core): list comment changes usage (#13036)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix AF-2710

#### PR Dependency Tree


* **PR #13036** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Limited the maximum width of the comment input container to 800 pixels
for improved layout consistency.

* **New Features**
* Enhanced comment change listings to include pagination information,
allowing users to navigate through comment changes more effectively.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: fengmk2 <fengmk2@gmail.com>
---
 .../components/comment/sidebar/style.css.ts   |  1 +
 .../comment/entities/doc-comment-store.ts     | 24 +++++++++++++------
 .../modules/comment/entities/doc-comment.ts   | 13 ++++++----
 .../core/src/modules/comment/types.ts         |  7 +++++-
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/core/src/components/comment/sidebar/style.css.ts b/packages/frontend/core/src/components/comment/sidebar/style.css.ts
index 58d205454..564f5f20e 100644
--- a/packages/frontend/core/src/components/comment/sidebar/style.css.ts
+++ b/packages/frontend/core/src/components/comment/sidebar/style.css.ts
@@ -172,6 +172,7 @@ export const commentInputContainer = style({
   justifyContent: 'flex-start',
   gap: '4px',
   paddingLeft: '8px',
+  maxWidth: '800px',
 });
 
 export const userName = style({
diff --git a/packages/frontend/core/src/modules/comment/entities/doc-comment-store.ts b/packages/frontend/core/src/modules/comment/entities/doc-comment-store.ts
index 2e020870e..29bd24735 100644
--- a/packages/frontend/core/src/modules/comment/entities/doc-comment-store.ts
+++ b/packages/frontend/core/src/modules/comment/entities/doc-comment-store.ts
@@ -149,15 +149,25 @@ export class DocCommentStore extends Entity<{
 
     const commentChanges = response.workspace?.commentChanges;
     if (!commentChanges) {
-      return [];
+      return {
+        changes: [],
+        startCursor: '',
+        endCursor: after ?? '',
+        hasNextPage: false,
+      };
     }
 
-    return commentChanges.edges.map(edge => ({
-      id: edge.node.id,
-      action: edge.node.action,
-      comment: normalizeComment(edge.node.item),
-      commentId: edge.node.commentId || undefined,
-    }));
+    return {
+      changes: commentChanges.edges.map(edge => ({
+        id: edge.node.id,
+        action: edge.node.action,
+        comment: normalizeComment(edge.node.item),
+        commentId: edge.node.commentId || undefined,
+      })),
+      startCursor: commentChanges.pageInfo.startCursor || '',
+      endCursor: commentChanges.pageInfo.endCursor || '',
+      hasNextPage: commentChanges.pageInfo.hasNextPage,
+    };
   }
 
   async createComment(commentInput: {
diff --git a/packages/frontend/core/src/modules/comment/entities/doc-comment.ts b/packages/frontend/core/src/modules/comment/entities/doc-comment.ts
index c60440696..73d084f4c 100644
--- a/packages/frontend/core/src/modules/comment/entities/doc-comment.ts
+++ b/packages/frontend/core/src/modules/comment/entities/doc-comment.ts
@@ -359,13 +359,15 @@ export class DocCommentEntity extends Entity<{
         // If we have comments, fetch changes; otherwise fetch all
         if (this.comments$.value.length > 0) {
           return fromPromise(async () => {
-            return await this.store.listCommentChanges({
+            const res = await this.store.listCommentChanges({
               after: this.startCursor,
             });
+            return res;
           }).pipe(
-            tap(changes => {
-              if (changes) {
-                this.handleCommentChanges(changes);
+            tap(result => {
+              if (result) {
+                this.handleCommentChanges(result);
+                this.startCursor = result.endCursor;
               }
             }),
             catchError(error => {
@@ -418,7 +420,8 @@ export class DocCommentEntity extends Entity<{
     }
   }
 
-  private handleCommentChanges(changes: DocCommentChangeListResult): void {
+  private handleCommentChanges(result: DocCommentChangeListResult): void {
+    const { changes } = result;
     if (!changes || changes.length === 0) {
       return;
     }
diff --git a/packages/frontend/core/src/modules/comment/types.ts b/packages/frontend/core/src/modules/comment/types.ts
index c53a88b04..7d6b407a0 100644
--- a/packages/frontend/core/src/modules/comment/types.ts
+++ b/packages/frontend/core/src/modules/comment/types.ts
@@ -51,4 +51,9 @@ export interface DocCommentChange {
   commentId?: CommentId; // a change with comment id is a reply
 }
 
-export type DocCommentChangeListResult = DocCommentChange[];
+export type DocCommentChangeListResult = {
+  changes: DocCommentChange[];
+  startCursor: string;
+  endCursor: string;
+  hasNextPage: boolean;
+};