AgentServer/packages/chat-ui/src/components/InteractionCard.vue

<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import type { InteractionFormField, InteractionFormValue, InteractionResponse } from '@agent-server/shared'
import type { TimelineItem } from '../store'
import { stringifyInput, toolLabel } from '../util'

const props = defineProps<{
  item: Extract<TimelineItem, { kind: 'interaction' }>
  readonly?: boolean
  reply?: (interactionId: string, body: InteractionResponse) => Promise<unknown>
}>()

const root = ref<HTMLElement>()
const submitting = ref(false)
const error = ref<string | null>(null)
const denying = ref(false)
const denyReason = ref('')
const active = computed(() => !props.item.resolution && !props.readonly && !!props.reply)

const req = computed(() => props.item.request)
const approval = computed(() => (req.value.kind === 'approval' ? req.value : null))
const question = computed(() => (req.value.kind === 'question' ? req.value : null))
const form = computed(() => (req.value.kind === 'form' ? req.value : null))

const detail = computed(() => {
  const a = approval.value
  if (!a) return ''
  return a.detail?.command ?? a.detail?.url ?? a.detail?.path ?? stringifyInput(a.input)
})

const RESOLUTION_TEXT: Record<string, string> = {
  allowed: '已允许', denied: '已拒绝', answered: '已回答', timeout: '已超时（按拒绝处理）', cancelled: '已取消',
}
const resolutionText = computed(() => {
  const r = props.item.resolution
  if (!r) return ''
  if (form.value) return ({ answered: form.value.mode === 'url' ? '已完成' : '已提交', denied: '已拒绝', timeout: '已超时（未处理）', cancelled: '已关闭' } as Record<string, string>)[r] ?? r
  return RESOLUTION_TEXT[r]
})

// 表单询问（外部服务通过 MCP 询问）：按字段填写，默认值预先填好
const values = reactive<Record<string, InteractionFormValue | undefined>>({})
for (const f of form.value?.fields ?? []) {
  if (f.default !== undefined) values[f.name] = Array.isArray(f.default) ? [...f.default] : f.default
  else if (f.type === 'choice' && f.multiple) values[f.name] = []
}
const urlHost = computed(() => {
  try {
    return form.value?.url ? new URL(form.value.url).host : ''
  } catch {
    return ''
  }
})
const canSubmitForm = computed(() => form.value?.fields.every(f => !f.required || isFilled(values[f.name])) ?? false)
function isFilled(v: InteractionFormValue | undefined) {
  return v !== undefined && v !== '' && !(Array.isArray(v) && !v.length)
}
function toggleMulti(name: string, value: string) {
  const cur = (values[name] as string[] | undefined) ?? []
  values[name] = cur.includes(value) ? cur.filter(v => v !== value) : [...cur, value]
}
function submitForm() {
  const f = form.value
  if (!f) return
  if (f.mode === 'url') return void send({ action: 'accept' })
  const content: Record<string, InteractionFormValue> = {}
  for (const field of f.fields) {
    const v = values[field.name]
    if (!isFilled(v)) continue
    content[field.name] = (field.type === 'number' || field.type === 'integer') && typeof v === 'string' ? Number(v) : v!
  }
  void send({ action: 'accept', content })
}
function shownValue(field: InteractionFormField, v: InteractionFormValue | undefined): string {
  if (v === undefined) return '—'
  if (field.type === 'boolean') return v ? '是' : '否'
  if (field.type === 'choice') {
    const label = (x: string) => field.options.find(o => o.value === x)?.label ?? x
    return Array.isArray(v) ? v.map(label).join('、') || '—' : label(String(v))
  }
  return String(v)
}
const FORMAT_INPUT = { email: 'email', uri: 'url', date: 'date', 'date-time': 'datetime-local' } as const
function inputType(f: InteractionFormField) {
  if (f.type === 'number' || f.type === 'integer') return 'number'
  return f.type === 'string' && f.format ? FORMAT_INPUT[f.format] : 'text'
}

// 提问：每个问题的选择与"其他"输入
const answers = reactive<Record<string, string[]>>({})
const others = reactive<Record<string, string>>({})
function toggle(qid: string, label: string, multi: boolean) {
  const cur = answers[qid] ?? []
  answers[qid] = multi ? (cur.includes(label) ? cur.filter(l => l !== label) : [...cur, label]) : [label]
  if (!multi) others[qid] = ''
}
function picked(qid: string): string[] {
  if (active.value) return answers[qid] ?? []
  const a = props.item.answers?.[qid]
  return a === undefined ? [] : Array.isArray(a) ? a : [a]
}

const canSubmitQuestion = computed(() =>
  question.value?.questions.every(q => (answers[q.id]?.length ?? 0) > 0 || (others[q.id] ?? '').trim()) ?? false)

