fix(core): ask AI input box in the whiteboard is blocked by the menu (#11634)

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

![截屏2025-04-11 15.27.58.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/caf7a19e-7332-47bb-82c6-c5a4db0af2eb.png)

packages/frontend/core/src/blocksuite/ai/widgets/edgeless-copilot/index.ts

@@ -77,8 +77,31 @@ export class EdgelessCopilotWidget extends WidgetComponent<RootBlockModel> {
     this._visible = visible;
   }
 
-  private _showCopilotPanel() {
+  private _showCopilotInput() {
     requestConnectedFrame(() => {
+      const referenceElement = this.selectionElem;
+      if (!referenceElement || !referenceElement.isConnected) return;
+
+      // show ai input
+      const rootBlockId = this.host.doc.root?.id;
+      if (!rootBlockId) return;
+
+      const input = this.host.view.getWidget(
+        AFFINE_AI_PANEL_WIDGET,
+        rootBlockId
+      );
+
+      if (input instanceof AffineAIPanelWidget) {
+        input.setState('input', referenceElement);
+        requestAnimationFrame(() => {
+          this._createCopilotPanel();
+          this._updateCopilotPanel(input);
+        });
+      }
+    }, this);
+  }
+
+  private _createCopilotPanel() {
     if (!this._copilotPanel) {
       const panel = new EdgelessCopilotPanel();
       panel.host = this.host;
@@ -86,33 +109,19 @@ export class EdgelessCopilotWidget extends WidgetComponent<RootBlockModel> {
       this.renderRoot.append(panel);
       this._copilotPanel = panel;
     }
+  }
 
-      const referenceElement = this.selectionElem;
+  private _updateCopilotPanel(referenceElement: HTMLElement) {
-      const panel = this._copilotPanel;
     // @TODO: optimize
     const viewport = this.gfx.viewport;
-
+    const panel = this._copilotPanel;
-      if (!referenceElement || !referenceElement.isConnected) return;
+    if (!panel) return;
-
-      // show ai input
-      const rootBlockId = this.host.doc.root?.id;
-      if (rootBlockId) {
-        const aiPanel = this.host.view.getWidget(
-          AFFINE_AI_PANEL_WIDGET,
-          rootBlockId
-        );
-        if (aiPanel instanceof AffineAIPanelWidget && aiPanel.config) {
-          aiPanel.setState('input', referenceElement);
-        }
-      }
-
     autoUpdate(referenceElement, panel, () => {
       computePosition(referenceElement, panel, {
-          placement: 'right-start',
+        placement: 'bottom-start',
         middleware: [
           offset({
-              mainAxis: 16,
+            mainAxis: 4,
-              crossAxis: 45,
           }),
           flip({
             mainAxis: true,
@@ -148,7 +157,6 @@ export class EdgelessCopilotWidget extends WidgetComponent<RootBlockModel> {
           console.warn("Can't compute EdgelessCopilotPanel position", e);
         });
     });
-    }, this);
   }
 
   private _updateSelection(rect: DOMRect) {
@@ -201,7 +209,7 @@ export class EdgelessCopilotWidget extends WidgetComponent<RootBlockModel> {
         this._visible = true;
         this._updateSelection(CopilotSelectionTool.area);
         if (shouldShowPanel) {
-          this._showCopilotPanel();
+          this._showCopilotInput();
           this._watchClickOutside();
         } else {
           this.hideCopilotPanel();