@veltra/ai 1.4.0 → 2.0.0

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

@@ -0,0 +1,126 @@
+<template>
+  <UDropdown
+    ref="dropdownRef"
+    trigger="click"
+    min-width="220px"
+    :content-class="cls.e('model-panel')"
+  >
+    <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>
+      </button>
+    </template>
+
+    <template #content>
+      <div
+        v-for="item in models"
+        :key="item.id"
+        :class="[cls.e('model-option'), bem.is('active', item.id === model)]"
+        @click="handleSelectModel(item.id)"
+      >
+        <div :class="cls.e('model-option-head')">
+          <span>{{ item.label ?? item.id }}</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>
+
+      <template v-if="reasoningLevels.length">
+        <div :class="cls.e('model-divider')" />
+
+        <div :class="cls.e('reasoning-row')" @click="toggleReasoning">
+          <span>思考强度</span>
+          <span :class="cls.e('reasoning-row-value')">
+            {{ currentReasoningLabel }}
+            <UIcon>
+              <ArrowDown v-if="reasoningExpanded" />
+              <ArrowRight v-else />
+            </UIcon>
+          </span>
+        </div>
+
+        <template v-if="reasoningExpanded">
+          <div
+            v-for="level in reasoningLevels"
+            :key="level.value"
+            :class="[cls.e('reasoning-option'), bem.is('active', level.value === reasoningLevel)]"
+            @click="handleSelectReasoning(level.value)"
+          >
+            <span>{{ level.label }}</span>
+            <UIcon v-if="level.value === reasoningLevel" :class="cls.e('model-option-check')">
+              <Check />
+            </UIcon>
+          </div>
+        </template>
+      </template>
+    </template>
+  </UDropdown>
+</template>
+
+<script lang="ts" setup>
+import { UDropdown, UIcon } from '@veltra/desktop'
+import { ArrowDown, ArrowRight, Check } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, nextTick, ref, useTemplateRef } from 'vue'
+
+import type { ChatModelOption } from '../../providers'
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatModelPicker' })
+
+const props = defineProps<{
+  /** 可选模型列表 */
+  models: ChatModelOption[]
+}>()
+
+const model = defineModel<string>('model')
+const reasoningLevel = defineModel<string>('reasoningLevel')
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+const dropdownRef = useTemplateRef('dropdownRef')
+
+/** 思考强度子列表是否展开 */
+const reasoningExpanded = ref(false)
+
+const currentModel = computed(() => {
+  return props.models.find((m) => m.id === model.value)
+})
+
+const reasoningLevels = computed(() => currentModel.value?.reasoningLevels ?? [])
+
+const currentReasoningLabel = computed(() => {
+  return reasoningLevels.value.find((l) => l.value === reasoningLevel.value)?.label
+})
+
+/** 展开/收起思考强度子列表，并重置面板位置防止溢出 */
+const toggleReasoning = () => {
+  reasoningExpanded.value = !reasoningExpanded.value
+  nextTick(() => dropdownRef.value?.updateDropdown())
+}
+
+/** 选中模型（推理等级校正在 useChat 中完成） */
+const handleSelectModel = (id: string) => {
+  model.value = id
+  reasoningExpanded.value = false
+  dropdownRef.value?.close()
+}
+
+const handleSelectReasoning = (value: string) => {
+  reasoningLevel.value = value
+  dropdownRef.value?.close()
+}
+</script>

package/src/components/ai-chat/style.scss

@@ -374,13 +374,61 @@ $root-name: ai-chat;
 
   @include m.e(input-toolbar) {
     @include m.flex(flex, space-between, center);
+    gap: fn.use-var(gap, small);
     padding: 0 fn.use-var(gap, small);
   }
 
+  @include m.e(input-toolbar-left) {
+    @include m.flex(flex, flex-start, center);
+    gap: fn.use-var(gap, small);
+    flex-shrink: 0;
+  }
+
+  @include m.e(input-toolbar-right) {
+    @include m.flex(flex, flex-end, center);
+    gap: fn.use-var(gap, small);
+    min-width: 0;
+  }
+
+  @include m.e(model-trigger) {
+    @include m.flex(flex, flex-start, center);
+    gap: 4px;
+    max-width: 220px;
+    padding: 2px fn.use-var(gap, small);
+    border: none;
+    border-radius: fn.use-var(radius, default);
+    background: transparent;
+    color: fn.use-var(text-color, main);
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+    }
+  }
+
+  @include m.e(model-trigger-label) {
+    @include m.ellipsis;
+  }
+
+  @include m.e(model-trigger-reasoning) {
+    flex-shrink: 0;
+    color: fn.use-var(text-color, assist);
+  }
+
+  @include m.e(model-trigger-arrow) {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: fn.use-var(text-color, assist);
+  }
+
   @include m.e(input-attach) {
     color: fn.use-var(text-color, assist);
     cursor: pointer;
     font-size: 18px;
+    flex-shrink: 0;
 
     &:hover {
       color: fn.use-var(color, primary);
@@ -437,3 +485,80 @@ $root-name: ai-chat;
     transform: rotate(360deg);
   }
 }
