fix(core): generate the image cannot enter text prompt (#12717)

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 -->

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();

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);
   };

packages/frontend/core/src/blocksuite/ai/widgets/ai-panel/ai-panel.ts

@@ -333,20 +333,14 @@ export class AffineAIPanelWidget extends WidgetComponent {
     }
   };
 
-  toggle = (
+  toggle = (reference: Element, type: 'input' | 'generate') => {
-    reference: Element,
+    if (type === 'generate') {
-    input?: string,
+      this._inputText = '';
-    shouldTriggerCallback?: boolean
-  ) => {
-    if (typeof input === 'string') {
-      this._inputText = input;
       this.generate();
-    } else {
+    } else if (type === 'input') {
-      // reset state
+      this.hide();
-      this.hide(shouldTriggerCallback);
       this.state = 'input';
     }
-
     this._autoUpdatePosition(reference);
   };
 

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, () =>
+      generateImage: this.createAction(page, async () => {
-        page.getByTestId('action-generate-image').click()
+        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()
       ),