fix(core): adjust ai chat tool calling style (#12985)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Enhanced the visual appearance of tool cards with improved
backgrounds, shine animation, refined layouts, and smoother
collapse/expand transitions.
* Updated icon sizes, hover effects, and icon presentation for a more
polished user experience.

* **Bug Fixes**
* Improved result rendering logic to prevent errors when result arrays
are empty.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/components/ai-tools/tool-call-card.ts

@@ -12,6 +12,7 @@ export class ToolCallCard extends WithDisposable(ShadowlessElement) {
       margin: 8px 0;
       border-radius: 8px;
       border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+      background-color: ${unsafeCSSVarV2('layer/background/primary')};
 
       .ai-tool-header {
         display: flex;
@@ -49,6 +50,37 @@ export class ToolCallCard extends WithDisposable(ShadowlessElement) {
         color: ${unsafeCSSVarV2('icon/activated')};
       }
     }
+    .ai-tool-call-wrapper.shine {
+      position: relative;
+      overflow: hidden;
+      user-select: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        width: 80px;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          ${unsafeCSSVarV2('layer/background/primary')},
+          transparent
+        );
+        animation: shine 1.8s infinite;
+      }
+    }
+
+    @keyframes shine {
+      0% {
+        left: -80px;
+      }
+      100% {
+        left: 100%;
+      }
+    }
   `;
 
   @property({ attribute: false })
@@ -89,7 +121,7 @@ export class ToolCallCard extends WithDisposable(ShadowlessElement) {
 
   protected override render() {
     return html`
-      <div class="ai-tool-call-wrapper">
+      <div class="ai-tool-call-wrapper shine">
         <div class="ai-tool-header">
           <div class="ai-icon">${this.icon}</div>
           <div class="ai-tool-name">

packages/frontend/core/src/blocksuite/ai/components/ai-tools/tool-result-card.ts

