@veltra/ai 2.1.9 → 2.1.11

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

@@ -178,12 +178,14 @@ $root-name: ai-chat;
     color: fn.use-var(text-color, assist);
   }
 
+  // 负边距吃掉主列横向 padding、顶到主列边缘：滚动条出现在容器右侧而非贴着会话列表；
+  // 800px 限宽下沉到 UScroll 内容层（__list-content）
   @include m.e(list-wrap) {
     position: relative;
     flex: 1;
     min-height: 0;
-    width: 100%;
-    max-width: 800px;
+    width: calc(100% + #{fn.use-var(gap, default)} * 2);
+    margin: 0 calc(#{fn.use-var(gap, default)} * -1);
     display: flex;
     flex-direction: column;
     // 纵向留出呼吸位：首条消息不贴容器顶，滚动时内容不顶边；横向由各消息自身 padding 控制
@@ -191,6 +193,16 @@ $root-name: ai-chat;
     box-sizing: border-box;
   }
 
+  // UScroll 内容层：左右 gap 补偿 list-wrap 负边距，宽屏内层 800px、窄屏与主列内容盒同宽，
+  // 消息区视觉几何与限宽在 list-wrap 时一致
+  @include m.e(list-content) {
+    width: 100%;
+    max-width: calc(800px + #{fn.use-var(gap, default)} * 2);
+    margin: 0 auto;
+    padding: 0 fn.use-var(gap, default);
+    box-sizing: border-box;
+  }
+
   @include m.e(list) {
     flex: 1;
     min-height: 0;
@@ -200,6 +212,8 @@ $root-name: ai-chat;
   @include m.e(welcome) {
     flex-shrink: 0;
     width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
     height: 48px;
     @include m.flex(flex, flex-start, center);
     color: fn.use-var(text-color, assist);
@@ -303,11 +317,11 @@ $root-name: ai-chat;
     transform: translateY(-6px);
   }
 
-  // 生成中的统一工作状态指示（列表末尾）
+  // 生成中的统一工作状态指示（列表末尾）；横向定位由 __list-content 的 padding 提供
   @include m.e(working) {
     @include m.flex(flex, flex-start, center);
     gap: fn.use-var(gap, small);
-    padding: 0 fn.use-var(gap, default) fn.use-var(gap, small);
+    padding: 0 0 fn.use-var(gap, small);
     width: fit-content;
 
     // 工作开始：立即从 0 放大（无延时），与输入框上方缩小形成对向跳
@@ -334,6 +348,13 @@ $root-name: ai-chat;
     font-size: fn.use-var(font-size-main, small);
   }
 
+  // 工作计时 / 收尾停留期间的总用时
+  @include m.e(working-time) {
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, assist);
+    font-variant-numeric: tabular-nums;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .u-#{$root-name}__welcome.is-enter .u-ai-orb,
     .u-#{$root-name}__working .u-ai-orb {
@@ -346,21 +367,22 @@ $root-name: ai-chat;
     }
   }
 
-  // 「最新消息」悬浮按钮：上翻浏览时出现，点击回到底部
+  // 回到底部悬浮按钮：上翻浏览时出现于列表下方，点击回到底部
   @include m.e(to-latest) {
     position: absolute;
-    top: fn.use-var(gap, small);
+    bottom: fn.use-var(gap, small);
     left: 50%;
     transform: translateX(-50%);
     z-index: 1;
+    width: 28px;
+    height: 28px;
+    padding: 0;
     @include m.flex(flex, center, center);
-    gap: 4px;
-    padding: 4px 12px;
     border: none;
-    border-radius: 999px;
+    border-radius: 50%;
     background-color: fn.use-var(bg-color, top);
     color: fn.use-var(text-color, second);
-    font-size: fn.use-var(font-size-main, small);
+    font-size: 14px;
     box-shadow: 0 2px 8px fn.color-a(shadow, 20, color);
     cursor: pointer;
     transition: color 0.15s ease;
@@ -384,12 +406,12 @@ $root-name: ai-chat;
 
   @include m.em(to-latest, 'fade-enter-from') {
     opacity: 0;
-    transform: translateX(-50%) translateY(-4px);
+    transform: translateX(-50%) translateY(4px);
   }
 
   @include m.em(to-latest, 'fade-leave-to') {
     opacity: 0;
-    transform: translateX(-50%) translateY(-4px);
+    transform: translateX(-50%) translateY(4px);
   }
 
   @include m.e(message) {
@@ -479,6 +501,14 @@ $root-name: ai-chat;
     gap: fn.use-var(gap, small);
   }
 
+  // 答案操作区前的本轮总用时
+  @include m.e(message-duration) {
+    align-self: center;
+    color: fn.use-var(text-color, assist);
+    font-size: fn.use-var(font-size-main, small);
+    font-variant-numeric: tabular-nums;
+  }
+
   // 思考过程
   @include m.e(reasoning) {
     margin-bottom: 4px;
@@ -500,9 +530,19 @@ $root-name: ai-chat;
   }
 
   @include m.e(reasoning-title) {
+    flex-shrink: 0;
     line-height: 1.5;
   }
 
+  // 折叠态头部右侧滚动展示的最新一行思考
+  @include m.e(reasoning-line) {
+    flex: 1;
+    min-width: 0;
+    @include m.ellipsis;
+    line-height: 1.5;
+    color: fn.use-var(text-color, assist);
+  }
+
   @include m.e(reasoning-chevron) {
     font-size: 12px;
     transition: transform 0.2s;
@@ -1140,12 +1180,32 @@ $root-name: ai-chat;
     }
   }
 
-  @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(usage-trigger) {
+    @include m.flex(inline-flex, center, center);
+    flex-shrink: 0;
+    padding: 2px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  @include m.e(usage-ring) {
+    display: block;
+    width: 14px;
+    height: 14px;
+  }
+
+  @include m.e(usage-ring-track) {
+    fill: none;
+    stroke: fn.use-var(border-color);
+    stroke-width: 5;
+  }
+
+  @include m.e(usage-ring-value) {
+    fill: none;
+    stroke: fn.use-var(color, primary);
+    stroke-width: 5;
+    transition: stroke-dasharray 0.3s ease;
   }
 
   @include m.e(input-stop) {
@@ -1190,6 +1250,29 @@ $root-name: ai-chat;
   }
 }
 
+// 用量明细面板经 teleport 挂载到 popper 容器，不处于 .u-ai-chat 内，需独立定义
+.u-#{$root-name}__usage-panel {
+  padding: 6px 4px;
+  user-select: none;
+
+  .u-#{$root-name}__usage-row {
+    @include m.flex(flex, space-between, center);
+    gap: 24px;
+    padding: 3px 8px;
+    font-size: fn.use-var(font-size-main, small);
+    line-height: 1.6;
+  }
+
+  .u-#{$root-name}__usage-label {
+    color: fn.use-var(text-color, assist);
+  }
+
+  .u-#{$root-name}__usage-value {
+    color: fn.use-var(text-color, main);
+    font-variant-numeric: tabular-nums;
+  }
+}
+
 // 模型选择面板经 teleport 挂载到 popper 容器，不处于 .u-ai-chat 内，需独立定义
 .u-#{$root-name}__model-panel {
   padding: 4px;

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

