@veltra/ai 2.1.10 → 2.2.0

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

@@ -870,7 +870,7 @@ describe('UAiChat', () => {
     unmount()
   })
 
-  it('有 models 时渲染模型选择器；当前模型无 reasoningLevels 时不展示推理等级', async () => {
+  it('有 models 时渲染模型选择器；当前模型无 reasoningLevels 时不展示推理选择器', async () => {
     const { host, unmount } = mountAiChat({
       transport: () => {},
       models: [
@@ -897,12 +897,12 @@ describe('UAiChat', () => {
     expect(
       host.querySelector('.u-ai-chat__input-toolbar-left .u-ai-chat__model-trigger')
     ).toBeFalsy()
-    // 当前模型无 reasoningLevels，触发器不展示推理等级
-    expect(host.querySelector('.u-ai-chat__model-trigger-reasoning')).toBeFalsy()
+    // 当前模型无 reasoningLevels，独立推理选择器不渲染
+    expect(host.querySelector('.u-ai-chat__reasoning-trigger')).toBeFalsy()
     unmount()
   })
 
-  it('切换到带 reasoningLevels 的模型后触发器展示推理等级', async () => {
+  it('切换到带 reasoningLevels 的模型后展示独立推理选择器并可切换等级', async () => {
     const model = ref('gpt-4o')
     const reasoningLevel = ref<string | undefined>()
     const host = document.createElement('div')
@@ -940,18 +940,31 @@ describe('UAiChat', () => {
     app.mount(host)
     await nextTick()
 
-    expect(host.querySelector('.u-ai-chat__model-trigger-reasoning')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__reasoning-trigger')).toBeFalsy()
 
     model.value = 'o3-mini'
     await nextTick()
 
-    const reasoning = host.querySelector(
-      '.u-ai-chat__input-toolbar-right .u-ai-chat__model-trigger-reasoning'
+    const trigger = host.querySelector<HTMLElement>(
+      '.u-ai-chat__input-toolbar-right .u-ai-chat__reasoning-trigger'
     )
-    expect(reasoning).toBeTruthy()
-    expect(reasoning?.textContent).toBe('低')
+    expect(trigger).toBeTruthy()
+    expect(trigger?.textContent).toContain('低')
     expect(reasoningLevel.value).toBe('low')
 
+    // 打开面板切换等级；面板 teleport 到 body 下的 popper 容器
+    trigger!.click()
+    await vi.waitFor(() => {
+      expect(document.querySelector('.u-ai-chat__reasoning-option')).toBeTruthy()
+    })
+    const highOption = [
+      ...document.querySelectorAll<HTMLElement>('.u-ai-chat__reasoning-option')
+    ].find((el) => el.textContent?.includes('高'))
+    highOption!.click()
+    await nextTick()
+    expect(reasoningLevel.value).toBe('high')
+    expect(trigger?.textContent).toContain('高')
+
     app.unmount()
     host.remove()
   })
@@ -1234,7 +1247,7 @@ describe('UAiChat', () => {
     expect(
       host.querySelector('.u-ai-chat__input-clear-wrap')?.classList.contains('is-disabled')
     ).toBe(true)
-    expect(host.querySelector('.u-ai-chat__input-usage')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__usage-trigger')).toBeFalsy()
 
     chat.value?.send('你好')
     await vi.waitFor(() => {
@@ -1272,7 +1285,21 @@ describe('UAiChat', () => {
     unmount()
   })
 
-  it('有 usage 时默认只显示总 token，tokenUsageDetail 追加缓存命中/未命中', async () => {
+  async function openUsagePanel(host: HTMLElement) {
+    const trigger = host.querySelector<HTMLElement>('.u-ai-chat__usage-trigger')
+    trigger?.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
+    await nextTick()
+    await nextTick()
+    const panel = document.body.querySelector('.u-ai-chat__usage-panel')
+    const rows: Record<string, string> = {}
+    panel?.querySelectorAll('.u-ai-chat__usage-row').forEach((row) => {
+      const label = row.querySelector('.u-ai-chat__usage-label')?.textContent ?? ''
+      rows[label] = row.querySelector('.u-ai-chat__usage-value')?.textContent ?? ''
+    })
+    return rows
+  }
+
+  it('有 usage 时显示用量环，悬停弹出明细；tokenUsageDetail 追加缓存命中/未命中', async () => {
     const usageTransport: ChatTransport = (_req, handlers) => {
       handlers.onTextDelta('ok')
       handlers.onUsage?.({
@@ -1285,27 +1312,28 @@ describe('UAiChat', () => {
     }
 
     const compact = mountAiChat({ transport: usageTransport })
+    // 未收到 usage 时不渲染用量环
+    expect(compact.host.querySelector('.u-ai-chat__usage-trigger')).toBeFalsy()
     compact.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(compact.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe('总 token 12')
+      expect(compact.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    expect(compact.host.querySelector('.u-ai-chat__input-usage')?.textContent).not.toContain(
-      '缓存命中'
-    )
+    const compactRows = await openUsagePanel(compact.host)
+    expect(compactRows['总 token']).toBe('12')
+    expect(compactRows['输入']).toBe('10')
+    expect(compactRows['输出']).toBe('2')
+    expect(compactRows['缓存命中']).toBeUndefined()
     compact.unmount()
 
     const detail = mountAiChat({ transport: usageTransport, tokenUsageDetail: true })
     detail.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(detail.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe(
-        '总 token 12 · 缓存命中 4 · 缓存未命中 6'
-      )
+      expect(detail.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    const text = detail.host.querySelector('.u-ai-chat__input-usage')?.textContent ?? ''
-    expect(text).not.toContain('本次')
-    expect(text).not.toContain('累计')
-    expect(text).not.toContain('输入')
-    expect(text).not.toContain('输出')
+    const detailRows = await openUsagePanel(detail.host)
+    expect(detailRows['总 token']).toBe('12')
+    expect(detailRows['缓存命中']).toBe('4')
+    expect(detailRows['缓存未命中']).toBe('6')
     detail.unmount()
   })
 
@@ -1323,10 +1351,12 @@ describe('UAiChat', () => {
     const scaled = mountAiChat({ transport: scaledTransport, tokenUsageDetail: true })
     scaled.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(scaled.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe(
-        '总 token 1.5K · 缓存命中 1K · 缓存未命中 1M'
-      )
+      expect(scaled.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
+    const scaledRows = await openUsagePanel(scaled.host)
+    expect(scaledRows['总 token']).toBe('1.5K')
+    expect(scaledRows['缓存命中']).toBe('1K')
+    expect(scaledRows['缓存未命中']).toBe('1M')
     scaled.unmount()
 
     const noCacheTransport: ChatTransport = (_req, handlers) => {
@@ -1336,12 +1366,33 @@ describe('UAiChat', () => {
     const noCache = mountAiChat({ transport: noCacheTransport, tokenUsageDetail: true })
     noCache.chat.value?.send('hi')
     await vi.waitFor(() => {
-      expect(noCache.host.querySelector('.u-ai-chat__input-usage')?.textContent).toBe('总 token 12')
+      expect(noCache.host.querySelector('.u-ai-chat__usage-trigger')).toBeTruthy()
     })
-    expect(noCache.host.querySelector('.u-ai-chat__input-usage')?.textContent).not.toContain('缓存')
+    const noCacheRows = await openUsagePanel(noCache.host)
+    expect(noCacheRows['总 token']).toBe('12')
+    expect(Object.keys(noCacheRows).some((label) => label.includes('缓存'))).toBe(false)
     noCache.unmount()
   })
 
+  it('模型声明 contextWindow 时用量环按上下文占用填充，面板展示占比', async () => {
+    const usageTransport: ChatTransport = (_req, handlers) => {
+      handlers.onTextDelta('ok')
+      handlers.onUsage?.({ promptTokens: 600, completionTokens: 400, totalTokens: 1000 })
+    }
+    const models: ChatModelOption[] = [
+      { id: 'm1', label: 'M1', providerId: 'p1', contextWindow: 10000 }
+    ]
+    const { host, chat, unmount } = mountAiChat({ transport: usageTransport, models, model: 'm1' })
+    chat.value?.send('hi')
+    await vi.waitFor(() => {
+      const ring = host.querySelector('.u-ai-chat__usage-ring-value')
+      expect(ring?.getAttribute('stroke-dasharray')).toBe('10 100')
+    })
+    const rows = await openUsagePanel(host)
+    expect(rows['上下文占用']).toBe('1K / 10K · 10%')
+    unmount()
+  })
+
   const UNKNOWN_TOOL = 'totally-unknown-tool-xyz'
 
   function seedUnknownCall(init: Partial<ChatToolCall> = {}) {

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

@@ -53,6 +53,7 @@
         :max-attachment-size="maxAttachmentSize"
         :clearable="clearable"
         :token-usage="tokenUsage"
+        :last-request-usage="lastRequestUsage"
         :token-usage-detail="tokenUsageDetail"
         @send="handleSend"
         @abort="abort"
@@ -133,6 +134,7 @@ const {
   jobs,
   tokenUsage,
   lastTurnUsage,
+  lastRequestUsage,
   pendingApprovals,
   pendingQuestion,
   send,

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

@@ -46,19 +46,54 @@
             </template>
           </UPopConfirm>
         </span>
-
-        <span v-if="tokenUsage" :class="cls.e('input-usage')" :title="usageText">
-          {{ usageText }}
-        </span>
       </div>
 
-      <!-- 右簇：模型/推理选择 → 发送或停止（互斥） -->
+      <!-- 右簇：token 用量环 → 模型/推理选择 → 发送或停止（互斥） -->
       <div :class="cls.e('input-toolbar-right')">
-        <ModelPicker
+        <UDropdown
+          v-if="tokenUsage"
+          width="auto"
+          min-width="200px"
+          :content-class="cls.e('usage-panel')"
+        >
+          <template #trigger>
+            <button type="button" :class="cls.e('usage-trigger')" aria-label="Token 用量">
+              <svg :class="cls.e('usage-ring')" viewBox="0 0 36 36">
+                <circle :class="cls.e('usage-ring-track')" cx="18" cy="18" r="15.5" />
+                <circle
+                  :class="cls.e('usage-ring-value')"
+                  cx="18"
+                  cy="18"
+                  r="15.5"
+                  pathLength="100"
+                  transform="rotate(-90 18 18)"
+                  :stroke-dasharray="`${contextPercent ?? 0} 100`"
+                  :stroke-linecap="contextPercent ? 'round' : undefined"
+                />
+              </svg>
+            </button>
+          </template>
+
+          <template #content>
+            <div :class="cls.e('usage-list')">
+              <div v-if="contextText" :class="cls.e('usage-row')">
+                <span :class="cls.e('usage-label')">上下文占用</span>
+                <span :class="cls.e('usage-value')">{{ contextText }}</span>
+              </div>
+              <div v-for="row in usageRows" :key="row.label" :class="cls.e('usage-row')">
+                <span :class="cls.e('usage-label')">{{ row.label }}</span>
+                <span :class="cls.e('usage-value')">{{ row.value }}</span>
+              </div>
+            </div>
+          </template>
+        </UDropdown>
+
+        <ModelPicker v-if="models?.length" v-model:model="model" :models="models" />
+
+        <ReasoningPicker
           v-if="models?.length"
-          v-model:model="model"
           v-model:reasoning-level="reasoningLevel"
-          :models="models"
+          :levels="reasoningLevels"
         />
 
         <UButton
@@ -89,7 +124,7 @@
 </template>
 
 <script lang="ts" setup>
-import { UButton, UFilePicker, UIcon, UPopConfirm } from '@veltra/desktop'
+import { UButton, UDropdown, 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, watch } from 'vue'
@@ -98,6 +133,7 @@ import type { ChatAttachment, ChatTokenUsage } from '../../chat/types'
 import type { ChatModelOption } from '../../providers'
 import { AiChatDIKey } from './di'
 import ModelPicker from './model-picker.vue'
+import ReasoningPicker from './reasoning-picker.vue'
 
 defineOptions({ name: 'UAiChatInput' })
 
@@ -116,6 +152,8 @@ const props = defineProps<{
   clearable?: boolean
   /** 会话累计 token；无 usage 时为 null，不展示 */
   tokenUsage?: ChatTokenUsage | null
+  /** 最近一次单次请求的 token（未累计）；配合模型 contextWindow 计算用量环占比 */
+  lastRequestUsage?: ChatTokenUsage | null
   /** 是否展示缓存命中 / 未命中（默认只显示总 token） */
   tokenUsageDetail?: boolean
 }>()
@@ -123,6 +161,11 @@ const props = defineProps<{
 const model = defineModel<string>('model')
 const reasoningLevel = defineModel<string>('reasoningLevel')
 
+/** 当前模型的推理等级列表，交给独立选择器；不足两档时选择器自身不渲染 */
+const reasoningLevels = computed(() => {
+  return props.models?.find((m) => m.id === model.value)?.reasoningLevels ?? []
+})
+
 const emit = defineEmits<{
   (e: 'send', content: string, attachments: ChatAttachment[]): void
   (e: 'abort'): void
@@ -159,20 +202,52 @@ const formatTokenCount = (n: number) => {
   return scaled(n / 1_000_000, 'M')
 }
 
-/** 会话累计：总 token；明细再拼有数据的缓存项，缺字段不写 0 */
-const usageText = computed(() => {
+/** 百分比：最多 1 位小数，整数不写 `.0` */
+const formatPercent = (p: number) => {
+  const rounded = Math.round(p * 10) / 10
+  return `${Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1)}%`
+}
+
+/** 当前模型声明的上下文窗口；未声明则用量环不填充、面板不显示占用 */
+const contextWindow = computed(() => {
+  return props.models?.find((m) => m.id === model.value)?.contextWindow
+})
+
+/** 上下文占用百分比：最近一次请求总 token / 窗口上限；缺数据时为 null */
+const contextPercent = computed(() => {
+  const win = contextWindow.value
+  const total = props.lastRequestUsage?.totalTokens
+  if (!win || total == null) return null
+  return Math.min(100, (total / win) * 100)
+})
+
+/** 面板占用行文案：1.5K / 128K · 1.2% */
+const contextText = computed(() => {
+  const percent = contextPercent.value
+  const win = contextWindow.value
+  const total = props.lastRequestUsage?.totalTokens
+  if (percent == null || !win || total == null) return ''
+  return `${formatTokenCount(total)} / ${formatTokenCount(win)} · ${formatPercent(percent)}`
+})
+
+/** 明细面板行：总 / 输入 / 输出；明细开关下再拼有数据的缓存项，缺字段不写 0 */
+const usageRows = computed(() => {
   const usage = props.tokenUsage
-  if (!usage) return ''
-  const parts = [`总 token ${formatTokenCount(usage.totalTokens)}`]
+  if (!usage) return []
+  const rows = [
+    { label: '总 token', value: formatTokenCount(usage.totalTokens) },
+    { label: '输入', value: formatTokenCount(usage.promptTokens) },
+    { label: '输出', value: formatTokenCount(usage.completionTokens) }
+  ]
   if (props.tokenUsageDetail) {
     if (usage.cacheHitTokens != null) {
-      parts.push(`缓存命中 ${formatTokenCount(usage.cacheHitTokens)}`)
+      rows.push({ label: '缓存命中', value: formatTokenCount(usage.cacheHitTokens) })
     }
     if (usage.cacheMissTokens != null) {
-      parts.push(`缓存未命中 ${formatTokenCount(usage.cacheMissTokens)}`)
+      rows.push({ label: '缓存未命中', value: formatTokenCount(usage.cacheMissTokens) })
     }
   }
-  return parts.join(' · ')
+  return rows
 })
 
 /** 生成中提示用户消息将进入队列 */

package/src/components/ai-chat/format-duration.ts

@@ -0,0 +1,8 @@
+/** 格式化工作时长：整秒显示，≥60s 显示 Xm Ys */
+export const formatDuration = (ms: number): string => {
+  const seconds = Math.round(ms / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  const rest = seconds % 60
+  return rest ? `${minutes}m ${rest}s` : `${minutes}m`
+}

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

@@ -73,6 +73,9 @@
       </div>
 
       <div v-if="showActions" :class="cls.e('message-actions')">
+        <span v-if="duration != null" :class="cls.e('message-duration')">
+          用时 {{ formatDuration(duration) }}
+        </span>
         <UButton
           size="small"
           plain
@@ -107,6 +110,7 @@ import { computed, inject, nextTick, onBeforeUnmount, ref, useTemplateRef, watch
 
 import type { ChatMessage } from '../../chat/types'
 import { AiChatDIKey } from './di'
+import { formatDuration } from './format-duration'
 import ToolCallCard from './tool-call.vue'
 
 defineOptions({ name: 'UAiChatMessageItem' })
@@ -115,6 +119,8 @@ const props = defineProps<{
   message: ChatMessage
   /** 是否为最后一条可见消息（决定是否显示重新生成） */
   isLast: boolean
+  /** 本轮总用时（ms；仅 live 轮次有，历史回放无计时数据） */
+  duration?: number
   /** 透传给 MarkdownRender 的属性 */
   rendererProps?: Record<string, unknown>
 }>()

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

@@ -2,6 +2,7 @@
   <div :class="cls.e('list-wrap')">
     <UScroll
       :class="cls.e('list')"
+      :content-class="cls.e('list-content')"
       ref="scrollRef"
       @scroll="handleScroll"
       @wheel.passive="handleWheel"
@@ -39,6 +40,7 @@
           v-if="turn.answerMsg"
           :message="turn.answerMsg"
           :is-last="turn.isLast"
+          :duration="turnDurations.get(turn.key)"
           :renderer-props="rendererProps"
           @respond="(id, approved) => emit('respond', id, approved)"
           @regenerate="emit('regenerate')"
@@ -48,7 +50,13 @@
       <!-- 工作中：活体球从输入框上方跳到最新会话下面；结束停留后再跳回 -->
       <div v-if="showWorking" :class="[cls.e('working'), bem.is('leaving', workingLeaving)]">
         <UAiOrb ref="workingOrb" :size="ORB_SIZE" :status="workingOrbStatus" />
-        <span v-if="running" :class="[cls.e('working-text'), 'u-shine']">工作中…</span>
+        <template v-if="running">
+          <span :class="[cls.e('working-text'), 'u-shine']">工作中…</span>
+          <span :class="cls.e('working-time')">{{ formatDuration(elapsedMs) }}</span>
+        </template>
+        <span v-else-if="lastTurnDuration != null" :class="cls.e('working-time')">
+          用时 {{ formatDuration(lastTurnDuration) }}
+        </span>
       </div>
     </UScroll>
 
@@ -115,6 +123,7 @@ import type { ChatMessage } from '../../chat/types'
 import type { AiOrbExposed, AiOrbReaction, AiOrbStatus } from '../../types/ai-orb'
 import UAiOrb from '../ai-orb/ai-orb.vue'
 import { AiChatDIKey } from './di'
+import { formatDuration } from './format-duration'
 import MessageItem from './message-item.vue'
 import TurnProcess from './turn-process.vue'
 
@@ -262,6 +271,26 @@ const clearJumpTimers = () => {
   clearTimeout(jumpTimer)
 }
 
+/** 工作计时的起算时间戳（running 升起时记录） */
+let workStartAt = 0
+/** 进行中的已逝时长（100ms 跳动刷新） */
+const elapsedMs = ref(0)
+let tickTimer: ReturnType<typeof setInterval> | undefined
+
+/** 各轮次总用时（key 同 turns；仅 live 轮次有，历史回放无计时数据） */
+const turnDurations = shallowRef(new Map<string, number>())
+
+const stopTick = () => {
+  clearInterval(tickTimer)
+  tickTimer = undefined
+}
+
+/** 收尾停留期间展示的末轮总用时 */
+const lastTurnDuration = computed(() => {
+  const last = turns.value[turns.value.length - 1]
+  return last ? turnDurations.value.get(last.key) : undefined
+})
+
 /** 列表末尾的工作球：生成中 / 收尾停留 / 跳回过渡 */
 const showWorking = computed(() => !!(props.running || finishing.value || workingLeaving.value))
 /** 输入框上方的空闲欢迎：含工作开始时的缩小离开帧 */
@@ -308,6 +337,13 @@ watch(
     if (running) {
       // 工作开始：立即从输入框上方跳到列表，无停留
       clearJumpTimers()
+      // 工作计时开始：100ms 跳动刷新已逝时长
+      workStartAt = Date.now()
+      elapsedMs.value = 0
+      stopTick()
+      tickTimer = setInterval(() => {
+        elapsedMs.value = Date.now() - workStartAt
+      }, 100)
       const idleWasVisible = !prev && !finishing.value && !workingLeaving.value
       finishing.value = false
       workingLeaving.value = false
@@ -324,6 +360,15 @@ watch(
     }
     if (!prev) return
 
+    stopTick()
+    // 记录本轮总用时（key 同 turns：regenerate 同 key 覆盖，队列接续各自计时）
+    const lastTurn = turns.value[turns.value.length - 1]
+    if (lastTurn) {
+      const next = new Map(turnDurations.value)
+      next.set(lastTurn.key, Date.now() - workStartAt)
+      turnDurations.value = next
+    }
+
     // 清除会话后列表已空：跳过结束停留，立刻回到欢迎区
     if (visibleMessages.value.length === 0) {
       finishing.value = false
@@ -363,6 +408,7 @@ watch(
   (len) => {
     if (len > 0) return
     clearJumpTimers()
+    turnDurations.value = new Map()
     finishing.value = false
     workingLeaving.value = false
     idleLeaving.value = false
@@ -383,6 +429,7 @@ watch(
 onBeforeUnmount(() => {
   stopWelcomeRotation()
   clearJumpTimers()
+  stopTick()
 })
 
 const scrollRef = shallowRef<{ scrollTo: (position: ScrollPosition) => void }>()