+
+// 模型选择面板经 teleport 挂载到 popper 容器，不处于 .u-ai-chat 内，需独立定义
+.u-#{$root-name}__model-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px;
+  user-select: none;
+
+  .u-#{$root-name}__model-option {
+    padding: 6px 8px;
+    border-radius: calc(fn.use-var(radius, default) + 1px);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+    }
+  }
+
+  .u-#{$root-name}__model-option-head {
+    @include m.flex(flex, space-between, center);
+    gap: 16px;
+    color: fn.use-var(text-color, main);
+  }
+
+  .u-#{$root-name}__model-option-check {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: fn.use-var(color, primary);
+  }
+
+  .u-#{$root-name}__model-option-desc {
+    margin-top: 2px;
+    font-size: fn.use-var(font-size-main, small);
+    color: fn.use-var(text-color, assist);
+  }
+
+  .u-#{$root-name}__model-divider {
+    height: 0;
+    margin: 4px 8px;
+    border-top: 1px solid fn.use-var(border, color);
+  }
+
+  .u-#{$root-name}__reasoning-row {
+    @include m.flex(flex, space-between, center);
+    padding: 6px 8px;
+    border-radius: calc(fn.use-var(radius, default) + 1px);
+    color: fn.use-var(text-color, main);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+    }
+  }
+
+  .u-#{$root-name}__reasoning-row-value {
+    @include m.flex(flex, flex-start, center);
+    gap: 4px;
+    color: fn.use-var(text-color, assist);
+  }
+
+  .u-#{$root-name}__reasoning-option {
+    @include m.flex(flex, space-between, center);
+    gap: 16px;
+    padding: 6px 8px 6px 20px;
+    border-radius: calc(fn.use-var(radius, default) + 1px);
+    color: fn.use-var(text-color, main);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+    }
+  }
+}

package/src/components/ai-chat/style.ts

@@ -1,6 +1,8 @@
 import '@veltra/desktop/components/button/style'
+import '@veltra/desktop/components/file-picker/style'
 import '@veltra/desktop/components/icon/style'
 import '@veltra/desktop/components/input/style'
 import '@veltra/desktop/components/scroll/style'
+import '@veltra/desktop/components/select/style'
 import 'markstream-vue/index.css'
 import './style.scss'

package/src/index.ts

@@ -1,4 +1,11 @@
 export * from './chat'
 export * from './components'
-export * from './tools'
+export type * from './providers'
+// 仅导出 AskQuestion* 类型；createBuiltinTools 等工厂不对外公开
+export type {
+  AskQuestionItem,
+  AskQuestionAnswer,
+  AskQuestionArgs,
+  AskQuestionResult
+} from './tools'
 export type * from './types'

package/src/providers/index.ts

@@ -0,0 +1 @@
+export type * from './types'

package/src/providers/types.ts

@@ -0,0 +1,46 @@
+/** 推理等级选项（值不透明，由宿主/服务商约定） */
+export interface ChatReasoningLevel {
+  /** 写入请求的值 */
+  value: string
+  /** UI 文案 */
+  label: string
+}
+
+/** 单个模型配置 */
+export interface ChatModel {
+  /** 模型 id（跨 Provider 全局唯一） */
+  id: string
+  /** UI 显示名，缺省取 id */
+  label?: string
+  /** 模型一句话描述（选择器面板副标题） */
+  description?: string
+  /** 未设或空数组 → 不展示推理选择器 */
+  reasoningLevels?: ChatReasoningLevel[]
+  /** 默认推理等级（须落在 reasoningLevels 内） */
+  defaultReasoningLevel?: string
+}
+
+/** 模型服务商配置（内嵌 models） */
+export interface ChatProvider {
+  id: string
+  /** UI 显示名 */
+  label?: string
+  /** 完整 http(s) URL 或相对路径，如 /api/ai/chat */
+  endpoint: string
+  /** API Key（有则带 Bearer；相对路径场景可省略，走 cookie/`headers`） */
+  apiKey?: string
+  /** Provider 级额外请求头 */
+  headers?: Record<string, string>
+  /**
+   * 将选中的推理等级写入 body。
+   * 缺省：若 level 存在则 `body.reasoning_effort = level`（OpenAI 兼容约定）。
+   */
+  applyReasoning?: (level: string, body: Record<string, unknown>) => void
+  models: ChatModel[]
+}
+
+/** UI / useChat 使用的扁平模型项（带 providerId） */
+export interface ChatModelOption extends ChatModel {
+  providerId: string
+  providerLabel?: string
+}

package/src/tools/ask-question/__test__/ask-question.test.ts

@@ -4,7 +4,6 @@ import { createApp, defineComponent, h, nextTick, ref } from 'vue'
 import type { ChatMessage, ChatTransport } from '../../../chat/types'
 import UAiChat from '../../../components/ai-chat/ai-chat.vue'
 import type { AiChatExposed } from '../../../types'
