@veltra/ai 2.1.6 → 2.1.8

package/src/components/ai-chat/__test__/ai-chat.test.ts

@@ -1,9 +1,29 @@
 import { describe, expect, it, vi } from 'vitest'
-import { createApp, defineComponent, h, nextTick, ref, type PropType } from 'vue'
-
-import type { ChatMessage, ChatTool, ChatToolCall, ChatTransport } from '../../../chat/types'
+import {
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  reactive,
+  ref,
+  type Component,
+  type PropType
+} from 'vue'
+
+import {
+  createServerTransport,
+  type ChatSessionAdapter,
+  type ChatSessionEvent
+} from '../../../chat/session'
+import type {
+  ChatMessage,
+  ChatTool,
+  ChatToolCall,
+  ChatToolMeta,
+  ChatTransport
+} from '../../../chat/types'
 import type { ChatModelOption } from '../../../providers'
-import type { AiChatExposed } from '../../../types'
+import type { AiChatExposed, AiChatProps } from '../../../types'
 import UAiChat from '../ai-chat.vue'
 
 // happy-dom 环境下用桩组件替换 MarkdownRender，仅验证组件自身逻辑
@@ -17,13 +37,16 @@ vi.mock('markstream-vue', () => ({
 }))
 
 function mountAiChat(options: {
-  transport: ChatTransport
-  tools?: ChatTool[]
+  transport: AiChatProps['transport']
+  tools?: AiChatProps['tools']
   welcome?: string | string[]
   models?: ChatModelOption[]
   model?: string
   reasoningLevel?: string
   tokenUsageDetail?: boolean
+  messages?: ChatMessage[]
+  toolIcons?: Record<string, Component>
+  readonly?: boolean
   slots?: Record<string, (scope: any) => any>
 }) {
   const host = document.createElement('div')
@@ -43,7 +66,10 @@ function mountAiChat(options: {
           models: options.models,
           model: options.model,
           reasoningLevel: options.reasoningLevel,
-          tokenUsageDetail: options.tokenUsageDetail
+          tokenUsageDetail: options.tokenUsageDetail,
+          messages: options.messages,
+          toolIcons: options.toolIcons,
+          readonly: options.readonly
         },
         options.slots
       )
@@ -1251,4 +1277,376 @@ describe('UAiChat', () => {
     expect(noCache.host.querySelector('.u-ai-chat__input-usage')?.textContent).not.toContain('缓存')
     noCache.unmount()
   })
+
+  const UNKNOWN_TOOL = 'totally-unknown-tool-xyz'
+
+  function seedUnknownCall(init: Partial<ChatToolCall> = {}) {
+    const call = reactive<ChatToolCall>({
+      id: 'c1',
+      name: UNKNOWN_TOOL,
+      arguments: '{"q":"hi"}',
+      status: 'pending',
+      ...init
+    })
+    const messages: ChatMessage[] = [
+      { id: 'u1', role: 'user', content: 'go' },
+      { id: 'a1', role: 'assistant', content: '', status: 'done', toolCalls: [call] }
+    ]
+    return { call, messages }
+  }
+
+  async function expandToolCard(host: HTMLElement) {
+    const header = host.querySelector<HTMLElement>('.u-ai-chat__tool-call .u-collapse__header')
+    header?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    await nextTick()
+  }
+
+  function assertGenericCard(host: HTMLElement, status: 'pending' | 'success' | 'error') {
+    const card = host.querySelector(`.u-ai-chat__tool-call.is-${status}`)
+    expect(card).toBeTruthy()
+    expect(host.querySelector('.u-ai-chat__tool-call-name')?.textContent).toBe(UNKNOWN_TOOL)
+    expect(host.querySelector('.u-ai-chat__tool-call-status')).toBeTruthy()
+    expect(host.textContent).not.toContain('未找到')
+  }
+
+  it('未注册工具名 pending → success 走出通用卡片，无空白、无未找到工具文案', async () => {
+    const { call, messages } = seedUnknownCall()
+    const { host, unmount } = mountAiChat({ transport: () => {}, messages })
+    await nextTick()
+
+    assertGenericCard(host, 'pending')
+    expect(host.querySelector('.u-ai-chat__tool-call-name')?.classList.contains('u-shine')).toBe(
+      true
+    )
+    expect(host.textContent).toContain('"q": "hi"')
+
+    call.status = 'success'
+    call.result = '{"ok":true}'
+    await nextTick()
+    assertGenericCard(host, 'success')
+
+    await expandToolCard(host)
+    expect(host.textContent).toContain('"ok": true')
+    unmount()
+  })
+
+  it('未注册工具名 pending → error 走出通用卡片，无空白、无未找到工具文案', async () => {
+    const { call, messages } = seedUnknownCall()
+    const { host, unmount } = mountAiChat({ transport: () => {}, messages })
+    await nextTick()
+    assertGenericCard(host, 'pending')
+
+    call.status = 'error'
+    call.error = 'boom'
+    await nextTick()
+    assertGenericCard(host, 'error')
+
+    await expandToolCard(host)
+    expect(host.textContent).toContain('boom')
+    expect(host.textContent).toContain('错误')
+    unmount()
+  })
+
+  it('通用卡片展示 view，长 JSON 可截断并展开看全文', async () => {
+    const long = 'x'.repeat(500)
+    const { call, messages } = seedUnknownCall({
+      status: 'success',
+      result: JSON.stringify({ data: long }),
+      view: { kind: 'diff', body: 'patch-xyz' }
+    })
+    const { host, unmount } = mountAiChat({ transport: () => {}, messages })
+    await nextTick()
+    await expandToolCard(host)
+
+    expect(host.textContent).toContain('视图')
+    expect(host.textContent).toContain('patch-xyz')
+    expect(host.textContent).not.toContain(long)
+    const toggle = [
+      ...host.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call-json-toggle')
+    ].find((el) => el.textContent?.includes('展开'))
+    expect(toggle).toBeTruthy()
+    toggle!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await nextTick()
+    expect(host.textContent).toContain(long)
+    unmount()
+  })
+
+  it('toolIcons 可覆盖未知名工具图标', async () => {
+    const OverrideIcon = defineComponent({
+      setup: () => () => h('svg', { class: 'override-tool-icon' })
+    })
+    const { messages } = seedUnknownCall()
+    const { host, unmount } = mountAiChat({
+      transport: () => {},
+      messages,
+      toolIcons: { [UNKNOWN_TOOL]: OverrideIcon }
+    })
+    await nextTick()
+    expect(host.querySelector('.override-tool-icon')).toBeTruthy()
+    unmount()
+  })
+
+  it('session 下不注入内置 askQuestion，无 meta 时走通用视图', async () => {
+    const history: ChatSessionEvent[] = [
+      {
+        type: 'tool/call',
+        callId: 'c1',
+        name: 'askQuestion',
+        arguments: '{"questions":[{"question":"Q?"}]}',
+        seq: 1
+      }
+    ]
+    const { host, unmount } = mountAiChat({
+      transport: createServerTransport({
+        subscribe: () => () => {},
+        send: async () => {},
+        cancel: async () => {},
+        respond: async () => {},
+        fetchHistory: async () => ({ events: history, hasMore: false }),
+        selectModel: async () => {}
+      })
+    })
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__tool-call-name')?.textContent).toBe('askQuestion')
+    })
+    expect(host.querySelector('.u-ai-chat__ask-question')).toBeFalsy()
+    unmount()
+  })
+
+  it('session 下 meta.render 优先于通用视图', async () => {
+    const meta: ChatToolMeta = {
+      name: 'server-tool',
+      label: '服务端工具',
+      render: defineComponent({
+        props: { toolCall: { type: Object as PropType<ChatToolCall>, required: true } },
+        setup: () => () => h('div', { class: 'meta-render' }, 'meta-body')
+      })
+    }
+    const history: ChatSessionEvent[] = [
+      { type: 'tool/call', callId: 'c1', name: 'server-tool', arguments: '{}', seq: 1 }
+    ]
+    const { host, unmount } = mountAiChat({
+      transport: createServerTransport({
+        subscribe: () => () => {},
+        send: async () => {},
+        cancel: async () => {},
+        respond: async () => {},
+        fetchHistory: async () => ({ events: history, hasMore: false }),
+        selectModel: async () => {}
+      }),
+      tools: [meta]
+    })
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__tool-call-name')?.textContent).toBe('服务端工具')
+    })
+    expect(host.querySelector('.meta-render')?.textContent).toBe('meta-body')
+    expect(host.textContent).not.toContain('参数')
+    unmount()
+  })
+})
+
+function createFakeAdapter(options?: {
+  history?: ChatSessionEvent[]
+}): ChatSessionAdapter & { emit: (event: ChatSessionEvent) => void } {
+  let listener: { onEvent(event: ChatSessionEvent): void } | undefined
+  const adapter: ChatSessionAdapter = {
+    subscribe(handlers) {
+      listener = handlers
+      return () => {
+        listener = undefined
+      }
+    },
+    send: vi.fn(async () => {}),
+    cancel: vi.fn(async () => {}),
+    respond: vi.fn(async () => {}),
+    fetchHistory: vi.fn(async () => ({ events: options?.history ?? [], hasMore: false })),
+    selectModel: vi.fn(async () => {})
+  }
+  return Object.assign(adapter, {
+    emit(event: ChatSessionEvent) {
+      listener?.onEvent(event)
+    }
+  })
+}
+
+async function mountSession(options?: {
+  history?: ChatSessionEvent[]
+  readonly?: boolean
+  welcome?: string | string[]
+}) {
+  const adapter = createFakeAdapter({ history: options?.history })
+  const mounted = mountAiChat({
+    transport: createServerTransport(adapter),
+    readonly: options?.readonly,
+    welcome: options?.welcome
+  })
+  await vi.waitFor(() => {
+    expect(adapter.fetchHistory).toHaveBeenCalled()
+  })
+  return { ...mounted, adapter }
+}
+
+const click = (el: HTMLElement) => el.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+describe('UAiChat P4 作业条 / 审批 / 只读 / 提问', () => {
+  it('无 jobs 不渲染作业条；有 jobs 显示图标、文案、状态点，进行中扫光', async () => {
+    const { host, adapter, unmount } = await mountSession()
+    expect(host.querySelector('.u-ai-chat__job-bar')).toBeFalsy()
+
+    adapter.emit({
+      type: 'jobs/snapshot',
+      jobs: [{ id: 'j1', kind: 'bash', label: '跑测试', status: 'running' }]
+    })
+    await nextTick()
+
+    expect(host.querySelector('.u-ai-chat__job-bar')).toBeTruthy()
+    expect(host.querySelector('.u-ai-chat__job-bar-label')?.textContent).toContain('跑测试')
+    expect(host.querySelector('.u-ai-chat__job-bar-label')?.classList.contains('u-shine')).toBe(
+      true
+    )
+    expect(host.querySelector('.u-ai-chat__job-bar-dot.is-running')).toBeTruthy()
+
+    host.querySelector<HTMLElement>('.u-ai-chat__job-bar-head')!.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__job-bar-item')).toBeFalsy()
+    unmount()
+  })
+
+  it('审批横幅仅无 callId 出现；有 callId 走工具卡确认', async () => {
+    const { host, adapter, unmount } = await mountSession()
+
+    adapter.emit({ type: 'tool/call', callId: 'c1', name: 'bash', arguments: '{}', seq: 1 })
+    adapter.emit({
+      type: 'approval/requested',
+      approvalId: 'a1',
+      toolName: 'bash',
+      callId: 'c1',
+      rpcId: 'rpc-card'
+    })
+    await nextTick()
+
+    expect(host.querySelector('.u-ai-chat__approval-banner-card')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__tool-call-confirm')).toBeTruthy()
+
+    adapter.emit({
+      type: 'approval/requested',
+      approvalId: 'a2',
+      toolName: 'deploy',
+      reason: '发布到生产',
+      rpcId: 'rpc-banner'
+    })
+    await nextTick()
+
+    expect(host.querySelector('.u-ai-chat__approval-banner-card')).toBeTruthy()
+    expect(host.textContent).toContain('发布到生产')
+
+    const allow = [
+      ...host.querySelectorAll<HTMLElement>('.u-ai-chat__approval-banner-card button')
+    ].find((btn) => btn.textContent?.includes('允许'))!
+    click(allow)
+    await vi.waitFor(() => {
+      expect(adapter.respond).toHaveBeenCalledWith('rpc-banner', true, undefined)
+    })
+    unmount()
+  })
+
+  it('readonly 不展示输入区，欢迎语点击不发送，队列无插队编辑移除', async () => {
+    const { host, adapter, unmount } = await mountSession({ readonly: true, welcome: '点我发送' })
+    expect(host.querySelector('.u-ai-chat__input-area')).toBeFalsy()
+
+    host.querySelector<HTMLElement>('.u-ai-chat__welcome-item')!.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__message--user')).toBeFalsy()
+
+    adapter.emit({ type: 'queue/snapshot', items: [{ id: 'q1', content: '排队中' }] })
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__queue-text')?.textContent).toContain('排队中')
+    expect(host.querySelector('.u-ai-chat__queue-actions')).toBeFalsy()
+    unmount()
+  })
+
+  it('非只读客户端输入区与欢迎点击发送与现状一致', async () => {
+    const transport: ChatTransport = (_req, handlers) => {
+      handlers.onTextDelta('收到')
+    }
+    const { host, unmount } = mountAiChat({ transport, welcome: '快捷提问' })
+    expect(host.querySelector('.u-ai-chat__input-area')).toBeTruthy()
+    host.querySelector<HTMLElement>('.u-ai-chat__welcome-item')!.click()
+    await nextTick()
+    expect(
+      host.querySelector('.u-ai-chat__message--user .u-ai-chat__message-bubble')?.textContent
+    ).toContain('快捷提问')
+    unmount()
+  })
+
+  it('ask-question 客户端提交走 resolveAskQuestion', async () => {
+    const rounds: ChatMessage[][] = []
+    let round = 0
+    const transport: ChatTransport = (req, handlers) => {
+      round++
+      rounds.push(req.messages)
+      if (round === 1) {
+        handlers.onToolCall?.({
+          id: 'q1',
+          name: 'askQuestion',
+          arguments: JSON.stringify({ questions: [{ question: 'Q？', options: ['A'] }] })
+        })
+      } else {
+        handlers.onTextDelta('明白了')
+      }
+    }
+    const { host, chat, unmount } = mountAiChat({ transport })
+    chat.value?.send('提问')
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__ask-question-q')?.textContent).toContain('Q？')
+    })
+    click(
+      [...host.querySelectorAll<HTMLElement>('.u-ai-chat__ask-question-opt')].find((el) =>
+        el.textContent?.includes('A')
+      )!
+    )
+    await nextTick()
+    click(
+      [...host.querySelectorAll<HTMLElement>('.u-ai-chat__ask-question-actions button')].find(
+        (btn) => btn.textContent?.includes('提交')
+      )!
+    )
+    await vi.waitFor(() => {
+      expect(rounds.length).toBe(2)
+    })
+    const toolMessage = rounds[1]![rounds[1]!.length - 1]!
+    expect(toolMessage.role).toBe('tool')
+    expect(JSON.parse(toolMessage.content)).toEqual({ answers: [{ question: 'Q？', answer: 'A' }] })
+    unmount()
+  })
+
+  it('ask-question session 提交走 session.respond', async () => {
+    const { host, adapter, unmount } = await mountSession()
+    adapter.emit({
+      type: 'question/requested',
+      rpcId: 'rpc-q',
+      questions: [{ question: '选一个', options: ['A', 'B'] }]
+    })
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__ask-question-q')?.textContent).toContain('选一个')
+
+    click(
+      [...host.querySelectorAll<HTMLElement>('.u-ai-chat__ask-question-opt')].find((el) =>
+        el.textContent?.includes('A')
+      )!
+    )
+    await nextTick()
+    click(
+      [...host.querySelectorAll<HTMLElement>('.u-ai-chat__ask-question-actions button')].find(
+        (btn) => btn.textContent?.includes('提交')
+      )!
+    )
+    await vi.waitFor(() => {
+      expect(adapter.respond).toHaveBeenCalledWith('rpc-q', true, [
+        { question: '选一个', answer: 'A' }
+      ])
+    })
+    unmount()
+  })
 })

