feat(core): add ai tool call error type and ui (#12941)

<img width="775" alt="截屏2025-06-26 16 17 05" src="https://github.com/user-attachments/assets/ed6bcae3-94af-4eb1-81e8-710f36ef5e46" />  ## Summary by CodeRabbit * **New Features** * Introduced a tool to crawl web pages and extract key information. * Added a visual component to display tool call failures in the AI interface. * Enhanced error reporting for document and web search tools with structured error messages. * **Improvements** * Updated error handling across AI tools and components for more consistent and informative feedback. * Default values added for tool card components to improve reliability and display. * **Bug Fixes** * Improved handling of error and empty states in web crawl and web search result displays.
2026-02-13 21:05:19 +00:00 · 2025-06-26 17:38:19 +08:00
parent 2171d1bfe2
commit a7185e419c
15 changed files with 240 additions and 121 deletions
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-message-content/stream-objects.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-message-content/stream-objects.ts
@@ -1,6 +1,5 @@
 import type { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
-import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import type { EditorHost } from '@blocksuite/affine/std';
 import { ShadowlessElement } from '@blocksuite/affine/std';
 import type { ExtensionType } from '@blocksuite/affine/store';
@@ -21,13 +20,6 @@ export class ChatContentStreamObjects extends WithDisposable(
      border-radius: 8px;
      background-color: rgba(0, 0, 0, 0.05);
    }
-
-    .tool-wrapper {
-      padding: 12px;
-      margin: 8px 0;
-      border-radius: 8px;
-      border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
-    }
  `;

  @property({ attribute: false })
@@ -70,12 +62,16 @@ export class ChatContentStreamObjects extends WithDisposable(
            .width=${this.width}
          ></web-search-tool>
        `;
-      default:
+      default: {
+        const name = streamObject.toolName + ' tool calling';
        return html`
-          <div class="tool-wrapper">
-            ${streamObject.toolName} tool calling...
-          </div>
+          <tool-call-card
+            .name=${name}
+            .host=${this.host}
+            .width=${this.width}
+          ></tool-call-card>
        `;
+      }
    }
  }

