@veltra/ai 1.4.0

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

@@ -0,0 +1,316 @@
+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 { AiChatExposed } from '../../../types'
+import UAiChat from '../ai-chat.vue'
+
+// happy-dom 环境下用桩组件替换 MarkdownRender，仅验证组件自身逻辑
+vi.mock('markstream-vue', () => ({
+  default: defineComponent({
+    props: { content: { type: String, default: '' } },
+    setup(props) {
+      return () => h('div', { class: 'md-stub' }, props.content)
+    }
+  })
+}))
+
+function mountAiChat(options: {
+  transport: ChatTransport
+  tools?: ChatTool[]
+  welcome?: string
+  slots?: Record<string, (scope: any) => any>
+}) {
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+
+  const chatRef = ref<AiChatExposed>()
+
+  const app = createApp({
+    render() {
+      return h(
+        UAiChat,
+        {
+          ref: chatRef,
+          transport: options.transport,
+          tools: options.tools,
+          welcome: options.welcome
+        },
+        options.slots
+      )
+    }
+  })
+
+  app.mount(host)
+
+  return {
+    host,
+    chat: chatRef,
+    unmount() {
+      app.unmount()
+      host.remove()
+    }
+  }
+}
+
+describe('UAiChat', () => {
+  it('空状态显示欢迎语', () => {
+    const { host, unmount } = mountAiChat({ transport: () => {}, welcome: '有什么可以帮你？' })
+
+    expect(host.querySelector('.u-ai-chat__welcome')?.textContent).toContain('有什么可以帮你？')
+    unmount()
+  })
+
+  it('发送消息后渲染用户气泡与 assistant 回复', async () => {
+    const transport: ChatTransport = (_req, handlers) => {
+      handlers.onTextDelta('你好，我是助手')
+    }
+    const { host, chat, unmount } = mountAiChat({ transport })
+
+    chat.value?.send('你好')
+    await nextTick()
+
+    const userBubble = host.querySelector('.u-ai-chat__message--user .u-ai-chat__message-bubble')
+    expect(userBubble?.textContent).toContain('你好')
+
+    await vi.waitFor(() => {
+      expect(host.querySelector('.md-stub')?.textContent).toContain('你好，我是助手')
+    })
+    unmount()
+  })
+
+  it('工具调用渲染工具卡片，可展开查看结果', 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-name')?.textContent).toBe('calculate')
+    })
+
+    // 执行完成后自动折叠，点击头部展开
+    await vi.waitFor(() => {
+      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()
+
+    const body = host.querySelector('.u-ai-chat__tool-call .u-collapse__content')
+    expect(body?.textContent).toContain('"expression": "1+1"')
+    expect(body?.textContent).toContain('"value": 2')
+    unmount()
+  })
+
+  it('needsConfirm 工具渲染确认按钮，点击允许后执行', async () => {
+    const transport: ChatTransport = (_req, handlers) => {
+      handlers.onToolCall?.({ id: 'c1', name: 'deleteFile', arguments: '{"path":"/tmp/a"}' })
+    }
+    const execute = vi.fn()
+    const tools: ChatTool[] = [
+      { name: 'deleteFile', description: '删除文件', parameters: {}, needsConfirm: true, execute }
+    ]
+    const { host, chat, unmount } = mountAiChat({ transport, tools })
+
+    chat.value?.send('删掉 /tmp/a')
+
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__tool-call-confirm')).toBeTruthy()
+    })
+    expect(execute).not.toHaveBeenCalled()
+
+    const allowBtn = [
+      ...host.querySelectorAll<HTMLElement>('.u-ai-chat__tool-call-confirm button')
+    ].find((btn) => btn.textContent?.includes('允许'))!
+    allowBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    await vi.waitFor(() => {
+      expect(execute).toHaveBeenCalled()
+    })
+    unmount()
+  })
+
+  it('工具支持自定义 icon 与 label', async () => {
+    let round = 0
+    const transport: ChatTransport = (_req, handlers) => {
+      round++
+      if (round === 1) {
+        handlers.onToolCall?.({ id: 'c1', name: 'search', arguments: '{"q":"vue"}' })
+      } else {
+        handlers.onTextDelta('搜到了')
+      }
+    }
+    const CustomIcon = defineComponent({
+      setup: () => () => h('svg', { class: 'custom-tool-icon' })
+    })
+    const tools: ChatTool[] = [
+      {
+        name: 'search',
+        label: '搜索',
+        icon: CustomIcon,
+        description: '搜索',
+        parameters: {},
+        execute: () => ({ hits: 3 })
+      }
+    ]
+    const { host, chat, unmount } = mountAiChat({ transport, tools })
+
+    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()
+    })
+    unmount()
+  })
+
+  /** 渲染 toolCall.result 的自定义视图桩 */
+  const createResultView = (className: string) =>
+    defineComponent({
+      props: { toolCall: { type: Object as PropType<ChatToolCall>, required: true } },
+      setup(props) {
+        return () => h('div', { class: className }, `result:${props.toolCall.result ?? ''}`)
+      }
+    })
+
+  /** 第一轮发起 getWeather 工具调用，第二轮输出文本 */
+  const createWeatherTransport = () => {
+    let round = 0
+    const transport: ChatTransport = (_req, handlers) => {
+      round++
+      if (round === 1) {
+        handlers.onToolCall?.({ id: 'c1', name: 'getWeather', arguments: '{"city":"北京"}' })
+      } else {
+        handlers.onTextDelta('查好了')
+      }
+    }
+    return transport
+  }
+
+  const weatherTool = (extra: Partial<ChatTool> = {}): ChatTool => ({
+    name: 'getWeather',
+    description: '查天气',
+    parameters: {},
+    execute: () => ({ temperature: 26 }),
+    ...extra
+  })
+
+  it('render 自定义渲染替换卡片 body，完成后保持展开', async () => {
+    const tools = [weatherTool({ render: createResultView('weather-view') })]
+    const { host, chat, unmount } = mountAiChat({ transport: createWeatherTransport(), tools })
+
+    chat.value?.send('北京天气')
+
+    // running 时 render 即渲染（render 工具默认不折叠）
+    await vi.waitFor(() => {
+      expect(host.querySelector('.weather-view')).toBeTruthy()
+    })
+
+    // 完成后保持展开，默认参数/结果区被替换
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__tool-call.is-success.is-expanded')).toBeTruthy()
+    })
+    expect(host.querySelector('.weather-view')?.textContent).toContain('{"temperature":26}')
+    expect(host.querySelector('.u-ai-chat__tool-call-code')).toBeFalsy()
+    unmount()
+  })
+
+  it('autoCollapse: false 的普通工具完成后保持展开', 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: {},
+        autoCollapse: false,
+        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.is-expanded')).toBeTruthy()
+    })
+    expect(host.querySelector('.u-ai-chat__tool-call .u-collapse__content')?.textContent).toContain(
+      '"value": 2'
+    )
+    unmount()
+  })
+
+  it('render 工具设置 autoCollapse: true 后完成即折叠', async () => {
+    const tools = [weatherTool({ render: createResultView('weather-view'), autoCollapse: true })]
+    const { host, chat, unmount } = mountAiChat({ transport: createWeatherTransport(), tools })
+
+    chat.value?.send('北京天气')
+
+    await vi.waitFor(() => {
+      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')
+    unmount()
+  })
+
+  it('render 优先于 tool-<name> 插槽', async () => {
+    const tools = [weatherTool({ render: createResultView('weather-view') })]
+    const { host, chat, unmount } = mountAiChat({
+      transport: createWeatherTransport(),
+      tools,
+      slots: { 'tool-getWeather': () => h('div', { class: 'slot-view' }, 'slot') }
+    })
+
+    chat.value?.send('北京天气')
+
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__tool-call.is-success')).toBeTruthy()
+    })
+    expect(host.querySelector('.weather-view')).toBeTruthy()
+    expect(host.querySelector('.slot-view')).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('hi')
+    await nextTick()
+
+    expect(host.querySelector('.u-ai-chat__input-stop')).toBeTruthy()
+
+    chat.value?.abort()
+    await vi.waitFor(() => {
+      expect(host.querySelector('.u-ai-chat__input-stop')).toBeFalsy()
+    })
+    unmount()
+  })
+})

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

