@veltra/ai 2.1.5 → 2.1.7

package/src/components/ai-chat/style.scss

@@ -161,7 +161,7 @@ $root-name: ai-chat;
   @include m.e(panel-fallback) {
     margin: 0;
     padding: fn.use-var(gap, default);
-    font-family: fn.use-var(font-family, code);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     font-size: fn.use-var(font-size-main, small);
     line-height: 1.5;
     white-space: pre-wrap;
@@ -265,6 +265,16 @@ $root-name: ai-chat;
       color: fn.use-var(color, primary);
       background-color: fn.use-var(color, primary, 'light-9');
     }
+
+    &:disabled {
+      cursor: default;
+      color: fn.use-var(text-color, second);
+
+      &:hover {
+        color: fn.use-var(text-color, second);
+        background-color: fn.use-var(bg-color, top);
+      }
+    }
   }
 
   // 欢迎语逐条轮换的切换过渡
@@ -621,19 +631,31 @@ $root-name: ai-chat;
 
   @include m.e(tool-call-section) {
     color: fn.use-var(text-color, assist);
-    margin-bottom: 4px;
+  }
 
+  @include m.e(tool-call-json) {
     &:not(:first-child) {
       margin-top: fn.use-var(gap, small);
     }
   }
 
+  @include m.e(tool-call-json-head) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    margin-bottom: 4px;
+  }
+
+  @include m.e(tool-call-json-toggle) {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
   @include m.e(tool-call-code) {
     margin: 0;
     padding: 4px fn.use-var(gap, small);
     border-radius: fn.use-var(radius, small);
     background-color: fn.use-var(bg-color, bottom);
-    font-family: fn.use-var(font-family, code);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
     font-size: fn.use-var(font-size-main, small);
     line-height: 1.5;
     white-space: pre-wrap;
@@ -866,6 +888,136 @@ $root-name: ai-chat;
     }
   }
 
