@veltra/ai 2.1.2 → 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-item.vue

@@ -50,7 +50,6 @@
       <MarkdownRender
         v-if="message.content || isStreaming"
         mode="chat"
-        :class="cls.e('message-content')"
         :content="message.content"
         :final="!isStreaming"
         :fade="false"

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

@@ -416,10 +416,11 @@ $root-name: ai-chat;
     display: block;
   }
 
-  @include m.e(message-content) {
-    font-size: 13px;
-    line-height: 1.6;
-    // 压缩 markstream 流式排版：正文字号 / 行高 / 标题档位 / 块级间距（变量见 markstream-vue 样式表）
+  // 信息密度必须写在 .markstream-vue 上：该库把 --ms-flow-* / --ms-text-* 定义在根节点，
+  // 父级（如 __message-content）的 0.55em 会被同元素上的 1.5em 默认值盖掉。
+  // 选择器带 .u-ai-chat 前缀，特异性高于库默认，不依赖 CSS 加载顺序
+  //（产物里 markstream-vue/index.css 仍排在我们的 css 之后）。
+  .markstream-vue {
     --ms-text-body: 13px;
     --ms-leading-body: 1.6;
     --ms-text-h1: 1.55em;
@@ -444,6 +445,13 @@ $root-name: ai-chat;
     --ms-flow-hr-y: 0.9em;
     --ms-flow-admonition-y: 0.7em;
     --ms-flow-diagram-y: 0.7em;
+
+    // markstream 在 ≤1023px 给 ul.list-disc 写死了 ~1.33em 边距，不走 --ms-flow-list-*
+    .list-disc {
+      margin-top: var(--ms-flow-list-y);
+      margin-bottom: var(--ms-flow-list-y);
+      padding-left: var(--ms-flow-list-indent);
+    }
   }
 
   @include m.e(message-status) {
@@ -551,20 +559,21 @@ $root-name: ai-chat;
     margin: 4px 0;
     font-size: fn.use-var(font-size-main, small);
 
-    // 相邻工具卡片保持紧凑间距（覆盖 UCollapseItem 的兄弟间距）
-    & + #{fn.bem($root-name, tool-call)} {
+    // 产物里 desktop collapse 样式在本文件之后加载；
+    // `.u-collapse__item + .u-collapse__item` 与单层兄弟选择器同特异性，必须带 .u-ai-chat 前缀。
+    .u-#{$root-name} & + #{fn.bem($root-name, tool-call)} {
       margin-top: 4px;
     }
 
     // 覆盖 UCollapseItem 默认头部/内容区节奏，保持紧凑单行头
-    .u-collapse__header {
+    .u-#{$root-name} & .u-collapse__header {
       gap: 6px;
       padding: 5px fn.use-var(gap, small);
       font-weight: 400;
       letter-spacing: normal;
     }
 
-    .u-collapse__content {
+    .u-#{$root-name} & .u-collapse__content {
       padding: fn.use-var(gap, small);
       line-height: 1.5;
     }
@@ -857,7 +866,7 @@ $root-name: ai-chat;
     }
   }
 
-  // 输入区：无边框卡片，聚焦时用柔和的主色描边提示
+  // 输入区：无边框卡片，靠浅阴影区分层级；聚焦不换蓝描边，避免变成另一种框
   @include m.e(input-area) {
     flex-shrink: 0;
     width: 100%;
@@ -866,12 +875,8 @@ $root-name: ai-chat;
     margin: 0 0 fn.use-var(gap, default);
     border-radius: fn.use-var(radius, large);
     background-color: fn.use-var(bg-color, top);
+    box-shadow: fn.use-var(shadow, sm);
     padding: fn.use-var(gap, small);
-    transition: box-shadow 0.15s ease;
-
-    &:focus-within {
-      box-shadow: 0 0 0 1px fn.use-var(color, primary);
-    }
   }
 
   @include m.e(input) {
@@ -901,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) {
@@ -955,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[]>
   /** 立即执行队列中的某条：中断当前会话并插队为下一条 */