-import { createAskQuestionTool } from '../ask-question'
 
 // happy-dom 环境下用桩组件替换 MarkdownRender，仅验证组件自身逻辑
 vi.mock('markstream-vue', () => ({
@@ -24,7 +23,8 @@ function mountAiChat(transport: ChatTransport) {
 
   const app = createApp({
     render() {
-      return h(UAiChat, { ref: chatRef, transport, tools: [createAskQuestionTool()] })
+      // 不传 tools：验证提问工具由 UAiChat 内置自动注入
+      return h(UAiChat, { ref: chatRef, transport })
     }
   })
 
@@ -81,7 +81,7 @@ const optionButton = (host: HTMLElement, text: string) => {
   )
 }
 
-describe('createAskQuestionTool', () => {
+describe('内置提问工具', () => {
   it('分页提问：导航、作答、提交后展示问答摘要', async () => {
     const rounds: ChatMessage[][] = []
     const { host, chat, unmount } = mountAiChat(createAskTransport(rounds))

package/src/tools/index.ts

@@ -1 +1,14 @@
-export * from './ask-question'
+import type { ChatTool } from '../chat/types'
+import { createAskQuestionTool } from './ask-question'
+
+export type {
+  AskQuestionItem,
+  AskQuestionAnswer,
+  AskQuestionArgs,
+  AskQuestionResult
+} from './ask-question'
+
+/** 内置工具列表（useChat 始终注入，不对外导出；新增内置工具在此注册） */
+export function createBuiltinTools(): ChatTool[] {
+  return [createAskQuestionTool()]
+}

package/src/types/ai-chat.ts

@@ -7,6 +7,7 @@ import type {
   ChatToolCall,
   ChatTransport
 } from '../chat/types'
+import type { ChatModelOption } from '../providers'
 
 export interface AiChatProps {
   /** 传输层（必填），可使用导出的 createOpenAITransport() 创建 */
@@ -17,6 +18,15 @@ export interface AiChatProps {
   systemPrompt?: string
   /** 消息列表，支持 v-model:messages 受控 */
   messages?: ChatMessage[]
+  /**
+   * 可选模型列表；有值则在输入栏展示模型选择器。
+   * 可从 createOpenAITransport() 返回值的 `.models` 直接传入。
+   */
+  models?: ChatModelOption[]
+  /** 当前模型 id，支持 v-model:model */
+  model?: string
+  /** 当前推理等级，支持 v-model:reasoning-level */
+  reasoningLevel?: string
   /** 空状态欢迎语 */
   welcome?: string
   /** 输入框占位文本 */
@@ -32,6 +42,10 @@ export interface AiChatProps {
 export interface AiChatEmits {
   /** 消息列表变化 */
   (e: 'update:messages', messages: ChatMessage[]): void
+  /** 当前模型变化 */
+  (e: 'update:model', model: string | undefined): void
+  /** 当前推理等级变化 */
+  (e: 'update:reasoningLevel', reasoningLevel: string | undefined): void
   /** 用户发送消息 */
   (e: 'send', message: ChatMessage): void
   /** 一轮对话完成（无更多工具调用） */

package/dist/components/ai-chat/ai-chat.vue.d.ts

@@ -1,36 +0,0 @@
-import { ChatMessage, ChatToolCall } from "../../chat/types.js";
-import { AiChatProps, _AiChatExposed } from "../../types/ai-chat.js";
-import "../../types/index.js";
-import "../../index.js";
-//#region src/components/ai-chat/ai-chat.vue.d.ts
-type __VLS_Slots = {
-  /** 空状态欢迎区插槽 */
-  welcome(): any;
-  /** 按工具名自定义工具结果展示，如 tool-getWeather */
-  [name: `tool-${string}`]: (scope: {
-    toolCall: ChatToolCall;
-  }) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<AiChatProps, _AiChatExposed, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-  "update:messages": (messages: ChatMessage[]) => any;
-  send: (message: ChatMessage) => any;
-  finish: (message: ChatMessage) => any;
-  error: (error: Error) => any;
-  "tool-call": (toolCall: ChatToolCall) => any;
-}, string, import("vue").PublicProps, Readonly<AiChatProps> & Readonly<{
-  "onUpdate:messages"?: ((messages: ChatMessage[]) => any) | undefined;
-  onSend?: ((message: ChatMessage) => any) | undefined;
-  onFinish?: ((message: ChatMessage) => any) | undefined;
-  onError?: ((error: Error) => any) | undefined;
-  "onTool-call"?: ((toolCall: ChatToolCall) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
-//#endregion
-export { _default as default };
-//# sourceMappingURL=ai-chat.vue.d.ts.map

package/dist/components/ai-chat/index.d.ts

@@ -1,2 +0,0 @@
-import _default from "./ai-chat.vue.js";
-export { _default as UAiChat };

package/dist/components/index.d.ts

@@ -1,3 +0,0 @@
-import _default from "./ai-chat/ai-chat.vue.js";
-import "./ai-chat/index.js";
-export { _default as UAiChat };