+  // 作业条：有 jobs 时出现在输入区上方
+  @include m.e(job-bar) {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 800px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, middle);
+    padding: 4px;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(job-bar-head) {
+    @include m.flex(flex, space-between, center);
+    width: 100%;
+    border: none;
+    background: none;
+    padding: 2px 6px;
+    color: fn.use-var(text-color, assist);
+    font-size: inherit;
+    font-family: inherit;
+    cursor: pointer;
+  }
+
+  @include m.e(job-bar-chevron) {
+    font-size: 12px;
+    transition: transform 0.2s;
+
+    @include m.is(expanded) {
+      transform: rotate(90deg);
+    }
+  }
+
+  @include m.e(job-bar-list) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include m.e(job-bar-item) {
+    @include m.flex(flex, flex-start, center);
+    gap: 6px;
+    padding: 3px 6px;
+    border-radius: fn.use-var(radius, small);
+  }
+
+  @include m.e(job-bar-icon) {
+    flex-shrink: 0;
+    font-size: 13px;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(job-bar-label) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.e(job-bar-dot) {
+    flex-shrink: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: fn.use-var(text-color, placeholder);
+
+    @include m.is(running) {
+      background-color: fn.use-var(color, primary);
+    }
+
+    @include m.is(done) {
+      background-color: fn.use-var(color, success);
+    }
+
+    @include m.is(error) {
+      background-color: fn.use-var(color, danger);
+    }
+  }
+
+  // session 提问：与输入区同宽卡片
+  @include m.e(session-question) {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 800px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, sm);
+    padding: fn.use-var(gap, small);
+  }
+
+  // 无 callId 的审批横幅（浮动确认卡）
+  @include m.e(approval-banner) {
+    flex-shrink: 0;
+    width: 100%;
+    max-width: 800px;
+    box-sizing: border-box;
+    margin-bottom: 4px;
+  }
+
+  @include m.e(approval-banner-card) {
+    padding: fn.use-var(gap, small);
+    border-radius: fn.use-var(radius, default);
+    background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, sm);
+
+    & + & {
+      margin-top: 4px;
+    }
+  }
+
+  @include m.e(approval-banner-title) {
+    color: fn.use-var(text-color, title);
+    font-weight: 500;
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(approval-banner-reason) {
+    margin-top: 4px;
+    color: fn.use-var(text-color, assist);
+    font-size: fn.use-var(font-size-main, small);
+  }
+
+  @include m.e(approval-banner-actions) {
+    @include m.flex(flex, flex-end, center);
+    gap: fn.use-var(gap, small);
+    margin-top: fn.use-var(gap, small);
+  }
+
   // 输入区：无边框卡片，靠浅阴影区分层级；聚焦不换蓝描边，避免变成另一种框
   @include m.e(input-area) {
     flex-shrink: 0;
@@ -890,9 +1042,13 @@ $root-name: ai-chat;
     font-family: inherit;
     line-height: 1.6;
     box-sizing: border-box;
+    overflow-y: hidden;
 
     &::placeholder {
       color: fn.use-var(text-color, placeholder);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
@@ -930,7 +1086,7 @@ $root-name: ai-chat;
     transition: background-color 0.15s ease;
 
     &:hover {
-      background-color: var(--u-nav-hover-bg);
+      background-color: fn.use-var(bg-color, hover);
     }
   }
 
@@ -1047,7 +1203,7 @@ $root-name: ai-chat;
     transition: background-color 0.15s ease;
 
     &:hover {
-      background-color: var(--u-nav-hover-bg);
+      background-color: fn.use-var(bg-color, hover);
     }
   }
 
@@ -1144,7 +1300,7 @@ $root-name: ai-chat;
       color 0.15s ease;
 
     &:hover {
-      background-color: var(--u-nav-hover-bg);
+      background-color: fn.use-var(bg-color, hover);
     }
 
     @include m.is(active) {

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

@@ -33,33 +33,26 @@
         查看面板
       </UButton>
     </div>
-    <!-- 自定义渲染：工具定义的 render 优先于 tool-<name> 插槽，均替换整个 body -->
+    <!-- 自定义渲染：meta.render / tool-<name> 插槽优先于通用工具视图 -->
     <component :is="tool.render" v-else-if="tool?.render" :tool-call="toolCall" />
     <component :is="slotBody" v-else-if="slotBody && hasResult" />
     <template v-else>
-      <template v-if="prettyArguments">
-        <div :class="cls.e('tool-call-section')">参数</div>
-        <pre :class="cls.e('tool-call-code')">{{ prettyArguments }}</pre>
-      </template>
-
-      <template v-if="hasResult">
-        <div :class="cls.e('tool-call-section')">
-          {{ toolCall.status === 'error' ? '错误' : '结果' }}
-        </div>
-        <pre :class="cls.e('tool-call-code')">{{ displayResult }}</pre>
-      </template>
+      <ToolJson v-if="prettyArguments" title="参数" :text="prettyArguments" />
+      <ToolJson v-if="hasResult" :title="resultTitle" :text="displayResult" />
+      <ToolJson v-if="prettyView" title="视图" :text="prettyView" />
     </template>
   </UCollapseItem>
 </template>
 
 <script lang="ts" setup>
 import { UButton, UCollapseItem, UIcon } from '@veltra/desktop'
-import { CircleCheckFilled, CircleClose, Close, Loading, WarningFilled } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, ref, watch, type Component } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 
 import type { ChatToolCall } from '../../chat/types'
 import { AiChatDIKey } from './di'
+import { resolveToolIcon } from './tool-icons'
+import ToolJson from './tool-json.vue'
 
 defineOptions({ name: 'UAiChatToolCall' })
 
@@ -70,7 +63,24 @@ const emit = defineEmits<{ (e: 'respond', approved: boolean): void }>()
 const di = inject(AiChatDIKey)
 const cls = di?.cls ?? bem('ai-chat')
 
-/** 当前调用对应的工具定义（解析 icon/label/render/autoCollapse/terminal） */
+/** 把未知值格式成可读 JSON，循环引用等异常时退回 String，不得 throw */
+function formatUnknown(value: unknown): string {
+  if (value == null) return ''
+  if (typeof value === 'string') {
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2)
+    } catch {
+      return value
+    }
+  }
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value)
+  } catch {
+    return String(value)
+  }
+}
+
+/** 当前调用对应的工具定义或渲染元信息（session 下忽略 execute / needsConfirm / terminal） */
 const tool = computed(() => di?.tools.value[props.toolCall.name])
 
 const isExpanded = ref(false)
