@veltra/ai 2.1.0 → 2.1.2

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

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest'
 import { createApp, defineComponent, h, nextTick, ref, type PropType } from 'vue'
 
-import type { ChatTool, ChatToolCall, ChatTransport } from '../../../chat/types'
+import type { ChatMessage, ChatTool, ChatToolCall, ChatTransport } from '../../../chat/types'
 import type { ChatModelOption } from '../../../providers'
 import type { AiChatExposed } from '../../../types'
 import UAiChat from '../ai-chat.vue'
@@ -60,13 +60,23 @@ function mountAiChat(options: {
   }
 }
 
+/** 最终答案输出后过程消息收进「已完成」折叠块：点击展开并等待过程 DOM 挂载 */
+async function expandProcess(host: HTMLElement) {
+  await vi.waitFor(() => {
+    expect(host.querySelector('.u-ai-chat__process-header')).toBeTruthy()
+  })
+  host.querySelector<HTMLElement>('.u-ai-chat__process-header')!.click()
+  await nextTick()
+}
+
 describe('UAiChat', () => {
   it('空状态显示欢迎语', () => {
     const { host, unmount } = mountAiChat({ transport: () => {}, welcome: '有什么可以帮你？' })
 
     expect(host.querySelector('.u-ai-chat__welcome')?.textContent).toContain('有什么可以帮你？')
     const orb = host.querySelector('.u-ai-chat__welcome canvas.u-ai-orb') as HTMLElement | null
-    expect(orb?.style.width).toBe('64px')
+    expect(orb?.style.width).toBe('48px')
+    expect(host.querySelector('.u-ai-chat__list .u-ai-chat__welcome')).toBeFalsy()
     unmount()
   })
 
@@ -136,18 +146,17 @@ describe('UAiChat', () => {
 
     chat.value?.send('1+1 等于几')
 
-    await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call-name')?.textContent).toBe('calculate')
-    })
+    // 最终答案输出后，工具卡片收进「已完成」过程块，先展开
+    await expandProcess(host)
 
-    // 执行完成后自动折叠，点击头部展开
-    await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
-    })
+    expect(host.querySelector('.u-ai-chat__tool-call-name')?.textContent).toBe('calculate')
+    expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
 
+    // 执行完成后自动折叠，点击头部展开
     const header = host.querySelector<HTMLElement>('.u-ai-chat__tool-call .u-collapse__header')!
     header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
     await nextTick()
+    await nextTick()
 
     const body = host.querySelector('.u-ai-chat__tool-call .u-collapse__content-wrapper')
     expect(body?.textContent).toContain('"expression": "1+1"')
@@ -210,10 +219,11 @@ describe('UAiChat', () => {
 
     chat.value?.send('搜一下 vue')
 
-    await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call-name')?.textContent).toBe('搜索')
-      expect(host.querySelector('.custom-tool-icon')).toBeTruthy()
-    })
+    // 最终答案输出后工具卡片收进「已完成」过程块，展开后断言
+    await expandProcess(host)
+
+    expect(host.querySelector('.u-ai-chat__tool-call-name')?.textContent).toBe('搜索')
+    expect(host.querySelector('.custom-tool-icon')).toBeTruthy()
     unmount()
   })
 
