diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashOutputTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashOutputTool.tsx
index 8c4402436c..71fa6307d2 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashOutputTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashOutputTool.tsx
@@ -1,4 +1,5 @@
-import { AccordionItem, Chip, Code } from '@heroui/react'
+import type { CollapseProps } from 'antd'
+import { Tag } from 'antd'
 import { CheckCircle, Terminal, XCircle } from 'lucide-react'
 import { useMemo } from 'react'
 
@@ -15,7 +16,13 @@ interface ParsedBashOutput {
   tool_use_error?: string
 }
 
-export function BashOutputTool({ input, output }: { input: BashOutputToolInput; output?: BashOutputToolOutput }) {
+export function BashOutputTool({
+  input,
+  output
+}: {
+  input: BashOutputToolInput
+  output?: BashOutputToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
   // 解析 XML 输出
   const parsedOutput = useMemo(() => {
     if (!output) return null
@@ -84,93 +91,88 @@ export function BashOutputTool({ input, output }: { input: BashOutputToolInput;
     } as const
   }, [parsedOutput])
 
-  return (
-    <AccordionItem
-      key={AgentToolsType.BashOutput}
-      aria-label="BashOutput Tool"
-      title={
+  const children = parsedOutput ? (
+    <div className="flex flex-col gap-4">
+      {/* Status Info */}
+      <div className="flex flex-wrap items-center gap-2">
+        {parsedOutput.exit_code !== undefined && (
+          <Tag color={parsedOutput.exit_code === 0 ? 'success' : 'danger'}>Exit Code: {parsedOutput.exit_code}</Tag>
+        )}
+        {parsedOutput.timestamp && (
+          <Tag className="py-0 font-mono text-xs">{new Date(parsedOutput.timestamp).toLocaleString()}</Tag>
+        )}
+      </div>
+
+      {/* Standard Output */}
+      {parsedOutput.stdout && (
+        <div>
+          <div className="mb-2 font-medium text-default-600 text-xs">stdout:</div>
+          <pre className="whitespace-pre-wrap font-mono text-default-700 text-xs dark:text-default-300">
+            {parsedOutput.stdout}
+          </pre>
+        </div>
+      )}
+
+      {/* Standard Error */}
+      {parsedOutput.stderr && (
+        <div className="border border-danger-200">
+          <div className="mb-2 font-medium text-danger-600 text-xs">stderr:</div>
+          <pre className="whitespace-pre-wrap font-mono text-danger-600 text-xs dark:text-danger-400">
+            {parsedOutput.stderr}
+          </pre>
+        </div>
+      )}
+
+      {/* Tool Use Error */}
+      {parsedOutput.tool_use_error && (
+        <div className="border border-danger-200">
+          <div className="mb-2 flex items-center gap-2">
+            <XCircle className="h-4 w-4 text-danger" />
+            <span className="font-medium text-danger-600 text-xs">Error:</span>
+          </div>
+          <pre className="whitespace-pre-wrap font-mono text-danger-600 text-xs dark:text-danger-400">
+            {parsedOutput.tool_use_error}
+          </pre>
+        </div>
+      )}
+    </div>
+  ) : (
+    // 原始输出（如果解析失败或非 XML 格式）
+    output && (
+      <div>
+        <pre className="whitespace-pre-wrap font-mono text-default-700 text-xs dark:text-default-300">{output}</pre>
+      </div>
+    )
+  )
+  return {
+    key: AgentToolsType.BashOutput,
+    label: (
+      <>
         <ToolTitle
           icon={<Terminal className="h-4 w-4" />}
           label="Bash Output"
           params={
             <div className="flex items-center gap-2">
-              <Code size="sm" className="py-0 text-xs">
-                {input.bash_id}
-              </Code>
+              <Tag className="py-0 font-mono text-xs">{input.bash_id}</Tag>
               {statusConfig && (
-                <Chip
-                  size="sm"
+                <Tag
                   color={statusConfig.color}
-                  variant="flat"
-                  startContent={statusConfig.icon}
-                  className="h-5">
+                  icon={statusConfig.icon}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: '2px'
+                  }}>
                   {statusConfig.text}
-                </Chip>
+                </Tag>
               )}
             </div>
           }
         />
-      }
-      classNames={{
-        content: 'space-y-3 px-1'
-      }}>
-      {parsedOutput ? (
-        <>
-          {/* Status Info */}
-          <div className="flex flex-wrap items-center gap-2">
-            {parsedOutput.exit_code !== undefined && (
-              <Chip size="sm" color={parsedOutput.exit_code === 0 ? 'success' : 'danger'} variant="flat">
-                Exit Code: {parsedOutput.exit_code}
-              </Chip>
-            )}
-            {parsedOutput.timestamp && (
-              <Code size="sm" className="py-0 text-xs">
-                {new Date(parsedOutput.timestamp).toLocaleString()}
-              </Code>
-            )}
-          </div>
+      </>
+    ),
 
-          {/* Standard Output */}
-          {parsedOutput.stdout && (
-            <div>
-              <div className="mb-2 font-medium text-default-600 text-xs">stdout:</div>
-              <pre className="whitespace-pre-wrap font-mono text-default-700 text-xs dark:text-default-300">
-                {parsedOutput.stdout}
-              </pre>
-            </div>
-          )}
-
-          {/* Standard Error */}
-          {parsedOutput.stderr && (
-            <div className="border border-danger-200">
-              <div className="mb-2 font-medium text-danger-600 text-xs">stderr:</div>
-              <pre className="whitespace-pre-wrap font-mono text-danger-600 text-xs dark:text-danger-400">
-                {parsedOutput.stderr}
-              </pre>
-            </div>
-          )}
-
-          {/* Tool Use Error */}
-          {parsedOutput.tool_use_error && (
-            <div className="border border-danger-200">
-              <div className="mb-2 flex items-center gap-2">
-                <XCircle className="h-4 w-4 text-danger" />
-                <span className="font-medium text-danger-600 text-xs">Error:</span>
-              </div>
-              <pre className="whitespace-pre-wrap font-mono text-danger-600 text-xs dark:text-danger-400">
-                {parsedOutput.tool_use_error}
-              </pre>
-            </div>
-          )}
-        </>
-      ) : (
-        // 原始输出（如果解析失败或非 XML 格式）
-        output && (
-          <div>
-            <pre className="whitespace-pre-wrap font-mono text-default-700 text-xs dark:text-default-300">{output}</pre>
-          </div>
-        )
-      )}
-    </AccordionItem>
-  )
+    children: children
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx
index aad9c7ab32..d92b6461a4 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/BashTool.tsx
@@ -1,31 +1,35 @@
-import { AccordionItem, Code } from '@heroui/react'
+import type { CollapseProps } from 'antd'
+import { Tag } from 'antd'
 import { Terminal } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
 import type { BashToolInput as BashToolInputType, BashToolOutput as BashToolOutputType } from './types'
 
-export function BashTool({ input, output }: { input: BashToolInputType; output?: BashToolOutputType }) {
+export function BashTool({
+  input,
+  output
+}: {
+  input: BashToolInputType
+  output?: BashToolOutputType
+}): NonNullable<CollapseProps['items']>[number] {
   // 如果有输出，计算输出行数
   const outputLines = output ? output.split('\n').length : 0
 
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Bash Tool"
-      title={
+  return {
+    key: 'tool',
+    label: (
+      <>
         <ToolTitle
           icon={<Terminal className="h-4 w-4" />}
           label="Bash"
           params={input.description}
           stats={output ? `${outputLines} ${outputLines === 1 ? 'line' : 'lines'}` : undefined}
         />
-      }
-      subtitle={
-        <Code size="sm" className="line-clamp-1 w-max max-w-full text-ellipsis py-0 text-xs">
-          {input.command}
-        </Code>
-      }>
-      <div className="whitespace-pre-line">{output}</div>
-    </AccordionItem>
-  )
+        <div className="mt-1">
+          <Tag className="whitespace-pre-wrap break-all font-mono">{input.command}</Tag>
+        </div>
+      </>
+    ),
+    children: <div className="whitespace-pre-line">{output}</div>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/EditTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/EditTool.tsx
index c3c1f9dc5b..a49a89664d 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/EditTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/EditTool.tsx
@@ -1,4 +1,4 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { FileEdit } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
@@ -28,19 +28,26 @@ export const renderCodeBlock = (content: string, variant: 'old' | 'new') => {
   )
 }
 
-export function EditTool({ input, output }: { input: EditToolInput; output?: EditToolOutput }) {
-  return (
-    <AccordionItem
-      key={AgentToolsType.Edit}
-      aria-label="Edit Tool"
-      title={<ToolTitle icon={<FileEdit className="h-4 w-4" />} label="Edit" params={input.file_path} />}>
-      {/* Diff View */}
-      {/* Old Content */}
-      {renderCodeBlock(input.old_string, 'old')}
-      {/* New Content */}
-      {renderCodeBlock(input.new_string, 'new')}
-      {/* Output */}
-      {output}
-    </AccordionItem>
-  )
+export function EditTool({
+  input,
+  output
+}: {
+  input: EditToolInput
+  output?: EditToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
+  return {
+    key: AgentToolsType.Edit,
+    label: <ToolTitle icon={<FileEdit className="h-4 w-4" />} label="Edit" params={input.file_path} />,
+    children: (
+      <>
+        {/* Diff View */}
+        {/* Old Content */}
+        {renderCodeBlock(input.old_string, 'old')}
+        {/* New Content */}
+        {renderCodeBlock(input.new_string, 'new')}
+        {/* Output */}
+        {output}
+      </>
+    )
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/ExitPlanModeTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/ExitPlanModeTool.tsx
index 1769c384f0..0c0a4ec4a7 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/ExitPlanModeTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/ExitPlanModeTool.tsx
@@ -1,4 +1,4 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { DoorOpen } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 
@@ -6,19 +6,22 @@ import { ToolTitle } from './GenericTools'
 import type { ExitPlanModeToolInput, ExitPlanModeToolOutput } from './types'
 import { AgentToolsType } from './types'
 
-export function ExitPlanModeTool({ input, output }: { input: ExitPlanModeToolInput; output?: ExitPlanModeToolOutput }) {
-  return (
-    <AccordionItem
-      key={AgentToolsType.ExitPlanMode}
-      aria-label="ExitPlanMode Tool"
-      title={
-        <ToolTitle
-          icon={<DoorOpen className="h-4 w-4" />}
-          label="ExitPlanMode"
-          stats={`${input.plan.split('\n\n').length} plans`}
-        />
-      }>
-      {<ReactMarkdown>{input.plan + '\n\n' + (output ?? '')}</ReactMarkdown>}
-    </AccordionItem>
-  )
+export function ExitPlanModeTool({
+  input,
+  output
+}: {
+  input: ExitPlanModeToolInput
+  output?: ExitPlanModeToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
+  return {
+    key: AgentToolsType.ExitPlanMode,
+    label: (
+      <ToolTitle
+        icon={<DoorOpen className="h-4 w-4" />}
+        label="ExitPlanMode"
+        stats={`${input.plan.split('\n\n').length} plans`}
+      />
+    ),
+    children: <ReactMarkdown>{input.plan + '\n\n' + (output ?? '')}</ReactMarkdown>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GlobTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GlobTool.tsx
index d9e151567e..97e816be1d 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GlobTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GlobTool.tsx
@@ -1,26 +1,29 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { FolderSearch } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
 import type { GlobToolInput as GlobToolInputType, GlobToolOutput as GlobToolOutputType } from './types'
 
-export function GlobTool({ input, output }: { input: GlobToolInputType; output?: GlobToolOutputType }) {
+export function GlobTool({
+  input,
+  output
+}: {
+  input: GlobToolInputType
+  output?: GlobToolOutputType
+}): NonNullable<CollapseProps['items']>[number] {
   // 如果有输出，计算文件数量
   const lineCount = output ? output.split('\n').filter((line) => line.trim()).length : 0
 
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Glob Tool"
-      title={
-        <ToolTitle
-          icon={<FolderSearch className="h-4 w-4" />}
-          label="Glob"
-          params={input.pattern}
-          stats={output ? `${lineCount} of output` : undefined}
-        />
-      }>
-      <div>{output}</div>
-    </AccordionItem>
-  )
+  return {
+    key: 'tool',
+    label: (
+      <ToolTitle
+        icon={<FolderSearch className="h-4 w-4" />}
+        label="Glob"
+        params={input.pattern}
+        stats={output ? `${lineCount} ${lineCount === 1 ? 'file' : 'files'}` : undefined}
+      />
+    ),
+    children: <div>{output}</div>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GrepTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GrepTool.tsx
index 92e1530c74..dbf7e0bbf1 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GrepTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/GrepTool.tsx
@@ -1,31 +1,34 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { FileSearch } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
 import type { GrepToolInput, GrepToolOutput } from './types'
 
-export function GrepTool({ input, output }: { input: GrepToolInput; output?: GrepToolOutput }) {
+export function GrepTool({
+  input,
+  output
+}: {
+  input: GrepToolInput
+  output?: GrepToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
   // 如果有输出，计算结果行数
   const resultLines = output ? output.split('\n').filter((line) => line.trim()).length : 0
 
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Grep Tool"
-      title={
-        <ToolTitle
-          icon={<FileSearch className="h-4 w-4" />}
-          label="Grep"
-          params={
-            <>
-              {input.pattern}
-              {input.output_mode && <span className="ml-1">({input.output_mode})</span>}
-            </>
-          }
-          stats={output ? `${resultLines} ${resultLines === 1 ? 'line' : 'lines'}` : undefined}
-        />
-      }>
-      <div>{output}</div>
-    </AccordionItem>
-  )
+  return {
+    key: 'tool',
+    label: (
+      <ToolTitle
+        icon={<FileSearch className="h-4 w-4" />}
+        label="Grep"
+        params={
+          <>
+            {input.pattern}
+            {input.output_mode && <span className="ml-1">({input.output_mode})</span>}
+          </>
+        }
+        stats={output ? `${resultLines} ${resultLines === 1 ? 'line' : 'lines'}` : undefined}
+      />
+    ),
+    children: <div>{output}</div>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/MultiEditTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/MultiEditTool.tsx
index 033fe84676..546fd439dc 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/MultiEditTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/MultiEditTool.tsx
@@ -1,4 +1,4 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { FileText } from 'lucide-react'
 
 import { renderCodeBlock } from './EditTool'
@@ -6,18 +6,24 @@ import { ToolTitle } from './GenericTools'
 import type { MultiEditToolInput, MultiEditToolOutput } from './types'
 import { AgentToolsType } from './types'
 
-export function MultiEditTool({ input }: { input: MultiEditToolInput; output?: MultiEditToolOutput }) {
-  return (
-    <AccordionItem
-      key={AgentToolsType.MultiEdit}
-      aria-label="MultiEdit Tool"
-      title={<ToolTitle icon={<FileText className="h-4 w-4" />} label="MultiEdit" params={input.file_path} />}>
-      {input.edits.map((edit, index) => (
-        <div key={index}>
-          {renderCodeBlock(edit.old_string, 'old')}
-          {renderCodeBlock(edit.new_string, 'new')}
-        </div>
-      ))}
-    </AccordionItem>
-  )
+export function MultiEditTool({
+  input
+}: {
+  input: MultiEditToolInput
+  output?: MultiEditToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
+  return {
+    key: AgentToolsType.MultiEdit,
+    label: <ToolTitle icon={<FileText className="h-4 w-4" />} label="MultiEdit" params={input.file_path} />,
+    children: (
+      <div>
+        {input.edits.map((edit, index) => (
+          <div key={index}>
+            {renderCodeBlock(edit.old_string, 'old')}
+            {renderCodeBlock(edit.new_string, 'new')}
+          </div>
+        ))}
+      </div>
+    )
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/NotebookEditTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/NotebookEditTool.tsx
index f15664969c..8f9eb36a2e 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/NotebookEditTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/NotebookEditTool.tsx
@@ -1,4 +1,5 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
+import { Tag } from 'antd'
 import { FileText } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 
@@ -6,14 +7,23 @@ import { ToolTitle } from './GenericTools'
 import type { NotebookEditToolInput, NotebookEditToolOutput } from './types'
 import { AgentToolsType } from './types'
 
-export function NotebookEditTool({ input, output }: { input: NotebookEditToolInput; output?: NotebookEditToolOutput }) {
-  return (
-    <AccordionItem
-      key={AgentToolsType.NotebookEdit}
-      aria-label="NotebookEdit Tool"
-      title={<ToolTitle icon={<FileText className="h-4 w-4" />} label="NotebookEdit" />}
-      subtitle={input.notebook_path}>
-      <ReactMarkdown>{output}</ReactMarkdown>
-    </AccordionItem>
-  )
+export function NotebookEditTool({
+  input,
+  output
+}: {
+  input: NotebookEditToolInput
+  output?: NotebookEditToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
+  return {
+    key: AgentToolsType.NotebookEdit,
+    label: (
+      <>
+        <ToolTitle icon={<FileText className="h-4 w-4" />} label="NotebookEdit" />
+        <Tag className="mt-1" color="blue">
+          {input.notebook_path}{' '}
+        </Tag>
+      </>
+    ),
+    children: <ReactMarkdown>{output}</ReactMarkdown>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/ReadTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/ReadTool.tsx
index e8f973c822..0b665a9fd4 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/ReadTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/ReadTool.tsx
@@ -1,4 +1,4 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { FileText } from 'lucide-react'
 import { useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
@@ -7,7 +7,13 @@ import { ToolTitle } from './GenericTools'
 import type { ReadToolInput as ReadToolInputType, ReadToolOutput as ReadToolOutputType, TextOutput } from './types'
 import { AgentToolsType } from './types'
 
-export function ReadTool({ input, output }: { input: ReadToolInputType; output?: ReadToolOutputType }) {
+export function ReadTool({
+  input,
+  output
+}: {
+  input: ReadToolInputType
+  output?: ReadToolOutputType
+}): NonNullable<CollapseProps['items']>[number] {
   // 移除 system-reminder 标签及其内容的辅助函数
   const removeSystemReminderTags = (text: string): string => {
     // 使用正则表达式匹配 <system-reminder> 标签及其内容，包括换行符
@@ -53,19 +59,16 @@ export function ReadTool({ input, output }: { input: ReadToolInputType; output?:
     }
   }, [outputString])
 
-  return (
-    <AccordionItem
-      key={AgentToolsType.Read}
-      aria-label="Read Tool"
-      title={
-        <ToolTitle
-          icon={<FileText className="h-4 w-4" />}
-          label="Read File"
-          params={input.file_path.split('/').pop()}
-          stats={stats ? `${stats.lineCount} lines, ${stats.formatSize(stats.fileSize)}` : undefined}
-        />
-      }>
-      {outputString ? <ReactMarkdown>{outputString}</ReactMarkdown> : null}
-    </AccordionItem>
-  )
+  return {
+    key: AgentToolsType.Read,
+    label: (
+      <ToolTitle
+        icon={<FileText className="h-4 w-4" />}
+        label="Read File"
+        params={input.file_path.split('/').pop()}
+        stats={stats ? `${stats.lineCount} lines, ${stats.formatSize(stats.fileSize)}` : undefined}
+      />
+    ),
+    children: outputString ? <ReactMarkdown>{outputString}</ReactMarkdown> : null
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/SearchTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/SearchTool.tsx
index ea569159f1..8eda9dea5f 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/SearchTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/SearchTool.tsx
@@ -1,25 +1,30 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { Search } from 'lucide-react'
 
 import { StringInputTool, StringOutputTool, ToolTitle } from './GenericTools'
 import type { SearchToolInput as SearchToolInputType, SearchToolOutput as SearchToolOutputType } from './types'
 
-export function SearchTool({ input, output }: { input: SearchToolInputType; output?: SearchToolOutputType }) {
+export function SearchTool({
+  input,
+  output
+}: {
+  input: SearchToolInputType
+  output?: SearchToolOutputType
+}): NonNullable<CollapseProps['items']>[number] {
   // 如果有输出，计算结果数量
   const resultCount = output ? output.split('\n').filter((line) => line.trim()).length : 0
 
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Search Tool"
-      title={
-        <ToolTitle
-          icon={<Search className="h-4 w-4" />}
-          label="Search"
-          params={`"${input}"`}
-          stats={output ? `${resultCount} ${resultCount === 1 ? 'result' : 'results'}` : undefined}
-        />
-      }>
+  return {
+    key: 'tool',
+    label: (
+      <ToolTitle
+        icon={<Search className="h-4 w-4" />}
+        label="Search"
+        params={`"${input}"`}
+        stats={output ? `${resultCount} ${resultCount === 1 ? 'result' : 'results'}` : undefined}
+      />
+    ),
+    children: (
       <div>
         <StringInputTool input={input} label="Search Query" />
         {output && (
@@ -28,6 +33,6 @@ export function SearchTool({ input, output }: { input: SearchToolInputType; outp
           </div>
         )}
       </div>
-    </AccordionItem>
-  )
+    )
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/SkillTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/SkillTool.tsx
index 2c68beb184..1c0651a9e1 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/SkillTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/SkillTool.tsx
@@ -1,16 +1,19 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { PencilRuler } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
 import type { SkillToolInput, SkillToolOutput } from './types'
 
-export function SkillTool({ input, output }: { input: SkillToolInput; output?: SkillToolOutput }) {
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Skill Tool"
-      title={<ToolTitle icon={<PencilRuler className="h-4 w-4" />} label="Skill" params={input.command} />}>
-      {output}
-    </AccordionItem>
-  )
+export function SkillTool({
+  input,
+  output
+}: {
+  input: SkillToolInput
+  output?: SkillToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
+  return {
+    key: 'tool',
+    label: <ToolTitle icon={<PencilRuler className="h-4 w-4" />} label="Skill" params={input.command} />,
+    children: <div>{output}</div>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/TaskTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/TaskTool.tsx
index 1ca31bf1d2..2c5a4a1c73 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/TaskTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/TaskTool.tsx
@@ -1,21 +1,28 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { Bot } from 'lucide-react'
 import Markdown from 'react-markdown'
 
 import { ToolTitle } from './GenericTools'
 import type { TaskToolInput as TaskToolInputType, TaskToolOutput as TaskToolOutputType } from './types'
 
-export function TaskTool({ input, output }: { input: TaskToolInputType; output?: TaskToolOutputType }) {
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Task Tool"
-      title={<ToolTitle icon={<Bot className="h-4 w-4" />} label="Task" params={input.description} />}>
-      {output?.map((item) => (
-        <div key={item.type}>
-          <div>{item.type === 'text' ? <Markdown>{item.text}</Markdown> : item.text}</div>
-        </div>
-      ))}
-    </AccordionItem>
-  )
+export function TaskTool({
+  input,
+  output
+}: {
+  input: TaskToolInputType
+  output?: TaskToolOutputType
+}): NonNullable<CollapseProps['items']>[number] {
+  return {
+    key: 'tool',
+    label: <ToolTitle icon={<Bot className="h-4 w-4" />} label="Task" params={input.description} />,
+    children: (
+      <div>
+        {output?.map((item) => (
+          <div key={item.type}>
+            <div>{item.type === 'text' ? <Markdown>{item.text}</Markdown> : item.text}</div>
+          </div>
+        ))}
+      </div>
+    )
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/TodoWriteTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/TodoWriteTool.tsx
index bdc024c73b..b11f73793b 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/TodoWriteTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/TodoWriteTool.tsx
@@ -1,4 +1,6 @@
-import { AccordionItem, Card, CardBody, Chip } from '@heroui/react'
+import { cn } from '@renderer/utils'
+import type { CollapseProps } from 'antd'
+import { Card } from 'antd'
 import { CheckCircle, Circle, Clock, ListTodo } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
@@ -30,44 +32,59 @@ const getStatusConfig = (status: TodoItem['status']) => {
   }
 }
 
-export function TodoWriteTool({ input }: { input: TodoWriteToolInputType }) {
+export function TodoWriteTool({
+  input
+}: {
+  input: TodoWriteToolInputType
+}): NonNullable<CollapseProps['items']>[number] {
   const doneCount = input.todos.filter((todo) => todo.status === 'completed').length
-  return (
-    <AccordionItem
-      key={AgentToolsType.TodoWrite}
-      aria-label="Todo Write Tool"
-      title={
-        <ToolTitle
-          icon={<ListTodo className="h-4 w-4" />}
-          label="Todo Write"
-          params={`${doneCount} Done`}
-          stats={`${input.todos.length} ${input.todos.length === 1 ? 'item' : 'items'}`}
-        />
-      }>
+
+  return {
+    key: AgentToolsType.TodoWrite,
+    label: (
+      <ToolTitle
+        icon={<ListTodo className="h-4 w-4" />}
+        label="Todo Write"
+        params={`${doneCount} Done`}
+        stats={`${input.todos.length} ${input.todos.length === 1 ? 'item' : 'items'}`}
+      />
+    ),
+    children: (
       <div className="space-y-3">
         {input.todos.map((todo, index) => {
           const statusConfig = getStatusConfig(todo.status)
           return (
-            <Card key={index} className="shadow-sm">
-              <CardBody className="p-2">
-                <div className="flex items-start gap-3">
-                  <Chip color={statusConfig.color} variant="flat" size="sm" className="flex-shrink-0">
-                    {statusConfig.icon}
-                  </Chip>
-                  <div className="min-w-0 flex-1">
-                    <div className={`text-sm ${todo.status === 'completed' ? 'text-default-500 line-through' : ''}`}>
-                      {todo.status === 'completed' ? <s>{todo.content}</s> : todo.content}
+            <div key={index}>
+              <Card
+                key={index}
+                className="shadow-sm"
+                styles={{
+                  body: { padding: 2 }
+                }}>
+                <div className="p-2">
+                  <div className="flex items-center justify-center gap-3">
+                    <div
+                      className={cn(
+                        'flex items-center justify-center rounded-full border bg-opacity-50 p-2',
+                        `bg-${statusConfig.color}`
+                      )}>
+                      {statusConfig.icon}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className={`text-sm ${todo.status === 'completed' ? 'text-default-500 line-through' : ''}`}>
+                        {todo.status === 'completed' ? <s>{todo.content}</s> : todo.content}
+                      </div>
+                      {todo.status === 'in_progress' && (
+                        <div className="mt-1 text-default-400 text-xs">{todo.activeForm}</div>
+                      )}
                     </div>
-                    {todo.status === 'in_progress' && (
-                      <div className="mt-1 text-default-400 text-xs">{todo.activeForm}</div>
-                    )}
                   </div>
                 </div>
-              </CardBody>
-            </Card>
+              </Card>
+            </div>
           )
         })}
       </div>
-    </AccordionItem>
-  )
+    )
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/UnknownToolRenderer.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/UnknownToolRenderer.tsx
index ad26caa549..969eda9507 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/UnknownToolRenderer.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/UnknownToolRenderer.tsx
@@ -1,5 +1,5 @@
-import { AccordionItem } from '@heroui/react'
 import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
+import type { CollapseProps } from 'antd'
 import { Wrench } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
@@ -11,7 +11,11 @@ interface UnknownToolProps {
   output?: unknown
 }
 
-export function UnknownToolRenderer({ toolName = '', input, output }: UnknownToolProps) {
+export function UnknownToolRenderer({
+  toolName = '',
+  input,
+  output
+}: UnknownToolProps): NonNullable<CollapseProps['items']>[number] {
   const { highlightCode } = useCodeStyle()
   const [inputHtml, setInputHtml] = useState<string>('')
   const [outputHtml, setOutputHtml] = useState<string>('')
@@ -47,17 +51,16 @@ export function UnknownToolRenderer({ toolName = '', input, output }: UnknownToo
     return 'Tool'
   }
 
-  return (
-    <AccordionItem
-      key="unknown-tool"
-      aria-label={toolName}
-      title={
-        <ToolTitle
-          icon={<Wrench className="h-4 w-4" />}
-          label={getToolDisplayName(toolName)}
-          params={getToolDescription()}
-        />
-      }>
+  return {
+    key: 'unknown-tool',
+    label: (
+      <ToolTitle
+        icon={<Wrench className="h-4 w-4" />}
+        label={getToolDisplayName(toolName)}
+        params={getToolDescription()}
+      />
+    ),
+    children: (
       <div className="space-y-3">
         {input !== undefined && (
           <div>
@@ -83,6 +86,6 @@ export function UnknownToolRenderer({ toolName = '', input, output }: UnknownToo
           <div className="text-foreground-500 text-xs">No data available for this tool</div>
         )}
       </div>
-    </AccordionItem>
-  )
+    )
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WebFetchTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WebFetchTool.tsx
index 329be3d373..f54c541459 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WebFetchTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WebFetchTool.tsx
@@ -1,17 +1,19 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { Globe } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
 import type { WebFetchToolInput, WebFetchToolOutput } from './types'
 
-export function WebFetchTool({ input, output }: { input: WebFetchToolInput; output?: WebFetchToolOutput }) {
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Web Fetch Tool"
-      title={<ToolTitle icon={<Globe className="h-4 w-4" />} label="Web Fetch" params={input.url} />}
-      subtitle={input.prompt}>
-      {output}
-    </AccordionItem>
-  )
+export function WebFetchTool({
+  input,
+  output
+}: {
+  input: WebFetchToolInput
+  output?: WebFetchToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
+  return {
+    key: 'tool',
+    label: <ToolTitle icon={<Globe className="h-4 w-4" />} label="Web Fetch" params={input.url} />,
+    children: <div>{output}</div>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WebSearchTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WebSearchTool.tsx
index ea38e3d3ce..7042c63afb 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WebSearchTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WebSearchTool.tsx
@@ -1,26 +1,29 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { Globe } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
 import type { WebSearchToolInput, WebSearchToolOutput } from './types'
 
-export function WebSearchTool({ input, output }: { input: WebSearchToolInput; output?: WebSearchToolOutput }) {
+export function WebSearchTool({
+  input,
+  output
+}: {
+  input: WebSearchToolInput
+  output?: WebSearchToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
   // 如果有输出，计算结果数量
   const resultCount = output ? output.split('\n').filter((line) => line.trim()).length : 0
 
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Web Search Tool"
-      title={
-        <ToolTitle
-          icon={<Globe className="h-4 w-4" />}
-          label="Web Search"
-          params={input.query}
-          stats={output ? `${resultCount} ${resultCount === 1 ? 'result' : 'results'}` : undefined}
-        />
-      }>
-      {output}
-    </AccordionItem>
-  )
+  return {
+    key: 'tool',
+    label: (
+      <ToolTitle
+        icon={<Globe className="h-4 w-4" />}
+        label="Web Search"
+        params={input.query}
+        stats={output ? `${resultCount} ${resultCount === 1 ? 'result' : 'results'}` : undefined}
+      />
+    ),
+    children: <div>{output}</div>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WriteTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WriteTool.tsx
index 08644c1c5b..d035163dcc 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WriteTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/WriteTool.tsx
@@ -1,16 +1,18 @@
-import { AccordionItem } from '@heroui/react'
+import type { CollapseProps } from 'antd'
 import { FileText } from 'lucide-react'
 
 import { ToolTitle } from './GenericTools'
 import type { WriteToolInput, WriteToolOutput } from './types'
 
-export function WriteTool({ input }: { input: WriteToolInput; output?: WriteToolOutput }) {
-  return (
-    <AccordionItem
-      key="tool"
-      aria-label="Write Tool"
-      title={<ToolTitle icon={<FileText className="h-4 w-4" />} label="Write" params={input.file_path} />}>
-      <div>{input.content}</div>
-    </AccordionItem>
-  )
+export function WriteTool({
+  input
+}: {
+  input: WriteToolInput
+  output?: WriteToolOutput
+}): NonNullable<CollapseProps['items']>[number] {
+  return {
+    key: 'tool',
+    label: <ToolTitle icon={<FileText className="h-4 w-4" />} label="Write" params={input.file_path} />,
+    children: <div>{input.content}</div>
+  }
 }
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/index.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/index.tsx
index 8d1f5eee8f..6ffb5024eb 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/index.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/index.tsx
@@ -1,10 +1,13 @@
-import { Accordion } from '@heroui/react'
 import { loggerService } from '@logger'
 import type { NormalToolResponse } from '@renderer/types'
+import type { CollapseProps } from 'antd'
+import { Collapse } from 'antd'
 
 // 导出所有类型
 export * from './types'
 
+import { useMemo } from 'react'
+
 // 导入所有渲染器
 import ToolPermissionRequestCard from '../ToolPermissionRequestCard'
 import { BashOutputTool } from './BashOutputTool'
@@ -58,24 +61,27 @@ export function isValidAgentToolsType(toolName: unknown): toolName is AgentTools
 function renderToolContent(toolName: AgentToolsType, input: ToolInput, output?: ToolOutput) {
   const Renderer = toolRenderers[toolName]
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const toolContentItem = useMemo(() => {
+    const rendered = Renderer
+      ? Renderer({ input: input as any, output: output as any })
+      : UnknownToolRenderer({ input: input as any, output: output as any, toolName })
+    return {
+      ...rendered,
+      classNames: {
+        body: 'bg-foreground-50 p-2 text-foreground-900 dark:bg-foreground-100 max-h-96 p-2 overflow-scroll'
+      } as NonNullable<CollapseProps['items']>[number]['classNames']
+    } as NonNullable<CollapseProps['items']>[number]
+  }, [Renderer, input, output, toolName])
+
   return (
     <div className="w-max max-w-full rounded-md bg-foreground-100 py-1 transition-all duration-300 ease-in-out dark:bg-foreground-100">
-      <Accordion
+      <Collapse
         className="w-max max-w-full"
-        itemClasses={{
-          trigger:
-            'p-0 [&>div:first-child]:!flex-none [&>div:first-child]:flex [&>div:first-child]:flex-col [&>div:first-child]:text-start [&>div:first-child]:max-w-full',
-          indicator: 'flex-shrink-0',
-          subtitle: 'text-xs',
-          content:
-            'rounded-md bg-foreground-50 p-2 text-foreground-900 dark:bg-foreground-100 max-h-96 p-2 overflow-scroll',
-          base: 'space-y-1'
-        }}
-        defaultExpandedKeys={toolName === AgentToolsType.TodoWrite ? [AgentToolsType.TodoWrite] : []}>
-        {Renderer
-          ? Renderer({ input: input as any, output: output as any })
-          : UnknownToolRenderer({ input: input as any, output: output as any, toolName })}
-      </Accordion>
+        expandIconPosition="end"
+        defaultActiveKey={toolName === AgentToolsType.TodoWrite ? [AgentToolsType.TodoWrite] : []}
+        items={[toolContentItem]}
+      />
     </div>
   )
 }