From 7d1db72b3e174ea44f572e1dd57e17e438aa32ee Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Tue, 24 Mar 2026 21:36:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=B6=88=E6=81=AFturn?=
 =?UTF-8?q?=E6=9C=89=E6=97=B6=E5=B1=95=E5=BC=80=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/globals.css                                | 14 ++++++++++++++
 src/components/ai-elements/tool.tsx                | 12 +++++++++---
 .../message/virtualized-message-thread.tsx         |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index eb4f3b0..9bbe94f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -231,6 +231,20 @@
 }
 
 
+/* Tool collapsible: fade-in on expand (height must change instantly for virtualizer) */
+.tool-collapsible-content[data-state="open"] > * {
+  animation: tool-content-fade 150ms ease-out;
+}
+
+@keyframes tool-content-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .select-none {
   -webkit-user-select: none;
   -moz-user-select: none;
diff --git a/src/components/ai-elements/tool.tsx b/src/components/ai-elements/tool.tsx
index f0e9eef..45852f7 100644
--- a/src/components/ai-elements/tool.tsx
+++ b/src/components/ai-elements/tool.tsx
@@ -119,14 +119,20 @@ export const ToolHeader = ({
 
 export type ToolContentProps = ComponentProps<typeof CollapsibleContent>
 
-export const ToolContent = ({ className, ...props }: ToolContentProps) => (
+export const ToolContent = ({
+  className,
+  children,
+  ...props
+}: ToolContentProps) => (
   <CollapsibleContent
     className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 space-y-4 p-4 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "tool-collapsible-content overflow-hidden text-popover-foreground outline-none",
       className
     )}
     {...props}
-  />
+  >
+    <div className="space-y-4 p-4">{children}</div>
+  </CollapsibleContent>
 )
 
 export type ToolInputProps = ComponentProps<"div"> & {
diff --git a/src/components/message/virtualized-message-thread.tsx b/src/components/message/virtualized-message-thread.tsx
index 3957ec5..676fd15 100644
--- a/src/components/message/virtualized-message-thread.tsx
+++ b/src/components/message/virtualized-message-thread.tsx
@@ -74,7 +74,7 @@ export function VirtualizedMessageThread<T>({
           key={virtualItem.key}
           ref={virtualizer.measureElement}
           data-index={virtualItem.index}
-          className="absolute left-0 top-0 w-full"
+          className="absolute left-0 top-0 w-full bg-background"
           style={{
             transform: `translate3d(0, ${virtualItem.start}px, 0)`,
             willChange: "transform",