@@ -254,10 +264,8 @@ describe('UAiChat', () => {
 
     chat.value?.send('北京天气')
 
-    // running 时 render 即渲染（render 工具默认不折叠）
-    await vi.waitFor(() => {
-      expect(host.querySelector('.weather-view')).toBeTruthy()
-    })
+    // 最终答案输出后工具卡片收进「已完成」过程块，展开后 render 保持展开态
+    await expandProcess(host)
 
     // 完成后保持展开，默认参数/结果区被替换
     await vi.waitFor(() => {
@@ -291,6 +299,8 @@ describe('UAiChat', () => {
 
     chat.value?.send('1+1')
 
+    await expandProcess(host)
+
     await vi.waitFor(() => {
       expect(host.querySelector('.u-ai-chat__tool-call.is-success.is-active')).toBeTruthy()
     })
@@ -306,10 +316,9 @@ describe('UAiChat', () => {
 
     chat.value?.send('北京天气')
 
-    await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
-    })
-    await nextTick()
+    await expandProcess(host)
+
+    expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
     expect(host.querySelector('.u-ai-chat__tool-call.is-active')).toBeFalsy()
     const body = host.querySelector('.u-ai-chat__tool-call .u-collapse__content-wrapper')
     expect(body?.getAttribute('aria-hidden')).toBe('true')
@@ -333,10 +342,8 @@ describe('UAiChat', () => {
 
     chat.value?.send('1+1 等于几')
 
-    await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
-    })
-    await nextTick()
+    // 过程块展开后，工具卡片重挂载为完成态（自动折叠）
+    await expandProcess(host)
 
     // 完成后自动折叠：内容 DOM 已卸载（减少内存与渲染成本），包装容器保留
     expect(host.querySelector('.u-ai-chat__tool-call.is-active')).toBeFalsy()
@@ -380,6 +387,63 @@ describe('UAiChat', () => {
     unmount()
   })
 
+  it('最终答案输出后过程消息收进「已完成」折叠块，可展开钻取', async () => {
+    let round = 0
+    const transport: ChatTransport = (_req, handlers) => {
+      round++
+      if (round === 1) {
+        handlers.onReasoningDelta?.('先分析一下')
+        handlers.onToolCall?.({ id: 'c1', name: 'calculate', arguments: '{"expression":"1+1"}' })
+      } else {
+        handlers.onTextDelta('答案是 2')
+      }
+    }
+    const tools: ChatTool[] = [
+      { name: 'calculate', description: '计算', parameters: {}, execute: () => ({ value: 2 }) }
+    ]
+    const { host, chat, unmount } = mountAiChat({ transport, tools })
+
+    chat.value?.send('1+1 等于几')
+
+    // 最终答案输出后：出现「已完成」折叠头，过程 DOM（思考块/工具卡片）卸载，答案仍在块外
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__process-title')?.textContent).toBe('已完成')
+    })
+    expect(host.querySelector('.u-ai-chat__process-content')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__tool-call')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__reasoning')).toBeFalsy()
+    expect(host.querySelector('.md-stub')?.textContent).toContain('答案是 2')
+
+    // 点击展开：过程消息可见，思考块默认折叠（可逐层钻取）
+    host.querySelector<HTMLElement>('.u-ai-chat__process-header')!.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__reasoning-title')?.textContent).toContain('思考过程')
+    expect(host.querySelector('.u-ai-chat__reasoning-content')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__tool-call-name')?.textContent).toBe('calculate')
+
+    // 再次收起：过程 DOM 重新卸载
+    host.querySelector<HTMLElement>('.u-ai-chat__process-header')!.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__process-content')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__tool-call')).toBeFalsy()
+    unmount()
+  })
+
+  it('单轮无工具对话不出现「已完成」过程块', async () => {
+    const transport: ChatTransport = (_req, handlers) => {
+      handlers.onReasoningDelta?.('想一下')
+      handlers.onTextDelta('你好')
+    }
+    const { host, chat, unmount } = mountAiChat({ transport })
+
+    chat.value?.send('hi')
+    await vi.waitFor(() => {
+      expect(host.querySelector('.md-stub')?.textContent).toContain('你好')
+    })
+    expect(host.querySelector('.u-ai-chat__process')).toBeFalsy()
+    unmount()
+  })
+
   it('流式期间用户上滚取消吸底，展示「最新消息」入口且不被后续输出重新吸附', async () => {
     const transport: ChatTransport = async (_req, handlers) => {
       handlers.onTextDelta('第一段')
@@ -418,9 +482,9 @@ describe('UAiChat', () => {
 
     chat.value?.send('北京天气')
 
-    await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
-    })
+    await expandProcess(host)
+
+    expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
     expect(host.querySelector('.weather-view')).toBeTruthy()
     expect(host.querySelector('.slot-view')).toBeFalsy()
     unmount()
@@ -473,10 +537,11 @@ describe('UAiChat', () => {
     })
     expect(host.querySelector('.u-ai-chat__panel-title')?.textContent).toBe('后台页面')
 
+    // 最终答案输出后工具卡片收进「已完成」过程块，展开后断言
+    await expandProcess(host)
+
     // 卡片 body 不渲染 render 组件，仅提供「查看面板」入口
-    await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
-    })
+    expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
     expect(host.querySelector('.u-ai-chat__tool-call .page-view')).toBeFalsy()
     expect(host.querySelector('.u-ai-chat__tool-call-panel-entry')).toBeTruthy()
     unmount()
@@ -495,6 +560,9 @@ describe('UAiChat', () => {
     await nextTick()
     expect(host.querySelector('.u-ai-chat__panel')).toBeFalsy()
 
+    // 卡片已收进「已完成」过程块，展开后点击入口
+    await expandProcess(host)
+
     const entryBtn = [
       ...host.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call-panel-entry button')
     ].find((btn) => btn.textContent?.includes('查看面板'))!
@@ -519,7 +587,9 @@ describe('UAiChat', () => {
       expect(host.querySelector('.u-ai-chat__panel .page-view')?.textContent).toContain('list')
     })
 
-    // 点击第一张卡片的「查看面板」切回 form
+    // 卡片已收进「已完成」过程块，展开后点击第一张卡片的「查看面板」切回 form
+    await expandProcess(host)
+
     const firstCard = host.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call')[0]!
     const entryBtn = [
       ...firstCard.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call-panel-entry button')
@@ -604,7 +674,9 @@ describe('UAiChat', () => {
     const layout = host.querySelector<HTMLElement>('.u-ai-chat')!
     expect(layout.style.gridTemplateColumns).toBe('1fr 640px')
 
-    // 点击 openPage 卡片的「查看面板」→ 切换并应用 480px
+    // 卡片已收进「已完成」过程块，展开后点击 openPage 卡片的「查看面板」→ 切换并应用 480px
+    await expandProcess(host)
+
     const firstCard = host.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call')[0]!
     const entryBtn = [
       ...firstCard.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call-panel-entry button')
@@ -624,6 +696,45 @@ describe('UAiChat', () => {
     unmount()
   })
 
+  it('受控 v-model:messages 绑定下流式回复正常渲染', async () => {
+    const messages = ref<ChatMessage[]>([])
+    const chatRef = ref<AiChatExposed>()
+    const transport: ChatTransport = async (_req, handlers) => {
+      // 留出父级 patch props 的时间窗，还原真实的回显时序
+      await new Promise((resolve) => setTimeout(resolve, 10))
+      handlers.onTextDelta('受控回答')
+    }
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({
+      setup() {
+        return () =>
+          h(UAiChat, {
+            ref: chatRef,
+            transport,
+            messages: messages.value,
+            'onUpdate:messages': (value: ChatMessage[]) => {
+              messages.value = value
+            }
+          })
+      }
+    })
+    app.mount(host)
+
+    chatRef.value?.send('你好')
+    await vi.waitFor(() => {
+      expect(host.querySelector('.md-stub')?.textContent).toContain('受控回答')
+    })
+    // 父级持有的快照最终也包含 assistant 回复
+    expect(messages.value.some((m) => m.role === 'assistant' && m.content === '受控回答')).toBe(
+      true
+    )
+
+    app.unmount()
+    host.remove()
+  })
+
   it('生成中空输入显示停止，有内容则显示入队发送', async () => {
     const transport: ChatTransport = (req) => {
       return new Promise<void>((resolve) => {
@@ -863,11 +974,12 @@ describe('UAiChat', () => {
       expect(host.querySelector('.u-ai-chat__welcome-item')?.textContent).toBe('第二条建议')
     })
 
-    // 点击文案 → 以当前展示的文案发送，欢迎区消失
+    // 点击文案 → 以当前展示的文案发送；空闲欢迎立即缩小离开，列表末尾出现工作球
     host.querySelector<HTMLElement>('.u-ai-chat__welcome-item')!.click()
     await nextTick()
 
-    expect(host.querySelector('.u-ai-chat__welcome')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__welcome')?.classList.contains('is-leaving')).toBe(true)
+    expect(host.querySelector('.u-ai-chat__list .u-ai-chat__working')).toBeTruthy()
     const userBubble = host.querySelector('.u-ai-chat__message--user .u-ai-chat__message-bubble')
     expect(userBubble?.textContent).toContain('第二条建议')
     unmount()
@@ -906,11 +1018,14 @@ describe('UAiChat', () => {
       const { host, chat, unmount } = mountAiChat({ transport })
 
       expect(host.querySelector('.u-ai-chat__working')).toBeFalsy()
+      expect(host.querySelector('.u-ai-chat__welcome')).toBeTruthy()
+      expect(host.querySelector('.u-ai-chat__list .u-ai-chat__welcome')).toBeFalsy()
 
       chat.value?.send('hi')
       await nextTick()
 
-      const working = host.querySelector('.u-ai-chat__working')
+      expect(host.querySelector('.u-ai-chat__welcome')?.classList.contains('is-leaving')).toBe(true)
+      const working = host.querySelector('.u-ai-chat__list .u-ai-chat__working')
       expect(working).toBeTruthy()
       expect(working?.textContent).toContain('工作中')
       const orb = working?.querySelector('canvas.u-ai-orb') as HTMLElement | null
@@ -930,7 +1045,16 @@ describe('UAiChat', () => {
       expect(host.querySelector('.u-ai-chat__working')).toBeTruthy()
       await vi.advanceTimersByTimeAsync(2)
       await nextTick()
+      // 停留结束 → 进入缩放退出过渡（is-leaving），元素仍在
+      const leaving = host.querySelector('.u-ai-chat__working')
+      expect(leaving).toBeTruthy()
+      expect(leaving?.classList.contains('is-leaving')).toBe(true)
+      // 过渡播完才卸载
+      await vi.advanceTimersByTimeAsync(380)
+      await nextTick()
       expect(host.querySelector('.u-ai-chat__working')).toBeFalsy()
+      expect(host.querySelector('.u-ai-chat__welcome')).toBeTruthy()
+      expect(host.querySelector('.u-ai-chat__list .u-ai-chat__welcome')).toBeFalsy()
       unmount()
     } finally {
       vi.useRealTimers()
@@ -959,7 +1083,15 @@ describe('UAiChat', () => {
       expect(host.querySelector('.u-ai-chat__working')).toBeTruthy()
       await vi.advanceTimersByTimeAsync(2)
       await nextTick()
+      // 停留结束 → 进入缩放退出过渡（is-leaving），元素仍在
+      const leaving = host.querySelector('.u-ai-chat__working')
+      expect(leaving).toBeTruthy()
+      expect(leaving?.classList.contains('is-leaving')).toBe(true)
+      // 过渡播完才卸载
+      await vi.advanceTimersByTimeAsync(380)
+      await nextTick()
       expect(host.querySelector('.u-ai-chat__working')).toBeFalsy()
+      expect(host.querySelector('.u-ai-chat__welcome')).toBeTruthy()
       unmount()
     } finally {
       vi.useRealTimers()
@@ -985,7 +1117,15 @@ describe('UAiChat', () => {
 
       await vi.advanceTimersByTimeAsync(2500)
       await nextTick()
+      // 停留结束 → 进入缩放退出过渡（is-leaving），元素仍在
+      const leaving = host.querySelector('.u-ai-chat__working')
+      expect(leaving).toBeTruthy()
+      expect(leaving?.classList.contains('is-leaving')).toBe(true)
+      // 过渡播完才卸载
+      await vi.advanceTimersByTimeAsync(380)
+      await nextTick()
       expect(host.querySelector('.u-ai-chat__working')).toBeFalsy()
+      expect(host.querySelector('.u-ai-chat__welcome')).toBeTruthy()
       unmount()
     } finally {
       vi.useRealTimers()

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

@@ -78,7 +78,7 @@ const props = defineProps<AiChatProps>()
 const emit = defineEmits<AiChatEmits>()
 
 defineSlots<{
-  /** 空状态欢迎区插槽 */
+  /** 空闲欢迎区插槽（输入框上方；工作中跳到列表末尾） */
   welcome(): any
   /** 按工具名自定义工具结果展示，如 tool-getWeather */
   [name: `tool-${string}`]: (scope: { toolCall: ChatToolCall }) => any
@@ -112,7 +112,7 @@ const {
   removeQueued
 } = useChat({ props, emit })
 
-/** 空会话（无可见消息）：输入区垂直居中，欢迎区（orb）贴于输入区上方并与之左对齐 */
+/** 空会话（无可见消息）：输入区垂直居中；欢迎区钉在滚动容器外、贴于输入框上方 */
 const isEmpty = computed(() => !messages.value.some((msg) => msg.role !== 'tool'))
 
 /** 所有 renderTo: 'panel' 的工具调用（按消息顺序，面板内容的来源） */

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

@@ -153,7 +153,7 @@ const handleReasoningScroll = (position: Required<ScrollPosition>) => {
   if (position.sh - position.ch - position.y < 8) reasoningStick.value = true
 }
 
-// 流式结束后自动折叠思考过程
+// 流式结束后自动折叠思考过程；immediate 保证终态消息重挂载（过程块展开/收起、载入历史会话）时呈折叠态
 watch(
   () => props.message.status,
   (status) => {
@@ -163,7 +163,8 @@ watch(
     } else if (status) {
       reasoningExpanded.value = false
     }
-  }
+  },
+  { immediate: true }
 )
 
 watch(