|
|
@ -19,7 +19,9 @@ const collapsed = ref(false); |
|
|
<Icon name="lucide:wrench" class="tool-icon" /> |
|
|
<Icon name="lucide:wrench" class="tool-icon" /> |
|
|
<span class="tool-name">{{ part.toolName }}</span> |
|
|
<span class="tool-name">{{ part.toolName }}</span> |
|
|
<span :class="['tool-state', part.state]"> |
|
|
<span :class="['tool-state', part.state]"> |
|
|
<template v-if="part.state === 'call'">调用中…</template> |
|
|
<template v-if="part.state === 'preparing'">准备参数…</template> |
|
|
|
|
|
<template v-else-if="part.state === 'call'">执行中…</template> |
|
|
|
|
|
<template v-else-if="part.state === 'interrupted'">参数生成中断</template> |
|
|
<template v-else-if="part.state === 'approval-requested'"> |
|
|
<template v-else-if="part.state === 'approval-requested'"> |
|
|
{{ part.isAutomaticApproval ? "自动批准中…" : "等待审批" }} |
|
|
{{ part.isAutomaticApproval ? "自动批准中…" : "等待审批" }} |
|
|
</template> |
|
|
</template> |
|
|
@ -35,6 +37,11 @@ const collapsed = ref(false); |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div v-show="!collapsed" class="tool-call-body"> |
|
|
<div v-show="!collapsed" class="tool-call-body"> |
|
|
|
|
|
<div v-if="part.state === 'preparing'" class="tool-preparing"> |
|
|
|
|
|
<Icon name="lucide:loader-circle" class="spin" /> |
|
|
|
|
|
<span>正在生成调用参数…</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div v-if="part.args" class="tool-args"> |
|
|
<div v-if="part.args" class="tool-args"> |
|
|
<span class="tool-label">参数</span> |
|
|
<span class="tool-label">参数</span> |
|
|
<pre>{{ JSON.stringify(part.args, null, 2) }}</pre> |
|
|
<pre>{{ JSON.stringify(part.args, null, 2) }}</pre> |
|
|
@ -119,7 +126,9 @@ const collapsed = ref(false); |
|
|
color: var(--color-muted); |
|
|
color: var(--color-muted); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tool-state.preparing { color: var(--color-accent-amber); } |
|
|
.tool-state.call { color: var(--color-accent-amber); } |
|
|
.tool-state.call { color: var(--color-accent-amber); } |
|
|
|
|
|
.tool-state.interrupted { color: var(--color-accent-red, #e74c3c); } |
|
|
.tool-state.result { color: var(--color-accent-teal); } |
|
|
.tool-state.result { color: var(--color-accent-teal); } |
|
|
.tool-state.approval-requested { color: var(--color-accent-amber); } |
|
|
.tool-state.approval-requested { color: var(--color-accent-amber); } |
|
|
.tool-state.approval-responded { color: var(--color-body); } |
|
|
.tool-state.approval-responded { color: var(--color-body); } |
|
|
@ -224,4 +233,22 @@ const collapsed = ref(false); |
|
|
font-size: 12px; |
|
|
font-size: 12px; |
|
|
color: var(--color-body); |
|
|
color: var(--color-body); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tool-preparing { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
gap: 6px; |
|
|
|
|
|
padding: 6px 0; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
color: var(--color-muted); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tool-preparing .spin { |
|
|
|
|
|
font-size: 13px; |
|
|
|
|
|
animation: spin 0.8s linear infinite; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes spin { |
|
|
|
|
|
to { transform: rotate(360deg); } |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|