@veltra/ai 2.1.3 → 2.1.4

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

@@ -30,6 +30,26 @@
             <Attach />
           </UIcon>
         </UFilePicker>
+
+        <span :class="[cls.e('input-clear-wrap'), bem.is('disabled', !clearable)]">
+          <UPopConfirm
+            title="清空当前对话？进行中的生成将被中止。"
+            confirm-text="清空"
+            direction="top"
+            alignment="start"
+            @confirm="emit('clear')"
+          >
+            <template #reference>
+              <UIcon :class="cls.e('input-clear')" title="清除会话">
+                <Clear />
+              </UIcon>
+            </template>
+          </UPopConfirm>
+        </span>
+
+        <span v-if="tokenUsage" :class="cls.e('input-usage')" :title="usageText">
+          {{ usageText }}
+        </span>
       </div>
 
       <!-- 右簇：模型/推理选择 → 发送或停止（互斥） -->
@@ -69,12 +89,12 @@
 </template>
 
 <script lang="ts" setup>
-import { UButton, UFilePicker, UIcon } from '@veltra/desktop'
-import { Attach, Close, Up } from '@veltra/icons/normal'
+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 type { ChatAttachment } from '../../chat/types'
+import type { ChatAttachment, ChatTokenUsage } from '../../chat/types'
 import type { ChatModelOption } from '../../providers'
 import { AiChatDIKey } from './di'
 import ModelPicker from './model-picker.vue'
@@ -92,6 +112,12 @@ const props = defineProps<{
   accept?: string
   /** 单个附件最大字节数 */
   maxAttachmentSize?: number
+  /** 是否可清除（有消息 / 队列 / 生成中） */
+  clearable?: boolean
+  /** 会话累计 token；无 usage 时为 null，不展示 */
+  tokenUsage?: ChatTokenUsage | null
+  /** 是否展示缓存命中 / 未命中（默认只显示总 token） */
+  tokenUsageDetail?: boolean
 }>()
 
 const model = defineModel<string>('model')
@@ -100,6 +126,7 @@ const reasoningLevel = defineModel<string>('reasoningLevel')
 const emit = defineEmits<{
   (e: 'send', content: string, attachments: ChatAttachment[]): void
   (e: 'abort'): void
+  (e: 'clear'): void
 }>()
 
 const di = inject(AiChatDIKey)
