feat(core): ai tools css style adjustment (#12891)

## Summary by CodeRabbit - **New Features** - Added collapsible behavior to tool result cards, allowing users to expand or collapse detailed results. - Footer icons are now displayed on collapsed cards, showing up to three relevant icons for quick reference. - Improved icon rendering ensures consistent display, including fallbacks when favicons are missing. - Tool result cards and chat messages now dynamically adjust to panel width, enhancing responsive display. - Web crawl and web search tools display favicons in result footers for better visual context. - **Style** - Enhanced UI interaction with updated margins, cursor styles, and overlapping icon visuals for a cleaner look.
2025-06-23 11:44:24 +08:00 · 2025-06-23 11:44:24 +08:00 · 12fce1f21a
commit 12fce1f21a
parent 011f92f7da
6 changed files with 146 additions and 32 deletions
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/chat-panel-messages.ts
@ -7,6 +7,7 @@ import type { EditorHost } from '@blocksuite/affine/std';
 import { ShadowlessElement } from '@blocksuite/affine/std';
 import type { BaseSelection, ExtensionType } from '@blocksuite/affine/store';
 import { ArrowDownBigIcon as ArrowDownIcon } from '@blocksuite/icons/lit';
+import type { 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';
@ -173,6 +174,9 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
  @property({ attribute: false })
  accessor reasoningConfig!: AIReasoningConfig;

+  @property({ attribute: false })
+  accessor panelWidth!: Signal<number | undefined>;
+
  @query('.chat-panel-messages-container')
  accessor messagesContainer: HTMLDivElement | null = null;

@ -300,6 +304,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
                    .affineFeatureFlagService=${this.affineFeatureFlagService}
                    .getSessionId=${this.getSessionId}
                    .retry=${() => this.retry()}
+                    .panelWidth=${this.panelWidth}
                  ></chat-message-assistant>`;
                } else if (isChatAction(item)) {
                  return html`<chat-message-action
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/index.ts
@ -458,6 +458,7 @@ export class ChatPanel extends SignalWatcher(
        .affineFeatureFlagService=${this.affineFeatureFlagService}
        .networkSearchConfig=${this.networkSearchConfig}
        .reasoningConfig=${this.reasoningConfig}
+        .panelWidth=${this._sidebarWidth}
      ></chat-panel-messages>
      <ai-chat-composer
        .host=${this.host}
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/message/assistant.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/message/assistant.ts
@ -8,6 +8,7 @@ import { isInsidePageEditor } from '@blocksuite/affine/shared/utils';
 import type { EditorHost } from '@blocksuite/affine/std';
 import { ShadowlessElement } from '@blocksuite/affine/std';
 import type { ExtensionType } from '@blocksuite/affine/store';
+import type { Signal } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

@ -78,6 +79,9 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
  @property({ attribute: 'data-testid', reflect: true })
  accessor testId = 'chat-message-assistant';

+  @property({ attribute: false })
+  accessor panelWidth!: Signal<number | undefined>;
+
  renderHeader() {
    const isWithDocs =
      'content' in this.item &&
@ -151,6 +155,7 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
          <web-crawl-tool
            .data=${streamObject}
            .host=${this.host}
+            .width=${this.panelWidth}
          ></web-crawl-tool>
        `;
      case 'web_search_exa':
@ -158,6 +163,7 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
          <web-search-tool
            .data=${streamObject}
            .host=${this.host}
+            .width=${this.panelWidth}
          ></web-search-tool>
        `;
      default:
@ -180,6 +186,7 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
          <web-crawl-tool
            .data=${streamObject}
            .host=${this.host}
+            .width=${this.panelWidth}
          ></web-crawl-tool>
        `;
      case 'web_search_exa':
@ -187,6 +194,7 @@ export class ChatMessageAssistant extends WithDisposable(ShadowlessElement) {
          <web-search-tool
            .data=${streamObject}
            .host=${this.host}
+            .width=${this.panelWidth}
          ></web-search-tool>
        `;
      default:
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/tools/tool-result-card.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/tools/tool-result-card.ts
@ -1,18 +1,21 @@
-import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/lit';
 import { ImageProxyService } from '@blocksuite/affine/shared/adapters';
 import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { type EditorHost, ShadowlessElement } from '@blocksuite/affine/std';
 import { ToggleDownIcon } from '@blocksuite/icons/lit';
+import { type Signal, signal } from '@preact/signals-core';
 import { css, html, nothing, type TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';

 interface ToolResult {
-  title?: string;
+  title: string;
  icon?: string | TemplateResult<1>;
  content?: string;
 }

-export class ToolResultCard extends WithDisposable(ShadowlessElement) {
+export class ToolResultCard extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
  static override styles = css`
    .ai-tool-wrapper {
      padding: 12px;
@ -25,6 +28,8 @@ export class ToolResultCard extends WithDisposable(ShadowlessElement) {
        justify-content: space-between;
        align-items: center;
        gap: 8px;
+        margin-right: 3px;
+        cursor: pointer;
      }

      .ai-icon {
@ -54,11 +59,23 @@ export class ToolResultCard extends WithDisposable(ShadowlessElement) {
        display: flex;
        flex-direction: column;
        gap: 4px;
-        margin: 4px 2px 4px 12px;
+        margin: 8px 2px 4px 12px;
        padding-left: 20px;
        border-left: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
      }

+      .ai-tool-results[data-collapsed='true'] {
+        display: none;
+      }
+
+      .result-item {
+        margin-top: 12px;
+      }
+
+      .result-item:first-child {
+        margin-top: 0;
+      }
+
      .result-header {
        display: flex;
        justify-content: space-between;
@ -86,19 +103,54 @@ export class ToolResultCard extends WithDisposable(ShadowlessElement) {
          border-radius: 100%;
          border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
        }
+
+        svg {
+          width: 24px;
+          height: 24px;
+          color: ${unsafeCSSVarV2('icon/primary')};
+        }
      }

      .result-content {
        font-size: 12px;
        line-height: 20px;
        color: ${unsafeCSSVarV2('text/secondary')};
-        margin-top: 8px;
+        margin-top: 4px;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
+
+      .footer-icons {
+        display: flex;
+        position: relative;
+        height: 24px;
+        align-items: center;
+      }
+
+      .footer-icon {
+        width: 18px;
+        height: 18px;
+
+        img {
+          width: 18px;
+          height: 18px;
+          border-radius: 100%;
+          border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+        }
+
+        svg {
+          width: 18px;
+          height: 18px;
+          color: ${unsafeCSSVarV2('icon/primary')};
+        }
+      }
+
+      .footer-icon:not(:first-child) {
+        margin-left: -8px;
+      }
    }
  `;

@ -111,41 +163,35 @@ export class ToolResultCard extends WithDisposable(ShadowlessElement) {
  @property({ attribute: false })
  accessor icon!: TemplateResult<1> | string;

+  @property({ attribute: false })
+  accessor footerIcons: TemplateResult<1>[] | string[] = [];
+
  @property({ attribute: false })
  accessor results!: ToolResult[];

-  protected override render() {
-    const imageProxyService = this.host.store.get(ImageProxyService);
+  @property({ attribute: false })
+  accessor width: Signal<number | undefined> = signal(undefined);

+  @state()
+  private accessor isCollapsed = true;
+
+  protected override render() {
    return html`
      <div class="ai-tool-wrapper">
-        <div class="ai-tool-header" data-type="result">
-          <div class="ai-icon">${this.icon}</div>
+        <div class="ai-tool-header" @click=${this.toggleCard}>
+          <div class="ai-icon">${this.renderIcon(this.icon)}</div>
          <div class="ai-tool-name">${this.name}</div>
-          <div class="ai-icon">${ToggleDownIcon()}</div>
+          ${this.isCollapsed
+            ? this.renderFooterIcons()
+            : html` <div class="ai-icon">${ToggleDownIcon()}</div> `}
        </div>
-        <div class="ai-tool-results">
+        <div class="ai-tool-results" data-collapsed=${this.isCollapsed}>
          ${this.results.map(
            result => html`
-              <div>
+              <div class="result-item">
                <div class="result-header">
-                  <div class="result-title">${result.title || 'Untitled'}</div>
-                  ${result.icon
-                    ? html`
-                        <div class="result-icon">
-                          ${typeof result.icon === 'string'
-                            ? html`<img
-                                src=${imageProxyService.buildUrl(result.icon)}
-                                alt="icon"
-                                @error=${(e: Event) => {
-                                  const target = e.target as HTMLImageElement;
-                                  target.style.display = 'none';
-                                }}
-                              />`
-                            : result.icon}
-                        </div>
-                      `
-                    : nothing}
+                  <div class="result-title">${result.title}</div>
+                  <div class="result-icon">${this.renderIcon(result.icon)}</div>
                </div>
                ${result.content
                  ? html` <div class="result-content">${result.content}</div> `
@ -157,4 +203,43 @@ export class ToolResultCard extends WithDisposable(ShadowlessElement) {
      </div>
    `;
  }
+
+  private renderFooterIcons() {
+    if (!this.footerIcons || this.footerIcons.length === 0) {
+      return nothing;
+    }
+
+    const maxIcons = Number(this.width.value) <= 400 ? 1 : 3;
+    const visibleIcons = this.footerIcons.slice(0, maxIcons);
+
+    return html`
+      <div class="footer-icons">
+        ${visibleIcons.map(
+          (icon, index) => html`
+            <div
+              class="footer-icon"
+              style="z-index: ${visibleIcons.length - index}"
+            >
+              ${this.renderIcon(icon)}
+            </div>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  private renderIcon(icon: string | TemplateResult<1> | undefined) {
+    if (!icon) {
+      return nothing;
+    }
+    const imageProxyService = this.host.store.get(ImageProxyService);
+    if (typeof icon === 'string') {
+      return html` <img src=${imageProxyService.buildUrl(icon)} /> `;
+    }
+    return html`${icon}`;
+  }
+
+  private toggleCard() {
+    this.isCollapsed = !this.isCollapsed;
+  }
 }
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/tools/web-crawl.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/tools/web-crawl.ts
@ -1,6 +1,7 @@
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import { type EditorHost, ShadowlessElement } from '@blocksuite/affine/std';
 import { WebIcon } from '@blocksuite/icons/lit';
+import type { Signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

@ -33,6 +34,9 @@ export class WebCrawlTool extends WithDisposable(ShadowlessElement) {
  @property({ attribute: false })
  accessor host!: EditorHost;

+  @property({ attribute: false })
+  accessor width!: Signal<number | undefined>;
+
  renderToolCall() {
    return html`
      <tool-call-card
@ -52,8 +56,9 @@ export class WebCrawlTool extends WithDisposable(ShadowlessElement) {
    return html`
      <tool-result-card
        .host=${this.host}
-        .name=${'Reading the website'}
+        .name=${'The reading is complete, and this webpage has been read'}
        .icon=${WebIcon()}
+        .footerIcons=${favicon ? [favicon] : []}
        .results=${[
          {
            title: title,
@ -61,6 +66,7 @@ export class WebCrawlTool extends WithDisposable(ShadowlessElement) {
            content: content,
          },
        ]}
+        .width=${this.width}
      ></tool-result-card>
    `;
  }
--- a/packages/frontend/core/src/blocksuite/ai/chat-panel/tools/web-search.ts
+++ b/packages/frontend/core/src/blocksuite/ai/chat-panel/tools/web-search.ts
@ -1,6 +1,7 @@
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import { type EditorHost, ShadowlessElement } from '@blocksuite/affine/std';
 import { WebIcon } from '@blocksuite/icons/lit';
+import type { Signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

@ -33,6 +34,9 @@ export class WebSearchTool extends WithDisposable(ShadowlessElement) {
  @property({ attribute: false })
  accessor host!: EditorHost;

+  @property({ attribute: false })
+  accessor width!: Signal<number | undefined>;
+
  renderToolCall() {
    return html`
      <tool-call-card
@ -50,17 +54,22 @@ export class WebSearchTool extends WithDisposable(ShadowlessElement) {
      const { favicon, title, content } = item;
      return {
        title: title,
-        icon: favicon,
+        icon: favicon || WebIcon(),
        content: content,
      };
    });
+    const footerIcons = this.data.result
+      .map(item => item.favicon)
+      .filter(Boolean);

    return html`
      <tool-result-card
        .host=${this.host}
        .name=${'The search is complete, and these webpages have been searched'}
        .icon=${WebIcon()}
+        .footerIcons=${footerIcons}
        .results=${results}
+        .width=${this.width}
      ></tool-result-card>
    `;
  }