feat(core): support chat panel chips and suggest current doc for embedding

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

@@ -0,0 +1,17 @@
+import type { Store } from '@blocksuite/store';
+import type { Signal } from '@preact/signals-core';
+
+export interface AINetworkSearchConfig {
+  visible: Signal<boolean | undefined>;
+  enabled: Signal<boolean | undefined>;
+  setEnabled: (state: boolean) => void;
+}
+
+export interface DocDisplayConfig {
+  getIcon: (docId: string) => any;
+  getTitle: (docId: string) => {
+    signal: Signal<string>;
+    cleanup: () => void;
+  };
+  getDoc: (docId: string) => Store | null;
+}

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

@@ -24,13 +24,28 @@ export type ChatStatus =
   | 'idle'
   | 'transmitting';
 
+export interface DocContext {
+  docId: string;
+  plaintext?: string;
+  markdown?: string;
+  images?: File[];
+}
+
 export type ChatContextValue = {
+  // history messages of the chat
   items: ChatItem[];
   status: ChatStatus;
   error: AIError | null;
+  // plain-text of the selected content
   quote: string;
+  // markdown of the selected content
   markdown: string;
+  // images of the selected content or user uploaded
   images: File[];
+  // chips of workspace doc or user uploaded file
+  chips: ChatChip[];
+  // content of selected workspace doc
+  docs: DocContext[];
   abortController: AbortController | null;
   chatSessionId: string | null;
 };
@@ -40,3 +55,34 @@ export type ChatBlockMessage = ChatMessage & {
   userName?: string;
   avatarUrl?: string;
 };
+
+export type ChipState =
+  | 'candidate'
+  | 'uploading'
+  | 'embedding'
+  | 'success'
+  | 'failed';
+
+export interface BaseChip {
+  /**
+   * candidate: the chip is a candidate for the chat
+   * uploading: the chip is uploading
+   * embedding: the chip is embedding
+   * success: the chip is successfully embedded
+   * failed: the chip is failed to embed
+   */
+  state: ChipState;
+  tooltip?: string;
+}
+
+export interface DocChip extends BaseChip {
+  docId: string;
+}
+
+export interface FileChip extends BaseChip {
+  fileName: string;
+  fileId: string;
+  fileType: string;
+}
+
+export type ChatChip = DocChip | FileChip;

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

@@ -0,0 +1,59 @@
+import {
+  type EditorHost,
+  ShadowlessElement,
+} from '@blocksuite/affine/block-std';
+import { WithDisposable } from '@blocksuite/affine/global/utils';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import type { DocDisplayConfig } from './chat-config';
+import type { ChatContextValue } from './chat-context';
+import { getChipKey, isDocChip, isFileChip } from './components/utils';
+
+export class ChatPanelChips extends WithDisposable(ShadowlessElement) {
+  static override styles = css`
+    .chip-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  `;
+
+  @property({ attribute: false })
+  accessor host!: EditorHost;
+
+  @property({ attribute: false })
+  accessor chatContextValue!: ChatContextValue;
+
+  @property({ attribute: false })
+  accessor updateContext!: (context: Partial<ChatContextValue>) => void;
+
+  @property({ attribute: false })
+  accessor docDisplayConfig!: DocDisplayConfig;
+
+  override render() {
+    return html`<div class="chip-list">
+      ${repeat(
+        this.chatContextValue.chips,
+        chip => getChipKey(chip),
+        chip => {
+          if (isDocChip(chip)) {
+            return html`<chat-panel-doc-chip
+              .chip=${chip}
+              .docDisplayConfig=${this.docDisplayConfig}
+              .host=${this.host}
+              .chatContextValue=${this.chatContextValue}
+              .updateContext=${this.updateContext}
+            ></chat-panel-doc-chip>`;
+          }
+          if (isFileChip(chip)) {
+            return html`<chat-panel-file-chip
+              .chip=${chip}
+            ></chat-panel-file-chip>`;
+          }
+          return null;
+        }
+      )}
+    </div>`;
+  }
+}

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