@@ -114,6 +141,40 @@ const hasContent = computed(() => !!text.value.trim() || attachments.value.lengt
 /** 生成中且输入为空时显示停止；有内容则显示发送（入队） */
 const showStop = computed(() => props.running && !hasContent.value)
 
+/**
+ * 用量数字：不到 1000 原样；≥1000 用 K；≥100 万用 M。
+ * 最多 1 位小数，整数不写 `.0`（1000 → 1K，1500 → 1.5K）。
+ */
+const formatTokenCount = (n: number) => {
+  const scaled = (value: number, unit: 'K' | 'M') => {
+    const rounded = Math.round(value * 10) / 10
+    return `${Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1)}${unit}`
+  }
+  if (n < 1000) return String(n)
+  if (n < 1_000_000) {
+    const k = Math.round((n / 1000) * 10) / 10
+    // 四舍五入后会变成 1000K 时改用 M
+    return k >= 1000 ? scaled(n / 1_000_000, 'M') : scaled(n / 1000, 'K')
+  }
+  return scaled(n / 1_000_000, 'M')
+}
+
+/** 会话累计：总 token；明细再拼有数据的缓存项，缺字段不写 0 */
+const usageText = computed(() => {
+  const usage = props.tokenUsage
+  if (!usage) return ''
+  const parts = [`总 token ${formatTokenCount(usage.totalTokens)}`]
+  if (props.tokenUsageDetail) {
+    if (usage.cacheHitTokens != null) {
+      parts.push(`缓存命中 ${formatTokenCount(usage.cacheHitTokens)}`)
+    }
+    if (usage.cacheMissTokens != null) {
+      parts.push(`缓存未命中 ${formatTokenCount(usage.cacheMissTokens)}`)
+    }
+  }
+  return parts.join(' · ')
+})
+
 /** 生成中提示用户消息将进入队列 */
 const placeholderText = computed(() => {
   if (props.running) return '会话进行中，发送的消息将进入待发送队列'

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

@@ -317,6 +317,15 @@ watch(
     }
     if (!prev) return
 
+    // 清除会话后列表已空：跳过结束停留，立刻回到欢迎区
+    if (visibleMessages.value.length === 0) {
+      finishing.value = false
+      workingLeaving.value = false
+      idleLeaving.value = false
+      idleEnter.value = false
+      return
+    }
+
     finishing.value = true
     idleLeaving.value = false
     const last = visibleMessages.value[visibleMessages.value.length - 1]
@@ -341,6 +350,19 @@ watch(
   }
 )
 
+// 消息被清空（clear）：立刻收掉工作球，欢迎区恢复
+watch(
+  () => visibleMessages.value.length,
+  (len) => {
+    if (len > 0) return
+    clearJumpTimers()
+    finishing.value = false
+    workingLeaving.value = false
+    idleLeaving.value = false
+    idleEnter.value = false
+  }
+)
+
 // 空闲欢迎区展示期间自动轮换；跳到工作位后停止
 watch(
   () => [welcomeItems.value.length, showIdleWelcome.value] as const,

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

@@ -906,7 +906,8 @@ $root-name: ai-chat;
   @include m.e(input-toolbar-left) {
     @include m.flex(flex, flex-start, center);
     gap: fn.use-var(gap, small);
-    flex-shrink: 0;
+    flex: 1;
+    min-width: 0;
   }
 
   @include m.e(input-toolbar-right) {
@@ -960,6 +961,35 @@ $root-name: ai-chat;
     }
   }
 
+  @include m.e(input-clear-wrap) {
+    flex-shrink: 0;
+    display: inline-flex;
+    line-height: 0;
+
+    @include m.is(disabled) {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+
+  @include m.e(input-clear) {
+    color: fn.use-var(text-color, assist);
+    cursor: pointer;
+    font-size: 18px;
+
+    &:hover {
+      color: fn.use-var(color, danger);
+    }
+  }
+
+  @include m.e(input-usage) {
+    min-width: 0;
+    @include m.ellipsis;
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, assist);
+    line-height: 1.4;
+  }
+
   @include m.e(input-stop) {
     display: block;
     width: 10px;

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

@@ -5,6 +5,7 @@ import '@veltra/desktop/components/icon/style'
 import '@veltra/desktop/components/input/style'
 import '@veltra/desktop/components/layout/style'
 import '@veltra/desktop/components/message/style'
+import '@veltra/desktop/components/pop-confirm/style'
 import '@veltra/desktop/components/scroll/style'
 import '@veltra/desktop/components/select/style'
 import '@veltra/styles/animations/shine.scss'

package/src/types/ai-chat.ts

@@ -5,6 +5,7 @@ import type {
   ChatAttachment,
   ChatMessage,
   ChatQueuedMessage,
+  ChatTokenUsage,
   ChatTool,
   ChatToolCall,
   ChatTransport
@@ -44,6 +45,11 @@ export interface AiChatProps {
   maxAttachmentSize?: number
   /** 透传给内部 MarkdownRender 的属性 */
   rendererProps?: Record<string, unknown>
+  /**
+   * 是否展示 token 用量明细（缓存命中 / 未命中；缺字段不显示）。
+   * 默认 false：仅在拿到 usage 时显示会话累计「总 token」。接口未返回 usage 时不展示。
+   */
+  tokenUsageDetail?: boolean
 }
 
 export interface AiChatEmits {
@@ -70,8 +76,12 @@ export interface _AiChatExposed {
   abort: () => void
   /** 重新生成最后一条 assistant 回复 */
   regenerate: () => void
-  /** 清空消息与待发送队列 */
+  /** 清空消息、待发送队列与 token 统计（生成中会先中止） */
   clear: () => void
+  /** 当前会话累计 token（从未收到 usage 时为 null） */
+  tokenUsage: Ref<ChatTokenUsage | null>
+  /** 最近一轮用户对话的 token（含工具多轮请求；该轮无 usage 时为 null） */
+  lastTurnUsage: Ref<ChatTokenUsage | null>
   /** 待发送消息队列（会话进行中提交的消息按序排队，收尾后 FIFO 自动接续） */
   queue: Ref<ChatQueuedMessage[]>
   /** 立即执行队列中的某条：中断当前会话并插队为下一条 */