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

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## 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.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

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}

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:

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() {
+  @property({ attribute: false })
-    const imageProxyService = this.host.store.get(ImageProxyService);
+  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-tool-header" @click=${this.toggleCard}>
-          <div class="ai-icon">${this.icon}</div>
+          <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>
+                  <div class="result-title">${result.title}</div>
-                  ${result.icon
+                  <div class="result-icon">${this.renderIcon(result.icon)}</div>
-                    ? 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>
                 ${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;
+  }
 }

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>
     `;
   }

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>
     `;
   }