package/src/components/ai-chat/__test__/tool-icons.test.ts

@@ -0,0 +1,33 @@
+import { EditPen, Folder, Internet, QuestionFilled, Terminal, Tools } from '@veltra/icons/normal'
+import { describe, expect, it } from 'vitest'
+import { defineComponent, h } from 'vue'
+
+import { FALLBACK_TOOL_ICON, resolveToolIcon } from '../tool-icons'
+
+describe('resolveToolIcon', () => {
+  it('按名称子串匹配内置规则', () => {
+    expect(resolveToolIcon('run_bash')).toBe(Terminal)
+    expect(resolveToolIcon('Terminal')).toBe(Terminal)
+    expect(resolveToolIcon('fs_read')).toBe(Folder)
+    expect(resolveToolIcon('read_file')).toBe(Folder)
+    expect(resolveToolIcon('web_search')).toBe(Internet)
+    expect(resolveToolIcon('globe-fetch')).toBe(Internet)
+    expect(resolveToolIcon('str_replace_editor')).toBe(EditPen)
+    expect(resolveToolIcon('pencil')).toBe(EditPen)
+    expect(resolveToolIcon('askQuestion')).toBe(QuestionFilled)
+    expect(resolveToolIcon('clarifying_question')).toBe(QuestionFilled)
+  })
+
+  it('未知名与空名走兜底，不得 throw', () => {
+    expect(resolveToolIcon('totally-unknown-tool-xyz')).toBe(Tools)
+    expect(resolveToolIcon('totally-unknown-tool-xyz')).toBe(FALLBACK_TOOL_ICON)
+    expect(resolveToolIcon('')).toBe(FALLBACK_TOOL_ICON)
+    expect(() => resolveToolIcon('totally-unknown-tool-xyz')).not.toThrow()
+  })
+
+  it('宿主覆盖表精确名优先于内置规则', () => {
+    const Override = defineComponent({ setup: () => () => h('span') })
+    expect(resolveToolIcon('run_bash', { run_bash: Override })).toBe(Override)
+    expect(resolveToolIcon('run_bash', { other: Override })).toBe(Terminal)
+  })
+})

