ToolCallCard

ToolCallCard 展示工具调用名称、状态、参数、结果和错误信息。

导入方式

按需导入

import { ToolCallCard } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <ToolCallCard />

基础用法

<script setup lang="ts">
import { ToolCallCard } from '@weimin96/ai-chat-vue'
import { sampleToolCall } from '../../.vitepress/theme/demo-data'
</script>

<template>
  <div class="docs-narrow">
    <ToolCallCard :tool-call="sampleToolCall" />
  </div>
</template>

API

属性	类型	默认值	说明
toolCall	ToolCall	必填	工具调用对象

注意事项

参数和结果会以文本形式展示，敏感字段应在传入前脱敏。

展开按钮内置 aria-expanded 和 aria-controls，键盘用户可以感知参数与结果面板的展开状态。使用 Headless API 时，useHeadlessToolCall().toggleAttrs 提供同样的 aria-expanded、aria-controls 和状态化 aria-label，并会随展开状态同步更新。