@@ -8,7 +8,6 @@ import {
 } from '@blocksuite/affine/global/utils';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { ImageIcon, PublishIcon } from '@blocksuite/icons/lit';
-import type { Signal } from '@preact/signals-core';
 import { css, html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -22,6 +21,7 @@ import {
 import { AIProvider } from '../provider';
 import { reportResponse } from '../utils/action-reporter';
 import { readBlobAsURL } from '../utils/image';
+import type { AINetworkSearchConfig } from './chat-config';
 import type { ChatContextValue, ChatMessage } from './chat-context';
 
 const MaximumImageCount = 32;
@@ -31,12 +31,6 @@ function getFirstTwoLines(text: string) {
   return lines.slice(0, 2);
 }
 
-export interface AINetworkSearchConfig {
-  visible: Signal<boolean | undefined>;
-  enabled: Signal<boolean | undefined>;
-  setEnabled: (state: boolean) => void;
-}
-
 export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
   static override styles = css`
     .chat-panel-input {
@@ -510,7 +504,7 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
   };
 
   send = async (text: string) => {
-    const { status, markdown } = this.chatContextValue;
+    const { status, markdown, docs } = this.chatContextValue;
     if (status === 'loading' || status === 'transmitting') return;
 
     const { images } = this.chatContextValue;
@@ -531,7 +525,8 @@ export class ChatPanelInput extends SignalWatcher(WithDisposable(LitElement)) {
       images?.map(image => readBlobAsURL(image))
     );
 
-    const content = (markdown ? `${markdown}\n` : '') + text;
+    const refDocs = docs.map(doc => doc.markdown).join('\n');
+    const content = (markdown ? `${markdown}\n` : '') + `${refDocs}\n` + text;
 
     this.updateContext({
       items: [

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

@@ -0,0 +1,106 @@
+import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
+import { CloseIcon } from '@blocksuite/icons/lit';
+import { css, html, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import type { ChipState } from '../chat-context';
+
+export class ChatPanelChip extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    .chip-card {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+      margin: 4px;
+      border-radius: 4px;
+      border: 0.5px solid var(--affine-border-color);
+      background: var(--affine-background-primary-color);
+    }
+    .chip-card[data-state='candidate'] {
+      border-width: 0.5px;
+      border-style: dashed;
+      background: var(--affine-background-secondary-color);
+    }
+    .chip-card[data-state='failed'] {
+      color: var(--affine-error-color);
+      background: var(--affine-background-error-color);
+    }
+    .chip-card[data-state='failed'] svg {
+      color: var(--affine-error-color);
+    }
+    .chip-card svg {
+      width: 16px;
+      height: 16px;
+      color: var(--affine-v2-icon-primary);
+    }
+    .chip-card-title {
+      display: inline-block;
+      margin: 0 4px;
+      font-size: 12px;
+      min-width: 16px;
+      max-width: 124px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: pointer;
+    }
+    .chip-card-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+    .chip-card-close:hover {
+      background: var(--affine-hover-color);
+    }
+  `;
+
+  @property({ attribute: false })
+  accessor state!: ChipState;
+
+  @property({ attribute: false })
+  accessor name!: string;
+
+  @property({ attribute: false })
+  accessor tooltip!: string;
+
+  @property({ attribute: false })
+  accessor icon!: TemplateResult<1>;
+
+  @property({ attribute: false })
+  accessor closeable: boolean = false;
+
+  @property({ attribute: false })
+  accessor onChipDelete: () => void = () => {};
+
+  @property({ attribute: false })
+  accessor onChipClick: () => void = () => {};
+
+  override render() {
+    return html`
+      <div
+        class="chip-card"
+        data-testid="chat-panel-chip"
+        data-state=${this.state}
+      >
+        ${this.icon}
+        <span class="chip-card-title" @click=${this.onChipClick}>
+          <affine-tooltip>${this.tooltip}</affine-tooltip>
+          <span data-testid="chat-panel-chip-title">${this.name}</span>
+        </span>
+        ${this.closeable
+          ? html`
+              <div class="chip-card-close" @click=${this.onChipDelete}>
+                ${CloseIcon()}
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+}