@veltra/ai 2.1.10 → 2.2.0

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

@@ -2,19 +2,17 @@
   <UDropdown
     ref="dropdownRef"
     trigger="click"
+    direction="top"
+    alignment="end"
     width="auto"
-    min-width="220px"
+    min-width="240px"
     :content-class="cls.e('model-panel')"
-    @update:visible="handleVisibleChange"
   >
     <template #trigger>
       <button type="button" :class="cls.e('model-trigger')">
         <span :class="cls.e('model-trigger-label')">
           {{ currentModel?.label ?? model ?? '模型' }}
         </span>
-        <span v-if="currentReasoningLabel" :class="cls.e('model-trigger-reasoning')">
-          {{ currentReasoningLabel }}
-        </span>
         <UIcon :class="cls.e('model-trigger-arrow')">
           <ArrowDown />
         </UIcon>
@@ -22,7 +20,7 @@
     </template>
 
     <template #content>
-      <div :class="cls.e('model-panel-list')">
+      <UScroll :class="cls.e('model-panel-list')">
         <div
           v-for="item in models"
           :key="item.id"
@@ -31,72 +29,25 @@
           <div :class="cls.e('model-option-main')" @click="handleSelectModel(item)">
             <div :class="cls.e('model-option-head')">
               <span :class="cls.e('model-option-name')">{{ item.label ?? item.id }}</span>
-              <span :class="cls.e('model-option-actions')">
-                <button
-                  v-if="item.reasoningLevels?.length"
-                  type="button"
-                  :class="[
-                    cls.e('model-option-reasoning'),
-                    bem.is('expanded', expandedReasoningId === item.id)
-                  ]"
-                  @click.stop="toggleReasoning(item)"
-                >
-                  <span>{{ getReasoningLabel(item) }}</span>
-                  <UIcon :class="cls.e('model-option-reasoning-arrow')">
-                    <ArrowDown />
-                  </UIcon>
-                </button>
-                <!-- 勾选槽位固定占位：未选中也保留位置，保证推理等级按钮跨行对齐 -->
-                <UIcon :class="[cls.e('model-option-check'), bem.is('hidden', item.id !== model)]">
-                  <Check />
-                </UIcon>
-              </span>
+              <UIcon v-if="item.id === model" :class="cls.e('model-option-check')">
+                <Check />
+              </UIcon>
             </div>
             <div v-if="item.description" :class="cls.e('model-option-desc')">
               {{ item.description }}
             </div>
           </div>
-
-          <div
-            v-if="item.reasoningLevels?.length"
-            :class="[
-              cls.e('reasoning-levels'),
-              bem.is('expanded', expandedReasoningId === item.id)
-            ]"
-          >
-            <div :class="cls.e('reasoning-levels-inner')">
-              <div
-                v-for="level in item.reasoningLevels"
-                :key="level.value"
-                :class="[
-                  cls.e('reasoning-option'),
-                  bem.is('active', isReasoningActive(item, level.value))
-                ]"
-                @click="handleSelectReasoning(item, level.value)"
-              >
-                <span>{{ level.label }}</span>
-                <UIcon
-                  :class="[
-                    cls.e('model-option-check'),
-                    bem.is('hidden', !isReasoningActive(item, level.value))
-                  ]"
-                >
-                  <Check />
-                </UIcon>
-              </div>
-            </div>
-          </div>
         </div>
-      </div>
+      </UScroll>
     </template>
   </UDropdown>
 </template>
 
 <script lang="ts" setup>
-import { UDropdown, UIcon } from '@veltra/desktop'
+import { UDropdown, UIcon, UScroll } from '@veltra/desktop'
 import { ArrowDown, Check } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, nextTick, shallowRef, useTemplateRef } from 'vue'
+import { computed, inject, useTemplateRef } from 'vue'
 
 import type { ChatModelOption } from '../../providers'
 import { AiChatDIKey } from './di'
@@ -109,69 +60,19 @@ const props = defineProps<{
 }>()
 
 const model = defineModel<string | undefined>('model')
-const reasoningLevel = defineModel<string | undefined>('reasoningLevel')
 
 const di = inject(AiChatDIKey)
 const cls = di?.cls ?? bem('ai-chat')
 
 const dropdownRef = useTemplateRef('dropdownRef')
 
-/** 当前内联展开思考强度的模型 id（手风琴，同时只展开一个） */
-const expandedReasoningId = shallowRef<string>()
-
 const currentModel = computed(() => {
   return props.models.find((m) => m.id === model.value)
 })
 