@@ -94,7 +104,7 @@ watch(
   () => props.toolCall.status,
   (status) => {
     if (userToggled) return
-    if (status === 'running' || status === 'awaiting-confirm') {
+    if (status === 'pending' || status === 'running' || status === 'awaiting-confirm') {
       isExpanded.value = true
     } else {
       isExpanded.value = !autoCollapse.value
@@ -103,17 +113,16 @@ watch(
   { immediate: true }
 )
 
-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] ?? '')
 
 /** 进行中（pending/running）：工具名带扫光效果 */
 const isActive = computed(() => {
@@ -131,8 +140,10 @@ const isSettled = computed(() => {
  */
 const destroyOnCollapse = computed(() => isSettled.value && !isPanelTool.value)
 
-/** 头部图标：工具自定义图标优先，缺省用状态图标 */
-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)
+)
 
 const parsedArguments = computed<Record<string, unknown> | null>(() => {
   if (!props.toolCall.arguments) return null
@@ -165,13 +176,14 @@ const hasResult = computed(() => {
   return props.toolCall.result != null || props.toolCall.error != null
 })
 
-const displayResult = computed(() => {
-  const raw = props.toolCall.error ?? props.toolCall.result ?? ''
-  try {
-    return JSON.stringify(JSON.parse(raw), null, 2)
-  } catch {
-    return raw
-  }
+const resultTitle = computed(() => (props.toolCall.status === 'error' ? '错误' : '结果'))
+
+const displayResult = computed(() => formatUnknown(props.toolCall.error ?? props.toolCall.result))
+
+/** 服务端下发的 view，格式化为 JSON；不得丢弃、不得 throw */
+const prettyView = computed(() => {
+  if (props.toolCall.view == null) return ''
+  return formatUnknown(props.toolCall.view)
 })
 
 /** 使用方通过 tool-<name> 插槽自定义该工具的展示（有结果时替换整个 body） */

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

@@ -0,0 +1,33 @@
+import { EditPen, Folder, Internet, QuestionFilled, Terminal, Tools } from '@veltra/icons/normal'
+import type { Component } from 'vue'
+
+/**
+ * 内置 toolName → icon：按名称子串匹配，顺序即优先级。
+ * 未命中任何规则时走兜底图标，不得 throw。
+ */
+const TOOL_ICON_RULES: [needles: string[], icon: Component][] = [
+  [['bash', 'terminal'], Terminal],
+  [['fs', 'file'], Folder],
+  [['web', 'globe'], Internet],
+  [['edit', 'pencil'], EditPen],
+  [['ask', 'question'], QuestionFilled]
+]
+
+/** 未知名工具的兜底图标 */
+export const FALLBACK_TOOL_ICON: Component = Tools
+
+/**
+ * 按工具名解析图标。
+ * 宿主 `toolIcons` 精确名覆盖优先于内置规则；都未命中则兜底。
+ */
+export function resolveToolIcon(name: string, overrides?: Record<string, Component>): Component {
+  const key = String(name ?? '')
+  const fromOverride = overrides?.[key]
+  if (fromOverride) return fromOverride
+
+  const lower = key.toLowerCase()
+  for (const [needles, icon] of TOOL_ICON_RULES) {
+    if (needles.some((needle) => lower.includes(needle))) return icon
+  }
+  return FALLBACK_TOOL_ICON
+}

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

@@ -0,0 +1,52 @@
+<template>
+  <div :class="cls.e('tool-call-json')">
+    <div :class="cls.e('tool-call-json-head')">
+      <span :class="cls.e('tool-call-section')">{{ title }}</span>
+      <UButton
+        v-if="overLimit"
+        :class="cls.e('tool-call-json-toggle')"
+        size="small"
+        text
+        type="primary"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? '收起' : '展开' }}
+      </UButton>
+    </div>
+    <pre :class="[cls.e('tool-call-code'), bem.is('truncated', overLimit && !expanded)]">{{
+      shown
+    }}</pre>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UButton } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed, inject, ref } from 'vue'
+
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatToolJson' })
+
+/** 超过该字符数截断，展开后可见全文 */
+const PREVIEW_LIMIT = 480
+
+const { title, text } = defineProps<{
+  /** 区块标题（参数 / 结果 / 视图） */
+  title: string
+  /** 已格式化的 JSON 或原文 */
+  text: string
+}>()
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+const expanded = ref(false)
+
+const overLimit = computed(() => text.length > PREVIEW_LIMIT)
+
+const shown = computed(() => {
+  if (expanded.value || !overLimit.value) return text
+  return `${text.slice(0, PREVIEW_LIMIT)}…`
+})
+</script>

package/src/tools/ask-question/ask-question.ts

@@ -1,9 +1,9 @@
 import { QuestionFilled } from '@veltra/icons/normal'
-import type { Component } from 'vue'
+import { computed, defineComponent, h, type Component, type PropType } from 'vue'
 
-import type { ChatTool } from '../../chat/types'
+import type { ChatTool, ChatToolCall } from '../../chat/types'
 import AskQuestion from '../../components/ai-chat/ask-question.vue'
-import { deferAskQuestion, takeAskQuestionDeferred } from './deferred'
+import { deferAskQuestion, resolveAskQuestion, takeAskQuestionDeferred } from './deferred'
 
 /** 单个提问项 */
 export interface AskQuestionItem {
@@ -75,6 +75,55 @@ const QUESTIONS_SCHEMA: Record<string, unknown> = {
   required: ['questions']
 }
 
+function parseQuestions(toolCall: ChatToolCall): AskQuestionItem[] {
+  try {
+    const args = JSON.parse(toolCall.arguments || '{}') as Partial<AskQuestionArgs>
+    return Array.isArray(args.questions) ? args.questions : []
+  } catch {
+    return []
+  }
+}
+
+function parseAnswers(toolCall: ChatToolCall): AskQuestionAnswer[] | undefined {
+  if (toolCall.status !== 'success' || !toolCall.result) return undefined
+  try {
+    const result = JSON.parse(toolCall.result) as Partial<AskQuestionResult>
+    return Array.isArray(result.answers) ? result.answers : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function statusError(toolCall: ChatToolCall): string | undefined {
+  if (toolCall.status !== 'error') return undefined
+  const err = toolCall.error ?? ''
+  if (err.includes('Abort') || err.includes('取消')) return '已取消'
+  return err || '提问失败'
+}
+
+/** 把 toolCall 转成提问表单的 questions / onSubmit；提交仍走 resolveAskQuestion */
+const AskQuestionRender = defineComponent({
+  name: 'AskQuestionRender',
+  props: { toolCall: { type: Object as PropType<ChatToolCall>, required: true } },
+  setup(props) {
+    const questions = computed(() => parseQuestions(props.toolCall))
+    const answers = computed(() => parseAnswers(props.toolCall))
+    const error = computed(() => statusError(props.toolCall))
+    const onSubmit = (value: AskQuestionAnswer[] | AskQuestionResult) => {
+      resolveAskQuestion(props.toolCall.id, {
+        answers: Array.isArray(value) ? value : value.answers
+      })
+    }
+    return () =>
+      h(AskQuestion, {
+        questions: questions.value,
+        answers: answers.value,
+        error: error.value,
+        onSubmit
+      })
+  }
+})
+
 /**
  * 创建内置提问工具：execute 挂起等待用户在 UI 中作答，提交后结果回灌模型。
  * 工具卡片由内联提问表单渲染（多题分页导航，提交后展示问答摘要，不自动折叠）。
@@ -95,7 +144,7 @@ export function createAskQuestionTool(
     parameters: QUESTIONS_SCHEMA,
     icon,
     label,
-    render: AskQuestion,
+    render: AskQuestionRender,
     execute: (_args, { toolCall, signal }) =>
       new Promise<AskQuestionResult>((resolve, reject) => {
         deferAskQuestion(toolCall.id, { resolve, reject })

package/src/types/ai-chat.ts

@@ -1,6 +1,7 @@
 import type { DeconstructValue } from '@veltra/utils'
-import type { Ref } from 'vue'
+import type { Component, Ref } from 'vue'
 
+import type { ChatSessionTransport } from '../chat/session'
 import type {
   ChatAttachment,
   ChatMessage,
@@ -8,15 +9,19 @@ import type {
   ChatTokenUsage,
   ChatTool,
   ChatToolCall,
+  ChatToolMeta,
   ChatTransport
 } from '../chat/types'
 import type { ChatModelOption } from '../providers'
 
 export interface AiChatProps {
-  /** 传输层（必填），可使用导出的 createOpenAITransport() 创建 */
-  transport: ChatTransport
-  /** 工具定义列表，不同场景传入不同工具赋予助手不同能力 */
-  tools?: ChatTool[]
+  /** 传输层（必填）；函数型 ChatTransport 或 session 对象，可使用 createOpenAITransport / createServerTransport */
+  transport: ChatTransport | ChatSessionTransport
+  /**
+   * 工具列表。函数 transport 传入 ChatTool[]（必有 execute）；
+   * session 下可为 ChatToolMeta[]（仅渲染元信息）。ChatTool[] 仍可赋值。
+   */
+  tools?: (ChatTool | ChatToolMeta)[]
   /** 系统提示词 */
   systemPrompt?: string
   /**
@@ -50,6 +55,13 @@ export interface AiChatProps {
    * 默认 false：仅在拿到 usage 时显示会话累计「总 token」。接口未返回 usage 时不展示。
    */
   tokenUsageDetail?: boolean
+  /**
+   * 覆盖包内 toolName → icon 映射（精确名优先于内置名称规则）。
+   * 缺省不传则走内置表；未命中的名称仍用兜底图标，不得 throw。
+   */
+  toolIcons?: Record<string, Component>
+  /** 只读：不展示输入区、欢迎语不可发送、队列无插队/编辑/移除。默认 false */
+  readonly?: boolean
 }
 
 export interface AiChatEmits {