@@ -0,0 +1,67 @@
+<template>
+  <div :class="cls.b">
+    <MessageList
+      :messages="messages"
+      :welcome="welcome"
+      :renderer-props="rendererProps"
+      @respond="respondToolCall"
+      @regenerate="regenerate"
+    >
+      <template v-if="$slots.welcome" #welcome>
+        <slot name="welcome" />
+      </template>
+    </MessageList>
+
+    <ChatInput
+      :running="running"
+      :placeholder="placeholder"
+      :accept="accept"
+      :max-attachment-size="maxAttachmentSize"
+      @send="send"
+      @abort="abort"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { computed, provide, useSlots } from 'vue'
+
+import type { ChatTool, ChatToolCall } from '../../chat/types'
+import { useChat } from '../../chat/use-chat'
+import type { _AiChatExposed, AiChatEmits, AiChatProps } from '../../types'
+import ChatInput from './chat-input.vue'
+import { AiChatDIKey } from './di'
+import MessageList from './message-list.vue'
+
+defineOptions({ name: 'UAiChat' })
+
+const props = defineProps<AiChatProps>()
+
+const emit = defineEmits<AiChatEmits>()
+
+defineSlots<{
+  /** 空状态欢迎区插槽 */
+  welcome(): any
+  /** 按工具名自定义工具结果展示，如 tool-getWeather */
+  [name: `tool-${string}`]: (scope: { toolCall: ChatToolCall }) => any
+}>()
+
+const cls = bem('ai-chat')
+
+const slots = useSlots()
+
+/** 按 name 索引的工具定义，供工具卡片解析 icon/label/render/autoCollapse */
+const toolMap = computed<Record<string, ChatTool | undefined>>(() => {
+  return Object.fromEntries((props.tools ?? []).map((tool) => [tool.name, tool]))
+})
+
+provide(AiChatDIKey, { cls, slots, tools: toolMap })
+
+const { messages, running, send, abort, regenerate, clear, respondToolCall } = useChat({
+  props,
+  emit
+})
+
+defineExpose<_AiChatExposed>({ send, abort, regenerate, clear })
+</script>

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