package/src/components/ai-chat/ai-chat.vue

@@ -14,6 +14,7 @@
         :messages="messages"
         :welcome="welcome"
         :running="running"
+        :readonly="readonly"
         :renderer-props="rendererProps"
         @respond="respondToolCall"
         @regenerate="regenerate"
@@ -24,14 +25,24 @@
         </template>
       </MessageList>
 
+      <div v-if="pendingQuestion" :class="cls.e('session-question')">
+        <AskQuestion :questions="pendingQuestion.questions" @submit="handleQuestionSubmit" />
+      </div>
+
+      <ApprovalBanner :approvals="pendingApprovals" @respond="respondSession" />
+
       <QueueList
         :queue="queue"
+        :readonly="readonly"
         @start-now="startQueued"
         @edit="handleQueueEdit"
         @remove="removeQueued"
       />
 
+      <JobBar :jobs="jobs" />
+
       <ChatInput
+        v-if="!readonly"
         ref="chatInputRef"
         v-model:model="model"
         v-model:reasoning-level="reasoningLevel"
@@ -65,12 +76,17 @@ import { ULayout } from '@veltra/desktop'
 import { bem } from '@veltra/utils'
 import { computed, provide, ref, useSlots, useTemplateRef, watch } from 'vue'
 
-import type { ChatAttachment, ChatToolCall } from '../../chat/types'
+import { isServerTransport } from '../../chat/session'
+import type { ChatAttachment, ChatTool, ChatToolCall, ChatToolMeta } from '../../chat/types'
 import { useChat } from '../../chat/use-chat'
 import { createBuiltinTools } from '../../tools'
