feat(core): add candidates popover in ai chat-panel (#11178)

Close [BS-2853](https://linear.app/affine-design/issue/BS-2853).
2026-02-14 05:14:54 +00:00 · 2025-03-25 15:50:11 +00:00
parent 4bf9161e57
commit aefbc11aab
9 changed files with 240 additions and 20 deletions
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-config.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-config.ts
@@ -28,7 +28,8 @@ export interface AINetworkSearchConfig {

 export interface DocDisplayConfig {
  getIcon: (docId: string) => any;
-  getTitle: (docId: string) => {
+  getTitle: (docId: string) => string;
+  getTitleSignal: (docId: string) => {
    signal: Signal<string>;
    cleanup: () => void;
  };
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-chips.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-chips.ts
@@ -6,9 +6,9 @@ import {
 } from '@blocksuite/affine/block-std';
 import { createLitPortal } from '@blocksuite/affine/components/portal';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
-import { PlusIcon } from '@blocksuite/icons/lit';
+import { MoreVerticalIcon, PlusIcon } from '@blocksuite/icons/lit';
 import { flip, offset } from '@floating-ui/dom';
-import { type Signal, signal } from '@preact/signals-core';
+import { computed, type Signal, signal } from '@preact/signals-core';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -36,6 +36,8 @@ import {
 // 100k tokens limit for the docs context
 const MAX_TOKEN_COUNT = 100000;

+const MAX_CANDIDATES = 3;
+
 export class ChatPanelChips extends SignalWatcher(
  WithDisposable(ShadowlessElement)
 ) {
@@ -45,13 +47,14 @@ export class ChatPanelChips extends SignalWatcher(
      flex-wrap: wrap;
    }
    .add-button,
-    .collapse-button {
+    .collapse-button,
+    .more-candidate-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
-      border: 1px solid var(--affine-border-color);
+      border: 0.5px solid var(--affine-border-color);
      border-radius: 4px;
      margin: 4px 0;
      box-sizing: border-box;
@@ -62,6 +65,15 @@ export class ChatPanelChips extends SignalWatcher(
    .collapse-button:hover {
      background-color: var(--affine-hover-color);
    }
+    .more-candidate-button {
+      border-width: 1px;
+      border-style: dashed;
+      background: var(--affine-background-secondary-color);
+      color: var(--affine-icon-secondary);
+    }
+    .more-candidate-button svg {
+      color: var(--affine-icon-secondary);
+    }
  `;

  private _abortController: AbortController | null = null;
@@ -90,6 +102,9 @@ export class ChatPanelChips extends SignalWatcher(
  @query('.add-button')
  accessor addButton!: HTMLDivElement;

+  @query('.more-candidate-button')
+  accessor moreCandidateButton!: HTMLDivElement;
+
  @state()
  accessor isCollapsed = false;

@@ -114,11 +129,14 @@ export class ChatPanelChips extends SignalWatcher(
      docId: doc.docId,
      state: 'candidate',
    }));
-    const allChips = this.chatContextValue.chips.concat(candidates);
+    const moreCandidates = candidates.length > MAX_CANDIDATES;
+    const allChips = this.chatContextValue.chips.concat(
+      candidates.slice(0, MAX_CANDIDATES)
+    );
    const isCollapsed = this.isCollapsed && allChips.length > 1;
    const chips = isCollapsed ? allChips.slice(0, 1) : allChips;

-    return html` <div class="chips-wrapper">
+    return html`<div class="chips-wrapper">
      <div class="add-button" @click=${this._toggleAddDocMenu}>
        ${PlusIcon()}
      </div>
@@ -170,6 +188,14 @@ export class ChatPanelChips extends SignalWatcher(
          return null;
        }
      )}
+      ${moreCandidates && !isCollapsed
+        ? html`<div
+            class="more-candidate-button"
+            @click=${this._toggleMoreCandidatesMenu}
+          >
+            ${MoreVerticalIcon()}
+          </div>`
+        : nothing}
      ${isCollapsed
        ? html`<div class="collapse-button" @click=${this._toggleCollapse}>
            +${allChips.length - 1}
@@ -247,6 +273,45 @@ export class ChatPanelChips extends SignalWatcher(
    });
  };

+  private readonly _toggleMoreCandidatesMenu = () => {
+    if (this._abortController) {
+      this._abortController.abort();
+      return;
+    }
+
+    this._abortController = new AbortController();
+    this._abortController.signal.addEventListener('abort', () => {
+      this._abortController = null;
+    });
+
+    const referenceDocs = computed(() =>
+      this.referenceDocs.value.slice(MAX_CANDIDATES)
+    );
+
+    createLitPortal({
+      template: html`
+        <chat-panel-candidates-popover
+          .addChip=${this._addChip}
+          .referenceDocs=${referenceDocs}
+          .docDisplayConfig=${this.docDisplayConfig}
+          .abortController=${this._abortController}
+        ></chat-panel-candidates-popover>
+      `,
+      portalStyles: {
+        zIndex: 'var(--affine-z-index-popover)',
+      },
+      container: document.body,
+      computePosition: {
+        referenceElement: this.moreCandidateButton,
+        placement: 'top-start',
+        middleware: [offset({ crossAxis: 0, mainAxis: 6 }), flip()],
+        autoUpdate: { animationFrame: true },
+      },
+      abortController: this._abortController,
+      closeOnClickAway: true,
+    });
+  };
+
  private readonly _addChip = async (chip: ChatChip) => {
    this.isCollapsed = false;
    // remove the chip if it already exists
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/add-popover.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/add-popover.ts
@@ -43,7 +43,6 @@ export type MenuItem = {
  name: string | TemplateResult<1>;
  icon: TemplateResult<1>;
  action: MenuAction;
-  suffix?: string | TemplateResult<1>;
 };

 export type MenuAction = () => Promise<void> | void;
@@ -111,11 +110,6 @@ export class ChatPanelAddPopover extends SignalWatcher(
    .menu-items icon-button {
      outline: none;
    }
-    .item-suffix {
-      margin-left: auto;
-      font-size: var(--affine-font-xs);
-      color: var(--affine-text-secondary-color);
-    }

    ${scrollbarStyle('.add-popover')}
  `;
@@ -335,7 +329,7 @@ export class ChatPanelAddPopover extends SignalWatcher(
      ${repeat(
        items,
        item => item.key,
-        ({ key, name, icon, action, suffix }, idx) => {
+        ({ key, name, icon, action }, idx) => {
          const curIdx = startIndex + idx;
          return html`<icon-button
            width="280px"
@@ -348,7 +342,6 @@ export class ChatPanelAddPopover extends SignalWatcher(
            @mousemove=${() => (this._activatedIndex = curIdx)}
          >
            ${icon}
-            ${suffix ? html`<div class="item-suffix">${suffix}</div>` : ''}
          </icon-button>`;
        }
      )}
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/candidates-popover.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/candidates-popover.ts
@@ -0,0 +1,150 @@
+import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
+import { scrollbarStyle } from '@blocksuite/affine/shared/styles';
+import { PlusIcon } from '@blocksuite/icons/lit';
+import { type Signal, signal } from '@preact/signals-core';
+import { css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import type { DocDisplayConfig } from '../chat-config';
+import type { DocChip } from '../chat-context';
+
+export class ChatPanelCandidatesPopover extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    .candidates-popover {
+      width: 280px;
+      max-height: 450px;
+      overflow-y: auto;
+      border: 0.5px solid var(--affine-border-color);
+      border-radius: 4px;
+      background: var(--affine-background-primary-color);
+      box-shadow: var(--affine-shadow-2);
+      padding: 8px;
+    }
+
+    .candidates-popover icon-button {
+      justify-content: flex-start;
+      gap: 8px;
+    }
+    .candidates-popover icon-button svg {
+      width: 20px;
+      height: 20px;
+      color: var(--svg-icon-color);
+    }
+
+    ${scrollbarStyle('.candidates-popover')}
+  `;
+
+  @property({ attribute: false })
+  accessor referenceDocs: Signal<
+    Array<{
+      docId: string;
+      title: string;
+    }>
+  > = signal([]);
+
+  @property({ attribute: false })
+  accessor abortController!: AbortController;
+
+  @property({ attribute: false })
+  accessor addChip!: (chip: DocChip) => void;
+
+  @property({ attribute: false })
+  accessor docDisplayConfig!: DocDisplayConfig;
+
+  @state()
+  private accessor _activatedIndex = 0;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('keydown', this._handleKeyDown);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('keydown', this._handleKeyDown);
+  }
+
+  override render() {
+    return html`<div class="candidates-popover">
+      ${repeat(
+        this.referenceDocs.value,
+        doc => doc.docId,
+        (doc, curIdx) => {
+          const { docId } = doc;
+          const title = this.docDisplayConfig.getTitle(docId);
+          const getIcon = this.docDisplayConfig.getIcon(docId);
+          const docIcon = typeof getIcon === 'function' ? getIcon() : getIcon;
+
+          return html`<div class="candidate-item">
+            <icon-button
+              width="280px"
+              height="30px"
+              data-id=${docId}
+              data-index=${curIdx}
+              .text=${title}
+              hover=${this._activatedIndex === curIdx}
+              @click=${() => this._addDocChip(docId)}
+              @mousemove=${() => (this._activatedIndex = curIdx)}
+            >
+              ${docIcon}
+              <span slot="suffix">${PlusIcon()}</span>
+            </icon-button>
+          </div>`;
+        }
+      )}
+    </div>`;
+  }
+
+  private readonly _addDocChip = (docId: string) => {
+    this.addChip({
+      docId,
+      state: 'processing',
+    });
+  };
+
+  private readonly _handleKeyDown = (event: KeyboardEvent) => {
+    if (event.isComposing) return;
+
+    const { key } = event;
+    if (key === 'ArrowDown' || key === 'ArrowUp') {
+      event.preventDefault();
+      const totalItems = this.referenceDocs.value.length;
+      if (totalItems === 0) return;
+
+      if (key === 'ArrowDown') {
+        this._activatedIndex = (this._activatedIndex + 1) % totalItems;
+      } else if (key === 'ArrowUp') {
+        this._activatedIndex =
+          (this._activatedIndex - 1 + totalItems) % totalItems;
+      }
+      this._scrollItemIntoView();
+    } else if (key === 'Enter') {
+      event.preventDefault();
+      if (this.referenceDocs.value.length > 0) {
+        const docId = this.referenceDocs.value[this._activatedIndex].docId;
+        this._addDocChip(docId);
+      }
+    } else if (key === 'Escape') {
+      event.preventDefault();
+      this.abortController.abort();
+    }
+  };
+
+  private _scrollItemIntoView() {
+    requestAnimationFrame(() => {
+      const element = this.renderRoot.querySelector(
+        `[data-index="${this._activatedIndex}"]`
+      );
+      if (element) {
+        element.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      }
+    });
+  }
+}
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/chip.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/chip.ts
@@ -25,7 +25,7 @@ export class ChatPanelChip extends SignalWatcher(
    .chip-card[data-state='candidate'] {
      border-width: 1px;
      border-style: dashed;
-      background: var(--affine-tag-white);
+      background: var(--affine-background-secondary-color);
      color: var(--affine-icon-secondary);
    }
    .chip-card[data-state='candidate'] svg {
@@ -58,7 +58,7 @@ export class ChatPanelChip extends SignalWatcher(
      text-overflow: ellipsis;
      white-space: nowrap;
    }
-    .chip-card[data-state='candidate'] .chip-card-title {
+    .chip-card[data-state='candidate'] {
      cursor: pointer;
    }
    .chip-card-close {
@@ -101,10 +101,11 @@ export class ChatPanelChip extends SignalWatcher(
        class="chip-card"
        data-testid="chat-panel-chip"
        data-state=${this.state}
+        @click=${this.onChipClick}
      >
        <div class="chip-card-content">
          ${this.icon}
-          <span class="chip-card-title" @click=${this.onChipClick}>
+          <span class="chip-card-title">
            <span data-testid="chat-panel-chip-title">${this.name}</span>
          </span>
          <affine-tooltip>${this.tooltip}</affine-tooltip>
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/components/doc-chip.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/components/doc-chip.ts
@@ -47,7 +47,9 @@ export class ChatPanelDocChip extends SignalWatcher(
  override connectedCallback() {
    super.connectedCallback();

-    const { signal, cleanup } = this.docDisplayConfig.getTitle(this.chip.docId);
+    const { signal, cleanup } = this.docDisplayConfig.getTitleSignal(
+      this.chip.docId
+    );
    this.chipName = signal;
    this.disposables.add(cleanup);

--- a/packages/frontend/core/src/blocksuite/ai/effects.ts
+++ b/packages/frontend/core/src/blocksuite/ai/effects.ts
@@ -27,6 +27,7 @@ import { ChatPanelChips } from './chat-panel/chat-panel-chips';
 import { ChatPanelInput } from './chat-panel/chat-panel-input';
 import { ChatPanelMessages } from './chat-panel/chat-panel-messages';
 import { ChatPanelAddPopover } from './chat-panel/components/add-popover';
+import { ChatPanelCandidatesPopover } from './chat-panel/components/candidates-popover';
 import { ChatPanelChip } from './chat-panel/components/chip';
 import { ChatPanelCollectionChip } from './chat-panel/components/collection-chip';
 import { ChatPanelDocChip } from './chat-panel/components/doc-chip';
@@ -100,6 +101,10 @@ export function registerAIEffects() {
  customElements.define('chat-panel', ChatPanel);
  customElements.define('chat-panel-chips', ChatPanelChips);
  customElements.define('chat-panel-add-popover', ChatPanelAddPopover);
+  customElements.define(
+    'chat-panel-candidates-popover',
+    ChatPanelCandidatesPopover
+  );
  customElements.define('chat-panel-doc-chip', ChatPanelDocChip);
  customElements.define('chat-panel-file-chip', ChatPanelFileChip);
  customElements.define('chat-panel-tag-chip', ChatPanelTagChip);
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx
@@ -88,6 +88,9 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel(
          return docDisplayMetaService.icon$(docId, { type: 'lit' }).value;
        },
        getTitle: (docId: string) => {
+          return docDisplayMetaService.title$(docId).value;
+        },
+        getTitleSignal: (docId: string) => {
          const title$ = docDisplayMetaService.title$(docId);
          return createSignalFromObservable(title$, '');
        },