feat(core): chat-panel buttons ui (#11942)

Close [AI-7](https://linear.app/affine-design/issue/AI-7). ![截屏2025-04-23 23.29.32.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/sJGviKxfE3Ap685cl5bj/a984a28f-0ccf-4e8d-ba2d-239ad03f2998.png)
2026-02-12 12:28:42 +00:00 · 2025-04-24 14:32:54 +00:00
parent 807cba03ee
commit 3d2f0e7b5b
10 changed files with 235 additions and 115 deletions
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts
@@ -5,7 +5,6 @@ import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
 import type { EditorHost } from '@blocksuite/affine/std';
 import { ShadowlessElement } from '@blocksuite/affine/std';
 import type { ExtensionType, Store } from '@blocksuite/affine/store';
-import { HelpIcon } from '@blocksuite/icons/lit';
 import { type Signal, signal } from '@preact/signals-core';
 import { css, html, type PropertyValues } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -68,21 +67,12 @@ export class ChatPanel extends SignalWatcher(
      align-items: center;
      z-index: 1;

-      div:first-child {
+      .chat-panel-title-text {
        font-size: 14px;
        font-weight: 500;
        color: var(--affine-text-secondary-color);
      }

-      div:last-child {
-        width: 24px;
-        height: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-      }
-
      svg {
        width: 18px;
        height: 18px;
@@ -385,20 +375,20 @@ export class ChatPanel extends SignalWatcher(

    return html`<div class="chat-panel-container" style=${style}>
      <div class="chat-panel-title">
-        <div>
+        <div class="chat-panel-title-text">
          ${isEmbedding
            ? html`<span data-testid="chat-panel-embedding-progress"
                >Embedding ${done}/${total}</span
              >`
            : 'AFFiNE AI'}
        </div>
-        <div
-          @click=${() => {
-            AIProvider.toggleGeneralAIOnboarding?.(true);
-          }}
-        >
-          ${HelpIcon()}
-        </div>
+        <ai-history-clear
+          .host=${this.host}
+          .doc=${this.doc}
+          .getSessionId=${this._getSessionId}
+          .onHistoryCleared=${this._updateHistory}
+          .chatContextValue=${this.chatContextValue}
+        ></ai-history-clear>
      </div>
      <chat-panel-messages
        ${ref(this._chatMessagesRef)}
@@ -418,7 +408,6 @@ export class ChatPanel extends SignalWatcher(
        .chatContextValue=${this.chatContextValue}
        .updateContext=${this.updateContext}
        .updateEmbeddingProgress=${this._updateEmbeddingProgress}
-        .onHistoryCleared=${this._updateHistory}
        .isVisible=${this._isSidebarOpen}
        .networkSearchConfig=${this.networkSearchConfig}
        .reasoningConfig=${this.reasoningConfig}
@@ -428,6 +417,7 @@ export class ChatPanel extends SignalWatcher(
          where: 'chat-panel',
          control: 'chat-send',
        }}
+        .sideBarWidth=${this._sidebarWidth}
      ></ai-chat-composer>
    </div>`;
  }
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-composer/ai-chat-composer.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-composer/ai-chat-composer.ts
@@ -5,7 +5,6 @@ import type {
  CopilotDocType,
 } from '@affine/graphql';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
-import { NotificationProvider } from '@blocksuite/affine/shared/services';
 import type { EditorHost } from '@blocksuite/affine/std';
 import { ShadowlessElement } from '@blocksuite/affine/std';
 import type { Store } from '@blocksuite/affine/store';
@@ -65,9 +64,6 @@ export class AIChatComposer extends SignalWatcher(
  @property({ attribute: false })
  accessor updateContext!: (context: Partial<AIChatInputContext>) => void;

-  @property({ attribute: false })
-  accessor onHistoryCleared: (() => void) | undefined;
-
  @property({ attribute: false })
  accessor isVisible: Signal<boolean | undefined> = signal(false);

@@ -97,6 +93,9 @@ export class AIChatComposer extends SignalWatcher(
  @property({ attribute: false })
  accessor portalContainer: HTMLElement | null = null;

+  @property({ attribute: false })
+  accessor sideBarWidth: Signal<number | undefined> = signal(undefined);
+
  @state()
  accessor chips: ChatChip[] = [];

@@ -131,9 +130,9 @@ export class AIChatComposer extends SignalWatcher(
        .networkSearchConfig=${this.networkSearchConfig}
        .reasoningConfig=${this.reasoningConfig}
        .docDisplayConfig=${this.docDisplayConfig}
-        .cleanupHistories=${this._cleanupHistories}
        .onChatSuccess=${this.onChatSuccess}
        .trackOptions=${this.trackOptions}
+        .sideBarWidth=${this.sideBarWidth}
      ></ai-chat-input>
      <div class="chat-panel-footer">
        ${InformationIcon()}
@@ -354,36 +353,6 @@ export class AIChatComposer extends SignalWatcher(
    this._pollAbortController = null;
  };

-  private readonly _cleanupHistories = async () => {
-    const sessionId = await this.getSessionId();
-    const notification = this.host.std.getOptional(NotificationProvider);
-    if (!notification) return;
-    try {
-      if (
-        await notification.confirm({
-          title: 'Clear History',
-          message:
-            'Are you sure you want to clear all history? This action will permanently delete all content, including all chat logs and data, and cannot be undone.',
-          confirmText: 'Confirm',
-          cancelText: 'Cancel',
-        })
-      ) {
-        const actionIds = this.chatContextValue.messages
-          .filter(item => 'sessionId' in item)
-          .map(item => item.sessionId);
-        await AIProvider.histories?.cleanup(
-          this.doc.workspace.id,
-          this.doc.id,
-          [...(sessionId ? [sessionId] : []), ...(actionIds || [])]
-        );
-        notification.toast('History cleared');
-        this.onHistoryCleared?.();
-      }
-    } catch {
-      notification.toast('Failed to clear history');
-    }
-  };
-
  private readonly _initComposer = async () => {
    if (!this.isVisible.value) return;
    if (this._isLoading) return;
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-chat-input/ai-chat-input.ts
@@ -4,12 +4,12 @@ import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { openFileOrFiles } from '@blocksuite/affine/shared/utils';
 import type { EditorHost } from '@blocksuite/affine/std';
 import {
-  BroomIcon,
  CloseIcon,
  ImageIcon,
  PublishIcon,
  ThinkingIcon,
 } from '@blocksuite/icons/lit';
+import { type Signal, 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';
@@ -118,46 +118,55 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
      gap: 8px;
      align-items: center;

-      div {
-        width: 24px;
-        height: 24px;
+      .chat-input-icon {
        cursor: pointer;
-      }
-
-      div:nth-child(2) {
-        margin-left: auto;
-      }
-
-      .image-upload,
-      .chat-history-clear,
-      .chat-network-search {
+        padding: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
+        border-radius: 4px;
+
        svg {
          width: 20px;
          height: 20px;
          color: ${unsafeCSSVarV2('icon/primary')};
        }
+
+        .chat-input-icon-label {
+          font-size: 14px;
+          line-height: 22px;
+          font-weight: 500;
+          color: ${unsafeCSSVarV2('icon/primary')};
+          margin: 0 4px 0 4px;
+        }
      }

-      .chat-history-clear svg {
-        color: var(--affine-text-secondary-color);
-      }
-      .chat-network-search[data-active='true'] svg {
-        color: ${unsafeCSSVarV2('icon/activated')};
+      .chat-input-icon:nth-child(2) {
+        margin-left: auto;
      }

-      .chat-history-clear[aria-disabled='true'],
-      .image-upload[aria-disabled='true'],
-      .chat-network-search[aria-disabled='true'] {
+      .chat-input-icon:hover {
+        background-color: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+      }
+
+      .chat-input-icon[data-active='true'] {
+        background-color: #1e96eb14;
+
+        svg {
+          color: ${unsafeCSSVarV2('icon/activated')};
+        }
+
+        .chat-input-icon-label {
+          color: ${unsafeCSSVarV2('icon/activated')};
+        }
+      }
+
+      .chat-input-icon[aria-disabled='true'] {
        cursor: not-allowed;
-      }

-      .chat-history-clear[aria-disabled='true'] svg,
-      .image-upload[aria-disabled='true'] svg,
-      .chat-network-search[aria-disabled='true'] svg {
-        color: var(--affine-text-disable-color) !important;
+        svg {
+          color: ${unsafeCSSVarV2('icon/secondary')} !important;
+        }
      }
    }

@@ -240,9 +249,6 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
  @property({ attribute: false })
  accessor updateContext!: (context: Partial<AIChatInputContext>) => void;

-  @property({ attribute: false })
-  accessor cleanupHistories!: () => Promise<void>;
-
  @property({ attribute: false })
  accessor networkSearchConfig!: AINetworkSearchConfig;

@@ -264,6 +270,9 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
  @property({ attribute: 'data-testid', reflect: true })
  accessor testId = 'chat-panel-input-container';

+  @property({ attribute: false })
+  accessor sideBarWidth: Signal<number | undefined> = signal(undefined);
+
  private get _isNetworkActive() {
    return (
      !!this.networkSearchConfig.visible.value &&
@@ -275,12 +284,8 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
    return !!this.reasoningConfig.enabled.value;
  }

-  private get _isClearDisabled() {
-    return (
-      this.chatContextValue.status === 'loading' ||
-      this.chatContextValue.status === 'transmitting' ||
-      !this.chatContextValue.messages.length
-    );
+  private get _isImageUploadDisabled() {
+    return this.chatContextValue.images.length >= MaximumImageCount;
  }

  override connectedCallback() {
@@ -303,6 +308,8 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
    const { images, status } = this.chatContextValue;
    const hasImages = images.length > 0;
    const maxHeight = hasImages ? 272 + 2 : 200 + 2;
+    const showLabel = this.sideBarWidth.value && this.sideBarWidth.value > 400;
+
    return html` <div
      class="chat-panel-input"
      data-if-focused=${this.focused}
@@ -355,44 +362,48 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
      ></textarea>
      <div class="chat-panel-input-actions">
        <div
-          class="chat-history-clear"
-          aria-disabled=${this._isClearDisabled}
-          @click=${this._handleClear}
-          data-testid="chat-panel-clear"
+          class="chat-input-icon"
+          data-testid="chat-panel-input-image-upload"
+          aria-disabled=${this._isImageUploadDisabled}
+          @click=${this._uploadImageFiles}
        >
-          ${BroomIcon()}
+          ${ImageIcon()}
+          <affine-tooltip>Upload</affine-tooltip>
        </div>
        ${this.networkSearchConfig.visible.value
          ? html`
              <div
-                class="chat-network-search"
+                class="chat-input-icon"
                data-testid="chat-network-search"
                data-active=${this._isNetworkActive}
                @click=${this._toggleNetworkSearch}
                @pointerdown=${stopPropagation}
              >
                ${PublishIcon()}
+                ${!showLabel
+                  ? html`<affine-tooltip>Search</affine-tooltip>`
+                  : nothing}
+                ${showLabel
+                  ? html`<span class="chat-input-icon-label">Search</span>`
+                  : nothing}
              </div>
            `
          : nothing}
        <div
-          class="chat-network-search"
+          class="chat-input-icon"
          data-testid="chat-reasoning"
          data-active=${this._isReasoningActive}
          @click=${this._toggleReasoning}
          @pointerdown=${stopPropagation}
        >
          ${ThinkingIcon()}
+          ${!showLabel
+            ? html`<affine-tooltip>Reason</affine-tooltip>`
+            : nothing}
+          ${showLabel
+            ? html`<span class="chat-input-icon-label">Reason</span>`
+            : nothing}
        </div>
-        ${images.length < MaximumImageCount
-          ? html`<div
-              data-testid="chat-panel-input-image-upload"
-              class="image-upload"
-              @click=${this._uploadImageFiles}
-            >
-              ${ImageIcon()}
-            </div>`
-          : nothing}
        ${status === 'transmitting'
          ? html`<div @click=${this._handleAbort} data-testid="chat-panel-stop">
              ${ChatAbortIcon}
@@ -456,13 +467,6 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
    reportResponse('aborted:stop');
  };

-  private readonly _handleClear = async () => {
-    if (this._isClearDisabled) {
-      return;
-    }
-    await this.cleanupHistories();
-  };
-
  private readonly _toggleNetworkSearch = (e: MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
@@ -493,6 +497,8 @@ export class AIChatInput extends SignalWatcher(WithDisposable(LitElement)) {
  };

  private readonly _uploadImageFiles = async (_e: MouseEvent) => {
+    if (this._isImageUploadDisabled) return;
+
    const images = await openFileOrFiles({
      acceptType: 'Images',
      multiple: true,
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/ai-history-clear.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/ai-history-clear.ts
@@ -0,0 +1,93 @@
+import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { NotificationProvider } from '@blocksuite/affine/shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
+import type { EditorHost } from '@blocksuite/affine/std';
+import { ShadowlessElement } from '@blocksuite/affine/std';
+import type { Store } from '@blocksuite/affine/store';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import type { ChatContextValue } from '../../chat-panel/chat-context';
+import { AIProvider } from '../../provider';
+
+export class AIHistoryClear extends WithDisposable(ShadowlessElement) {
+  @property({ attribute: false })
+  accessor chatContextValue!: ChatContextValue;
+
+  @property({ attribute: false })
+  accessor getSessionId!: () => Promise<string | undefined>;
+
+  @property({ attribute: false })
+  accessor host!: EditorHost;
+
+  @property({ attribute: false })
+  accessor doc!: Store;
+
+  @property({ attribute: false })
+  accessor onHistoryCleared!: () => void;
+
+  static override styles = css`
+    .chat-history-clear {
+      cursor: pointer;
+      color: ${unsafeCSSVarV2('icon/primary')};
+    }
+    .chat-history-clear[aria-disabled='true'] {
+      cursor: not-allowed;
+      color: ${unsafeCSSVarV2('icon/secondary')};
+    }
+  `;
+
+  private get _isHistoryClearDisabled() {
+    return (
+      this.chatContextValue.status === 'loading' ||
+      this.chatContextValue.status === 'transmitting' ||
+      !this.chatContextValue.messages.length
+    );
+  }
+
+  private readonly _cleanupHistories = async () => {
+    if (this._isHistoryClearDisabled) {
+      return;
+    }
+    const sessionId = await this.getSessionId();
+    const notification = this.host.std.getOptional(NotificationProvider);
+    if (!notification) return;
+    try {
+      if (
+        await notification.confirm({
+          title: 'Clear History',
+          message:
+            'Are you sure you want to clear all history? This action will permanently delete all content, including all chat logs and data, and cannot be undone.',
+          confirmText: 'Confirm',
+          cancelText: 'Cancel',
+        })
+      ) {
+        const actionIds = this.chatContextValue.messages
+          .filter(item => 'sessionId' in item)
+          .map(item => item.sessionId);
+        await AIProvider.histories?.cleanup(
+          this.doc.workspace.id,
+          this.doc.id,
+          [...(sessionId ? [sessionId] : []), ...(actionIds || [])]
+        );
+        notification.toast('History cleared');
+        this.onHistoryCleared?.();
+      }
+    } catch {
+      notification.toast('Failed to clear history');
+    }
+  };
+
+  override render() {
+    return html`
+      <div
+        class="chat-history-clear"
+        aria-disabled=${this._isHistoryClearDisabled}
+        @click=${this._cleanupHistories}
+        data-testid="chat-panel-clear"
+      >
+        Clear
+      </div>
+    `;
+  }
+}
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/index.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-history-clear/index.ts
@@ -0,0 +1 @@
+export * from './ai-history-clear';
--- a/packages/frontend/core/src/blocksuite/ai/effects.ts
+++ b/packages/frontend/core/src/blocksuite/ai/effects.ts
@@ -37,7 +37,8 @@ import { ChatPanelDocChip } from './components/ai-chat-chips/doc-chip';
 import { ChatPanelFileChip } from './components/ai-chat-chips/file-chip';
 import { ChatPanelTagChip } from './components/ai-chat-chips/tag-chip';
 import { AIChatComposer } from './components/ai-chat-composer';
-import { AIChatInput } from './components/ai-chat-input/ai-chat-input';
+import { AIChatInput } from './components/ai-chat-input';
+import { AIHistoryClear } from './components/ai-history-clear';
 import { effects as componentAiItemEffects } from './components/ai-item';
 import { AIScrollableTextRenderer } from './components/ai-scrollable-text-renderer';
 import { AskAIButton } from './components/ask-ai-button';
@@ -98,6 +99,7 @@ export function registerAIEffects() {
  customElements.define('ai-chat-input', AIChatInput);
  customElements.define('ai-chat-composer', AIChatComposer);
  customElements.define('chat-panel-chips', ChatPanelChips);
+  customElements.define('ai-history-clear', AIHistoryClear);
  customElements.define('chat-panel-add-popover', ChatPanelAddPopover);
  customElements.define(
    'chat-panel-candidates-popover',
--- a/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
+++ b/packages/frontend/core/src/blocksuite/ai/peek-view/chat-block-peek-view.ts
@@ -502,6 +502,15 @@ export class AIChatBlockPeekView extends LitElement {
        <div class="new-chat-messages-container">
          ${this.CurrentMessages(currentChatMessages)}
        </div>
+        <div class="history-clear-container">
+          <ai-history-clear
+            .host=${this.host}
+            .doc=${this.host.doc}
+            .getSessionId=${this._getSessionId}
+            .onHistoryCleared=${this._onHistoryCleared}
+            .chatContextValue=${chatContext}
+          ></ai-history-clear>
+        </div>
      </div>
      <ai-chat-composer
        .host=${host}
@@ -510,7 +519,6 @@ export class AIChatBlockPeekView extends LitElement {
        .createSessionId=${this._createSessionId}
        .chatContextValue=${chatContext}
        .updateContext=${updateContext}
-        .onHistoryCleared=${this._onHistoryCleared}
        .isVisible=${this.isComposerVisible}
        .updateEmbeddingProgress=${this._updateEmbeddingProgress}
        .networkSearchConfig=${networkSearchConfig}
--- a/packages/frontend/core/src/blocksuite/ai/peek-view/styles.ts
+++ b/packages/frontend/core/src/blocksuite/ai/peek-view/styles.ts
@@ -57,4 +57,11 @@ export const PeekViewStyles = css`
    flex-direction: column;
    gap: 8px;
  }
+
+  .history-clear-container {
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    width: 100%;
+  }
 `;