async function send(body: InteractionResponse) {
  if (!active.value || submitting.value) return
  submitting.value = true
  error.value = null
  try {
    await props.reply!(props.item.id, body)
  } catch (err) {
    error.value = (err as Error).message
  } finally {
    submitting.value = false
  }
}

function submitQuestion() {
  const q = question.value
  if (!q || !canSubmitQuestion.value) return
  const out: Record<string, string | string[]> = {}
  for (const item of q.questions) {
    const picked = [...(answers[item.id] ?? [])]
    const other = (others[item.id] ?? '').trim()
    if (other) picked.push(other)
    out[item.id] = item.multiSelect ? picked : picked[0] ?? ''
  }
  void send({ answers: out })
}

async function startDeny() {
  denying.value = true
  await nextTick()
  root.value?.querySelector<HTMLInputElement>('.deny-input')?.focus()
}

function onKey(e: KeyboardEvent) {
  if (!approval.value || !active.value || denying.value) return
  if (e.key === '1') void send({ decision: 'allow_once' })
  else if (e.key === '2') void send({ decision: 'allow_session' })
  else if (e.key === '3') void startDeny()
}

onMounted(() => {
  if (active.value) root.value?.focus({ preventScroll: true })
})
</script>

<template>
  <div v-if="approval && !active" class="compact" :class="item.resolution ?? 'pending'">
    <span class="codicon" :class="item.resolution === 'allowed' ? 'codicon-pass' : item.resolution ? 'codicon-circle-slash' : 'codicon-shield'" />
    <span>{{ item.resolution ? RESOLUTION_TEXT[item.resolution] : '等待审批' }}</span>
    <span class="compact-title">{{ toolLabel(approval.tool) }}：{{ approval.title }}</span>
    <span v-if="item.reason" class="compact-reason">（{{ item.reason }}）</span>
  </div>
  <div v-else ref="root" class="card" :class="{ done: !active }" tabindex="0" @keydown="onKey">
    <template v-if="approval">
      <div class="header">
        <span class="codicon codicon-shield" />
        {{ active ? `允许 ${toolLabel(approval.tool)} 执行这个操作吗？` : `${toolLabel(approval.tool)}：${approval.title}` }}
      </div>
      <template v-if="active">
        <div class="desc">{{ approval.title }}</div>
        <pre v-if="detail" class="detail">{{ detail }}</pre>
        <div v-if="approval.detail?.reason" class="reason">{{ approval.detail.reason }}</div>
        <div class="buttons">
          <button type="button" class="opt primary" :disabled="submitting" @click="send({ decision: 'allow_once' })">
            <span class="num">1</span>允许
          </button>
          <button v-if="approval.options.includes('allow_session')" type="button" class="opt" :disabled="submitting" @click="send({ decision: 'allow_session' })">
            <span class="num">2</span>允许，本会话不再询问 {{ toolLabel(approval.tool) }}
          </button>
          <div v-if="!denying" class="opt-row">
            <button type="button" class="opt" :disabled="submitting" @click="startDeny"><span class="num">3</span>拒绝，并告诉 Agent 原因…</button>
          </div>
          <form v-else class="deny" @submit.prevent="send({ decision: 'deny', reason: denyReason.trim() || undefined })">
            <input v-model="denyReason" class="deny-input" aria-label="拒绝原因" placeholder="拒绝原因（可选），回车确认" @keydown.esc="denying = false">
            <button type="submit" class="deny-btn" :disabled="submitting">拒绝</button>
          </form>
        </div>
        <div class="hint">按 1 / 2 / 3 快速选择</div>
      </template>
    </template>

    <template v-else-if="question">
      <div class="header"><span class="codicon codicon-question" />{{ active ? 'Agent 需要你的回答' : 'Agent 的提问' }}</div>
      <div v-for="q in question.questions" :key="q.id" class="question">
        <div class="q-title"><span v-if="q.header" class="chip">{{ q.header }}</span>{{ q.question }}</div>
        <div class="q-options">
          <button
            v-for="o in q.options" :key="o.label" type="button" class="q-opt"
            :class="{ picked: picked(q.id).includes(o.label) }" :disabled="!active"
            @click="toggle(q.id, o.label, q.multiSelect)"
          >
            <span class="codicon" :class="q.multiSelect ? (picked(q.id).includes(o.label) ? 'codicon-pass-filled' : 'codicon-circle-large') : (picked(q.id).includes(o.label) ? 'codicon-circle-filled' : 'codicon-circle-large')" />
            <span class="q-opt-text"><span class="q-label">{{ o.label }}</span><span v-if="o.description" class="q-desc">{{ o.description }}</span></span>
          </button>
          <div v-if="!active && picked(q.id).some(a => !q.options.some(o => o.label === a))" class="q-other">
            其他：{{ picked(q.id).filter(a => !q.options.some(o => o.label === a)).join('、') }}
          </div>
          <input
            v-if="active" v-model="others[q.id]" class="deny-input" aria-label="其他答案" placeholder="其他（自己填写）"
            @input="!q.multiSelect && others[q.id] ? (answers[q.id] = []) : null"
          >
        </div>
      </div>
      <div v-if="active" class="buttons">
        <button type="button" class="submit" :disabled="!canSubmitQuestion || submitting" @click="submitQuestion">提交回答</button>
      </div>
    </template>

    <template v-else-if="form">
      <div class="header">
        <span class="codicon" :class="form.mode === 'url' ? 'codicon-link-external' : 'codicon-edit'" />
        {{ form.mode === 'url' ? `「${form.source}」请你打开网址完成操作` : `「${form.source}」需要你提供信息` }}
      </div>
      <div v-if="form.message" class="desc form-message">{{ form.message }}</div>
      <template v-if="form.mode === 'url'">
        <div class="url-box">
          <div class="url-host">{{ urlHost }}</div>
          <div class="url-full">{{ form.url }}</div>
        </div>
        <div v-if="active" class="buttons row">
          <a class="submit link-btn" :href="form.url" target="_blank" rel="noopener noreferrer"><span class="codicon codicon-link-external" />打开网址</a>
          <button type="button" class="opt-inline" :disabled="submitting" @click="submitForm">我已完成</button>
          <button type="button" class="opt-inline" :disabled="submitting" @click="send({ action: 'decline' })">拒绝</button>
        </div>
        <div v-if="active" class="hint">请确认网址的域名可信再打开；完成后点"我已完成"。</div>
      </template>
      <template v-else>
        <form v-if="active" class="itx-fields" @submit.prevent="submitForm">
          <div v-for="f in form.fields" :key="f.name" class="itx-field">
            <label class="itx-label" :for="`${item.id}-${f.name}`">{{ f.title }}<span v-if="f.required" class="req">*</span></label>
            <div v-if="f.description" class="q-desc">{{ f.description }}</div>
            <label v-if="f.type === 'boolean'" class="check">
              <input :id="`${item.id}-${f.name}`" type="checkbox" :checked="values[f.name] === true" @change="values[f.name] = ($event.target as HTMLInputElement).checked">是
            </label>
            <select v-else-if="f.type === 'choice' && !f.multiple" :id="`${item.id}-${f.name}`" v-model="values[f.name]" class="f-input">
              <option :value="undefined">请选择</option>
              <option v-for="o in f.options" :key="o.value" :value="o.value">{{ o.label }}</option>
            </select>
            <div v-else-if="f.type === 'choice'" :id="`${item.id}-${f.name}`" class="q-options">
              <button v-for="o in f.options" :key="o.value" type="button" class="q-opt" :class="{ picked: (values[f.name] as string[] | undefined)?.includes(o.value) }" @click="toggleMulti(f.name, o.value)">
                <span class="codicon" :class="(values[f.name] as string[] | undefined)?.includes(o.value) ? 'codicon-pass-filled' : 'codicon-circle-large'" />
                <span class="q-label">{{ o.label }}</span>
              </button>
            </div>
            <input
              v-else :id="`${item.id}-${f.name}`" v-model="values[f.name]" class="f-input" :type="inputType(f)"
              :min="f.type !== 'string' ? f.minimum : undefined" :max="f.type !== 'string' ? f.maximum : undefined" :step="f.type === 'integer' ? 1 : f.type === 'number' ? 'any' : undefined"
              :minlength="f.type === 'string' ? f.minLength : undefined" :maxlength="f.type === 'string' ? f.maxLength : undefined"
            >
          </div>
          <div class="buttons row">
            <button type="submit" class="submit" :disabled="!canSubmitForm || submitting">提交</button>
            <button type="button" class="opt-inline" :disabled="submitting" @click="send({ action: 'decline' })">拒绝</button>
            <button type="button" class="opt-inline" :disabled="submitting" @click="send({ action: 'cancel' })">暂不处理</button>
          </div>
        </form>
        <div v-else-if="item.content" class="itx-fields done-values">
          <div v-for="f in form.fields" :key="f.name" class="kv"><span class="k">{{ f.title }}</span><span>{{ shownValue(f, item.content[f.name]) }}</span></div>
        </div>
      </template>
    </template>

    <div v-if="item.resolution" class="resolved" :class="item.resolution">{{ resolutionText }}</div>
    <div v-if="error" class="err">{{ error }}</div>
  </div>
