nuxt-app/app/components/agent/AgentToolCallBlock.vue

<script setup lang="ts">
import type { MessagePart } from "~/composables/useLlmChat";

const props = defineProps<{
  part: MessagePart;
  isLoading: boolean;
}>();

const emit = defineEmits<{
  approve: [toolCallId: string, approved: boolean];
}>();

const collapsed = ref(false);
</script>

<template>
  <div class="agent-tool-call">
    <div class="tool-call-header" @click="collapsed = !collapsed">
      <Icon name="lucide:wrench" class="tool-icon" />
      <span class="tool-name">{{ part.toolName }}</span>
      <span :class="['tool-state', part.state]">
        <template v-if="part.state === 'call'">调用中…</template>
        <template v-else-if="part.state === 'approval-requested'">
          {{ part.isAutomaticApproval ? "自动批准中…" : "等待审批" }}
        </template>
        <template v-else-if="part.state === 'approval-responded'">
          {{ part.approved ? "已批准" : "已拒绝" }}
        </template>
        <template v-else>完成</template>
      </span>
      <Icon
        :name="collapsed ? 'lucide:chevron-right' : 'lucide:chevron-down'"
        class="collapse-toggle"
      />
    </div>

    <div v-show="!collapsed" class="tool-call-body">
      <div v-if="part.args" class="tool-args">
        <span class="tool-label">参数</span>
        <pre>{{ JSON.stringify(part.args, null, 2) }}</pre>
      </div>

      <div v-if="part.result !== undefined" class="tool-result">
        <span class="tool-label">结果</span>
        <pre>{{ typeof part.result === "string" ? part.result : JSON.stringify(part.result, null, 2) }}</pre>
      </div>

      <div
        v-if="part.state === 'approval-requested' && !part.isAutomaticApproval"
        class="tool-approval-actions"
      >
        <button
          class="btn-approve"
          :disabled="isLoading"
          @click="emit('approve', part.toolCallId!, true)"
        >
          <Icon name="lucide:check" />
          批准
        </button>
        <button
          class="btn-deny"
          :disabled="isLoading"
          @click="emit('approve', part.toolCallId!, false)"
        >
          <Icon name="lucide:x" />
          拒绝
        </button>
      </div>

      <div
        v-if="part.state === 'approval-responded' && part.approvalReason"
        class="tool-approval-reason"
      >
        <span class="tool-label">原因</span>
        <span>{{ part.approvalReason }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.agent-tool-call {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.tool-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}

.tool-call-header:hover {
  background: rgba(0, 0, 0, 0.02);
}

.tool-icon {
  font-size: 15px;
  color: var(--color-primary);
}

.tool-name {
  font-weight: 500;
  color: var(--color-ink);
}

.tool-state {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--color-surface-card);
  color: var(--color-muted);
}

.tool-state.call { color: var(--color-accent-amber); }
.tool-state.result { color: var(--color-accent-teal); }
.tool-state.approval-requested { color: var(--color-accent-amber); }
.tool-state.approval-responded { color: var(--color-body); }

.collapse-toggle {
  margin-left: auto;
  font-size: 14px;
  color: var(--color-muted);
}

.tool-call-body {
  padding: 0 14px 12px;
}

.tool-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.tool-args pre {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-body);
  background: var(--color-surface-card);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  margin: 0 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.tool-result pre {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-body);
  background: var(--color-surface-card);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.tool-approval-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-approve,
.btn-deny {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-approve {
  background: var(--color-accent-teal);
  color: #fff;
}

.btn-approve:hover:not(:disabled) {
  filter: brightness(0.95);
}

.btn-deny {
  background: var(--color-surface-card);
  color: var(--color-body);
  border-color: var(--color-hairline);
}

.btn-deny:hover:not(:disabled) {
  background: var(--color-surface-soft);
}

.btn-approve:disabled,
.btn-deny:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tool-approval-reason {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-body);
}
</style>