fix(edgeless): imporve ai pannel position in edgeless

packages/blocks/src/_common/utils/button-popper.ts

@@ -1,5 +1,12 @@
 import { type Disposable } from '@blocksuite/global/utils';
-import { computePosition, flip, offset, shift } from '@floating-ui/dom';
+import {
+  autoPlacement,
+  computePosition,
+  offset,
+  type Rect,
+  shift,
+  size,
+} from '@floating-ui/dom';
 
 export function listenClickAway(
   element: HTMLElement,
@@ -41,23 +48,41 @@ export function createButtonPopper(
     /** DEFAULT EMPTY FUNCTION */
   },
   mainAxis?: number,
-  crossAxis?: number
+  crossAxis?: number,
+  rootBoundary?: Rect | (() => Rect | undefined)
 ) {
   let state = 'hidden';
 
+  const originMaxHeight = popperElement
+    .computedStyleMap()
+    .get('max-height')
+    ?.toString();
+
   function compute() {
+    const overflowOption = {
+      padding: 10,
+      rootBoundary:
+        typeof rootBoundary === 'function' ? rootBoundary() : rootBoundary,
+    };
+
     computePosition(reference, popperElement, {
-      placement: 'top',
       middleware: [
         offset({
           mainAxis: mainAxis ?? 14,
           crossAxis: crossAxis ?? 0,
         }),
-        flip({
-          fallbackPlacements: ['bottom'],
+        autoPlacement({
+          allowedPlacements: ['top', 'bottom'],
+          ...overflowOption,
         }),
-        shift({
-          padding: 10,
+        shift(overflowOption),
+        size({
+          ...overflowOption,
+          apply({ availableHeight }) {
+            popperElement.style.maxHeight = originMaxHeight
+              ? `min(${originMaxHeight}, ${availableHeight}px)`
+              : `${availableHeight}px`;
+          },
         }),
       ],
     })

packages/presets/src/ai/entries/format-bar/format-bar-ai-button.ts

@@ -3,11 +3,13 @@ import {
   type AIItemGroupConfig,
   AIStarIcon,
   createButtonPopper,
-  isInsidePageEditor,
+  EdgelessRootService,
 } from '@blocksuite/blocks';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 
+import { getRootService } from '../../utils/selection-utils.js';
+
 @customElement('format-bar-ai-button')
 export class FormatBarAIButton extends WithDisposable(LitElement) {
   static override styles = css`
@@ -75,15 +77,35 @@ export class FormatBarAIButton extends WithDisposable(LitElement) {
     this._askAIPopper = createButtonPopper(
       this._askAIButton,
       this._askAIPanel,
-      () => {},
+      ({ display }) => {
+        if (this._edgeless) {
+          this._edgeless.viewport.locked = display === 'show';
+        }
+      },
       10,
-      120
+      120,
+      () => {
+        if (this._edgeless) {
+          const { top: x, left: y, width, height } = this._edgeless.viewport;
+          return { x, y, width, height: height - 50 };
+        }
+        return;
+      }
     );
     this.disposables.add(this._askAIPopper);
+    this.disposables.add(() => {
+      if (this._edgeless) {
+        this._edgeless.viewport.locked = false;
+      }
+    });
   }
 
-  get _editorMode() {
-    return isInsidePageEditor(this.host) ? 'page' : 'edgeless';
+  get _edgeless() {
+    const rootService = getRootService(this.host);
+    if (rootService instanceof EdgelessRootService) {
+      return rootService;
+    }
+    return null;
   }
 
   get _actionGroups() {
@@ -94,7 +116,7 @@ export class FormatBarAIButton extends WithDisposable(LitElement) {
           item.showWhen
             ? item.showWhen(
                 this.host.command.chain(),
-                this._editorMode,
+                this._edgeless ? 'edgeless' : 'page',
                 this.host
               )
             : true

packages/presets/src/ai/entries/format-bar/setup-format-bar.ts

@@ -1,11 +1,12 @@
+import './format-bar-ai-button.js';
+
 import {
   type AffineFormatBarWidget,
   toolbarDefaultConfig,
 } from '@blocksuite/blocks';
 import { html, type TemplateResult } from 'lit';
 
 import { AIItemGroups } from './config.js';
-import { FormatBarAIButton } from './format-bar-ai-button.js';
 
 export function setupFormatBarEntry(formatBar: AffineFormatBarWidget) {
   toolbarDefaultConfig(formatBar);
@@ -14,10 +15,10 @@ export function setupFormatBarEntry(formatBar: AffineFormatBarWidget) {
       {
         type: 'custom' as const,
         render(formatBar: AffineFormatBarWidget): TemplateResult | null {
-          const askAIButton = new FormatBarAIButton();
-          askAIButton.host = formatBar.host;
-          askAIButton.actionGroups = AIItemGroups;
-          return html`${askAIButton}`;
+          return html` <format-bar-ai-button
+            .host=${formatBar.host}
+            .actionGroups=${AIItemGroups}
+          ></format-bar-ai-button>`;
         },
       },
       { type: 'divider' },