@@ -0,0 +1,232 @@
+<template>
+  <div :class="cls.e('ask-question')">
+    <!-- 作答中：分页向导 -->
+    <template v-if="answering">
+      <div v-if="questions.length > 1" :class="cls.e('ask-question-progress')">
+        <span :class="cls.e('ask-question-count')">{{ current + 1 }} / {{ questions.length }}</span>
+        <span :class="cls.e('ask-question-dots')">
+          <span
+            v-for="(_, i) in questions"
+            :key="i"
+            :class="[
+              cls.e('ask-question-dot'),
+              bem.is('current', i === current),
+              bem.is('answered', isAnswered(i))
+            ]"
+            @click="goTo(i)"
+          />
+        </span>
+      </div>
+
+      <div :class="cls.e('ask-question-q')">
+        <span v-if="questions.length > 1" :class="cls.e('ask-question-no')" aria-hidden="true">
+          {{ current + 1 }}
+        </span>
+        {{ currentQuestion?.question }}
+      </div>
+
+      <div
+        v-if="currentQuestion?.options?.length"
+        :class="cls.e('ask-question-options')"
+        role="radiogroup"
+      >
+        <button
+          v-for="option in currentQuestion.options"
+          :key="option"
+          type="button"
+          role="radio"
+          :aria-checked="selections[current] === option"
+          :class="[cls.e('ask-question-opt'), bem.is('selected', selections[current] === option)]"
+          @click="pickOption(option)"
+        >
+          <span
+            :class="[
+              cls.e('ask-question-glyph'),
+              bem.is('selected', selections[current] === option)
+            ]"
+            aria-hidden="true"
+          />
+          <span :class="cls.e('ask-question-opt-text')">{{ option }}</span>
+        </button>
+      </div>
+
+      <UInput
+        :model-value="customs[current]"
+        :placeholder="currentQuestion?.placeholder ?? '自定义回答…'"
+        @update:model-value="onCustomInput"
+      />
+
+      <footer :class="cls.e('ask-question-actions')">
+        <UButton
+          v-if="questions.length > 1"
+          size="small"
+          text
+          :disabled="current === 0"
+          @click="goTo(current - 1)"
+        >
+          上一个
+        </UButton>
+        <UButton
+          v-if="current < questions.length - 1"
+          size="small"
+          type="primary"
+          @click="goTo(current + 1)"
+        >
+          下一个
+        </UButton>
+        <UButton v-else size="small" type="primary" :disabled="!allAnswered" @click="handleSubmit">
+          提交
+        </UButton>
+      </footer>
+    </template>
+
+    <!-- 提交后：问答摘要 -->
+    <template v-else-if="toolCall.status === 'success'">
+      <div v-for="(item, i) in doneAnswers" :key="i" :class="cls.e('ask-question-result')">
+        <div :class="cls.e('ask-question-result-q')">
+          <span
+            v-if="doneAnswers.length > 1"
+            :class="cls.e('ask-question-result-no')"
+            aria-hidden="true"
+          >
+            {{ i + 1 }}
+          </span>
+          {{ item.question }}
+        </div>
+        <div :class="cls.e('ask-question-result-a')">
+          <span v-if="item.isOption" :class="cls.e('ask-question-chip')">{{ item.answer }}</span>
+          <template v-else>{{ item.answer }}</template>
+        </div>
+      </div>
+    </template>
+
+    <!-- 异常 / 取消 -->
+    <div v-else :class="cls.e('ask-question-status')">{{ statusText }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UButton, UInput } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed, inject, ref, watch } from 'vue'
+
+import type { ChatToolCall } from '../../chat/types'
+import type {
+  AskQuestionArgs,
+  AskQuestionItem,
+  AskQuestionResult
+} from '../../tools/ask-question/ask-question'
+import { resolveAskQuestion } from '../../tools/ask-question/deferred'
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatAskQuestion' })
+
+const props = defineProps<{ toolCall: ChatToolCall }>()
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+/** 模型输出的提问参数 */
+const questions = computed<AskQuestionItem[]>(() => {
+  try {
+    const args = JSON.parse(props.toolCall.arguments || '{}') as Partial<AskQuestionArgs>
+    return Array.isArray(args.questions) ? args.questions : []
+  } catch {
+    return []
+  }
+})
+
+/** 作答中：execute 挂起等待用户提交 */
+const answering = computed(() => {
+  return (
+    props.toolCall.result == null &&
+    (props.toolCall.status === 'running' || props.toolCall.status === 'pending')
+  )
+})
+
+/** 当前题索引 */
+const current = ref(0)
+/** 各题选中的预设选项 */
+const selections = ref<(string | null)[]>([])
+/** 各题的自定义输入 */
+const customs = ref<string[]>([])
+
+watch(
+  questions,
+  (list) => {
+    if (props.toolCall.result != null) return
+    selections.value = list.map(() => null)
+    customs.value = list.map(() => '')
+  },
+  { immediate: true }
+)
+
+const currentQuestion = computed(() => questions.value[current.value])
+
+/** 某题是否已作答：自定义输入非空优先，否则看选中项 */
+const isAnswered = (index: number) => {
+  return Boolean(customs.value[index]?.trim() || selections.value[index])
+}
+
+const allAnswered = computed(() => {
+  return questions.value.length > 0 && questions.value.every((_, i) => isAnswered(i))
+})
+
+const goTo = (index: number) => {
+  if (index < 0 || index >= questions.value.length) return
+  current.value = index
+}
+
+/** 点选选项：再次点击取消选择；选中时清空自定义输入（两者互斥） */
+const pickOption = (option: string) => {
+  const i = current.value
+  const selected = selections.value[i] === option ? null : option
+  selections.value[i] = selected
+  if (selected) customs.value[i] = ''
+}
+
+/** 自定义输入：有内容时清除已选选项（两者互斥） */
+const onCustomInput = (value: string) => {
+  customs.value[current.value] = value
+  if (value) selections.value[current.value] = null
+}
+
+const handleSubmit = () => {
+  const firstUnanswered = questions.value.findIndex((_, i) => !isAnswered(i))
+  if (firstUnanswered >= 0) {
+    current.value = firstUnanswered
+    return
+  }
+  const answers = questions.value.map((item, i) => ({
+    question: item.question,
+    answer: customs.value[i]?.trim() || selections.value[i] || ''
+  }))
+  resolveAskQuestion(props.toolCall.id, { answers })
+}
+
+/** 提交后的问答摘要（含历史恢复：从序列化结果解析） */
+const doneAnswers = computed(() => {
+  if (props.toolCall.status !== 'success' || !props.toolCall.result) return []
+  let result: AskQuestionResult
+  try {
+    result = JSON.parse(props.toolCall.result)
+  } catch {
+    return []
+  }
+  if (!Array.isArray(result?.answers)) return []
+  return result.answers.map((item) => ({
+    ...item,
+    /** 命中预设选项的回答渲染为 chip */
+    isOption: questions.value.some(
+      (q) => q.question === item.question && q.options?.includes(item.answer)
+    )
+  }))
+})
+
+const statusText = computed(() => {
+  if (props.toolCall.status !== 'error') return ''
+  const err = props.toolCall.error ?? ''
+  if (err.includes('Abort') || err.includes('取消')) return '已取消'
+  return err || '提问失败'
+})
+</script>