fix(blocks): optimize ai panel

toeverything · Apr 18, 2024 · 7cdfd9f · 7cdfd9f
1 parent 3e12054
commit 7cdfd9f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 14 deletions.
diff --git a/packages/blocks/src/root-block/widgets/ai-panel/ai-panel.ts b/packages/blocks/src/root-block/widgets/ai-panel/ai-panel.ts
@@ -6,8 +6,8 @@ import { assertExists } from '@blocksuite/global/utils';
 import {
   autoUpdate,
   computePosition,
+  type ComputePositionConfig,
   type ReferenceElement,
-  shift,
 } from '@floating-ui/dom';
 import {
   css,
@@ -43,6 +43,8 @@ export interface AffineAIPanelWidgetConfig {
   finishStateConfig: AIPanelAnswerConfig;
   errorStateConfig: AIPanelErrorConfig;
   discardCallback?: () => void;
+
+  positionConfig?: Partial<ComputePositionConfig>;
 }
 
 export type AffineAIPanelState =
@@ -59,7 +61,6 @@ export class AffineAIPanelWidget extends WidgetElement {
   static override styles = css`
     :host {
       display: flex;
-      width: 100%;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
@@ -74,8 +75,8 @@ export class AffineAIPanelWidget extends WidgetElement {
 
       gap: 8px;
 
-      width: 630px;
       position: absolute;
+      width: max-content;
       top: 0;
       left: 0;
 
@@ -123,14 +124,7 @@ export class AffineAIPanelWidget extends WidgetElement {
 
     this._stopAutoUpdate?.();
     this._stopAutoUpdate = autoUpdate(reference, this, () => {
-      computePosition(reference, this, {
-        placement: 'bottom-start',
-        middleware: [
-          shift({
-            padding: 20,
-          }),
-        ],
-      })
+      computePosition(reference, this, this.config?.positionConfig)
         .then(({ x, y }) => {
           this.style.left = `${x}px`;
           this.style.top = `${y}px`;

diff --git a/packages/presets/src/ai/ai-panel.ts b/packages/presets/src/ai/ai-panel.ts
@@ -10,6 +10,7 @@ import {
   ResetIcon,
 } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
+import type { ComputePositionConfig } from '@floating-ui/dom';
 
 import { createTextRenderer } from './messages/text.js';
 import { AIProvider } from './provider.js';
@@ -122,7 +123,8 @@ export function buildTextResponseConfig(panel: AffineAIPanelWidget) {
 }
 
 export function buildAIPanelConfig(
-  panel: AffineAIPanelWidget
+  panel: AffineAIPanelWidget,
+  positionConfig?: Partial<ComputePositionConfig>
 ): AffineAIPanelWidgetConfig {
   return {
     answerRenderer: createTextRenderer(panel.host),
@@ -147,6 +149,7 @@ export function buildAIPanelConfig(
       },
       responses: [],
     },
+    positionConfig,
   };
 }
 

diff --git a/packages/presets/src/ai/ai.ts b/packages/presets/src/ai/ai.ts
@@ -14,6 +14,7 @@ import {
   ParagraphService,
 } from '@blocksuite/blocks';
 import { assertInstanceOf } from '@blocksuite/global/utils';
+import { flip, offset, shift } from '@floating-ui/dom';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
 import { buildAIPanelConfig } from './ai-panel.js';
@@ -24,6 +25,7 @@ import {
 import { setupFormatBarEntry } from './entries/format-bar/setup-format-bar.js';
 import { setupSlashMenuEntry } from './entries/slash-menu/setup-slash-menu.js';
 import { setupSpaceEntry } from './entries/space/setup-space.js';
+import { getEdgelessService } from './utils/selection-utils.js';
 
 export function patchDocSpecs(specs: BlockSpec[]) {
   return specs.map(spec => {
@@ -43,7 +45,15 @@ export function patchDocSpecs(specs: BlockSpec[]) {
           disposableGroup.add(
             slots.widgetConnected.on(view => {
               if (view.component instanceof AffineAIPanelWidget) {
-                view.component.config = buildAIPanelConfig(view.component);
+                view.component.style.width = '630px';
+                view.component.config = buildAIPanelConfig(view.component, {
+                  placement: 'bottom-start',
+                  middleware: [
+                    shift({
+                      padding: 20,
+                    }),
+                  ],
+                });
                 setupSpaceEntry(view.component);
               }
 
@@ -114,7 +124,32 @@ export function patchEdgelessSpecs(specs: BlockSpec[]) {
         setup(slots) {
           slots.widgetConnected.on(view => {
             if (view.component instanceof AffineAIPanelWidget) {
-              view.component.config = buildAIPanelConfig(view.component);
+              view.component.style.width = '430px';
+              view.component.config = buildAIPanelConfig(view.component, {
+                placement: 'right-start',
+                middleware: [
+                  offset({ mainAxis: 16 }),
+                  shift(() => {
+                    const { width, height } = getEdgelessService(
+                      view.component.host
+                    ).viewport;
+
+                    return {
+                      padding: 20,
+                      crossAxis: true,
+                      boundary: {
+                        x: 0,
+                        y: 0,
+                        width,
+                        height: height - 40,
+                      },
+                    };
+                  }),
+                  flip({
+                    crossAxis: true,
+                  }),
+                ],
+              });
             }
 
             if (view.component instanceof EdgelessCopilotWidget) {