@veltra/ai 1.4.0 → 2.0.0

package/src/chat/transports/openai.ts

@@ -1,3 +1,4 @@
+import type { ChatModelOption, ChatProvider } from '../../providers'
 import type {
   ChatMessage,
   ChatTool,
@@ -6,20 +7,24 @@ import type {
   ChatTransportRequest
 } from '../types'
 
-/** createOpenAITransport 的配置项 */
+/** createOpenAITransport 的配置项（多 Provider） */
 export interface OpenAITransportOptions {
-  /** chat completions 端点，如 https://api.openai.com/v1/chat/completions */
-  endpoint: string
-  /** API Key（Bearer 鉴权） */
-  apiKey?: string
-  /** 模型名 */
-  model: string
-  /** 额外请求头 */
+  /** 至少一个 Provider；模型 id 须跨 Provider 全局唯一 */
+  providers: ChatProvider[]
+  /** 全局额外请求头（与各 Provider headers 合并，Provider 优先） */
   headers?: Record<string, string>
-  /** 额外请求体字段，如 temperature、top_p */
+  /** 全局额外请求体字段，如 temperature、top_p */
   body?: Record<string, unknown>
 }
 
+/** 带扁平模型列表元数据的 OpenAI 兼容 transport */
+export type OpenAITransport = ChatTransport & {
+  /** 供 UI 使用的扁平模型列表 */
+  readonly models: ChatModelOption[]
+  /** 默认模型 id（首个 Provider 的首个模型） */
+  readonly defaultModel: string
+}
+
 interface OpenAIMessage {
   role: string
   content?: unknown
@@ -178,33 +183,88 @@ async function parseSSE(
   flushToolCalls()
 }
 
+/** 校验 providers 并展开扁平模型列表 */
+function flattenModels(providers: ChatProvider[]): {
+  models: ChatModelOption[]
+  byModelId: Map<string, ChatProvider>
+} {
+  if (!providers.length) {
+    throw new Error('[createOpenAITransport] providers 不能为空')
+  }
+
+  const models: ChatModelOption[] = []
+  const byModelId = new Map<string, ChatProvider>()
+
+  for (const provider of providers) {
+    if (!provider.models?.length) {
+      throw new Error(`[createOpenAITransport] Provider "${provider.id}" 未配置 models`)
+    }
+    for (const model of provider.models) {
+      if (byModelId.has(model.id)) {
+        throw new Error(
+          `[createOpenAITransport] 模型 id "${model.id}" 重复（跨 Provider 须全局唯一）`
+        )
+      }
+      byModelId.set(model.id, provider)
+      models.push({ ...model, providerId: provider.id, providerLabel: provider.label })
+    }
+  }
+
+  return { models, byModelId }
+}
+
+/** 缺省：写入 OpenAI 兼容的 reasoning_effort */
+function defaultApplyReasoning(level: string, body: Record<string, unknown>) {
+  body.reasoning_effort = level
+}
+
 /**
  * 创建 OpenAI 兼容协议的传输层（chat/completions SSE）。
- * 手写 fetch + SSE 解析，无任何第三方依赖。
+ * 按 request.model 路由到对应 Provider 的 endpoint；手写 fetch + SSE，无第三方依赖。
  */
-export function createOpenAITransport(options: OpenAITransportOptions): ChatTransport {
-  const { endpoint, apiKey, model, headers, body } = options
+export function createOpenAITransport(options: OpenAITransportOptions): OpenAITransport {
+  const { providers, headers: globalHeaders, body: globalBody } = options
+  const { models, byModelId } = flattenModels(providers)
+  const defaultModel = models[0]!.id
 
-  return async (request: ChatTransportRequest, handlers: ChatTransportHandlers) => {
-    const { messages, systemPrompt, tools, signal } = request
+  const send: ChatTransport = async (
+    request: ChatTransportRequest,
+    handlers: ChatTransportHandlers
+  ) => {
+    const { messages, systemPrompt, tools, signal, reasoningLevel } = request
+    const modelId = request.model ?? defaultModel
+    const provider = byModelId.get(modelId)
+
+    if (!provider) {
+      handlers.onError?.(new Error(`未找到模型 "${modelId}" 对应的 Provider`))
+      return
+    }
+
+    const requestBody: Record<string, unknown> = {
+      ...globalBody,
+      model: modelId,
+      stream: true,
+      messages: toOpenAIMessages(messages, systemPrompt),
+      ...(tools?.length ? { tools: toOpenAITools(tools) } : {})
+    }
+
+    if (reasoningLevel) {
+      const apply = provider.applyReasoning ?? defaultApplyReasoning
+      apply(reasoningLevel, requestBody)
+    }
 
     let response: Response
     try {
-      response = await fetch(endpoint, {
+      response = await fetch(provider.endpoint, {
         method: 'POST',
         signal,
         headers: {
           'Content-Type': 'application/json',
-          ...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {}),
-          ...headers
+          ...(provider.apiKey ? { Authorization: `Bearer ${provider.apiKey}` } : {}),
+          ...globalHeaders,
+          ...provider.headers
         },
-        body: JSON.stringify({
-          model,
-          stream: true,
-          ...body,
-          messages: toOpenAIMessages(messages, systemPrompt),
-          ...(tools?.length ? { tools: toOpenAITools(tools) } : {})
-        })
+        body: JSON.stringify(requestBody)
       })
     } catch (error) {
       if (!signal.aborted) {
@@ -234,4 +294,6 @@ export function createOpenAITransport(options: OpenAITransportOptions): ChatTran
       }
     }
   }
+
+  return Object.assign(send, { models, defaultModel })
 }

package/src/chat/types.ts

@@ -107,6 +107,10 @@ export interface ChatTransportRequest {
   systemPrompt?: string
   /** 可用工具 */
   tools?: ChatTool[]
+  /** 选中的模型 id（内置 OpenAI transport 按此路由 Provider） */
+  model?: string
+  /** 选中的推理等级（不透明字符串，由 Provider.applyReasoning 写入请求体） */
+  reasoningLevel?: string
   /** 中断信号 */
   signal: AbortSignal
 }

package/src/chat/use-chat.ts

@@ -1,8 +1,9 @@
 import { useModel } from '@veltra/compositions'
-import { reactive, ref, type Ref } from 'vue'
+import { reactive, ref, watch, type Ref } from 'vue'
 
+import { createBuiltinTools } from '../tools'
 import type { AiChatEmits, AiChatProps } from '../types'
-import type { ChatAttachment, ChatMessage, ChatToolCall } from './types'
+import type { ChatAttachment, ChatMessage, ChatTool, ChatToolCall } from './types'
 
 export interface UseChatOptions {
   props: AiChatProps
@@ -24,9 +25,17 @@ function serializeResult(result: unknown): string {
   }
 }
 
+/** 内置工具 + 用户工具，同名时内置优先 */
+function resolveTools(userTools?: ChatTool[]): ChatTool[] {
+  const builtins = createBuiltinTools()
+  const names = new Set(builtins.map((t) => t.name))
+  return [...builtins, ...(userTools ?? []).filter((t) => !names.has(t.name))]
+}
+
 /**
  * AI 对话核心状态机：消息管理、流式追加、工具调用循环编排。
  * 与 UI 解耦，ai-chat.vue 只负责渲染与交互转发。
+ * 始终注入内置工具（如 askQuestion），无需经 props 传入。
  */
 export function useChat(options: UseChatOptions) {
   const { props, emit } = options
@@ -39,6 +48,12 @@ export function useChat(options: UseChatOptions) {
     defaultValue: []
   }) as Ref<ChatMessage[]>
 
+  const model = useModel({ props, propName: 'model', emit, local: true }) as Ref<string | undefined>
+
+  const reasoningLevel = useModel({ props, propName: 'reasoningLevel', emit, local: true }) as Ref<
+    string | undefined
+  >
+
   /** 是否正在生成中（含工具执行与多轮循环） */
   const running = ref(false)
 
@@ -46,6 +61,34 @@ export function useChat(options: UseChatOptions) {
   /** needsConfirm 工具的挂起确认器，key 为 toolCallId */
   const confirmResolvers = new Map<string, (approved: boolean) => void>()
 
+  /** 按当前模型校正推理等级（无 levels 则清空；值不合法则落到默认/首项） */
+  const syncReasoningForModel = (modelId: string | undefined) => {
+    const option = props.models?.find((m) => m.id === modelId)
+    if (!option?.reasoningLevels?.length) {
+      if (reasoningLevel.value !== undefined) {
+        reasoningLevel.value = undefined
+      }
+      return
+    }
+    const levels = option.reasoningLevels
+    if (reasoningLevel.value && levels.some((l) => l.value === reasoningLevel.value)) return
+    reasoningLevel.value = option.defaultReasoningLevel ?? levels[0]?.value
+  }
+
+  // models / model 变化时：确保有合法选中模型，并校正推理等级
+  watch(
+    () => [props.models, model.value] as const,
+    ([models, current]) => {
+      if (!models?.length) return
+      if (!current || !models.some((m) => m.id === current)) {
+        model.value = models[0]!.id
+        return
+      }
+      syncReasoningForModel(current)
+    },
+    { immediate: true }
+  )
+
   /** 向父组件同步消息快照（流式 delta 过于频繁，不同步，只在关键节点同步） */
   const snapshot = () => {
     emit('update:messages', messages.value.slice())
@@ -65,14 +108,18 @@ export function useChat(options: UseChatOptions) {
   }
 
   /** 执行单个工具调用（含确认门控），结果以 tool 消息追加 */
-  const executeToolCall = async (toolCall: ChatToolCall, signal: AbortSignal) => {
+  const executeToolCall = async (
+    toolCall: ChatToolCall,
+    signal: AbortSignal,
+    tools: ChatTool[]
+  ) => {
     const appendToolMessage = (content: string) => {
       messages.value.push(
         reactive<ChatMessage>({ id: uid(), role: 'tool', toolCallId: toolCall.id, content })
       )
     }
 
-    const tool = props.tools?.find((t) => t.name === toolCall.name)
+    const tool = tools.find((t) => t.name === toolCall.name)
 
     if (!tool) {
       toolCall.status = 'error'
@@ -131,6 +178,7 @@ export function useChat(options: UseChatOptions) {
   const runRound = async (controller: AbortController): Promise<void> => {
     if (!props.transport) return
     const { signal } = controller
+    const tools = resolveTools(props.tools)
 
     const assistant = reactive<ChatMessage>({
       id: uid(),
@@ -149,7 +197,9 @@ export function useChat(options: UseChatOptions) {
           // 排除刚追加的 assistant 占位消息
           messages: messages.value.slice(0, -1),
           systemPrompt: props.systemPrompt,
-          tools: props.tools,
+          tools,
+          model: model.value,
+          reasoningLevel: reasoningLevel.value,
           signal
         },
         {
@@ -195,7 +245,7 @@ export function useChat(options: UseChatOptions) {
     // 工具串行执行（保持结果消息与调用顺序一致），用 Promise 链避免 await-in-loop
     await toolCalls.reduce<Promise<void>>(
       (prev, toolCall) =>
-        prev.then(() => (signal.aborted ? undefined : executeToolCall(toolCall, signal))),
+        prev.then(() => (signal.aborted ? undefined : executeToolCall(toolCall, signal, tools))),
       Promise.resolve()
     )
     snapshot()
@@ -241,5 +291,15 @@ export function useChat(options: UseChatOptions) {
     snapshot()
   }
 
-  return { messages, running, send, abort, regenerate, clear, respondToolCall }
+  return {
+    messages,
+    model,
+    reasoningLevel,
+    running,
+    send,
+    abort,
+    regenerate,
+    clear,
+    respondToolCall
+  }
 }

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'
 
@@ -19,6 +20,9 @@ function mountAiChat(options: {
   transport: ChatTransport
   tools?: ChatTool[]
   welcome?: 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
       )
@@ -294,6 +301,14 @@ describe('UAiChat', () => {
     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) => {
@@ -313,4 +328,90 @@ 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()
+  })
 })

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

@@ -13,7 +13,10 @@
     </MessageList>
 
     <ChatInput
+      v-model:model="model"
+      v-model:reasoning-level="reasoningLevel"
       :running="running"
+      :models="models"
       :placeholder="placeholder"
       :accept="accept"
       :max-attachment-size="maxAttachmentSize"
@@ -27,8 +30,9 @@
 import { bem } from '@veltra/utils'
 import { computed, provide, useSlots } from 'vue'
 
-import type { ChatTool, ChatToolCall } from '../../chat/types'
+import type { ChatToolCall } from '../../chat/types'
 import { useChat } from '../../chat/use-chat'
+import { createBuiltinTools } from '../../tools'
 import type { _AiChatExposed, AiChatEmits, AiChatProps } from '../../types'
 import ChatInput from './chat-input.vue'
 import { AiChatDIKey } from './di'
@@ -51,17 +55,27 @@ 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]))
+/** 内置 + 用户工具（同名内置优先），供工具卡片解析 icon/label/render/autoCollapse */
+const toolMap = computed(() => {
+  const builtins = createBuiltinTools()
+  const names = new Set(builtins.map((t) => t.name))
+  const tools = [...builtins, ...(props.tools ?? []).filter((t) => !names.has(t.name))]
+  return Object.fromEntries(tools.map((t) => [t.name, t]))
 })
 
 provide(AiChatDIKey, { cls, slots, tools: toolMap })
 
-const { messages, running, send, abort, regenerate, clear, respondToolCall } = useChat({
-  props,
-  emit
-})
+const {
+  messages,
+  model,
+  reasoningLevel,
+  running,
+  send,
+  abort,
+  regenerate,
+  clear,
+  respondToolCall
+} = useChat({ props, emit })
 
 defineExpose<_AiChatExposed>({ send, abort, regenerate, clear })
 </script>

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

@@ -24,42 +24,59 @@
     />
 
     <div :class="cls.e('input-toolbar')">
-      <UIcon :class="cls.e('input-attach')" title="添加图片" @click="fileRef?.click()">
-        <Attach />
-      </UIcon>
-      <input
-        ref="fileRef"
-        type="file"
-        hidden
-        multiple
-        :accept="accept ?? 'image/*'"
-        @change="handleFiles"
-      />
-
-      <UButton v-if="running" type="danger" circle @click="emit('abort')">
-        <span :class="cls.e('input-stop')" />
-      </UButton>
-      <UButton v-else type="primary" circle :disabled="!canSend" @click="handleSend">
-        <UIcon><Send /></UIcon>
-      </UButton>
+      <div :class="cls.e('input-toolbar-left')">
+        <UFilePicker multiple :accept="accept ?? 'image/*'" @pick="handlePick">
+          <UIcon :class="cls.e('input-attach')" title="添加图片">
+            <Attach />
+          </UIcon>
+        </UFilePicker>
+      </div>
+
+      <!-- 右簇：模型/推理选择 → 发送/停止，贴近发送按钮 -->
+      <div :class="cls.e('input-toolbar-right')">
+        <ModelPicker
+          v-if="models?.length"
+          v-model:model="model"
+          v-model:reasoning-level="reasoningLevel"
+          :models="models"
+        />
+
+        <UButton v-if="running" size="small" type="danger" circle @click="emit('abort')">
+          <span :class="cls.e('input-stop')" />
+        </UButton>
+        <UButton
+          v-else
+          size="small"
+          type="primary"
+          circle
+          :disabled="!canSend"
+          :icon="Up"
+          @click="handleSend"
+        >
+        </UButton>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { UButton, UIcon } from '@veltra/desktop'
-import { Attach, Close, Send } from '@veltra/icons/normal'
+import { UButton, UFilePicker, UIcon } from '@veltra/desktop'
+import { Attach, Close, Up } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, inject, ref, shallowRef } from 'vue'
 
 import type { ChatAttachment } from '../../chat/types'
+import type { ChatModelOption } from '../../providers'
 import { AiChatDIKey } from './di'
+import ModelPicker from './model-picker.vue'
 
 defineOptions({ name: 'UAiChatInput' })
 
 const props = defineProps<{
   /** 是否生成中（显示停止按钮） */
   running: boolean
+  /** 可选模型列表；有值则显示选择器 */
+  models?: ChatModelOption[]
   /** 输入框占位文本 */
   placeholder?: string
   /** 附件 accept 类型 */
@@ -68,6 +85,9 @@ const props = defineProps<{
   maxAttachmentSize?: number
 }>()
 
+const model = defineModel<string>('model')
+const reasoningLevel = defineModel<string>('reasoningLevel')
+
 const emit = defineEmits<{
   (e: 'send', content: string, attachments: ChatAttachment[]): void
   (e: 'abort'): void
@@ -79,12 +99,12 @@ const cls = di?.cls ?? bem('ai-chat')
 const text = ref('')
 const attachments = ref<ChatAttachment[]>([])
 const textareaRef = shallowRef<HTMLTextAreaElement>()
-const fileRef = shallowRef<HTMLInputElement>()
 
 const canSend = computed(() => {
   return !props.running && (!!text.value.trim() || attachments.value.length > 0)
 })
 
+/** 多行自适应高度，上限 160px */
 const autoResize = () => {
   const el = textareaRef.value
   if (!el) return
@@ -100,11 +120,8 @@ const handleSend = () => {
   autoResize()
 }
 
-const handleFiles = (event: Event) => {
-  const input = event.target as HTMLInputElement
-  const files = Array.from(input.files ?? [])
-  input.value = ''
-
+/** 将拾取的文件转为 dataUrl 附件（超限忽略） */
+const handlePick = (files: File[]) => {
   const maxSize = props.maxAttachmentSize ?? 10 * 1024 * 1024
 
   for (const file of files) {