@veltra/ai 2.1.11 → 2.2.1

package/dist/components/ai-chat/style2.css

@@ -1017,11 +1017,39 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.u-ai-chat__model-trigger-reasoning {
+.u-ai-chat__model-trigger-arrow {
   flex-shrink: 0;
+  font-size: 12px;
   color: var(--u-text-color-assist);
 }
-.u-ai-chat__model-trigger-arrow {
+.u-ai-chat__reasoning-trigger {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 2px var(--u-gap-small);
+  border: none;
+  border-radius: var(--u-radius-default);
+  background: transparent;
+  color: var(--u-text-color-assist);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.u-ai-chat__reasoning-trigger:hover {
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-text-color-main);
+}
+.u-ai-chat__reasoning-trigger-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 72px;
+}
+.u-ai-chat__reasoning-trigger-arrow {
   flex-shrink: 0;
   font-size: 12px;
   color: var(--u-text-color-assist);
@@ -1144,6 +1172,7 @@
 }
 .u-ai-chat__model-panel .u-ai-chat__model-panel-list {
   min-width: 0;
+  max-height: 280px;
 }
 .u-ai-chat__model-panel .u-ai-chat__model-option-main {
   padding: 6px 8px;
@@ -1156,93 +1185,59 @@
 }
 .u-ai-chat__model-panel .u-ai-chat__model-option-head {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 12px;
+  gap: 8px;
+  min-width: 0;
   color: var(--u-text-color-main);
 }
+.u-ai-chat__model-panel .u-ai-chat__model-option.is-active .u-ai-chat__model-option-name {
+  color: var(--u-color-primary);
+  font-weight: 600;
+}
 .u-ai-chat__model-panel .u-ai-chat__model-option-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.u-ai-chat__model-panel .u-ai-chat__model-option-actions {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  gap: 6px;
-}
 .u-ai-chat__model-panel .u-ai-chat__model-option-check {
   flex-shrink: 0;
+  margin-left: auto;
   font-size: 14px;
   color: var(--u-color-primary);
 }
-.u-ai-chat__model-panel .u-ai-chat__model-option-check.is-hidden {
-  visibility: hidden;
-}
-.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 2px;
-  flex-shrink: 0;
-  padding: 1px 6px;
-  border: none;
-  border-radius: var(--u-radius-small);
-  background: var(--u-color-primary-light-9);
-  color: var(--u-color-primary);
-  font-size: var(--u-font-size-main-small);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning:hover {
-  background: var(--u-color-primary-light-7);
-}
-.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning-arrow {
-  font-size: 12px;
-  transition: transform 0.2s ease;
-}
-.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning.is-expanded .u-ai-chat__model-option-reasoning-arrow {
-  transform: rotate(180deg);
-}
 .u-ai-chat__model-panel .u-ai-chat__model-option-desc {
   margin-top: 2px;
   font-size: var(--u-font-size-main-small);
   color: var(--u-text-color-assist);
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-levels {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.u-ai-chat__model-panel .u-ai-chat__reasoning-levels.is-expanded {
-  grid-template-rows: 1fr;
-}
-.u-ai-chat__model-panel .u-ai-chat__reasoning-levels-inner {
-  min-height: 0;
-  overflow: hidden;
+
+.u-ai-chat__reasoning-panel {
+  padding: 4px;
+  user-select: none;
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-option {
+.u-ai-chat__reasoning-panel .u-ai-chat__reasoning-option {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
   gap: 12px;
-  margin-left: 8px;
-  padding: 5px 8px;
+  padding: 6px 8px;
   border-radius: calc(var(--u-radius-default) + 1px);
   font-size: var(--u-font-size-main-small);
   color: var(--u-text-color-main);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-option:hover {
+.u-ai-chat__reasoning-panel .u-ai-chat__reasoning-option:hover {
   background-color: var(--u-bg-color-hover);
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-option.is-active {
+.u-ai-chat__reasoning-panel .u-ai-chat__reasoning-option.is-active {
+  color: var(--u-color-primary);
+}
+.u-ai-chat__reasoning-panel .u-ai-chat__reasoning-check {
+  flex-shrink: 0;
+  font-size: 14px;
   color: var(--u-color-primary);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/ai",
-  "version": "2.1.11",
+  "version": "2.2.1",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"

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

@@ -515,6 +515,43 @@ describe('UAiChat', () => {
     unmount()
   })
 
+  it('工具循环最终答案流式中过程保持展开，停跑后才折叠', async () => {
+    let round = 0
+    let releaseAnswer: (() => void) | undefined
+    const transport: ChatTransport = async (_req, handlers) => {
+      round++
+      if (round === 1) {
+        handlers.onToolCall?.({ id: 'c1', name: 'calculate', arguments: '{"expression":"1+1"}' })
+      } else {
+        handlers.onTextDelta('答案是 2')
+        await new Promise<void>((resolve) => {
+          releaseAnswer = resolve
+        })
+      }
+    }
+    const tools: ChatTool[] = [
+      { name: 'calculate', description: '计算', parameters: {}, execute: () => ({ value: 2 }) }
+    ]
+    const { host, chat, unmount } = mountAiChat({ transport, tools })
+
+    chat.value?.send('1+1 等于几')
+
+    // 最终答案流式中（仍在运行）：过程不折叠，工具卡片留在展开列表
+    await vi.waitFor(() => {
+      expect(host.querySelector('.md-stub')?.textContent).toContain('答案是 2')
+    })
+    expect(host.querySelector('.u-ai-chat__process')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__tool-call')).toBeTruthy()
+
+    // 停跑且末条消息落定后：过程收进「已完成」折叠块
+    releaseAnswer?.()
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__process-title')?.textContent).toBe('已完成')
+    })
+    expect(host.querySelector('.u-ai-chat__tool-call')).toBeFalsy()
+    unmount()
+  })
+
   it('单轮无工具对话不出现「已完成」过程块', async () => {
     const transport: ChatTransport = (_req, handlers) => {
       handlers.onReasoningDelta?.('想一下')
@@ -870,7 +907,7 @@ describe('UAiChat', () => {
     unmount()
   })
 
-  it('有 models 时渲染模型选择器；当前模型无 reasoningLevels 时不展示推理等级', async () => {
+  it('有 models 时渲染模型选择器；当前模型无 reasoningLevels 时不展示推理选择器', async () => {
     const { host, unmount } = mountAiChat({
       transport: () => {},
       models: [
@@ -897,12 +934,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 +977,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()
   })

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

@@ -88,11 +88,12 @@
           </template>
         </UDropdown>
 
-        <ModelPicker
+        <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
@@ -132,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' })
 
@@ -159,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

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

@@ -17,7 +17,7 @@
           @regenerate="emit('regenerate')"
         />
 
-        <!-- 最终答案开始输出后，本轮之前的思考/工具调用过程收进「已完成」折叠块 -->
+        <!-- 本轮落定（结束 / 失败 / 中止）后，之前的思考/工具调用过程收进「已完成」折叠块 -->
         <TurnProcess
           v-if="turn.processCollapsed"
           :messages="turn.processMsgs"
@@ -200,11 +200,12 @@ const turns = computed<ChatTurn[]>(() => {
     const processMsgs = turn.assistants.slice(0, -1)
     const answerMsg = turn.assistants[turn.assistants.length - 1]
     const isLastTurn = index === grouped.length - 1
-    // 该轮结束（非最后一轮 / 答案进入终态）或最终答案开始输出时折叠过程。
-    // content 只增不减，折叠后不会回弹；regenerate 删除本轮 assistant 重跑，条件自然复位
+    // 该轮落定（非最后一轮 / 停跑且末条消息进入终态）才折叠过程，运行中始终展开。
+    // 不能以 answerMsg.content 判断：工具循环每步追加一条空 assistant 消息，answerMsg
+    // 指随后移使 content 空/非空交替，折叠态会来回翻转；断连时 running 短暂变 false
+    // 但消息仍是 streaming，不会误折叠；regenerate 删除本轮 assistant 重跑，条件自然复位
     const processCollapsed =
-      processMsgs.length > 0 &&
-      (!isLastTurn || !!answerMsg?.content || (!props.running && isFinalStatus(answerMsg)))
+      processMsgs.length > 0 && (!isLastTurn || (!props.running && isFinalStatus(answerMsg)))
     return {
       key: turn.key,
       userMsg: turn.userMsg,

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>