refactor(core): ai menu grouping & text (#13376)

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

## Summary by CodeRabbit

* **Refactor**
* Reorganized and renamed AI action groups for improved clarity, now
categorizing actions by content type (text, code, image) and function
(edit, draft, review, generate).
* Split broad groups into more specific ones, such as "review image,"
"review code," and "review text."
* Updated group and action names for consistency (e.g., "Continue with
AI" is now "Continue in AI Chat").
* **Documentation**
  * Updated descriptions to reflect new group and action names.

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

> CLOSE AF-2777 AF-2776

packages/frontend/core/src/blocksuite/ai/_common/config.ts

@@ -145,8 +145,8 @@ const imageBlockShowWhen = (chain: Chain<InitCommandCtx>) => {
   return matchModels(model, [ImageBlockModel]);
 };
 
-const EditAIGroup: AIItemGroupConfig = {
+const EditTextAIGroup: AIItemGroupConfig = {
-  name: 'edit with ai',
+  name: 'edit text',
   items: [
     {
       name: 'Translate to',
@@ -193,8 +193,8 @@ const EditAIGroup: AIItemGroupConfig = {
   ],
 };
 
-const DraftAIGroup: AIItemGroupConfig = {
+const DraftFromTextAIGroup: AIItemGroupConfig = {
-  name: 'draft with ai',
+  name: 'draft from text',
   items: [
     {
       name: 'Write an article about this',
@@ -234,8 +234,41 @@ const DraftAIGroup: AIItemGroupConfig = {
   ],
 };
 
-const ReviewWIthAIGroup: AIItemGroupConfig = {
+const ReviewImageAIGroup: AIItemGroupConfig = {
-  name: 'review with ai',
+  name: 'review image',
+  items: [
+    {
+      name: 'Explain this image',
+      testId: 'action-explain-image',
+      icon: PenIcon(),
+      showWhen: imageBlockShowWhen,
+      handler: actionToHandler('explainImage', AIStarIconWithAnimation),
+    },
+  ],
+};
+
+const ReviewCodeAIGroup: AIItemGroupConfig = {
+  name: 'review code',
+  items: [
+    {
+      name: 'Explain this code',
+      testId: 'action-explain-code',
+      icon: ExplainIcon(),
+      showWhen: codeBlockShowWhen,
+      handler: actionToHandler('explainCode', AIStarIconWithAnimation),
+    },
+    {
+      name: 'Check code error',
+      testId: 'action-check-code-error',
+      icon: ExplainIcon(),
+      showWhen: codeBlockShowWhen,
+      handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
+    },
+  ],
+};
+
+const ReviewTextAIGroup: AIItemGroupConfig = {
+  name: 'review text',
   items: [
     {
       name: 'Fix spelling',
@@ -251,27 +284,7 @@ const ReviewWIthAIGroup: AIItemGroupConfig = {
       showWhen: textBlockShowWhen,
       handler: actionToHandler('improveGrammar', AIStarIconWithAnimation),
     },
-    {
+
-      name: 'Explain this image',
-      testId: 'action-explain-image',
-      icon: PenIcon(),
-      showWhen: imageBlockShowWhen,
-      handler: actionToHandler('explainImage', AIStarIconWithAnimation),
-    },
-    {
-      name: 'Explain this code',
-      testId: 'action-explain-code',
-      icon: ExplainIcon(),
-      showWhen: codeBlockShowWhen,
-      handler: actionToHandler('explainCode', AIStarIconWithAnimation),
-    },
-    {
-      name: 'Check code error',
-      testId: 'action-check-code-error',
-      icon: ExplainIcon(),
-      showWhen: codeBlockShowWhen,
-      handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
-    },
     {
       name: 'Explain selection',
       testId: 'action-explain-selection',
@@ -282,8 +295,21 @@ const ReviewWIthAIGroup: AIItemGroupConfig = {
   ],
 };
 
-const GenerateWithAIGroup: AIItemGroupConfig = {
+const TouchUpImageAIGroup: AIItemGroupConfig = {
-  name: 'generate with ai',
+  name: 'touch up image',
+  items: [
+    {
+      name: 'Generate an image',
+      testId: 'action-generate-image',
+      icon: ImageIcon(),
+      showWhen: textBlockShowWhen,
+      handler: actionToHandler('createImage', AIImageIconWithAnimation),
+    },
+  ],
+};
+
+const GenerateFromTextAIGroup: AIItemGroupConfig = {
+  name: 'generate from text',
   items: [
     {
       name: 'Summarize',
@@ -314,13 +340,6 @@ const GenerateWithAIGroup: AIItemGroupConfig = {
         );
       },
     },
-    {
-      name: 'Generate an image',
-      testId: 'action-generate-image',
-      icon: ImageIcon(),
-      showWhen: textBlockShowWhen,
-      handler: actionToHandler('createImage', AIImageIconWithAnimation),
-    },
     {
       name: 'Generate outline',
       testId: 'action-generate-outline',
@@ -366,7 +385,7 @@ const OthersAIGroup: AIItemGroupConfig = {
   name: 'Others',
   items: [
     {
-      name: 'Continue with AI',
+      name: 'Continue in AI Chat',
       testId: 'action-continue-with-ai',
       icon: CommentIcon(),
       handler: host => {
@@ -382,17 +401,20 @@ const OthersAIGroup: AIItemGroupConfig = {
 };
 
 export const pageAIGroups: AIItemGroupConfig[] = [
-  ReviewWIthAIGroup,
+  ReviewTextAIGroup,
-  EditAIGroup,
+  ReviewCodeAIGroup,
-  GenerateWithAIGroup,
+  ReviewImageAIGroup,
-  DraftAIGroup,
+  EditTextAIGroup,
+  TouchUpImageAIGroup,
+  GenerateFromTextAIGroup,
+  DraftFromTextAIGroup,
   OthersAIGroup,
 ];
 
 export function buildAIImageItemGroups(): AIItemGroupConfig[] {
   return [
     {
-      name: 'edit with ai',
+      name: 'review image',
       items: [
         {
           name: 'Explain this image',
@@ -409,7 +431,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
       ],
     },
     {
-      name: 'generate with ai',
+      name: 'touch up image',
       items: [
         {
           name: 'Generate an image',
@@ -463,7 +485,7 @@ export function buildAIImageItemGroups(): AIItemGroupConfig[] {
 export function buildAICodeItemGroups(): AIItemGroupConfig[] {
   return [
     {
-      name: 'edit with ai',
+      name: 'review code',
       items: [
         {
           name: 'Explain this code',

packages/frontend/core/src/blocksuite/ai/entries/edgeless/actions-config.ts

@@ -108,7 +108,7 @@ const othersGroup: AIItemGroupConfig = {
   name: 'others',
   items: [
     {
-      name: 'Continue with AI',
+      name: 'Continue in AI Chat',
       testId: 'action-continue-with-ai',
       icon: CommentIcon({ width: '20px', height: '20px' }),
       showWhen: () => true,
@@ -125,8 +125,8 @@ const othersGroup: AIItemGroupConfig = {
   ],
 };
 
-const editGroup: AIItemGroupConfig = {
+const editTextGroup: AIItemGroupConfig = {
-  name: 'edit with ai',
+  name: 'edit text',
   items: [
     {
       name: 'Translate to',
@@ -174,8 +174,8 @@ const editGroup: AIItemGroupConfig = {
   ],
 };
 
-const draftGroup: AIItemGroupConfig = {
+const draftFromTextGroup: AIItemGroupConfig = {
-  name: 'draft with ai',
+  name: 'draft from text',
   items: [
     {
       name: 'Write an article about this',
@@ -215,8 +215,46 @@ const draftGroup: AIItemGroupConfig = {
   ],
 };
 
-const reviewGroup: AIItemGroupConfig = {
+const reviewImageGroup: AIItemGroupConfig = {
-  name: 'review with ai',
+  name: 'review image',
+  items: [
+    {
+      name: 'Explain this image',
+      icon: PenIcon(),
+      testId: 'action-explain-image',
+      showWhen: imageOnlyShowWhen,
+      handler: actionToHandler(
+        'explainImage',
+        AIStarIconWithAnimation,
+        undefined,
+        imageCustomInput
+      ),
+    },
+  ],
+};
+
+const reviewCodeGroup: AIItemGroupConfig = {
+  name: 'review code',
+  items: [
+    {
+      name: 'Explain this code',
+      icon: ExplainIcon(),
+      testId: 'action-explain-code',
+      showWhen: noteWithCodeBlockShowWen,
+      handler: actionToHandler('explainCode', AIStarIconWithAnimation),
+    },
+    {
+      name: 'Check code error',
+      icon: ExplainIcon(),
+      testId: 'action-check-code-error',
+      showWhen: noteWithCodeBlockShowWen,
+      handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
+    },
+  ],
+};
+
+const reviewTextGroup: AIItemGroupConfig = {
+  name: 'review text',
   items: [
     {
       name: 'Fix spelling',
@@ -232,32 +270,7 @@ const reviewGroup: AIItemGroupConfig = {
       showWhen: noteBlockOrTextShowWhen,
       handler: actionToHandler('improveGrammar', AIStarIconWithAnimation),
     },
-    {
+
-      name: 'Explain this image',
-      icon: PenIcon(),
-      testId: 'action-explain-image',
-      showWhen: imageOnlyShowWhen,
-      handler: actionToHandler(
-        'explainImage',
-        AIStarIconWithAnimation,
-        undefined,
-        imageCustomInput
-      ),
-    },
-    {
-      name: 'Explain this code',
-      icon: ExplainIcon(),
-      testId: 'action-explain-code',
-      showWhen: noteWithCodeBlockShowWen,
-      handler: actionToHandler('explainCode', AIStarIconWithAnimation),
-    },
-    {
-      name: 'Check code error',
-      icon: ExplainIcon(),
-      testId: 'action-check-code-error',
-      showWhen: noteWithCodeBlockShowWen,
-      handler: actionToHandler('checkCodeErrors', AIStarIconWithAnimation),
-    },
     {
       name: 'Explain selection',
       icon: SelectionIcon({ width: '20px', height: '20px' }),
@@ -268,24 +281,9 @@ const reviewGroup: AIItemGroupConfig = {
   ],
 };
 
-const generateGroup: AIItemGroupConfig = {
+const touchUpImageGroup: AIItemGroupConfig = {
-  name: 'generate with ai',
+  name: 'touch up image',
   items: [
-    {
-      name: 'Summarize',
-      icon: PenIcon(),
-      testId: 'action-summarize',
-      showWhen: noteBlockOrTextShowWhen,
-      handler: actionToHandler('summary', AIPenIconWithAnimation),
-    },
-    {
-      name: 'Generate headings',
-      icon: PenIcon(),
-      testId: 'action-generate-headings',
-      showWhen: noteBlockOrTextShowWhen,
-      handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
-      beta: true,
-    },
     {
       name: 'Generate an image',
       icon: ImageIcon(),
@@ -361,6 +359,28 @@ const generateGroup: AIItemGroupConfig = {
         }
       ),
     },
+  ],
+};
+
+const generateFromTextGroup: AIItemGroupConfig = {
+  name: 'generate from text',
+  items: [
+    {
+      name: 'Summarize',
+      icon: PenIcon(),
+      testId: 'action-summarize',
+      showWhen: noteBlockOrTextShowWhen,
+      handler: actionToHandler('summary', AIPenIconWithAnimation),
+    },
+    {
+      name: 'Generate headings',
+      icon: PenIcon(),
+      testId: 'action-generate-headings',
+      showWhen: noteBlockOrTextShowWhen,
+      handler: actionToHandler('createHeadings', AIPenIconWithAnimation),
+      beta: true,
+    },
+
     {
       name: 'Generate outline',
       icon: PenIcon(),
@@ -547,9 +567,12 @@ const generateGroup: AIItemGroupConfig = {
 };
 
 export const edgelessAIGroups: AIItemGroupConfig[] = [
-  reviewGroup,
+  reviewTextGroup,
-  editGroup,
+  reviewCodeGroup,
-  generateGroup,
+  reviewImageGroup,
-  draftGroup,
+  editTextGroup,
+  touchUpImageGroup,
+  generateFromTextGroup,
+  draftFromTextGroup,
   othersGroup,
 ];

packages/frontend/core/src/blocksuite/ai/provider/ai-provider.ts

@@ -19,7 +19,7 @@ export interface AIUserInfo {
 export interface AIChatParams {
   host: EditorHost;
   mode?: 'page' | 'edgeless';
-  // Auto select and append selection to input via `Continue with AI` action.
+  // Auto select and append selection to input via `Continue in AI Chat` action.
   autoSelect?: boolean;
 }