-const currentReasoningLabel = computed(() => {
-  return currentModel.value?.reasoningLevels?.find((level) => level.value === reasoningLevel.value)
-    ?.label
-})
-
-/** 取模型默认推理等级：显式配置优先，缺省落到首个可选等级 */
-const resolveDefaultReasoningLevel = (item: ChatModelOption) => {
-  const levels = item.reasoningLevels ?? []
-  if (!levels.length) return undefined
-  return (
-    levels.find((level) => level.value === item.defaultReasoningLevel)?.value ?? levels[0]?.value
-  )
-}
-
-/** 胶囊文案：已选中模型展示当前推理等级，其余展示该模型的默认等级 */
-const getReasoningLabel = (item: ChatModelOption) => {
-  if (item.id === model.value && currentReasoningLabel.value) {
-    return currentReasoningLabel.value
-  }
-  return item.reasoningLevels?.find((level) => level.value === resolveDefaultReasoningLevel(item))
-    ?.label
-}
-
-const isReasoningActive = (item: ChatModelOption, value: string) => {
-  return item.id === model.value && reasoningLevel.value === value
-}
-
-/** 关闭时收起内联思考强度，下次打开仍从模型列表开始 */
-const handleVisibleChange = (visible: boolean) => {
-  if (!visible) expandedReasoningId.value = undefined
-}
-
-/** 点击模型主体：直接选中模型，并同步到该模型默认推理等级 */
+/** 选中模型即关闭；推理等级由 useChat 的模型联动校正 */
 const handleSelectModel = (item: ChatModelOption) => {
   model.value = item.id
-  reasoningLevel.value = resolveDefaultReasoningLevel(item)
-  dropdownRef.value?.close()
-}
-
-/** 点击推理等级胶囊：内联展开/收起该模型的思考强度 */
-const toggleReasoning = (item: ChatModelOption) => {
-  expandedReasoningId.value = expandedReasoningId.value === item.id ? undefined : item.id
-  nextTick(() => dropdownRef.value?.updateDropdown())
-}
-
-/** 选中思考强度：同时切到该等级所属模型，避免模型与推理等级错配 */
-const handleSelectReasoning = (item: ChatModelOption, value: string) => {
-  model.value = item.id
-  reasoningLevel.value = value
   dropdownRef.value?.close()
 }
 </script>

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

@@ -0,0 +1,70 @@
+<template>
+  <UDropdown
+    v-if="levels.length > 1"
+    ref="dropdownRef"
+    trigger="click"
+    direction="top"
+    alignment="end"
+    width="auto"
+    min-width="140px"
+    :content-class="cls.e('reasoning-panel')"
+  >
+    <template #trigger>
+      <button type="button" :class="cls.e('reasoning-trigger')" title="推理等级">
+        <span :class="cls.e('reasoning-trigger-label')">{{ currentLabel }}</span>
+        <UIcon :class="cls.e('reasoning-trigger-arrow')">
+          <ArrowDown />
+        </UIcon>
+      </button>
+    </template>
+
+    <template #content>
+      <div :class="cls.e('reasoning-list')">
+        <div
+          v-for="level in levels"
+          :key="level.value"
+          :class="[cls.e('reasoning-option'), bem.is('active', level.value === reasoningLevel)]"
+          @click="handleSelect(level.value)"
+        >
+          <span>{{ level.label }}</span>
+          <UIcon v-if="level.value === reasoningLevel" :class="cls.e('reasoning-check')">
+            <Check />
+          </UIcon>
+        </div>
+      </div>
+    </template>
+  </UDropdown>
+</template>
+
+<script lang="ts" setup>
+import { UDropdown, UIcon } from '@veltra/desktop'
+import { ArrowDown, Check } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, useTemplateRef } from 'vue'
+
+import type { ChatReasoningLevel } from '../../providers'
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatReasoningPicker' })
+
+const { levels } = defineProps<{
+  /** 当前模型的推理等级列表；不足两档时没有切换意义，不渲染 */
+  levels: ChatReasoningLevel[]
+}>()
+
+const reasoningLevel = defineModel<string | undefined>('reasoningLevel')
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+const dropdownRef = useTemplateRef('dropdownRef')
+
+const currentLabel = computed(() => {
+  return levels.find((level) => level.value === reasoningLevel.value)?.label ?? '推理'
+})
+
+const handleSelect = (value: string) => {
+  reasoningLevel.value = value
+  dropdownRef.value?.close()
+}
+</script>

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 {
@@ -480,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;
@@ -1108,12 +1137,40 @@ $root-name: ai-chat;
     @include m.ellipsis;
   }
 
