feat(core): add tag-chip and collection-chip lit components (#10795)

Close [BS-2790](https://linear.app/affine-design/issue/BS-2790).

![截屏2025-03-12 19.45.48.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/d95834a1-e7e4-4655-8bf6-2ee50b4d3701.png)

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

@@ -88,4 +88,15 @@ export interface FileChip extends BaseChip {
   fileType: string;
 }
 
+export interface TagChip extends BaseChip {
+  tagId: string;
+  tagName: string;
+  tagColor: string;
+}
+
+export interface CollectionChip extends BaseChip {
+  collectionId: string;
+  collectionName: string;
+}
+
 export type ChatChip = DocChip | FileChip;

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

@@ -0,0 +1,31 @@
+import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
+import { AddCollectionIcon } from '@blocksuite/icons/lit';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import type { CollectionChip } from '../chat-context';
+import { getChipIcon, getChipTooltip } from './utils';
+
+export class ChatPanelCollectionChip extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  @property({ attribute: false })
+  accessor chip!: CollectionChip;
+
+  override render() {
+    const { state, collectionName } = this.chip;
+    const isLoading = state === 'processing';
+    const tooltip = getChipTooltip(state, collectionName, this.chip.tooltip);
+    const collectionIcon = AddCollectionIcon();
+    const icon = getChipIcon(state, collectionIcon);
+
+    return html`<chat-panel-chip
+      .state=${state}
+      .name=${collectionName}
+      .tooltip=${tooltip}
+      .icon=${icon}
+      .closeable=${!isLoading}
+    ></chat-panel-chip>`;
+  }
+}

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

@@ -0,0 +1,49 @@
+import { ShadowlessElement } from '@blocksuite/affine/block-std';
+import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import type { TagChip } from '../chat-context';
+import { getChipIcon, getChipTooltip } from './utils';
+
+export class ChatPanelTagChip extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    .tag-icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .tag-icon {
+      border-radius: 50%;
+      height: 8px;
+      width: 8px;
+      margin: 4px;
+      background-color: var(--affine-color-secondary);
+    }
+  `;
+
+  @property({ attribute: false })
+  accessor chip!: TagChip;
+
+  override render() {
+    const { state, tagName, tagColor } = this.chip;
+    const isLoading = state === 'processing';
+    const tooltip = getChipTooltip(state, tagName, this.chip.tooltip);
+    const tagIcon = html`
+      <div class="tag-icon-container">
+        <div class="tag-icon" style="background-color: ${tagColor};"></div>
+      </div>
+    `;
+    const icon = getChipIcon(state, tagIcon);
+
+    return html`<chat-panel-chip
+      .state=${state}
+      .name=${tagName}
+      .tooltip=${tooltip}
+      .icon=${icon}
+      .closeable=${!isLoading}
+    ></chat-panel-chip>`;
+  }
+}

packages/frontend/core/src/blocksuite/ai/effects.ts

@@ -28,8 +28,10 @@ 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 { ChatPanelChip } from './chat-panel/components/chip';
+import { ChatPanelCollectionChip } from './chat-panel/components/collection-chip';
 import { ChatPanelDocChip } from './chat-panel/components/doc-chip';
 import { ChatPanelFileChip } from './chat-panel/components/file-chip';
+import { ChatPanelTagChip } from './chat-panel/components/tag-chip';
 import { effects as componentAiItemEffects } from './components/ai-item';
 import { AIScrollableTextRenderer } from './components/ai-scrollable-text-renderer';
 import { AskAIButton } from './components/ask-ai-button';
@@ -94,6 +96,8 @@ export function registerAIEffects() {
   customElements.define('chat-panel-add-popover', ChatPanelAddPopover);
   customElements.define('chat-panel-doc-chip', ChatPanelDocChip);
   customElements.define('chat-panel-file-chip', ChatPanelFileChip);
+  customElements.define('chat-panel-tag-chip', ChatPanelTagChip);
+  customElements.define('chat-panel-collection-chip', ChatPanelCollectionChip);
   customElements.define('chat-panel-chip', ChatPanelChip);
   customElements.define('ai-error-wrapper', AIErrorWrapper);
   customElements.define('ai-slides-renderer', AISlidesRenderer);