From 512a908fd4daf489e7ee3c1de7493af739180636 Mon Sep 17 00:00:00 2001
From: akumatus <akumatus@gmail.com>
Date: Thu, 5 Jun 2025 09:17:28 +0000
Subject: [PATCH] fix(core): generate the image cannot enter text prompt
 (#12717)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [AI-167](https://linear.app/affine-design/issue/AI-167)

![截屏2025-06-05 12.15.49.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/c1afff0e-1197-46dc-ae43-ff7257039509.png)

![截屏2025-06-05 12.14.07.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/1439b0a7-1cca-4848-aea2-84bc73c536c5.png)

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

- **New Features**
  - Improved AI panel behavior with explicit modes for input and answer generation, providing a more intuitive user experience when interacting with AI features.

- **Refactor**
  - Streamlined AI panel toggling logic for more consistent and predictable panel states during different actions.

- **Tests**
  - Enhanced AI image generation test to simulate user input and send actions for more accurate end-to-end validation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/blocksuite/ai/actions/doc-handler.ts    | 17 ++++++++++++++---
 .../blocksuite/ai/actions/edgeless-handler.ts   |  2 +-
 .../blocksuite/ai/widgets/ai-panel/ai-panel.ts  | 16 +++++-----------
 .../e2e/utils/editor-utils.ts                   |  8 +++++---
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/frontend/core/src/blocksuite/ai/actions/doc-handler.ts b/packages/frontend/core/src/blocksuite/ai/actions/doc-handler.ts
index ffeab44688..90bded5394 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/doc-handler.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/doc-handler.ts
@@ -208,7 +208,18 @@ export function actionToHandler<T extends keyof BlockSuitePresets.AIActions>(
     if (!blocks || blocks.length === 0) return;
     const block = blocks.at(-1);
     if (!block) return;
-    aiPanel.toggle(block, '');
+    if (
+      blocks.length === 1 &&
+      block.model.flavour === 'affine:image' &&
+      id === 'createImage'
+    ) {
+      // if only one image block is selected, and the action is createImage
+      // toggle panel to allow user to enter text prompt
+      aiPanel.toggle(block, 'input');
+    } else {
+      // generate the answer
+      aiPanel.toggle(block, 'generate');
+    }
   };
 }
 
@@ -232,7 +243,7 @@ export function handleInlineAskAIAction(
   });
 
   if (!actionGroups) {
-    panel.toggle(block);
+    panel.toggle(block, 'input');
     return;
   }
 
@@ -252,7 +263,7 @@ export function handleInlineAskAIAction(
     clear();
   };
 
-  panel.toggle(block);
+  panel.toggle(block, 'input');
 
   setTimeout(() => {
     abortController = new AbortController();
diff --git a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
index 1091fe716a..8c60bdc7d2 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-handler.ts
@@ -457,7 +457,7 @@ export function actionToHandler<T extends keyof BlockSuitePresets.AIActions>(
 
     togglePanel()
       .then(isEmpty => {
-        aiPanel.toggle(referenceElement, isEmpty ? undefined : '', false);
+        aiPanel.toggle(referenceElement, isEmpty ? 'input' : 'generate');
       })
       .catch(console.error);
   };
diff --git a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts
index cab8ba7938..7555cdd84b 100644
--- a/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts
+++ b/packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts
@@ -333,20 +333,14 @@ export class AffineAIPanelWidget extends WidgetComponent {
     }
   };
 
-  toggle = (
-    reference: Element,
-    input?: string,
-    shouldTriggerCallback?: boolean
-  ) => {
-    if (typeof input === 'string') {
-      this._inputText = input;
+  toggle = (reference: Element, type: 'input' | 'generate') => {
+    if (type === 'generate') {
+      this._inputText = '';
       this.generate();
-    } else {
-      // reset state
-      this.hide(shouldTriggerCallback);
+    } else if (type === 'input') {
+      this.hide();
       this.state = 'input';
     }
-
     this._autoUpdatePosition(reference);
   };
 
diff --git a/tests/affine-cloud-copilot/e2e/utils/editor-utils.ts b/tests/affine-cloud-copilot/e2e/utils/editor-utils.ts
index f2ba407246..af079ef75c 100644
--- a/tests/affine-cloud-copilot/e2e/utils/editor-utils.ts
+++ b/tests/affine-cloud-copilot/e2e/utils/editor-utils.ts
@@ -551,9 +551,11 @@ export class EditorUtils {
       explainImage: this.createAction(page, () =>
         page.getByTestId('action-explain-image').click()
       ),
-      generateImage: this.createAction(page, () =>
-        page.getByTestId('action-generate-image').click()
-      ),
+      generateImage: this.createAction(page, async () => {
+        await page.getByTestId('action-generate-image').click();
+        await page.keyboard.type('generate an image');
+        await page.getByTestId('ai-panel-input-send').click();
+      }),
       generateCaption: this.createAction(page, () =>
         page.getByTestId('action-generate-caption').click()
       ),