-  @include m.e(model-trigger-reasoning) {
+  @include m.e(model-trigger-arrow) {
     flex-shrink: 0;
+    font-size: 12px;
     color: fn.use-var(text-color, assist);
   }
 
-  @include m.e(model-trigger-arrow) {
+  @include m.e(reasoning-trigger) {
+    @include m.flex(flex, flex-start, center);
+    gap: 4px;
+    flex-shrink: 0;
+    padding: 2px fn.use-var(gap, small);
+    border: none;
+    border-radius: fn.use-var(radius, default);
+    background: transparent;
+    color: fn.use-var(text-color, assist);
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(text-color, main);
+    }
+  }
+
+  @include m.e(reasoning-trigger-label) {
+    @include m.ellipsis;
+    max-width: 72px;
+  }
+
+  @include m.e(reasoning-trigger-arrow) {
     flex-shrink: 0;
     font-size: 12px;
     color: fn.use-var(text-color, assist);
@@ -1151,12 +1208,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) {
@@ -1201,13 +1278,38 @@ $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;
   user-select: none;
 
+  // 面板从贴底的输入栏向上弹出，超出高度在列表内滚动
   .u-#{$root-name}__model-panel-list {
     min-width: 0;
+    max-height: 280px;
   }
 
   .u-#{$root-name}__model-option-main {
@@ -1222,60 +1324,28 @@ $root-name: ai-chat;
   }
 
   .u-#{$root-name}__model-option-head {
-    @include m.flex(flex, space-between, center);
-    gap: 12px;
+    @include m.flex(flex, flex-start, center);
+    gap: 8px;
+    min-width: 0;
     color: fn.use-var(text-color, main);
   }
 
-  .u-#{$root-name}__model-option-name {
-    @include m.ellipsis;
+  .u-#{$root-name}__model-option.is-active {
+    .u-#{$root-name}__model-option-name {
+      color: fn.use-var(color, primary);
+      font-weight: 600;
+    }
   }
 
-  .u-#{$root-name}__model-option-actions {
-    @include m.flex(flex, flex-start, center);
-    flex-shrink: 0;
-    gap: 6px;
+  .u-#{$root-name}__model-option-name {
+    @include m.ellipsis;
   }
 
   .u-#{$root-name}__model-option-check {
     flex-shrink: 0;
+    margin-left: auto;
     font-size: 14px;
     color: fn.use-var(color, primary);
-
-    @include m.is(hidden) {
-      visibility: hidden;
-    }
-  }
-
-  .u-#{$root-name}__model-option-reasoning {
-    @include m.flex(flex, flex-start, center);
-    gap: 2px;
-    flex-shrink: 0;
-    padding: 1px 6px;
-    border: none;
-    border-radius: fn.use-var(radius, small);
-    background: fn.use-var(color, primary, 'light-9');
-    color: fn.use-var(color, primary);
-    font-size: fn.use-var(font-size-main, small);
-    cursor: pointer;
-    transition:
-      background-color 0.15s ease,
-      color 0.15s ease;
-
-    &:hover {
-      background: fn.use-var(color, primary, 'light-7');
-    }
-  }
-
-  .u-#{$root-name}__model-option-reasoning-arrow {
-    font-size: 12px;
-    transition: transform 0.2s ease;
-  }
-
-  .u-#{$root-name}__model-option-reasoning.is-expanded {
-    .u-#{$root-name}__model-option-reasoning-arrow {
-      transform: rotate(180deg);
-    }
   }
 
   .u-#{$root-name}__model-option-desc {
@@ -1283,28 +1353,17 @@ $root-name: ai-chat;
     font-size: fn.use-var(font-size-main, small);
     color: fn.use-var(text-color, assist);
   }
+}
 
-  // 内联思考强度：grid 行高 0fr → 1fr 过渡，展开/收起平滑无跳变
-  .u-#{$root-name}__reasoning-levels {
-    display: grid;
-    grid-template-rows: 0fr;
-    transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-    @include m.is(expanded) {
-      grid-template-rows: 1fr;
-    }
-  }
-
-  .u-#{$root-name}__reasoning-levels-inner {
-    min-height: 0;
-    overflow: hidden;
-  }
+// 推理等级选择面板经 teleport 挂载到 popper 容器，同样需独立定义
+.u-#{$root-name}__reasoning-panel {
+  padding: 4px;
+  user-select: none;
 
   .u-#{$root-name}__reasoning-option {
     @include m.flex(flex, space-between, center);
     gap: 12px;
-    margin-left: 8px;
-    padding: 5px 8px;
+    padding: 6px 8px;
     border-radius: calc(fn.use-var(radius, default) + 1px);
     font-size: fn.use-var(font-size-main, small);
     color: fn.use-var(text-color, main);
@@ -1321,4 +1380,10 @@ $root-name: ai-chat;
       color: fn.use-var(color, primary);
     }
   }
+
+  .u-#{$root-name}__reasoning-check {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: fn.use-var(color, primary);
+  }
 }

package/src/providers/types.ts

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

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
   /**