@@ -101,12 +97,16 @@ export class ChatContentStreamObjects extends WithDisposable(
            .width=${this.width}
          ></web-search-tool>
        `;
-      default:
+      default: {
+        const name = streamObject.toolName + ' tool result';
        return html`
-          <div class="tool-wrapper">
-            ${streamObject.toolName} tool result...
-          </div>
+          <tool-result-card
+            .name=${name}
+            .host=${this.host}
+            .width=${this.width}
+          ></tool-result-card>
        `;
+      }
    }
  }

--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/tool-call-card.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/tool-call-card.ts
@@ -1,6 +1,7 @@
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
 import { ShadowlessElement } from '@blocksuite/affine/std';
+import { ToolIcon } from '@blocksuite/icons/lit';
 import { css, html, type TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';

@@ -51,10 +52,10 @@ export class ToolCallCard extends WithDisposable(ShadowlessElement) {
  `;

  @property({ attribute: false })
-  accessor name!: string;
+  accessor name: string = 'Tool calling';

  @property({ attribute: false })
-  accessor icon!: TemplateResult<1>;
+  accessor icon: TemplateResult<1> = ToolIcon();

  @state()
  private accessor dotsText = '.';
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/tool-failed-card.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/tool-failed-card.ts
@@ -0,0 +1,64 @@
+import { WithDisposable } from '@blocksuite/affine/global/lit';
+import { unsafeCSSVarV2 } from '@blocksuite/affine/shared/theme';
+import { ShadowlessElement } from '@blocksuite/affine/std';
+import { ToolIcon } from '@blocksuite/icons/lit';
+import { css, html, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class ToolFailedCard extends WithDisposable(ShadowlessElement) {
+  static override styles = css`
+    .ai-tool-failed-wrapper {
+      padding: 12px;
+      margin: 8px 0;
+      border-radius: 8px;
+      border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+
+      .ai-tool-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .ai-icon {
+        width: 24px;
+        height: 24px;
+
+        svg {
+          width: 24px;
+          height: 24px;
+          color: ${unsafeCSSVarV2('button/error')};
+        }
+      }
+
+      .ai-error-name {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 24px;
+        margin-left: 0px;
+        margin-right: auto;
+        color: ${unsafeCSSVarV2('button/error')};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  `;
+
+  @property({ attribute: false })
+  accessor name: string = 'Tool calling failed';
+
+  @property({ attribute: false })
+  accessor icon: TemplateResult<1> = ToolIcon();
+
+  protected override render() {
+    return html`
+      <div class="ai-tool-failed-wrapper">
+        <div class="ai-tool-header">
+          <div class="ai-icon">${this.icon}</div>
+          <div class="ai-error-name">${this.name}</div>
+        </div>
+      </div>
+    `;
+  }
+}
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/tool-result-card.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/tool-result-card.ts
@@ -2,7 +2,7 @@ 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 { ToggleDownIcon, ToolIcon } from '@blocksuite/icons/lit';
 import { type Signal } from '@preact/signals-core';
 import { css, html, nothing, type TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -17,7 +17,7 @@ export class ToolResultCard extends SignalWatcher(
  WithDisposable(ShadowlessElement)
 ) {
  static override styles = css`
-    .ai-tool-wrapper {
+    .ai-tool-result-wrapper {
      padding: 12px;
      margin: 8px 0;
      border-radius: 8px;
@@ -158,16 +158,16 @@ export class ToolResultCard extends SignalWatcher(
  accessor host!: EditorHost;

  @property({ attribute: false })
-  accessor name!: string;
+  accessor name: string = 'Tool result';

  @property({ attribute: false })
-  accessor icon!: TemplateResult<1> | string;
+  accessor icon: TemplateResult<1> | string = ToolIcon();

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

  @property({ attribute: false })
-  accessor results!: ToolResult[];
+  accessor results: ToolResult[] = [];

  @property({ attribute: false })
  accessor width: Signal<number | undefined> | undefined;
@@ -177,7 +177,7 @@ export class ToolResultCard extends SignalWatcher(

  protected override render() {
    return html`
-      <div class="ai-tool-wrapper">
+      <div class="ai-tool-result-wrapper">
        <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>
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/type.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/type.ts
@@ -0,0 +1,5 @@
+export interface ToolError {
+  type: 'error';
+  name: string;
+  message: string;
+}
--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/web-crawl.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/web-crawl.ts
@@ -5,6 +5,8 @@ import type { Signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

+import type { ToolError } from './type';
+
 interface WebCrawlToolCall {
  type: 'tool-call';
  toolCallId: string;
@@ -17,14 +19,17 @@ interface WebCrawlToolResult {
  toolCallId: string;
  toolName: string;
  args: { url: string };
-  result: Array<{
-    title: string;
-    url: string;
-    content: string;
-    favicon: string;
-    publishedDate: string;
-    author: string;
-  }>;
+  result:
+    | Array<{
+        title: string;
+        url: string;
+        content: string;
+        favicon: string;
+        publishedDate: string;
+        author: string;
+      }>
+    | ToolError
+    | null;
 }

 export class WebCrawlTool extends WithDisposable(ShadowlessElement) {
@@ -51,23 +56,32 @@ export class WebCrawlTool extends WithDisposable(ShadowlessElement) {
      return nothing;
    }

-    const { favicon, title, content } = this.data.result[0];
+    const result = this.data.result;
+    if (result && Array.isArray(result)) {
+      const { favicon, title, content } = result[0];
+      return html`
+        <tool-result-card
+          .host=${this.host}
+          .name=${'The reading is complete, and this webpage has been read'}
+          .icon=${WebIcon()}
+          .footerIcons=${favicon ? [favicon] : []}
+          .results=${[
+            {
+              title: title,
+              icon: favicon,
+              content: content,
+            },
+          ]}
+          .width=${this.width}
+        ></tool-result-card>
+      `;
+    }

    return html`
-      <tool-result-card
-        .host=${this.host}
-        .name=${'The reading is complete, and this webpage has been read'}
+      <tool-call-failed
+        .name=${'Web reading failed'}
        .icon=${WebIcon()}
-        .footerIcons=${favicon ? [favicon] : []}
-        .results=${[
-          {
-            title: title,
-            icon: favicon,
-            content: content,
-          },
-        ]}
-        .width=${this.width}
-      ></tool-result-card>
+      ></tool-call-failed>
    `;
  }

--- a/packages/frontend/core/src/blocksuite/ai/components/ai-tools/web-search.ts
+++ b/packages/frontend/core/src/blocksuite/ai/components/ai-tools/web-search.ts
@@ -5,6 +5,8 @@ import type { Signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';

+import type { ToolError } from './type';
+
 interface WebSearchToolCall {
  type: 'tool-call';
  toolCallId: string;
@@ -17,14 +19,17 @@ interface WebSearchToolResult {
  toolCallId: string;
  toolName: string;
  args: { url: string };
-  result: Array<{
-    title: string;
-    url: string;
-    content: string;
-    favicon: string;
-    publishedDate: string;
-    author: string;
-  }>;
+  result:
+    | Array<{
+        title: string;
+        url: string;
+        content: string;
+        favicon: string;
+        publishedDate: string;
+        author: string;
+      }>
+    | ToolError
+    | null;
 }

 export class WebSearchTool extends WithDisposable(ShadowlessElement) {
@@ -50,27 +55,35 @@ export class WebSearchTool extends WithDisposable(ShadowlessElement) {
      return nothing;
    }

-    const results = this.data.result.map(item => {
-      const { favicon, title, content } = item;
-      return {
-        title: title,
-        icon: favicon || WebIcon(),
-        content: content,
-      };
-    });
-    const footerIcons = this.data.result
-      .map(item => item.favicon)
-      .filter(Boolean);
+    const result = this.data.result;
+    if (result && Array.isArray(result)) {
+      const results = result.map(item => {
+        const { favicon, title, content } = item;
+        return {
+          title: title,
+          icon: favicon || WebIcon(),
+          content: content,
+        };
+      });
+      const footerIcons = 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>
+      `;
+    }

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

--- a/packages/frontend/core/src/blocksuite/ai/effects.ts
+++ b/packages/frontend/core/src/blocksuite/ai/effects.ts
@@ -45,6 +45,7 @@ import { ChatContentRichText } from './components/ai-message-content/rich-text';
 import { ChatContentStreamObjects } from './components/ai-message-content/stream-objects';
 import { AIScrollableTextRenderer } from './components/ai-scrollable-text-renderer';
 import { ToolCallCard } from './components/ai-tools/tool-call-card';
+import { ToolFailedCard } from './components/ai-tools/tool-failed-card';
 import { ToolResultCard } from './components/ai-tools/tool-result-card';
 import { WebCrawlTool } from './components/ai-tools/web-crawl';
 import { WebSearchTool } from './components/ai-tools/web-search';
@@ -167,6 +168,7 @@ export function registerAIEffects() {

  customElements.define('tool-call-card', ToolCallCard);
  customElements.define('tool-result-card', ToolResultCard);
+  customElements.define('tool-call-failed', ToolFailedCard);
  customElements.define('web-crawl-tool', WebCrawlTool);
  customElements.define('web-search-tool', WebSearchTool);