@@ -22,6 +22,8 @@ export class ToolResultCard extends SignalWatcher(
       margin: 8px 0;
       border-radius: 8px;
       border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+      color: ${unsafeCSSVarV2('icon/secondary')};
+      transition: color 0.23s ease;
 
       .ai-tool-header {
         display: flex;
@@ -39,7 +41,6 @@ export class ToolResultCard extends SignalWatcher(
         svg {
           width: 24px;
           height: 24px;
-          color: ${unsafeCSSVarV2('icon/primary')};
         }
       }
 
@@ -49,27 +50,44 @@ export class ToolResultCard extends SignalWatcher(
         line-height: 24px;
         margin-left: 0px;
         margin-right: auto;
-        color: ${unsafeCSSVarV2('icon/primary')};
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
       .ai-tool-results {
-        display: flex;
+        display: grid;
-        flex-direction: column;
+        grid-template-rows: 1fr;
-        gap: 4px;
+        transition:
-        margin: 8px 2px 4px 12px;
+          grid-template-rows 0.4s cubic-bezier(0.07, 0.83, 0.46, 1),
-        padding-left: 20px;
+          opacity 0.4s ease,
-        border-left: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+          margin-top 0.23s ease,
+          transform 0.43s ease;
+        padding-left: 11px;
+        margin-top: 4px;
+        transform-origin: bottom;
       }
 
       .ai-tool-results[data-collapsed='true'] {
-        display: none;
+        grid-template-rows: 0fr;
+        opacity: 0;
+        transform: translateY(10px);
+        margin-top: 0px;
+      }
+
+      .ai-tool-result-collapse-wrapper {
+        overflow: hidden;
+      }
+
+      .ai-tool-results-content {
+        display: flex;
+        flex-direction: column;
+        padding: 4px 2px 4px 20px;
+        border-left: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
       }
 
       .result-item {
-        margin-top: 12px;
+        margin-top: 16px;
       }
 
       .result-item:first-child {
@@ -80,12 +98,12 @@ export class ToolResultCard extends SignalWatcher(
         display: flex;
         justify-content: space-between;
         align-items: center;
+        line-height: 24px;
       }
 
       .result-title {
         font-size: 12px;
         font-weight: 400;
-        line-height: 20px;
         color: ${unsafeCSSVarV2('icon/primary')};
         overflow: hidden;
         text-overflow: ellipsis;
@@ -94,19 +112,25 @@ export class ToolResultCard extends SignalWatcher(
       }
 
       .result-icon {
-        width: 24px;
+        width: 18px;
-        height: 24px;
+        height: 18px;
+
+        &:has(img) {
+          background-color: ${unsafeCSSVarV2('layer/background/primary')};
+          border-radius: 100%;
+          border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+        }
 
         img {
-          width: 24px;
+          width: inherit;
-          height: 24px;
+          height: inherit;
           border-radius: 100%;
           border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
         }
 
         svg {
-          width: 24px;
+          width: inherit;
-          height: 24px;
+          height: inherit;
           color: ${unsafeCSSVarV2('icon/primary')};
         }
       }
@@ -128,17 +152,22 @@ export class ToolResultCard extends SignalWatcher(
         position: relative;
         height: 24px;
         align-items: center;
+        opacity: 0.5;
+        transition: opacity 0.23s ease;
+        user-select: none;
       }
 
       .footer-icon {
         width: 18px;
         height: 18px;
+        background-color: ${unsafeCSSVarV2('layer/background/primary')};
+        border-radius: 100%;
+        border: 0.5px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
 
         img {
           width: 18px;
           height: 18px;
           border-radius: 100%;
-          border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
         }
 
         svg {
@@ -152,6 +181,13 @@ export class ToolResultCard extends SignalWatcher(
         margin-left: -8px;
       }
     }
+    .ai-tool-result-wrapper:hover {
+      color: ${unsafeCSSVarV2('icon/primary')};
+
+      .footer-icons {
+        opacity: 1;
+      }
+    }
   `;
 
   @property({ attribute: false })
@@ -186,19 +222,27 @@ export class ToolResultCard extends SignalWatcher(
             : html` <div class="ai-icon">${ToggleDownIcon()}</div> `}
         </div>
         <div class="ai-tool-results" data-collapsed=${this.isCollapsed}>
-          ${this.results.map(
+          <div class="ai-tool-result-collapse-wrapper">
-            result => html`
+            <div class="ai-tool-results-content">
-              <div class="result-item">
+              ${this.results.map(
-                <div class="result-header">
+                result => html`
-                  <div class="result-title">${result.title}</div>
+                  <div class="result-item">
-                  <div class="result-icon">${this.renderIcon(result.icon)}</div>
+                    <div class="result-header">
-                </div>
+                      <div class="result-title">${result.title}</div>
-                ${result.content
+                      <div class="result-icon">
-                  ? html` <div class="result-content">${result.content}</div> `
+                        ${this.renderIcon(result.icon)}
-                  : nothing}
+                      </div>
-              </div>
+                    </div>
-            `
+                    ${result.content
-          )}
+                      ? html`<div class="result-content">
+                          ${result.content}
+                        </div>`
+                      : nothing}
+                  </div>
+                `
+              )}
+            </div>
+          </div>
         </div>
       </div>
     `;
@@ -219,10 +263,7 @@ export class ToolResultCard extends SignalWatcher(
       <div class="footer-icons">
         ${visibleIcons.map(
           (icon, index) => html`
-            <div
+            <div class="footer-icon" style="z-index: ${index}">
-              class="footer-icon"
-              style="z-index: ${visibleIcons.length - index}"
-            >
               ${this.renderIcon(icon)}
             </div>
           `

packages/frontend/core/src/blocksuite/ai/components/ai-tools/web-crawl.ts

@@ -57,7 +57,7 @@ export class WebCrawlTool extends WithDisposable(ShadowlessElement) {
     }
 
     const result = this.data.result;
-    if (result && Array.isArray(result)) {
+    if (result && Array.isArray(result) && result.length > 0) {
       const { favicon, title, content } = result[0];
       return html`
         <tool-result-card