feat(core): support mentions in comments (#13000)

fix AF-2706, PD-2687

<img width="412" alt="image"
src="https://github.com/user-attachments/assets/b796f543-1c42-452a-8f65-9dddfa751ab4"
/>
<img width="384" alt="image"
src="https://github.com/user-attachments/assets/7ac3bcc5-6cf1-49bb-9786-1eb33fad7225"
/>
<img width="347" alt="image"
src="https://github.com/user-attachments/assets/02babd37-4740-4770-8be8-e253be18bb5a"
/>

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

## Summary by CodeRabbit

* **New Features**
* Added support for mentions in comments and replies, including
detection and notification when users are mentioned.
* Introduced new notification types for comments and comment mentions,
with dedicated notification components and localized messages.
  * Enabled navigation directly to specific comments from notifications.
* Sidebar comment tab and comment features now depend on both feature
flags and server support.

* **Improvements**
  * Comment creation and reply workflows now support optional mentions.
* Menu configurations for linked widgets can now selectively include
specific menu groups.
* Enhanced navigation helper with a function to jump directly to a page
comment.
  * Improved comment entity lifecycle management for proper cleanup.

* **Bug Fixes**
* Improved lifecycle management for comment entities to ensure proper
cleanup.

* **Style**
* Updated mention styling to use a dynamic font size based on theme
variables.
  * Adjusted comment preview container underline highlight color.

* **Localization**
* Added English translations for comment and mention notification
messages.

* **Configuration**
* Updated feature flag logic for comment features, making configuration
more flexible and environment-aware.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->





#### PR Dependency Tree


* **PR #13000** 👈

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

packages/frontend/core/src/modules/at-menu-config/services/index.ts

@@ -62,6 +62,13 @@ const RESERVED_ITEM_KEYS = {
   datePicker: 'date-picker',
 };
 
+export enum LinkedMenuGroupType {
+  LinkToDoc = 'link-to-doc',
+  Mention = 'mention',
+  Journal = 'journal',
+  NewDoc = 'new-doc',
+}
+
 export class AtMenuConfigService extends Service {
   constructor(
     private readonly journalService: JournalService,
@@ -79,9 +86,11 @@ export class AtMenuConfigService extends Service {
 
   // todo(@peng17): maybe refactor the config using entity, so that each config
   // can be reactive to the query, instead of recreating the whole config?
-  getConfig(): Partial<LinkedWidgetConfig> {
+  getConfig(
+    includedGroups?: LinkedMenuGroupType[]
+  ): Partial<LinkedWidgetConfig> {
     return {
-      getMenus: this.getMenusFn(),
+      getMenus: this.getMenusFn(includedGroups),
       mobile: this.getMobileConfig(),
       autoFocusedItemKey: this.autoFocusedItemKey,
     };
@@ -102,14 +111,14 @@ export class AtMenuConfigService extends Service {
       return null;
     }
 
-    const linkToDocGroup = menus[0];
-    const memberGroup = menus[1];
+    const linkToDocGroup = menus.at(0);
+    const memberGroup = menus.at(1);
 
-    if (resolveSignal(memberGroup.items).length > 1) {
+    if (memberGroup && resolveSignal(memberGroup.items).length > 1) {
       return resolveSignal(memberGroup.items)[0]?.key;
     }
 
-    if (resolveSignal(linkToDocGroup.items).length > 0) {
+    if (linkToDocGroup && resolveSignal(linkToDocGroup.items).length > 0) {
       return resolveSignal(linkToDocGroup.items)[0]?.key;
     }
 
@@ -635,9 +644,7 @@ export class AtMenuConfigService extends Service {
       return query.length > 0 && !loading && members.length === 0;
     });
 
-    if (query.length > 0) {
-      this.memberSearchService.search(query);
-    }
+    this.memberSearchService.search(query);
 
     return {
       name: I18n.t('com.affine.editor.at-menu.mention-members'),
@@ -655,13 +662,28 @@ export class AtMenuConfigService extends Service {
     };
   }
 
-  private getMenusFn(): LinkedWidgetConfig['getMenus'] {
+  private getMenusFn(
+    includedGroups: LinkedMenuGroupType[] = [
+      LinkedMenuGroupType.LinkToDoc,
+      LinkedMenuGroupType.Mention,
+      LinkedMenuGroupType.Journal,
+      LinkedMenuGroupType.NewDoc,
+    ]
+  ): LinkedWidgetConfig['getMenus'] {
     return (query, close, editorHost, inlineEditor, abortSignal) => {
       return [
-        this.linkToDocGroup(query, close, inlineEditor, abortSignal),
-        this.memberGroup(query, close, inlineEditor, abortSignal),
-        this.journalGroup(query, close, inlineEditor),
-        this.newDocMenuGroup(query, close, editorHost, inlineEditor),
+        ...(includedGroups?.includes(LinkedMenuGroupType.LinkToDoc)
+          ? [this.linkToDocGroup(query, close, inlineEditor, abortSignal)]
+          : []),
+        ...(includedGroups?.includes(LinkedMenuGroupType.Mention)
+          ? [this.memberGroup(query, close, inlineEditor, abortSignal)]
+          : []),
+        ...(includedGroups?.includes(LinkedMenuGroupType.Journal)
+          ? [this.journalGroup(query, close, inlineEditor)]
+          : []),
+        ...(includedGroups?.includes(LinkedMenuGroupType.NewDoc)
+          ? [this.newDocMenuGroup(query, close, editorHost, inlineEditor)]
+          : []),
       ];
     };
   }

packages/frontend/core/src/modules/comment/entities/doc-comment-store.ts

@@ -162,6 +162,7 @@ export class DocCommentStore extends Entity<{
 
   async createComment(commentInput: {
     content: DocCommentContent;
+    mentions?: string[];
   }): Promise<DocComment> {
     const graphql = this.graphqlService;
     if (!graphql) {
@@ -177,6 +178,7 @@ export class DocCommentStore extends Entity<{
           docMode: this.props.getDocMode(),
           docTitle: this.props.getDocTitle(),
           content: commentInput.content,
+          mentions: commentInput.mentions,
         },
       },
     });
@@ -245,6 +247,7 @@ export class DocCommentStore extends Entity<{
     commentId: string,
     replyInput: {
       content: DocCommentContent;
+      mentions?: string[];
     }
   ): Promise<DocCommentReply> {
     const graphql = this.graphqlService;
@@ -260,6 +263,7 @@ export class DocCommentStore extends Entity<{
           content: replyInput.content,
           docMode: this.props.getDocMode(),
           docTitle: this.props.getDocTitle(),
+          mentions: replyInput.mentions,
         },
       },
     });

packages/frontend/core/src/modules/comment/entities/doc-comment.ts

@@ -1,5 +1,10 @@
 import { type CommentChangeAction, DocMode } from '@affine/graphql';
-import type { BaseSelection } from '@blocksuite/affine/store';
+import type {
+  BaseSelection,
+  BaseTextAttributes,
+  BlockSnapshot,
+  DeltaInsert,
+} from '@blocksuite/affine/store';
 import {
   effect,
   Entity,
@@ -26,6 +31,13 @@ import { DocCommentStore } from './doc-comment-store';
 
 type DisposeCallback = () => void;
 
+const MentionAttribute = 'mention';
+type ExtendedTextAttributes = BaseTextAttributes & {
+  [MentionAttribute]: {
+    member: string;
+  };
+};
+
 export class DocCommentEntity extends Entity<{
   docId: string;
 }> {
@@ -115,6 +127,31 @@ export class DocCommentEntity extends Entity<{
     return this.framework.get(GlobalContextService).globalContext.docMode.$;
   }
 
+  findMentions(snapshot: BlockSnapshot): string[] {
+    const mentionedUserIds = new Set<string>();
+    if (
+      snapshot.props.type === 'text' &&
+      snapshot.props.text &&
+      'delta' in (snapshot.props.text as any)
+    ) {
+      const delta = (snapshot.props.text as any)
+        .delta as DeltaInsert<ExtendedTextAttributes>[];
+      for (const op of delta) {
+        if (op.attributes?.[MentionAttribute]) {
+          mentionedUserIds.add(op.attributes[MentionAttribute].member);
+        }
+      }
+    }
+
+    for (const block of snapshot.children) {
+      this.findMentions(block).forEach(userId => {
+        mentionedUserIds.add(userId);
+      });
+    }
+
+    return Array.from(mentionedUserIds);
+  }
+
   async commitComment(id: string): Promise<void> {
     const pendingComment = this.pendingComment$.value;
     if (!pendingComment || pendingComment.id !== id) {
@@ -126,7 +163,9 @@ export class DocCommentEntity extends Entity<{
     if (!snapshot) {
       throw new Error('Failed to get snapshot');
     }
+    const mentions = this.findMentions(snapshot.blocks);
     const comment = await this.store.createComment({
+      mentions: mentions,
       content: {
         snapshot,
         preview,
@@ -159,7 +198,9 @@ export class DocCommentEntity extends Entity<{
       throw new Error('Pending reply has no commentId');
     }
 
+    const mentions = this.findMentions(snapshot.blocks);
     const reply = await this.store.createReply(pendingReply.commentId, {
+      mentions,
       content: {
         snapshot,
       },

packages/frontend/core/src/modules/feature-flag/constant.ts

@@ -269,8 +269,8 @@ export const AFFINE_FLAGS = {
     bsFlag: 'enable_comment',
     displayName: 'Enable Comment',
     description: 'Enable comment',
-    configurable: isCanaryBuild,
-    defaultState: true,
+    configurable: true,
+    defaultState: isCanaryBuild,
   },
 } satisfies { [key in string]: FlagInfo };