fix(core): ai chat opening and append card (#7322)

Closes: [BS-642](https://linear.app/affine-design/issue/BS-642/continue-with-ai-：-侧边栏关闭的情况下，先唤起-侧边栏，同时插入选中的内容)

https://github.com/toeverything/AFFiNE/assets/27926/3022d808-d560-4bc8-8a04-735b76056121

packages/frontend/core/src/blocksuite/presets/ai/_common/config.ts

@@ -401,8 +401,7 @@ const OthersAIGroup: AIItemGroupConfig = {
       icon: CommentIcon,
       handler: host => {
         const panel = getAIPanel(host);
-        AIProvider.slots.requestOpenWithChat.emit();
-        AIProvider.slots.requestContinueWithAIInChat.emit({ host });
+        AIProvider.slots.requestOpenWithChat.emit({ host, autoSelect: true });
         panel.hide();
       },
     },
@@ -411,11 +410,7 @@ const OthersAIGroup: AIItemGroupConfig = {
       icon: ChatWithAIIcon,
       handler: host => {
         const panel = getAIPanel(host);
-        AIProvider.slots.requestOpenWithChat.emit();
-        AIProvider.slots.requestContinueInChat.emit({
-          host: host,
-          show: true,
-        });
+        AIProvider.slots.requestOpenWithChat.emit({ host });
         panel.hide();
       },
     },

packages/frontend/core/src/blocksuite/presets/ai/actions/edgeless-response.ts

@@ -463,11 +463,7 @@ export function actionToResponse<T extends keyof BlockSuitePresets.AIActions>(
             handler: () => {
               reportResponse('result:continue-in-chat');
               const panel = getAIPanel(host);
-              AIProvider.slots.requestOpenWithChat.emit();
-              AIProvider.slots.requestContinueInChat.emit({
-                host: host,
-                show: true,
-              });
+              AIProvider.slots.requestOpenWithChat.emit({ host });
               panel.hide();
             },
           },

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

@@ -233,11 +233,7 @@ export function buildTextResponseConfig<
           icon: ChatWithAIIcon,
           handler: () => {
             reportResponse('result:continue-in-chat');
-            AIProvider.slots.requestOpenWithChat.emit();
-            AIProvider.slots.requestContinueInChat.emit({
-              host: panel.host,
-              show: true,
-            });
+            AIProvider.slots.requestOpenWithChat.emit({ host });
             panel.hide();
           },
         },

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-cards.ts

@@ -2,7 +2,6 @@ import type { EditorHost } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/block-std';
 import {
   type ImageBlockModel,
-  isInsidePageEditor,
   type NoteBlockModel,
   NoteDisplayMode,
 } from '@blocksuite/blocks';
@@ -24,7 +23,7 @@ import {
   DocIcon,
   SmallImageIcon,
 } from '../_common/icons';
-import { AIProvider } from '../provider';
+import { type AIChatParams, AIProvider } from '../provider';
 import {
   getSelectedImagesAsBlobs,
   getSelectedTextContent,
@@ -112,6 +111,9 @@ export class ChatCards extends WithDisposable(LitElement) {
   @property({ attribute: false })
   accessor updateContext!: (context: Partial<ChatContextValue>) => void;
 
+  @property({ attribute: false })
+  accessor temporaryParams: AIChatParams | null = null;
+
   @state()
   accessor cards: Card[] = [];
 
@@ -421,7 +423,36 @@ export class ChatCards extends WithDisposable(LitElement) {
     };
   }
 
-  protected override async updated(changedProperties: PropertyValues) {
+  private readonly _appendCardWithParams = async ({
+    // host: _,
+    mode,
+    autoSelect,
+  }: AIChatParams) => {
+    if (mode === 'edgeless') {
+      await this._extractOnEdgeless();
+    } else {
+      await this._extract();
+    }
+
+    if (!autoSelect) {
+      return;
+    }
+
+    if (this.cards.length > 0) {
+      const card = this.cards[0];
+      if (card.type === CardType.Doc) return;
+
+      await this._selectCard(card);
+    }
+  };
+
+  protected override async willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has('temporaryParams') && this.temporaryParams) {
+      const params = this.temporaryParams;
+      await this._appendCardWithParams(params);
+      this.temporaryParams = null;
+    }
+
     if (changedProperties.has('host')) {
       if (this._currentDocId === this.host.doc.id) return;
       this._currentDocId = this.host.doc.id;
@@ -443,40 +474,19 @@ export class ChatCards extends WithDisposable(LitElement) {
         if (hasImages) {
           card.images = images;
         }
-        this._updateCards(card);
+
+        this.cards.push(card);
+        this.requestUpdate();
       }
     }
   }
 
-  override async connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
 
     this._disposables.add(
-      AIProvider.slots.requestContinueWithAIInChat.on(async ({ mode }) => {
-        if (mode === 'edgeless') {
-          await this._extractOnEdgeless();
-        } else {
-          await this._extract();
-        }
-
-        if (this.cards.length > 0) {
-          const card = this.cards[0];
-          if (card.type === CardType.Doc) return;
-
-          await this._selectCard(card);
-        }
-      })
-    );
-
-    this._disposables.add(
-      AIProvider.slots.requestContinueInChat.on(async ({ host, show }) => {
-        if (show) {
-          if (isInsidePageEditor(host)) {
-            await this._extract();
-          } else {
-            await this._extractOnEdgeless();
-          }
-        }
+      AIProvider.slots.requestOpenWithChat.on(async params => {
+        await this._appendCardWithParams(params);
       })
     );
 

packages/frontend/core/src/blocksuite/presets/ai/entries/edgeless/actions-config.ts

@@ -105,10 +105,10 @@ const othersGroup: AIItemGroupConfig = {
       showWhen: () => true,
       handler: host => {
         const panel = getAIPanel(host);
-        AIProvider.slots.requestOpenWithChat.emit();
-        AIProvider.slots.requestContinueWithAIInChat.emit({
+        AIProvider.slots.requestOpenWithChat.emit({
           host,
           mode: 'edgeless',
+          autoSelect: true,
         });
         panel.hide();
       },
@@ -119,11 +119,7 @@ const othersGroup: AIItemGroupConfig = {
       showWhen: () => true,
       handler: host => {
         const panel = getAIPanel(host);
-        AIProvider.slots.requestOpenWithChat.emit();
-        AIProvider.slots.requestContinueInChat.emit({
-          host: host,
-          show: true,
-        });
+        AIProvider.slots.requestOpenWithChat.emit({ host, mode: 'edgeless' });
         panel.hide();
       },
     },

packages/frontend/core/src/blocksuite/presets/ai/provider.ts

@@ -2,6 +2,8 @@ import type { EditorHost } from '@blocksuite/block-std';
 import { PaymentRequiredError, UnauthorizedError } from '@blocksuite/blocks';
 import { Slot } from '@blocksuite/store';
 
+import type { ChatCards } from './chat-panel/chat-cards';
+
 export interface AIUserInfo {
   id: string;
   email: string;
@@ -9,6 +11,17 @@ export interface AIUserInfo {
   avatarUrl: string | null;
 }
 
+export interface AIChatParams {
+  host: EditorHost;
+  mode?: 'page' | 'edgeless';
+  // Auto select and append selection to input via `Continue with AI` action.
+  autoSelect?: boolean;
+}
+
+type RequestChatCardsElement = (
+  chatPanel: HTMLElement
+) => Promise<ChatCards | null>;
+
 export type ActionEventType =
   | 'started'
   | 'finished'
@@ -63,6 +76,10 @@ export class AIProvider {
     return AIProvider.instance.toggleGeneralAIOnboarding;
   }
 
+  static get requestChatCardsElement() {
+    return AIProvider.instance.requestChatCardsElement;
+  }
+
   private static readonly instance = new AIProvider();
 
   static LAST_ACTION_SESSIONID = '';
@@ -77,15 +94,18 @@ export class AIProvider {
 
   private toggleGeneralAIOnboarding: ((value: boolean) => void) | null = null;
 
+  private readonly requestChatCardsElement: RequestChatCardsElement = (
+    chatPanel: HTMLElement
+  ) => {
+    return new Promise(resolve => {
+      resolve(chatPanel.querySelector<ChatCards>('chat-cards'));
+    });
+  };
+
   private readonly slots = {
     // use case: when user selects "continue in chat" in an ask ai result panel
     // do we need to pass the context to the chat panel?
-    requestOpenWithChat: new Slot(),
-    requestContinueInChat: new Slot<{ host: EditorHost; show: boolean }>(),
-    requestContinueWithAIInChat: new Slot<{
-      host: EditorHost;
-      mode?: 'page' | 'edgeless';
-    }>(),
+    requestOpenWithChat: new Slot<AIChatParams>(),
     requestLogin: new Slot<{ host: EditorHost }>(),
     requestUpgradePlan: new Slot<{ host: EditorHost }>(),
     // when an action is requested to run in edgeless mode (show a toast in affine)