fix: edgeless copilot discard modal (#6769)

When need to close the ai panel directly, call panel.hide().

When need to confirm with the user and do some callback processing before closing the panel, set discardCallback to the panel and call panel.discard()

packages/blocks/src/root-block/widgets/ai-panel/ai-panel.ts

@@ -41,6 +41,7 @@ export interface AffineAIPanelWidgetConfig {
 
   finishStateConfig: AIPanelAnswerConfig;
   errorStateConfig: AIPanelErrorConfig;
+  discardCallback?: () => void;
 }
 
 export type AffineAIPanelState =
@@ -104,6 +105,10 @@ export class AffineAIPanelWidget extends WidgetElement {
       this._discardModal = null;
     }
   };
+  private _discardCallback = () => {
+    this.hide();
+    this.config?.discardCallback?.();
+  };
 
   toggle = (reference: ReferenceElement, input?: string) => {
     if (input) {
@@ -142,10 +147,10 @@ export class AffineAIPanelWidget extends WidgetElement {
     this._stopAutoUpdate = undefined;
   };
 
-  discard = () => {
+  discard = (callback: () => void = this._discardCallback) => {
     if (this.state === 'hidden') return;
     this._clearDiscardModal();
-    this._discardModal = toggleDiscardModal(this.hide);
+    this._discardModal = toggleDiscardModal(callback);
   };
 
   /**
@@ -291,7 +296,7 @@ export class AffineAIPanelWidget extends WidgetElement {
         'input',
         () =>
           html`<ai-panel-input
-            .onBlur=${this.discard}
+            .onBlur=${() => this.discard()}
             .onFinish=${this._inputFinish}
           ></ai-panel-input>`,
       ],

packages/blocks/src/root-block/widgets/ai-panel/components/discard-modal.ts

@@ -120,20 +120,20 @@ export class AIPanelDiscardModal extends LitElement {
     }
   `;
 
-  private _discardAction: () => void;
+  private _discardCallback: () => void;
 
   private _close() {
     this.remove();
   }
 
   private _discard() {
-    this._discardAction();
+    this._discardCallback();
     this.remove();
   }
 
-  constructor(discard: () => void) {
+  constructor(callback: () => void) {
     super();
-    this._discardAction = discard;
+    this._discardCallback = callback;
   }
 
   override render() {
@@ -157,8 +157,8 @@ export class AIPanelDiscardModal extends LitElement {
   }
 }
 
-export function toggleDiscardModal(discard: () => void) {
-  const discardModal = new AIPanelDiscardModal(discard);
+export function toggleDiscardModal(callback: () => void) {
+  const discardModal = new AIPanelDiscardModal(callback);
   document.body.append(discardModal);
   return discardModal;
 }

packages/blocks/src/root-block/widgets/edgeless-copilot/index.ts

@@ -75,7 +75,11 @@ export class EdgelessCopilotWidget extends WidgetElement<
     return this.blockElement;
   }
 
-  hide() {
+  set visible(visible: boolean) {
+    this._visible = visible;
+  }
+
+  hideCopilotPanel() {
     this._copilotPanel?.hide();
     this._showCopilotPanelOff?.();
   }
@@ -116,7 +120,7 @@ export class EdgelessCopilotWidget extends WidgetElement<
           if (
             e.button === MOUSE_BUTTON.MAIN &&
             !this.contains(e.target as HTMLElement) &&
-            (!aiPanel || !aiPanel.contains(e.target as HTMLElement))
+            (!aiPanel || aiPanel.state === 'hidden')
           ) {
             off();
             this._copilotPanel?.remove();

packages/presets/src/ai/actions/edgeless-handler.ts

@@ -15,8 +15,8 @@ import { getMarkdownFromSlice } from '../utils/markdown-utils.js';
 import type { CtxRecord } from './edgeless-response.js';
 import {
   actionToResponse,
-  getCopilotPanel,
   getCopilotSelectedElems,
+  getEdgelessCopilotWidget,
 } from './edgeless-response.js';
 import { bindEventSource } from './handler.js';
 
@@ -174,7 +174,7 @@ export function actionToHandler<T extends keyof BlockSuitePresets.AIActions>(
 ) {
   return (host: EditorHost) => {
     const aiPanel = getAIPanel(host);
-    const copilotPanel = getCopilotPanel(host);
+    const edgelessCopilot = getEdgelessCopilotWidget(host);
     let internal: Record<string, unknown> = {};
     const ctx = {
       get() {
@@ -185,7 +185,7 @@ export function actionToHandler<T extends keyof BlockSuitePresets.AIActions>(
       },
     };
 
-    copilotPanel.hide();
+    edgelessCopilot.hideCopilotPanel();
 
     assertExists(aiPanel.config);
 
@@ -197,8 +197,11 @@ export function actionToHandler<T extends keyof BlockSuitePresets.AIActions>(
     )(host);
     aiPanel.config.answerRenderer = actionToRenderer(id, host, ctx);
     aiPanel.config.finishStateConfig = actionToResponse(id, host, ctx);
+    aiPanel.config.discardCallback = () => {
+      edgelessCopilot.visible = false;
+    };
 
-    aiPanel.toggle(copilotPanel.selectionElem, 'placeholder');
+    aiPanel.toggle(edgelessCopilot.selectionElem, 'placeholder');
   };
 }
 

packages/presets/src/ai/actions/edgeless-response.ts

@@ -43,14 +43,16 @@ export function getService(host: EditorHost) {
   return edgelessService;
 }
 
-export function getCopilotPanel(host: EditorHost): EdgelessCopilotWidget {
+export function getEdgelessCopilotWidget(
+  host: EditorHost
+): EdgelessCopilotWidget {
   const rootBlockId = host.doc.root?.id as string;
-  const copilotPanel = host.view.getWidget(
+  const copilotWidget = host.view.getWidget(
     AFFINE_EDGELESS_COPILOT_WIDGET,
     rootBlockId
   ) as EdgelessCopilotWidget;
 
-  return copilotPanel;
+  return copilotWidget;
 }
 
 export function getCopilotSelectedElems(host: EditorHost): EdgelessModel[] {
@@ -61,13 +63,18 @@ export function getCopilotSelectedElems(host: EditorHost): EdgelessModel[] {
 }
 
 export function discard(
-  panel: AffineAIPanelWidget
+  panel: AffineAIPanelWidget,
+  copilot: EdgelessCopilotWidget
 ): FinishConfig['responses'][number] {
   return {
     name: 'Discard',
     icon: DeleteIcon,
     handler: () => {
-      panel.discard();
+      const callback = () => {
+        panel.hide();
+        copilot.visible = false;
+      };
+      panel.discard(callback);
     },
   };
 }
@@ -108,16 +115,16 @@ export const responses: {
 } = {
   brainstormMindmap: (host, ctx) => {
     const aiPanel = getAIPanel(host);
-    const copilotPanel = getCopilotPanel(host);
+    const edgelessCopilot = getEdgelessCopilotWidget(host);
     const [surface] = host.doc.getBlockByFlavour(
       'affine:surface'
     ) as SurfaceBlockModel[];
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const data = ctx.get() as any;
-    const selectionRect = copilotPanel.selectionModelRect;
+    const selectionRect = edgelessCopilot.selectionModelRect;
 
-    copilotPanel.hide();
+    edgelessCopilot.hideCopilotPanel();
     aiPanel.hide();
 
     const mindmapId = surface.addElement({
@@ -155,15 +162,15 @@ export const responses: {
     const html = aiPanel.answer;
     if (!html) return;
 
-    const copilotPanel = getCopilotPanel(host);
+    const edgelessCopilot = getEdgelessCopilotWidget(host);
     const [surface] = host.doc.getBlockByFlavour(
       'affine:surface'
     ) as SurfaceBlockModel[];
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const selectionRect = copilotPanel.selectionModelRect;
+    const selectionRect = edgelessCopilot.selectionModelRect;
 
-    copilotPanel.hide();
+    edgelessCopilot.hideCopilotPanel();
     aiPanel.hide();
 
     const edgelessRoot = getEdgelessRootFromEditor(host);
@@ -206,11 +213,11 @@ export const responses: {
     const data = aiPanel.answer;
     if (!data) return;
 
-    const copilotPanel = getCopilotPanel(host);
+    const edgelessCopilot = getEdgelessCopilotWidget(host);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const selectionRect = copilotPanel.selectionModelRect;
+    const selectionRect = edgelessCopilot.selectionModelRect;
 
-    copilotPanel.hide();
+    edgelessCopilot.hideCopilotPanel();
     aiPanel.hide();
 
     const filename = 'image';
@@ -236,9 +243,9 @@ export const responses: {
 };
 
 const defaultHandler = (host: EditorHost) => {
-  const copilotPanel = getCopilotPanel(host);
+  const edgelessCopilot = getEdgelessCopilotWidget(host);
   const doc = host.doc;
-  const currentRect = copilotPanel.selectionModelRect;
+  const currentRect = edgelessCopilot.selectionModelRect;
   const panel = getAIPanel(host);
 
   doc.transact(() => {
@@ -285,7 +292,7 @@ export function actionToResponse<T extends keyof BlockSuitePresets.AIActions>(
     responses: [
       getResponseHandler(id, host, ctx),
       retry(getAIPanel(host)),
-      discard(getAIPanel(host)),
+      discard(getAIPanel(host), getEdgelessCopilotWidget(host)),
     ],
     actions: [],
   };