@veltra/ai 2.1.5 → 2.1.7

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>

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

@@ -81,7 +81,7 @@
     </template>
 
     <!-- 提交后：问答摘要 -->
-    <template v-else-if="toolCall.status === 'success'">
+    <template v-else-if="answers != null">
       <div v-for="(item, i) in doneAnswers" :key="i" :class="cls.e('ask-question-result')">
         <div :class="cls.e('ask-question-result-q')">
           <span
@@ -101,7 +101,7 @@
     </template>
 
     <!-- 异常 / 取消 -->
-    <div v-else :class="cls.e('ask-question-status')">{{ statusText }}</div>
+    <div v-else :class="cls.e('ask-question-status')">{{ error }}</div>
   </div>
 </template>
 
@@ -110,39 +110,34 @@ import { UButton, UInput } from '@veltra/desktop'
 import { bem } from '@veltra/utils'
 import { computed, inject, ref, watch } from 'vue'
 
-import type { ChatToolCall } from '../../chat/types'
 import type {
-  AskQuestionArgs,
+  AskQuestionAnswer,
   AskQuestionItem,
   AskQuestionResult
 } from '../../tools/ask-question/ask-question'
-import { resolveAskQuestion } from '../../tools/ask-question/deferred'
 import { AiChatDIKey } from './di'
 
 defineOptions({ name: 'UAiChatAskQuestion' })
 
-const props = defineProps<{ toolCall: ChatToolCall }>()
+const props = defineProps<{
+  /** 问题列表；组件不再从 toolCall 解析参数 */
+  questions: AskQuestionItem[]
+  /** 已提交摘要；有值则展示结果而非表单 */
+  answers?: AskQuestionAnswer[]
+  /** 失败 / 取消文案 */
+  error?: string
+}>()
+
+const emit = defineEmits<{
+  /** 提交问答；值为答案数组（与 AskQuestionResult 兼容） */
+  (e: 'submit', value: AskQuestionAnswer[] | AskQuestionResult): void
+}>()
 
 const di = inject(AiChatDIKey)
 const cls = di?.cls ?? bem('ai-chat')
 
-/** 模型输出的提问参数 */
-const questions = computed<AskQuestionItem[]>(() => {
-  try {
-    const args = JSON.parse(props.toolCall.arguments || '{}') as Partial<AskQuestionArgs>
-    return Array.isArray(args.questions) ? args.questions : []
-  } catch {
-    return []
-  }
-})
-
-/** 作答中：execute 挂起等待用户提交 */
-const answering = computed(() => {
-  return (
-    props.toolCall.result == null &&
-    (props.toolCall.status === 'running' || props.toolCall.status === 'pending')
-  )
-})
+/** 作答中：尚未提交、也没有失败文案 */
+const answering = computed(() => props.answers == null && !props.error)
 
 /** 当前题索引 */
 const current = ref(0)
@@ -152,16 +147,16 @@ const selections = ref<(string | null)[]>([])
 const customs = ref<string[]>([])
 
 watch(
-  questions,
+  () => props.questions,
   (list) => {
-    if (props.toolCall.result != null) return
+    if (props.answers != null) return
     selections.value = list.map(() => null)
     customs.value = list.map(() => '')
   },
   { immediate: true }
 )
 