+import type { AskQuestionAnswer, AskQuestionResult } from '../../tools/ask-question/ask-question'
 import type { _AiChatExposed, AiChatEmits, AiChatProps } from '../../types'
+import ApprovalBanner from './approval-banner.vue'
+import AskQuestion from './ask-question.vue'
 import ChatInput from './chat-input.vue'
 import { AiChatDIKey } from './di'
+import JobBar from './job-bar.vue'
 import MessageList from './message-list.vue'
 import QueueList from './queue-list.vue'
 import SidePanel from './side-panel.vue'
@@ -92,27 +108,39 @@ const cls = bem('ai-chat')
 
 const slots = useSlots()
 
-/** 内置 + 用户工具（同名内置优先），供工具卡片解析 icon/label/render/renderTo/autoCollapse */
-const toolMap = computed(() => {
+/**
+ * 按 name 查表：session 下 tools 仅为渲染元信息（不注入内置工具，忽略 execute 等）。
+ * 函数 transport 仍注入 createBuiltinTools（同名内置优先）。
+ */
+const toolMap = computed((): Record<string, ChatTool | ChatToolMeta | undefined> => {
+  if (isServerTransport(props.transport)) {
+    return Object.fromEntries((props.tools ?? []).map((t) => [t.name, t]))
+  }
   const builtins = createBuiltinTools()
   const names = new Set(builtins.map((t) => t.name))
   const tools = [...builtins, ...(props.tools ?? []).filter((t) => !names.has(t.name))]
   return Object.fromEntries(tools.map((t) => [t.name, t]))
 })
 
+const toolIcons = computed(() => props.toolIcons)
+
 const {
   messages,
   model,
   reasoningLevel,
   running,
   queue,
+  jobs,
   tokenUsage,
   lastTurnUsage,
+  pendingApprovals,
+  pendingQuestion,
   send,
   abort,
   regenerate,
   clear,
   respondToolCall,
+  respondSession,
   enqueue,
   startQueued,
   removeQueued
@@ -175,7 +203,7 @@ const closePanel = () => {
   activePanelCallId.value = null
 }
 
-provide(AiChatDIKey, { cls, slots, tools: toolMap, openPanel })
+provide(AiChatDIKey, { cls, slots, tools: toolMap, toolIcons, openPanel })
 
 /**
  * 面板宽度：经 ULayout 列轨施加（cols = 1fr + 面板宽度），
@@ -266,6 +294,7 @@ const restoreEditing = () => {
 }
 
 const handleSend = (content: string, attachments: ChatAttachment[]) => {
+  if (props.readonly) return
   // 编辑态提交：插回原锚点位置（会话进行中则留在队列，空闲时由 enqueue 自动消耗队首）
   if (editingSuccessor.value !== undefined) {
     enqueue(content, attachments, editingSuccessor.value ?? undefined)
@@ -275,6 +304,12 @@ const handleSend = (content: string, attachments: ChatAttachment[]) => {
   send(content, attachments)
 }
 
+const handleQuestionSubmit = (value: AskQuestionAnswer[] | AskQuestionResult) => {
+  const pending = pendingQuestion.value
+  if (!pending) return
+  respondSession(pending.rpcId, true, Array.isArray(value) ? value : value.answers)
+}
+
 defineExpose<_AiChatExposed>({
   send,
   abort,

package/src/components/ai-chat/approval-banner.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="items.length" :class="cls.e('approval-banner')">
+    <div v-for="item in items" :key="item.approvalId" :class="cls.e('approval-banner-card')">
+      <div :class="cls.e('approval-banner-title')">需要确认</div>
+      <div v-if="item.reason || item.toolName" :class="cls.e('approval-banner-reason')">
+        {{ item.reason ?? item.toolName }}
+      </div>
+      <div :class="cls.e('approval-banner-actions')">
+        <UButton size="small" type="primary" @click="emit('respond', item.rpcId, true)">
+          允许
+        </UButton>
+        <UButton size="small" text @click="emit('respond', item.rpcId, false)">拒绝</UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UButton } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed, inject } from 'vue'
+
+import type { ChatPendingApproval } from '../../chat/fold'
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatApprovalBanner' })
+
+const props = defineProps<{ approvals: ChatPendingApproval[] }>()
+
+const emit = defineEmits<{ (e: 'respond', rpcId: string, ok: boolean): void }>()
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+/** 仅无 callId 的审批走横幅；有 callId 的走工具卡确认 */
+const items = computed(() => props.approvals.filter((item) => !item.callId))
+</script>