</template>

<style scoped>
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  margin: 2px 0 6px;
  background: var(--app-input-secondary-background);
  border: 1px solid var(--app-input-border);
  border-radius: var(--corner-radius-large);
  outline: none;
}
.card:focus-within { border-color: color-mix(in srgb, var(--app-input-active-border) 65%, transparent); }
.card.done { opacity: 0.85; }
.header { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.desc { color: var(--app-secondary-foreground); font-size: 12px; }
.detail {
  margin: 0;
  padding: 6px 8px;
  max-height: 200px;
  overflow: auto;
  background: var(--app-code-background);
  border-radius: var(--corner-radius-medium);
  font-family: var(--app-monospace-font-family);
  font-size: var(--app-monospace-font-size);
  white-space: pre-wrap;
  word-break: break-word;
}
.reason { font-size: 12px; color: var(--app-warning); }
.buttons { display: flex; flex-direction: column; gap: 2px; }
.opt, .q-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: var(--corner-radius-small);
  background: transparent;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
}
.opt:hover:not(:disabled), .q-opt:hover:not(:disabled) { background: var(--app-list-hover-background); }
.opt.primary { background: var(--app-list-active-background); }
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--app-secondary-foreground);
  border: 1px solid var(--app-input-border);
}
.deny { display: flex; gap: 6px; padding: 2px 0; }
.deny-input {
  flex: 1;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--app-input-border);
  border-radius: var(--corner-radius-small);
  background: var(--app-input-background);
  outline: none;
}
.deny-input:focus { border-color: var(--app-input-active-border); }
.deny-btn, .submit {
  height: 26px;
  padding: 0 12px;
  border: none;
  border-radius: var(--corner-radius-small);
  cursor: pointer;
  background: var(--app-button-background);
  color: var(--app-button-foreground);
}
.deny-btn { background: var(--app-danger); }
.submit { align-self: flex-start; }
.submit:disabled, .deny-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hint { font-size: 11px; color: var(--app-secondary-foreground); }
.question { display: flex; flex-direction: column; gap: 4px; }
.q-title { display: flex; align-items: center; gap: 6px; }
.chip {
  padding: 0 6px;
  border-radius: var(--corner-radius-small);
  font-size: 11px;
  background: color-mix(in srgb, var(--app-primary-foreground) 10%, transparent);
}
.q-options { display: flex; flex-direction: column; gap: 2px; }
.q-opt { align-items: flex-start; font-weight: 400; }
.q-opt .codicon { margin-top: 2px; font-size: 14px; color: var(--app-secondary-foreground); }
.q-opt.picked .codicon { color: var(--app-claude-orange); }
.q-opt-text { display: flex; flex-direction: column; }
.q-label { font-weight: 500; }
.q-desc { font-size: 12px; color: var(--app-secondary-foreground); }
.resolved { font-size: 12px; color: var(--app-secondary-foreground); }
.compact { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--app-secondary-foreground); min-width: 0; }
.compact .codicon { font-size: 12px; align-self: center; }
.compact.allowed .codicon { color: var(--app-success); }
.compact.denied .codicon, .compact.timeout .codicon, .compact.cancelled .codicon { color: var(--app-danger); }
.compact-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-family: var(--app-monospace-font-family); }
.compact-reason { flex: none; }
.q-other { font-size: 12px; padding: 2px 8px; }
.resolved.allowed, .resolved.answered { color: var(--app-success); }
.resolved.denied, .resolved.timeout { color: var(--app-danger); }
.err { font-size: 12px; color: var(--app-error-foreground); }
.form-message { white-space: pre-wrap; }
/* 类名带前缀：后台的全局样式中有 field（固定高度）等通用类，同名会把字段压扁 */
.itx-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.itx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* 表单输入框：纵向排列时不能用 flex: 1（会把高度压扁、控件重叠） */
.f-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--app-input-border);
  border-radius: var(--corner-radius-small);
  background: var(--app-input-background);
  color: inherit;
  font: inherit;
  outline: none;
}
.f-input:focus { border-color: var(--app-input-active-border); }
.q-options > .deny-input { flex: none; box-sizing: border-box; width: 100%; }
.itx-field .q-desc { overflow-wrap: anywhere; }
.itx-label { font-weight: 500; }
.req { color: var(--app-danger); margin-left: 2px; }
.check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.buttons.row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.opt-inline {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--app-input-border);
  border-radius: var(--corner-radius-small);
  background: transparent;
  cursor: pointer;
}
.opt-inline:hover:not(:disabled) { background: var(--app-list-hover-background); }
.link-btn { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; line-height: 26px; }
.url-box {
  padding: 6px 8px;
  background: var(--app-code-background);
  border-radius: var(--corner-radius-medium);
  word-break: break-all;
}
.url-host { font-weight: 700; }
.url-full { font-size: 12px; color: var(--app-secondary-foreground); font-family: var(--app-monospace-font-family); }
.done-values { gap: 2px; font-size: 12px; }
.kv { display: flex; gap: 8px; }
.kv .k { color: var(--app-secondary-foreground); min-width: 72px; }
</style>