@veltra/ai 1.4.0 → 2.1.0

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

@@ -2,6 +2,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 { ChatModelOption } from '../../../providers'
 import type { AiChatExposed } from '../../../types'
 import UAiChat from '../ai-chat.vue'
 
@@ -18,7 +19,10 @@ vi.mock('markstream-vue', () => ({
 function mountAiChat(options: {
   transport: ChatTransport
   tools?: ChatTool[]
-  welcome?: string
+  welcome?: string | string[]
+  models?: ChatModelOption[]
+  model?: string
+  reasoningLevel?: string
   slots?: Record<string, (scope: any) => any>
 }) {
   const host = document.createElement('div')
@@ -34,7 +38,10 @@ function mountAiChat(options: {
           ref: chatRef,
           transport: options.transport,
           tools: options.tools,
-          welcome: options.welcome
+          welcome: options.welcome,
+          models: options.models,
+          model: options.model,
+          reasoningLevel: options.reasoningLevel
         },
         options.slots
       )
@@ -58,6 +65,8 @@ describe('UAiChat', () => {
     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')
     unmount()
   })
 
@@ -79,6 +88,37 @@ describe('UAiChat', () => {
     unmount()
   })
 
+  it('对话结束后展示复制与重新生成操作，复制写入剪贴板', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } })
+
+    const transport: ChatTransport = (_req, handlers) => {
+      handlers.onTextDelta('可复制的内容')
+    }
+    const { host, chat, unmount } = mountAiChat({ transport })
+
+    chat.value?.send('你好')
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__message-actions')).toBeTruthy()
+    })
+
+    const actions = host.querySelectorAll('.u-ai-chat__message-actions .u-button')
+    expect(actions).toHaveLength(2)
+    expect(actions[0]?.classList.contains('is-circle')).toBe(true)
+    expect(actions[0]?.getAttribute('title')).toBe('复制')
+    expect(actions[1]?.classList.contains('is-circle')).toBe(true)
+    expect(actions[1]?.getAttribute('title')).toBe('重新生成')
+
+    actions[0]?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await vi.waitFor(() => {
+      expect(writeText).toHaveBeenCalledWith('可复制的内容')
+      expect(actions[0]?.getAttribute('title')).toBe('已复制')
+    })
+
+    vi.unstubAllGlobals()
+    unmount()
+  })
+
   it('工具调用渲染工具卡片，可展开查看结果', async () => {
     let round = 0
     const transport: ChatTransport = (_req, handlers) => {
@@ -109,7 +149,7 @@ describe('UAiChat', () => {
     header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
     await nextTick()
 
-    const body = host.querySelector('.u-ai-chat__tool-call .u-collapse__content')
+    const body = host.querySelector('.u-ai-chat__tool-call .u-collapse__content-wrapper')
     expect(body?.textContent).toContain('"expression": "1+1"')
     expect(body?.textContent).toContain('"value": 2')
     unmount()
@@ -221,7 +261,7 @@ describe('UAiChat', () => {
 
     // 完成后保持展开，默认参数/结果区被替换
     await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call.is-success.is-expanded')).toBeTruthy()
+      expect(host.querySelector('.u-ai-chat__tool-call.is-success.is-active')).toBeTruthy()
     })
     expect(host.querySelector('.weather-view')?.textContent).toContain('{"temperature":26}')
     expect(host.querySelector('.u-ai-chat__tool-call-code')).toBeFalsy()
@@ -252,11 +292,11 @@ describe('UAiChat', () => {
     chat.value?.send('1+1')
 
     await vi.waitFor(() => {
-      expect(host.querySelector('.u-ai-chat__tool-call.is-success.is-expanded')).toBeTruthy()
+      expect(host.querySelector('.u-ai-chat__tool-call.is-success.is-active')).toBeTruthy()
     })
-    expect(host.querySelector('.u-ai-chat__tool-call .u-collapse__content')?.textContent).toContain(
-      '"value": 2'
-    )
+    expect(
+      host.querySelector('.u-ai-chat__tool-call .u-collapse__content-wrapper')?.textContent
+    ).toContain('"value": 2')
     unmount()
   })
 
@@ -270,9 +310,101 @@ describe('UAiChat', () => {
       expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
     })
     await nextTick()
-    expect(host.querySelector('.u-ai-chat__tool-call.is-expanded')).toBeFalsy()
-    const contentWrapper = host.querySelector('.u-ai-chat__tool-call .u-collapse__content-wrapper')
-    expect(contentWrapper?.getAttribute('aria-hidden')).toBe('true')
+    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')
+    unmount()
+  })
+
+  it('终态工具卡片折叠后卸载内容 DOM，展开时重新挂载', async () => {
+    let round = 0
+    const transport: ChatTransport = (_req, handlers) => {
+      round++
+      if (round === 1) {
+        handlers.onToolCall?.({ id: 'c1', name: 'calculate', arguments: '{"expression":"1+1"}' })
+      } else {
+        handlers.onTextDelta('算好了')
+      }
+    }
+    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('.u-ai-chat__tool-call.is-success')).toBeTruthy()
+    })
+    await nextTick()
+
+    // 完成后自动折叠：内容 DOM 已卸载（减少内存与渲染成本），包装容器保留
+    expect(host.querySelector('.u-ai-chat__tool-call.is-active')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__tool-call .u-collapse__content')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__tool-call .u-collapse__content-wrapper')).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()
+    expect(host.querySelector('.u-ai-chat__tool-call .u-collapse__content')?.textContent).toContain(
+      '"value": 2'
+    )
+    unmount()
+  })
+
+  it('思考过程流式结束后自动折叠并卸载内容 DOM', 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('答案')
+    })
+
+    // 结束后自动折叠：头部保留，内容 DOM 完全卸载
+    expect(host.querySelector('.u-ai-chat__reasoning-title')?.textContent).toContain('思考过程')
+    expect(host.querySelector('.u-ai-chat__reasoning-content')).toBeFalsy()
+
+    // 展开后内容重新挂载
+    host.querySelector<HTMLElement>('.u-ai-chat__reasoning-header')!.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__reasoning-text')?.textContent).toContain(
+      '先分析一下问题'
+    )
+    unmount()
+  })
+
+  it('流式期间用户上滚取消吸底，展示「最新消息」入口且不被后续输出重新吸附', async () => {
+    const transport: ChatTransport = async (_req, handlers) => {
+      handlers.onTextDelta('第一段')
+      await new Promise((resolve) => setTimeout(resolve, 30))
+      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__to-latest')).toBeFalsy()
+
+    // 用户向上滚动 → 立即取消吸附，展示回底入口
+    const container = host.querySelector<HTMLElement>('.u-ai-chat__list .u-scroll__container')!
+    container.dispatchEvent(new WheelEvent('wheel', { deltaY: -120, bubbles: true }))
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__to-latest')).toBeTruthy()
+
+    // 后续流式输出不会把用户拉回底部（入口仍在）
+    await vi.waitFor(() => {
+      expect(host.querySelector('.md-stub')?.textContent).toContain('第二段')
+    })
+    expect(host.querySelector('.u-ai-chat__to-latest')).toBeTruthy()
     unmount()
   })
 
@@ -294,7 +426,205 @@ describe('UAiChat', () => {
     unmount()
   })
 
-  it('生成中输入区显示停止按钮', async () => {
+  /** 渲染 toolCall.arguments 的自定义视图桩（区分多次调用） */
+  const createArgsView = (className: string) =>
+    defineComponent({
+      props: { toolCall: { type: Object as PropType<ChatToolCall>, required: true } },
+      setup(props) {
+        return () => h('div', { class: className }, `args:${props.toolCall.arguments}`)
+      }
+    })
+
+  /** 第一轮发起 openPage 工具调用，第二轮输出文本 */
+  const createPageTransport = (calls: { id: string; arguments: string }[] = []) => {
+    let round = 0
+    const transport: ChatTransport = (_req, handlers) => {
+      round++
+      if (round === 1) {
+        const list = calls.length ? calls : [{ id: 'c1', arguments: '{"page":"form"}' }]
+        for (const call of list) {
+          handlers.onToolCall?.({ ...call, name: 'openPage' })
+        }
+      } else {
+        handlers.onTextDelta('已在右侧打开')
+      }
+    }
+    return transport
+  }
+
+  const pageTool = (extra: Partial<ChatTool> = {}): ChatTool => ({
+    name: 'openPage',
+    label: '后台页面',
+    description: '打开后台页面',
+    parameters: {},
+    execute: () => ({ opened: true }),
+    ...extra
+  })
+
+  it('renderTo: panel 工具在右侧面板渲染，卡片 body 仅提供查看入口', async () => {
+    const tools = [pageTool({ render: createResultView('page-view'), renderTo: 'panel' })]
+    const { host, chat, unmount } = mountAiChat({ transport: createPageTransport(), tools })
+
+    chat.value?.send('打开表单页')
+
+    // 面板自动打开，render 组件挂在面板中，面板标题取工具 label
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__panel .page-view')).toBeTruthy()
+    })
+    expect(host.querySelector('.u-ai-chat__panel-title')?.textContent).toBe('后台页面')
+
+    // 卡片 body 不渲染 render 组件，仅提供「查看面板」入口
+    await vi.waitFor(() => {
+      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()
+  })
+
+  it('面板可关闭，点击工具卡片入口重新打开', async () => {
+    const tools = [pageTool({ render: createResultView('page-view'), renderTo: 'panel' })]
+    const { host, chat, unmount } = mountAiChat({ transport: createPageTransport(), tools })
+
+    chat.value?.send('打开表单页')
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__panel')).toBeTruthy()
+    })
+
+    host.querySelector<HTMLElement>('.u-ai-chat__panel-close')!.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__panel')).toBeFalsy()
+
+    const entryBtn = [
+      ...host.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call-panel-entry button')
+    ].find((btn) => btn.textContent?.includes('查看面板'))!
+    entryBtn.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__panel .page-view')).toBeTruthy()
+    unmount()
+  })
+
+  it('新的面板调用自动聚焦，卡片入口可切回历史调用', async () => {
+    const tools = [pageTool({ render: createArgsView('page-view'), renderTo: 'panel' })]
+    const transport = createPageTransport([
+      { id: 'c1', arguments: '{"page":"form"}' },
+      { id: 'c2', arguments: '{"page":"list"}' }
+    ])
+    const { host, chat, unmount } = mountAiChat({ transport, tools })
+
+    chat.value?.send('打开表单页和列表页')
+
+    // 自动聚焦最近一次面板调用（list）
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__panel .page-view')?.textContent).toContain('list')
+    })
+
+    // 点击第一张卡片的「查看面板」切回 form
+    const firstCard = host.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call')[0]!
+    const entryBtn = [
+      ...firstCard.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call-panel-entry button')
+    ].find((btn) => btn.textContent?.includes('查看面板'))!
+    entryBtn.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__panel .page-view')?.textContent).toContain('form')
+    unmount()
+  })
+
+  it('面板与会话区经 ULayout 列轨分隔并渲染拖拽手柄', async () => {
+    const tools = [pageTool({ render: createResultView('page-view'), renderTo: 'panel' })]
+    const { host, chat, unmount } = mountAiChat({ transport: createPageTransport(), tools })
+
+    chat.value?.send('打开表单页')
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__panel')).toBeTruthy()
+    })
+
+    // 面板默认宽：容器宽度未知（测试环境 clientWidth 为 0）时回退 420px，ULayout 渲染列间拖拽手柄
+    const layout = host.querySelector<HTMLElement>('.u-ai-chat')!
+    expect(layout.style.gridTemplateColumns).toBe('1fr 420px')
+    expect(host.querySelector('.u-layout__resizer')).toBeTruthy()
+
+    // 面板关闭后回到单列，手柄移除
+    host.querySelector<HTMLElement>('.u-ai-chat__panel-close')!.click()
+    await vi.waitFor(() => {
+      expect(layout.style.gridTemplateColumns).toBe('1fr')
+      expect(host.querySelector('.u-layout__resizer')).toBeFalsy()
+    })
+    unmount()
+  })
+
+  it('面板工具可通过 panelWidth 指定默认宽度', async () => {
+    const tools = [
+      pageTool({ render: createResultView('page-view'), renderTo: 'panel', panelWidth: 480 })
+    ]
+    const { host, chat, unmount } = mountAiChat({ transport: createPageTransport(), tools })
+
+    chat.value?.send('打开表单页')
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__panel')).toBeTruthy()
+    })
+    const layout = host.querySelector<HTMLElement>('.u-ai-chat')!
+    expect(layout.style.gridTemplateColumns).toBe('1fr 480px')
+    unmount()
+  })
+
+  it('不同工具面板切换时应用各自的 panelWidth', async () => {
+    const reportTool: ChatTool = {
+      name: 'openReport',
+      label: '报表页面',
+      description: '打开报表',
+      parameters: {},
+      render: createResultView('report-view'),
+      renderTo: 'panel',
+      panelWidth: 640,
+      execute: () => ({ opened: true })
+    }
+    const tools = [
+      pageTool({ render: createResultView('page-view'), renderTo: 'panel', panelWidth: 480 }),
+      reportTool
+    ]
+    let round = 0
+    const transport: ChatTransport = (_req, handlers) => {
+      round++
+      if (round === 1) {
+        handlers.onToolCall?.({ id: 'c1', name: 'openPage', arguments: '{"page":"form"}' })
+        handlers.onToolCall?.({ id: 'c2', name: 'openReport', arguments: '{}' })
+      } else {
+        handlers.onTextDelta('已打开')
+      }
+    }
+    const { host, chat, unmount } = mountAiChat({ transport, tools })
+
+    chat.value?.send('打开表单页和报表页')
+
+    // 自动聚焦最近一次调用（openReport → 640px）
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__panel .report-view')).toBeTruthy()
+    })
+    const layout = host.querySelector<HTMLElement>('.u-ai-chat')!
+    expect(layout.style.gridTemplateColumns).toBe('1fr 640px')
+
+    // 点击 openPage 卡片的「查看面板」→ 切换并应用 480px
+    const firstCard = host.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call')[0]!
+    const entryBtn = [
+      ...firstCard.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call-panel-entry button')
+    ].find((btn) => btn.textContent?.includes('查看面板'))!
+    entryBtn.click()
+    await nextTick()
+    expect(host.querySelector('.u-ai-chat__panel .page-view')).toBeTruthy()
+    expect(layout.style.gridTemplateColumns).toBe('1fr 480px')
+    unmount()
+  })
+
+  it('输入区使用原生 textarea 与 UFilePicker', () => {
+    const { host, unmount } = mountAiChat({ transport: () => {} })
+
+    expect(host.querySelector('textarea.u-ai-chat__input')).toBeTruthy()
+    expect(host.querySelector('.u-ai-chat__input-toolbar-left .u-file-picker')).toBeTruthy()
+    unmount()
+  })
+
+  it('生成中空输入显示停止，有内容则显示入队发送', async () => {
     const transport: ChatTransport = (req) => {
       return new Promise<void>((resolve) => {
         req.signal.addEventListener('abort', () => resolve(), { once: true })
@@ -305,6 +635,29 @@ describe('UAiChat', () => {
     chat.value?.send('hi')
     await nextTick()
 
+    const actionButtons = () => host.querySelectorAll('.u-ai-chat__input-toolbar-right > .u-button')
+
+    expect(host.querySelector('.u-ai-chat__input-stop')).toBeTruthy()
+    expect(actionButtons()).toHaveLength(1)
+
+    const textarea = host.querySelector<HTMLTextAreaElement>('textarea.u-ai-chat__input')!
+    textarea.value = '下一条'
+    textarea.dispatchEvent(new Event('input'))
+    await nextTick()
+
+    expect(host.querySelector('.u-ai-chat__input-stop')).toBeFalsy()
+    expect(actionButtons()).toHaveLength(1)
+    const sendBtn = actionButtons()[0]!
+    expect(sendBtn.classList.contains('is-disabled')).toBe(false)
+    expect(sendBtn.getAttribute('title')).toBe('加入待发送队列')
+
+    sendBtn.click()
+    await nextTick()
+
+    expect(
+      [...host.querySelectorAll('.u-ai-chat__queue-text')].map((el) => el.textContent)
+    ).toEqual(['下一条'])
+    expect(textarea.value).toBe('')
     expect(host.querySelector('.u-ai-chat__input-stop')).toBeTruthy()
 
     chat.value?.abort()
@@ -313,4 +666,329 @@ describe('UAiChat', () => {
     })
     unmount()
   })
+
+  it('有 models 时渲染模型选择器；当前模型无 reasoningLevels 时不展示推理等级', async () => {
+    const { host, unmount } = mountAiChat({
+      transport: () => {},
+      models: [
+        { id: 'gpt-4o', label: 'GPT-4o', providerId: 'openai' },
+        {
+          id: 'o3-mini',
+          label: 'o3-mini',
+          providerId: 'openai',
+          reasoningLevels: [
+            { value: 'low', label: '低' },
+            { value: 'high', label: '高' }
+          ],
+          defaultReasoningLevel: 'low'
+        }
+      ],
+      model: 'gpt-4o'
+    })
+
+    await nextTick()
+    // 模型选择器在右簇（发送按钮左侧），不在附件侧
+    expect(
+      host.querySelector('.u-ai-chat__input-toolbar-right .u-ai-chat__model-trigger')
+    ).toBeTruthy()
+    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()
+    unmount()
+  })
+
+  it('切换到带 reasoningLevels 的模型后触发器展示推理等级', async () => {
+    const model = ref('gpt-4o')
+    const reasoningLevel = ref<string | undefined>()
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+
+    const app = createApp({
+      setup() {
+        return () =>
+          h(UAiChat, {
+            transport: () => {},
+            models: [
+              { id: 'gpt-4o', label: 'GPT-4o', providerId: 'openai' },
+              {
+                id: 'o3-mini',
+                label: 'o3-mini',
+                providerId: 'openai',
+                reasoningLevels: [
+                  { value: 'low', label: '低' },
+                  { value: 'high', label: '高' }
+                ],
+                defaultReasoningLevel: 'low'
+              }
+            ],
+            model: model.value,
+            'onUpdate:model': (v: string | undefined) => {
+              model.value = v ?? ''
+            },
+            reasoningLevel: reasoningLevel.value,
+            'onUpdate:reasoningLevel': (v: string | undefined) => {
+              reasoningLevel.value = v
+            }
+          })
+      }
+    })
+    app.mount(host)
+    await nextTick()
+
+    expect(host.querySelector('.u-ai-chat__model-trigger-reasoning')).toBeFalsy()
+
+    model.value = 'o3-mini'
+    await nextTick()
+
+    const reasoning = host.querySelector(
+      '.u-ai-chat__input-toolbar-right .u-ai-chat__model-trigger-reasoning'
+    )
+    expect(reasoning).toBeTruthy()
+    expect(reasoning?.textContent).toBe('低')
+    expect(reasoningLevel.value).toBe('low')
+
+    app.unmount()
+    host.remove()
+  })
+
+  it('生成中提交的消息进入队列并渲染队列 UI', async () => {
+    const transport: ChatTransport = (req) => {
+      return new Promise<void>((resolve) => {
+        req.signal.addEventListener('abort', () => resolve(), { once: true })
+      })
+    }
+    const { host, chat, unmount } = mountAiChat({ transport })
+
+    chat.value?.send('第一条')
+    await nextTick()
+    chat.value?.send('第二条')
+    chat.value?.send('第三条')
+    await nextTick()
+
+    const items = [...host.querySelectorAll('.u-ai-chat__queue-text')].map((el) => el.textContent)
+    expect(items).toEqual(['第二条', '第三条'])
+    expect(host.querySelector('.u-ai-chat__queue-head')?.textContent).toContain('2')
+    unmount()
+  })
+
+  it('队列「立即开始」中断当前会话并插队执行', async () => {
+    const transport: ChatTransport = (req, handlers) => {
+      const lastUser = [...req.messages].reverse().find((m) => m.role === 'user')
+      if (lastUser?.content === '第一条') {
+        return new Promise<void>((resolve) => {
+          req.signal.addEventListener('abort', () => resolve(), { once: true })
+        })
+      }
+      handlers.onTextDelta(`回答:${lastUser?.content}`)
+    }
+    const { host, chat, unmount } = mountAiChat({ transport })
+
+    chat.value?.send('第一条')
+    await nextTick()
+    chat.value?.send('第二条')
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__queue-item')).toBeTruthy()
+    })
+
+    const startBtn = [...host.querySelectorAll<HTMLElement>('.u-ai-chat__queue-action')].find(
+      (btn) => btn.textContent?.includes('立即开始')
+    )!
+    startBtn.click()
+
+    await vi.waitFor(() => {
+      expect(host.querySelector('.md-stub')?.textContent).toContain('回答:第二条')
+    })
+    // 第一条被中断，队列已清空
+    expect(host.textContent).toContain('已停止生成')
+    expect(host.querySelector('.u-ai-chat__queue')).toBeFalsy()
+    unmount()
+  })
+
+  it('队列「编辑」取回输入框，重新提交后插回原位置', async () => {
+    const transport: ChatTransport = (req) => {
+      return new Promise<void>((resolve) => {
+        req.signal.addEventListener('abort', () => resolve(), { once: true })
+      })
+    }
+    const { host, chat, unmount } = mountAiChat({ transport })
+
+    chat.value?.send('第一条')
+    await nextTick()
+    chat.value?.send('A')
+    chat.value?.send('B')
+    await nextTick()
+
+    // 点击 A 的编辑按钮
+    const itemA = [...host.querySelectorAll<HTMLElement>('.u-ai-chat__queue-item')].find((el) =>
+      el.textContent?.includes('A')
+    )!
+    itemA.querySelector<HTMLElement>('[title="取回输入框编辑"]')!.click()
+    await nextTick()
+
+    const textarea = host.querySelector<HTMLTextAreaElement>('textarea.u-ai-chat__input')!
+    expect(textarea.value).toBe('A')
+    expect(
+      [...host.querySelectorAll('.u-ai-chat__queue-text')].map((el) => el.textContent)
+    ).toEqual(['B'])
+
+    // 修改内容并提交（仍在生成中）→ 回到队列原位置（B 之前）
+    textarea.value = 'A2'
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    await nextTick()
+
+    expect(
+      [...host.querySelectorAll('.u-ai-chat__queue-text')].map((el) => el.textContent)
+    ).toEqual(['A2', 'B'])
+    unmount()
+  })
+
+  it('welcome 逐条展示：点击文案发送，点击球立即换下一条', async () => {
+    const transport: ChatTransport = (_req, handlers) => {
+      handlers.onTextDelta('收到')
+    }
+    const { host, unmount } = mountAiChat({ transport, welcome: ['第一条建议', '第二条建议'] })
+    await nextTick()
+
+    // 一次只展示一条（初始为第一条）
+    const items = host.querySelectorAll<HTMLElement>('.u-ai-chat__welcome-item')
+    expect(items.length).toBe(1)
+    expect(items[0]!.textContent).toBe('第一条建议')
+
+    // 点击球 → 不等自动轮换，立即换下一条
+    host.querySelector<HTMLElement>('.u-ai-chat__welcome canvas.u-ai-orb')!.click()
+    await vi.waitFor(() => {
+      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()
+    const userBubble = host.querySelector('.u-ai-chat__message--user .u-ai-chat__message-bubble')
+    expect(userBubble?.textContent).toContain('第二条建议')
+    unmount()
+  })
+
+  it('welcome 多条时按 4s 间隔自动轮换', async () => {
+    vi.useFakeTimers()
+    try {
+      const transport: ChatTransport = (_req, handlers) => {
+        handlers.onTextDelta('收到')
+      }
+      const { host, unmount } = mountAiChat({ transport, welcome: ['第一条建议', '第二条建议'] })
+      await nextTick()
+      expect(host.querySelector('.u-ai-chat__welcome-item')?.textContent).toBe('第一条建议')
+
+      await vi.advanceTimersByTimeAsync(4100)
+      expect(host.querySelector('.u-ai-chat__welcome-item')?.textContent).toBe('第二条建议')
+
+      // 轮换回第一条
+      await vi.advanceTimersByTimeAsync(4100)
+      expect(host.querySelector('.u-ai-chat__welcome-item')?.textContent).toBe('第一条建议')
+      unmount()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('生成中在列表底部展示「工作中…」指示，中断后停留再消失', async () => {
+    vi.useFakeTimers({ toFake: ['setTimeout', 'setInterval', 'clearTimeout', 'clearInterval'] })
+    try {
+      const transport: ChatTransport = (req) => {
+        return new Promise<void>((resolve) => {
+          req.signal.addEventListener('abort', () => resolve(), { once: true })
+        })
+      }
+      const { host, chat, unmount } = mountAiChat({ transport })
+
+      expect(host.querySelector('.u-ai-chat__working')).toBeFalsy()
+
+      chat.value?.send('hi')
+      await nextTick()
+
+      const working = host.querySelector('.u-ai-chat__working')
+      expect(working).toBeTruthy()
+      expect(working?.textContent).toContain('工作中')
+      const orb = working?.querySelector('canvas.u-ai-orb') as HTMLElement | null
+      expect(orb).toBeTruthy()
+      expect(orb?.style.width).toBe('48px')
+
+      chat.value?.abort()
+      await nextTick()
+      await Promise.resolve()
+      await nextTick()
+
+      const lingering = host.querySelector('.u-ai-chat__working')
+      expect(lingering).toBeTruthy()
+      expect(lingering?.textContent).not.toContain('工作中')
+
+      await vi.advanceTimersByTimeAsync(2499)
+      expect(host.querySelector('.u-ai-chat__working')).toBeTruthy()
+      await vi.advanceTimersByTimeAsync(2)
+      await nextTick()
+      expect(host.querySelector('.u-ai-chat__working')).toBeFalsy()
+      unmount()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('回答完毕后工作球停留约 2.5s 再消失', async () => {
+    vi.useFakeTimers({ toFake: ['setTimeout', 'setInterval', 'clearTimeout', 'clearInterval'] })
+    try {
+      const transport: ChatTransport = (_req, handlers) => {
+        handlers.onTextDelta('完成')
+      }
+      const { host, chat, unmount } = mountAiChat({ transport })
+
+      chat.value?.send('hi')
+      await nextTick()
+      await Promise.resolve()
+      await nextTick()
+
+      const working = host.querySelector('.u-ai-chat__working')
+      expect(working).toBeTruthy()
+      expect(working?.textContent).not.toContain('工作中')
+      expect(working?.querySelector('canvas.u-ai-orb')).toBeTruthy()
+
+      await vi.advanceTimersByTimeAsync(2499)
+      expect(host.querySelector('.u-ai-chat__working')).toBeTruthy()
+      await vi.advanceTimersByTimeAsync(2)
+      await nextTick()
+      expect(host.querySelector('.u-ai-chat__working')).toBeFalsy()
+      unmount()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('对话出错后工作球停留约 2.5s 再消失', async () => {
+    vi.useFakeTimers({ toFake: ['setTimeout', 'setInterval', 'clearTimeout', 'clearInterval'] })
+    try {
+      const transport: ChatTransport = (_req, handlers) => {
+        handlers.onError?.(new Error('网络错误'))
+      }
+      const { host, chat, unmount } = mountAiChat({ transport })
+
+      chat.value?.send('hi')
+      await nextTick()
+      await Promise.resolve()
+      await nextTick()
+
+      const working = host.querySelector('.u-ai-chat__working')
+      expect(working).toBeTruthy()
+      expect(working?.textContent).not.toContain('工作中')
+
+      await vi.advanceTimersByTimeAsync(2500)
+      await nextTick()
+      expect(host.querySelector('.u-ai-chat__working')).toBeFalsy()
+      unmount()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
 })