@@ -10,4 +10,6 @@ import '@veltra/desktop/components/scroll/style'
 import '@veltra/desktop/components/select/style'
 import '@veltra/styles/animations/shine.scss'
 import 'markstream-vue/index.css'
+// 活体球为 ai-chat 内部组件，样式随 ai-chat 一并加载
+import '../ai-orb/style.scss'
 import './style.scss'

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

@@ -95,19 +95,39 @@ const markUserToggled = () => {
 /** 面板工具：render 展示在右侧侧边面板，卡片 body 仅保留「查看面板」入口 */
 const isPanelTool = computed(() => tool.value?.renderTo === 'panel')
 
-/** 完成后是否自动折叠：缺省面板工具折叠；有 render 时不折叠，否则折叠 */
-const autoCollapse = computed(
-  () => tool.value?.autoCollapse ?? (isPanelTool.value || !tool.value?.render)
+/** 「UI 即答复」的终结工具（session 元信息无 terminal，恒为 false） */
+const isAnswerTool = computed(() => {
+  const t = tool.value
+  return !!(t && 'terminal' in t && t.terminal)
+})
+
+/** 内联自定义 body（render / tool-<name> 插槽）：进行中可能是提问表单等交互 UI，需展开可见 */
+const hasInlineBody = computed(
+  () => !isPanelTool.value && !!(tool.value?.render || di?.slots[`tool-${props.toolCall.name}`])
 )
 
+/** 完成后是否自动折叠：缺省一律折叠；「UI 即答复」的终结工具缺省保持展开 */
+const autoCollapse = computed(() => tool.value?.autoCollapse ?? !isAnswerTool.value)
+
+/** 需要用户交互/展示的进行中状态：待确认（看参数再决策）、有内联自定义 body（提问表单等） */
+const needsInteraction = computed(() => {
+  if (props.toolCall.status === 'awaiting-confirm') return true
+  const active = props.toolCall.status === 'pending' || props.toolCall.status === 'running'
+  return active && hasInlineBody.value
+})
+
+const isSettledStatus = (status: ChatToolCall['status']) =>
+  status === 'success' || status === 'error' || status === 'rejected'
+
+// 默认折叠（含进行中）；仅交互/答复类自动展开，用户手动切换过后不再自动变化
 watch(
   () => props.toolCall.status,
   (status) => {
     if (userToggled) return
-    if (status === 'pending' || status === 'running' || status === 'awaiting-confirm') {
-      isExpanded.value = true
-    } else {
+    if (isSettledStatus(status)) {
       isExpanded.value = !autoCollapse.value
+    } else {
+      isExpanded.value = needsInteraction.value
     }
   },
   { immediate: true }
@@ -130,9 +150,7 @@ const isActive = computed(() => {
 })
 
 /** 终态（成功/失败/拒绝） */
-const isSettled = computed(() => {
-  return ['success', 'error', 'rejected'].includes(props.toolCall.status)
-})
+const isSettled = computed(() => isSettledStatus(props.toolCall.status))
 
 /**
  * 折叠后卸载内容 DOM：仅终态且非面板工具时启用——

package/src/components/index.ts

@@ -1,2 +1 @@
 export * from './ai-chat'
-export * from './ai-orb'

package/src/providers/types.ts

@@ -18,6 +18,8 @@ export interface ChatModel {
   reasoningLevels?: ChatReasoningLevel[]
   /** 默认推理等级（须落在 reasoningLevels 内） */
   defaultReasoningLevel?: string
+  /** 上下文窗口上限（token）。配置后输入栏用量环按「最近一次请求总 token / 上限」显示占比 */
+  contextWindow?: number
 }
 
 /** 模型服务商配置（内嵌 models） */

package/src/style.ts

@@ -1,2 +1 @@
 import './components/ai-chat/style'
-import './components/ai-orb/style'

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

@@ -76,6 +76,15 @@ async function expandProcess(host: HTMLElement) {
   await nextTick()
 }
 
+/** 工具卡片终态默认折叠（destroyOnCollapse 卸载内容 DOM）：点头部展开后内容才挂载 */
+async function expandToolCard(host: HTMLElement) {
+  const header = host.querySelector<HTMLElement>('.u-ai-chat__tool-call .u-collapse__header')!
+  expect(header, '工具卡片头部应存在').toBeTruthy()
+  click(header)
+  await nextTick()
+  await nextTick()
+}
+
 /** 底部导航按钮（UButton disabled 体现为 is-disabled class） */
 const actionButton = (host: HTMLElement, text: string) => {
   return [...host.querySelectorAll<HTMLElement>('.u-ai-chat__ask-question-actions button')].find(
@@ -169,10 +178,13 @@ describe('内置提问工具', () => {
       ]
     })
 
-    // 第二轮文本输出后，提问工具卡片收进「已完成」过程块，先展开
+    // 第二轮文本输出后，提问工具卡片收进「已完成」过程块，先展开过程块
     await expandProcess(host)
 
-    // 问答摘要视图：命中选项的回答渲染为 chip，完成后保持展开
+    // 工具卡片终态默认折叠且卸载内容 DOM，手动展开后才挂载摘要视图
+    await expandToolCard(host)
+
+    // 问答摘要视图：命中选项的回答渲染为 chip
     expect(host.querySelectorAll('.u-ai-chat__ask-question-result').length).toBe(3)
     const summary = host.querySelector('.u-ai-chat__ask-question')!.textContent!
     expect(summary).toContain('目标用户是谁？')
@@ -200,6 +212,12 @@ describe('内置提问工具', () => {
 
     chat.value?.abort()
 
+    // 中止后调用进入终态：卡片默认折叠并卸载内容 DOM，展开后显示状态
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__tool-call.is-error')).toBeTruthy()
+    })
+    await expandToolCard(host)
+
     await vi.waitFor(() => {
       expect(host.querySelector('.u-ai-chat__ask-question-status')?.textContent).toBe('已取消')
     })

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

@@ -126,7 +126,8 @@ const AskQuestionRender = defineComponent({
 
 /**
  * 创建内置提问工具：execute 挂起等待用户在 UI 中作答，提交后结果回灌模型。
- * 工具卡片由内联提问表单渲染（多题分页导航，提交后展示问答摘要，不自动折叠）。
+ * 工具卡片由内联提问表单渲染（多题分页导航，提交后展示问答摘要）；
+ * 进行中因有内联 render 自动展开，终态默认折叠，展开后可查看问答摘要。
  */
 export function createAskQuestionTool(
   options: CreateAskQuestionToolOptions = {}

package/src/types/ai-chat.ts

@@ -52,7 +52,8 @@ export interface AiChatProps {
   rendererProps?: Record<string, unknown>
   /**
    * 是否展示 token 用量明细（缓存命中 / 未命中；缺字段不显示）。
-   * 默认 false：仅在拿到 usage 时显示会话累计「总 token」。接口未返回 usage 时不展示。
+   * 默认 false：用量环明细面板只列 总 / 输入 / 输出；true 时追加有数据的缓存项。
+   * 接口未返回 usage 时不展示用量环。
    */
   tokenUsageDetail?: boolean
   /**

package/src/types/index.ts

@@ -1,2 +1 @@
 export * from './ai-chat'
-export * from './ai-orb'

package/dist/components/ai-orb/style.d.ts

@@ -1 +0,0 @@
-export {}

package/dist/components/ai-orb/style.js

@@ -1 +0,0 @@
-import "./style2.css";

package/dist/types/ai-orb.d.ts

@@ -1,26 +0,0 @@
-//#region src/types/ai-orb.d.ts
-/** 活体球生命状态：驱动常态动画（平静 / 思考 / 输出） */
-export type AiOrbStatus = 'idle' | 'thinking' | 'speaking';
-/**
- * 瞬时表情：播放约 1-2s 后自动回到 status 驱动的常态。
- * - happy：成功 / 回答完毕 —— 先睁大眼睛，再弯眼大笑 + 点头
- * - shock：惊讶 —— 睁大眼睛 + 小嘴微张 + 轻微后仰
- * - frustrated：受挫（如工具调用失败）—— 闭紧眼睛 + 摇头 + 嘴角下撇
- */
-export type AiOrbReaction = 'happy' | 'shock' | 'frustrated';
-export interface AiOrbProps {
-  /** 球体直径（px），默认 48 */
-  size?: number;
-  /** 生命状态，默认 idle */
-  status?: AiOrbStatus;
-}
-export interface AiOrbEmits {
-  /** 点击球体（球体同时会做 Q 弹反馈） */
-  (e: 'click'): void;
-}
-export interface AiOrbExposed {
-  /** 播放一次瞬时表情（对应阶段性事件，如回答完毕 / 工具调用失败） */
-  react: (reaction: AiOrbReaction) => void;
-}
-//#endregion
-//# sourceMappingURL=ai-orb.d.ts.map

package/src/components/ai-orb/index.ts

@@ -1 +0,0 @@
-export { default as UAiOrb } from './ai-orb.vue'

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

@@ -1 +0,0 @@
-import './style.scss'