-const currentQuestion = computed(() => questions.value[current.value])
+const currentQuestion = computed(() => props.questions[current.value])
 
 /** 某题是否已作答：自定义输入非空优先，否则看选中项 */
 const isAnswered = (index: number) => {
@@ -169,11 +164,11 @@ const isAnswered = (index: number) => {
 }
 
 const allAnswered = computed(() => {
-  return questions.value.length > 0 && questions.value.every((_, i) => isAnswered(i))
+  return props.questions.length > 0 && props.questions.every((_, i) => isAnswered(i))
 })
 
 const goTo = (index: number) => {
-  if (index < 0 || index >= questions.value.length) return
+  if (index < 0 || index >= props.questions.length) return
   current.value = index
 }
 
@@ -192,41 +187,30 @@ const onCustomInput = (value: string) => {
 }
 
 const handleSubmit = () => {
-  const firstUnanswered = questions.value.findIndex((_, i) => !isAnswered(i))
+  const firstUnanswered = props.questions.findIndex((_, i) => !isAnswered(i))
   if (firstUnanswered >= 0) {
     current.value = firstUnanswered
     return
   }
-  const answers = questions.value.map((item, i) => ({
-    question: item.question,
-    answer: customs.value[i]?.trim() || selections.value[i] || ''
-  }))
-  resolveAskQuestion(props.toolCall.id, { answers })
+  emit(
+    'submit',
+    props.questions.map((item, i) => ({
+      question: item.question,
+      answer: customs.value[i]?.trim() || selections.value[i] || ''
+    }))
+  )
 }
 
-/** 提交后的问答摘要（含历史恢复：从序列化结果解析） */
+/** 提交后的问答摘要：命中预设选项的回答渲染为 chip */
 const doneAnswers = computed(() => {
-  if (props.toolCall.status !== 'success' || !props.toolCall.result) return []
-  let result: AskQuestionResult
-  try {
-    result = JSON.parse(props.toolCall.result)
-  } catch {
-    return []
-  }
-  if (!Array.isArray(result?.answers)) return []
-  return result.answers.map((item) => ({
-    ...item,
-    /** 命中预设选项的回答渲染为 chip */
-    isOption: questions.value.some(
+  const list = props.answers
+  if (!list?.length) return []
+  return list.map((item) => ({
+    question: item.question,
+    answer: item.answer,
+    isOption: props.questions.some(
       (q) => q.question === item.question && q.options?.includes(item.answer)
     )
   }))
 })
-
-const statusText = computed(() => {
-  if (props.toolCall.status !== 'error') return ''
-  const err = props.toolCall.error ?? ''
-  if (err.includes('Abort') || err.includes('取消')) return '已取消'
-  return err || '提问失败'
-})
 </script>

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

@@ -92,7 +92,7 @@
 import { UButton, UFilePicker, UIcon, UPopConfirm } from '@veltra/desktop'
 import { Attach, Clear, Close, Up } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, nextTick, ref, shallowRef } from 'vue'
+import { computed, inject, nextTick, ref, shallowRef, watch } from 'vue'
 
 import type { ChatAttachment, ChatTokenUsage } from '../../chat/types'
 import type { ChatModelOption } from '../../providers'
@@ -181,14 +181,22 @@ const placeholderText = computed(() => {
   return props.placeholder ?? '输入消息，Enter 发送，Shift + Enter 换行'
 })
 
+const MAX_INPUT_HEIGHT = 160
+
 /** 多行自适应高度，上限 160px */
 const autoResize = () => {
   const el = textareaRef.value
   if (!el) return
   el.style.height = 'auto'
-  el.style.height = `${Math.min(el.scrollHeight, 160)}px`
+  const nextHeight = Math.min(el.scrollHeight, MAX_INPUT_HEIGHT)
+  el.style.height = `${nextHeight}px`
+  el.style.overflowY = el.scrollHeight > MAX_INPUT_HEIGHT ? 'auto' : 'hidden'
 }
 
+watch(placeholderText, () => {
+  void nextTick(autoResize)
+})
+
 const handleSend = () => {
   if (!hasContent.value) return
   emit('send', text.value.trim(), attachments.value)

package/src/components/ai-chat/di.ts

@@ -1,15 +1,17 @@
 import type { BEM } from '@veltra/utils'
-import type { ComputedRef, InjectionKey, Slots } from 'vue'
+import type { Component, ComputedRef, InjectionKey, Slots } from 'vue'
 
-import type { ChatTool } from '../../chat/types'
+import type { ChatTool, ChatToolMeta } from '../../chat/types'
 
 export interface AiChatContext {
   /** ai-chat 组件的 BEM 类生成器 */
   cls: BEM<'ai-chat'>
   /** ai-chat 使用方提供的插槽（用于 tool-<name> 动态插槽） */
   slots: Slots
-  /** 按 name 索引的工具定义（解析 icon/label/render/autoCollapse） */
-  tools: ComputedRef<Record<string, ChatTool | undefined>>
+  /** 按 name 索引的工具定义或渲染元信息（解析 icon/label/render/autoCollapse） */
+  tools: ComputedRef<Record<string, ChatTool | ChatToolMeta | undefined>>
+  /** 宿主覆盖的 toolName → icon；缺省走包内名称规则 */
+  toolIcons: ComputedRef<Record<string, Component> | undefined>
   /** 打开右侧面板并聚焦到指定工具调用（renderTo: 'panel' 工具的「查看面板」入口） */
   openPanel: (toolCallId: string) => void
 }

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

@@ -0,0 +1,41 @@
+<template>
+  <div v-if="jobs.length" :class="cls.e('job-bar')">
+    <button type="button" :class="cls.e('job-bar-head')" @click="expanded = !expanded">
+      <span>作业 · {{ jobs.length }}</span>
+      <UIcon :class="[cls.e('job-bar-chevron'), bem.is('expanded', expanded)]">
+        <ArrowRight />
+      </UIcon>
+    </button>
+    <div v-if="expanded" :class="cls.e('job-bar-list')">
+      <div v-for="job in jobs" :key="job.id" :class="cls.e('job-bar-item')">
+        <UIcon :class="cls.e('job-bar-icon')">
+          <component :is="resolveToolIcon(job.kind)" />
+        </UIcon>
+        <span :class="[cls.e('job-bar-label'), job.status === 'running' && 'u-shine']">
+          {{ job.label }}
+        </span>
+        <span :class="[cls.e('job-bar-dot'), bem.is(job.status)]" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UIcon } from '@veltra/desktop'
+import { ArrowRight } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { inject, ref } from 'vue'
+
+import type { ChatJob } from '../../chat/types'
+import { AiChatDIKey } from './di'
+import { resolveToolIcon } from './tool-icons'
+
+defineOptions({ name: 'UAiChatJobBar' })
+
+defineProps<{ jobs: ChatJob[] }>()
+
+const expanded = ref(true)
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+</script>

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

@@ -70,7 +70,8 @@
                 :key="welcomeIndex"
                 type="button"
                 :class="cls.e('welcome-item')"
-                @click="emit('welcome-click', currentWelcomeItem)"
+                :disabled="readonly"
+                @click="!readonly && emit('welcome-click', currentWelcomeItem)"
               >
                 {{ currentWelcomeItem }}
               </button>
@@ -128,6 +129,8 @@ const props = defineProps<{
   welcome?: string | string[]
   /** 是否生成中（控制底部工作状态指示） */
   running?: boolean
+  /** 只读时欢迎语不可点击发送 */
+  readonly?: boolean
   /** 透传给 MarkdownRender 的属性 */
   rendererProps?: Record<string, unknown>
 }>()

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

@@ -3,7 +3,7 @@
     <div :class="cls.e('queue-head')">待发送队列 · {{ queue.length }}</div>
     <div v-for="item in queue" :key="item.id" :class="cls.e('queue-item')">
       <span :class="cls.e('queue-text')" :title="item.content">{{ item.content }}</span>
-      <span :class="cls.e('queue-actions')">
+      <span v-if="!readonly" :class="cls.e('queue-actions')">
         <button
           type="button"
           :class="[cls.e('queue-action'), cls.em('queue-action', 'primary')]"
@@ -47,6 +47,8 @@ defineOptions({ name: 'UAiChatQueueList' })
 defineProps<{
   /** 待发送队列（按执行顺序排列） */
   queue: ChatQueuedMessage[]
+  /** 只读时不展示插队 / 编辑 / 移除 */
+  readonly?: boolean
 }>()
 
 const emit = defineEmits<{

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

@@ -22,12 +22,13 @@
 
 <script lang="ts" setup>
 import { UIcon, UScroll } from '@veltra/desktop'
-import { CircleCheckFilled, CircleClose, Close, Loading, WarningFilled } from '@veltra/icons/normal'
+import { Close } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, type Component } from 'vue'
+import { computed, inject } from 'vue'
 
 import type { ChatToolCall } from '../../chat/types'
 import { AiChatDIKey } from './di'
+import { resolveToolIcon } from './tool-icons'
 
 defineOptions({ name: 'UAiChatSidePanel' })
 
@@ -41,20 +42,21 @@ const cls = di?.cls ?? bem('ai-chat')
 /** 当前调用对应的工具定义（解析 icon/label/render） */
 const tool = computed(() => di?.tools.value[props.toolCall.name])
 
-const STATUS_META: Record<string, { icon: Component; class: string }> = {
-  pending: { icon: Loading, class: 'is-active' },
-  running: { icon: Loading, class: 'is-active' },
-  'awaiting-confirm': { icon: WarningFilled, class: 'is-warning' },
-  success: { icon: CircleCheckFilled, class: 'is-success' },
-  error: { icon: CircleClose, class: 'is-danger' },
-  rejected: { icon: Close, class: 'is-danger' }
+const STATUS_CLASS: Record<string, string> = {
+  pending: 'is-active',
+  running: 'is-active',
+  'awaiting-confirm': 'is-warning',
+  success: 'is-success',
+  error: 'is-danger',
+  rejected: 'is-danger'
 }
 
-const statusIcon = computed(() => STATUS_META[props.toolCall.status]?.icon ?? Loading)
-const statusClass = computed(() => STATUS_META[props.toolCall.status]?.class ?? '')
+const statusClass = computed(() => STATUS_CLASS[props.toolCall.status] ?? '')
 
-/** 头部图标：工具自定义图标优先，缺省用状态图标（与工具卡片一致） */
-const headerIcon = computed(() => tool.value?.icon ?? statusIcon.value)
+/** 头部图标：meta.icon > 宿主覆盖 > 内置名称规则 > 兜底；状态点走 status class */
+const headerIcon = computed(
+  () => tool.value?.icon ?? resolveToolIcon(props.toolCall.name, di?.toolIcons?.value)
+)
 
 /** 面板标题：优先工具定义的 panelTitle（业务对象 + 动作），缺省回落到 label ?? name */
 const panelTitle = computed(() => {