@veltra/ai 2.1.11 → 2.2.0

package/dist/components/ai-chat/chat-input.js

@@ -1,5 +1,6 @@
 import { AiChatDIKey } from "./di.js";
 import _sfc_main$1 from "./model-picker.js";
+import _sfc_main$2 from "./reasoning-picker.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, nextTick, normalizeClass, openBlock, ref, renderList, shallowRef, toDisplayString, unref, useModel, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { Attach, Clear, Close, Up } from "@veltra/icons/normal";
 import { UButton, UDropdown, UFilePicker, UIcon, UPopConfirm } from "@veltra/desktop";
@@ -38,6 +39,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const model = useModel(__props, "model");
 		const reasoningLevel = useModel(__props, "reasoningLevel");
+		/** 当前模型的推理等级列表，交给独立选择器；不足两档时选择器自身不渲染 */
+		const reasoningLevels = computed(() => {
+			return props.models?.find((m) => m.id === model.value)?.reasoningLevels ?? [];
+		});
 		const emit = __emit;
 		const cls = inject(AiChatDIKey)?.cls ?? bem("ai-chat");
 		const text = ref("");
@@ -275,14 +280,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							key: 1,
 							model: model.value,
 							"onUpdate:model": _cache[2] || (_cache[2] = ($event) => model.value = $event),
+							models: __props.models
+						}, null, 8, ["model", "models"])) : createCommentVNode("v-if", true),
+						__props.models?.length ? (openBlock(), createBlock(_sfc_main$2, {
+							key: 2,
 							"reasoning-level": reasoningLevel.value,
 							"onUpdate:reasoningLevel": _cache[3] || (_cache[3] = ($event) => reasoningLevel.value = $event),
-							models: __props.models
-						}, null, 8, [
-							"model",
-							"reasoning-level",
-							"models"
-						])) : createCommentVNode("v-if", true),
+							levels: reasoningLevels.value
+						}, null, 8, ["reasoning-level", "levels"])) : createCommentVNode("v-if", true),
 						showStop.value ? (openBlock(), createBlock(unref(UButton), {
 							key: "stop",
 							size: "small",

package/dist/components/ai-chat/chat-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-input.js","names":[],"sources":["../../../src/components/ai-chat/chat-input.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.e('input-area')\">\n    <div v-if=\"attachments.length\" :class=\"cls.e('input-attachments')\">\n      <div\n        v-for=\"(att, index) in attachments\"\n        :key=\"att.dataUrl\"\n        :class=\"cls.e('input-attachment')\"\n      >\n        <img :src=\"att.dataUrl\" :alt=\"att.name\" />\n        <UIcon :class=\"cls.e('input-attachment-remove')\" @click=\"attachments.splice(index, 1)\">\n          <Close />\n        </UIcon>\n      </div>\n    </div>\n\n    <textarea\n      ref=\"textareaRef\"\n      v-model=\"text\"\n      :class=\"cls.e('input')\"\n      :placeholder=\"placeholderText\"\n      rows=\"1\"\n      @keydown.enter.exact.prevent=\"handleSend\"\n      @input=\"autoResize\"\n    />\n\n    <div :class=\"cls.e('input-toolbar')\">\n      <div :class=\"cls.e('input-toolbar-left')\">\n        <UFilePicker multiple :accept=\"accept ?? 'image/*'\" @pick=\"handlePick\">\n          <UIcon :class=\"cls.e('input-attach')\" title=\"添加图片\">\n            <Attach />\n          </UIcon>\n        </UFilePicker>\n\n        <span :class=\"[cls.e('input-clear-wrap'), bem.is('disabled', !clearable)]\">\n          <UPopConfirm\n            title=\"清空当前对话？进行中的生成将被中止。\"\n            confirm-text=\"清空\"\n            direction=\"top\"\n            alignment=\"start\"\n            @confirm=\"emit('clear')\"\n          >\n            <template #reference>\n              <UIcon :class=\"cls.e('input-clear')\" title=\"清除会话\">\n                <Clear />\n              </UIcon>\n            </template>\n          </UPopConfirm>\n        </span>\n      </div>\n\n      <!-- 右簇：token 用量环 → 模型/推理选择 → 发送或停止（互斥） -->\n      <div :class=\"cls.e('input-toolbar-right')\">\n        <UDropdown\n          v-if=\"tokenUsage\"\n          width=\"auto\"\n          min-width=\"200px\"\n          :content-class=\"cls.e('usage-panel')\"\n        >\n          <template #trigger>\n            <button type=\"button\" :class=\"cls.e('usage-trigger')\" aria-label=\"Token 用量\">\n              <svg :class=\"cls.e('usage-ring')\" viewBox=\"0 0 36 36\">\n                <circle :class=\"cls.e('usage-ring-track')\" cx=\"18\" cy=\"18\" r=\"15.5\" />\n                <circle\n                  :class=\"cls.e('usage-ring-value')\"\n                  cx=\"18\"\n                  cy=\"18\"\n                  r=\"15.5\"\n                  pathLength=\"100\"\n                  transform=\"rotate(-90 18 18)\"\n                  :stroke-dasharray=\"`${contextPercent ?? 0} 100`\"\n                  :stroke-linecap=\"contextPercent ? 'round' : undefined\"\n                />\n              </svg>\n            </button>\n          </template>\n\n          <template #content>\n            <div :class=\"cls.e('usage-list')\">\n              <div v-if=\"contextText\" :class=\"cls.e('usage-row')\">\n                <span :class=\"cls.e('usage-label')\">上下文占用</span>\n                <span :class=\"cls.e('usage-value')\">{{ contextText }}</span>\n              </div>\n              <div v-for=\"row in usageRows\" :key=\"row.label\" :class=\"cls.e('usage-row')\">\n                <span :class=\"cls.e('usage-label')\">{{ row.label }}</span>\n                <span :class=\"cls.e('usage-value')\">{{ row.value }}</span>\n              </div>\n            </div>\n          </template>\n        </UDropdown>\n\n        <ModelPicker\n          v-if=\"models?.length\"\n          v-model:model=\"model\"\n          v-model:reasoning-level=\"reasoningLevel\"\n          :models=\"models\"\n        />\n\n        <UButton\n          v-if=\"showStop\"\n          key=\"stop\"\n          size=\"small\"\n          type=\"danger\"\n          circle\n          title=\"停止生成\"\n          @click=\"emit('abort')\"\n        >\n          <span :class=\"cls.e('input-stop')\" />\n        </UButton>\n        <UButton\n          v-else\n          key=\"send\"\n          size=\"small\"\n          type=\"primary\"\n          circle\n          :disabled=\"!hasContent\"\n          :icon=\"Up\"\n          :title=\"running ? '加入待发送队列' : undefined\"\n          @click=\"handleSend\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { UButton, UDropdown, UFilePicker, UIcon, UPopConfirm } from '@veltra/desktop'\nimport { Attach, Clear, Close, Up } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, nextTick, ref, shallowRef, watch } from 'vue'\n\nimport type { ChatAttachment, ChatTokenUsage } from '../../chat/types'\nimport type { ChatModelOption } from '../../providers'\nimport { AiChatDIKey } from './di'\nimport ModelPicker from './model-picker.vue'\n\ndefineOptions({ name: 'UAiChatInput' })\n\nconst props = defineProps<{\n  /** 是否生成中（空输入显示停止，有内容则发送入队） */\n  running: boolean\n  /** 可选模型列表；有值则显示选择器 */\n  models?: ChatModelOption[]\n  /** 输入框占位文本 */\n  placeholder?: string\n  /** 附件 accept 类型 */\n  accept?: string\n  /** 单个附件最大字节数 */\n  maxAttachmentSize?: number\n  /** 是否可清除（有消息 / 队列 / 生成中） */\n  clearable?: boolean\n  /** 会话累计 token；无 usage 时为 null，不展示 */\n  tokenUsage?: ChatTokenUsage | null\n  /** 最近一次单次请求的 token（未累计）；配合模型 contextWindow 计算用量环占比 */\n  lastRequestUsage?: ChatTokenUsage | null\n  /** 是否展示缓存命中 / 未命中（默认只显示总 token） */\n  tokenUsageDetail?: boolean\n}>()\n\nconst model = defineModel<string>('model')\nconst reasoningLevel = defineModel<string>('reasoningLevel')\n\nconst emit = defineEmits<{\n  (e: 'send', content: string, attachments: ChatAttachment[]): void\n  (e: 'abort'): void\n  (e: 'clear'): void\n}>()\n\nconst di = inject(AiChatDIKey)\nconst cls = di?.cls ?? bem('ai-chat')\n\nconst text = ref('')\nconst attachments = ref<ChatAttachment[]>([])\nconst textareaRef = shallowRef<HTMLTextAreaElement>()\n\nconst hasContent = computed(() => !!text.value.trim() || attachments.value.length > 0)\n\n/** 生成中且输入为空时显示停止；有内容则显示发送（入队） */\nconst showStop = computed(() => props.running && !hasContent.value)\n\n/**\n * 用量数字：不到 1000 原样；≥1000 用 K；≥100 万用 M。\n * 最多 1 位小数，整数不写 `.0`（1000 → 1K，1500 → 1.5K）。\n */\nconst formatTokenCount = (n: number) => {\n  const scaled = (value: number, unit: 'K' | 'M') => {\n    const rounded = Math.round(value * 10) / 10\n    return `${Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1)}${unit}`\n  }\n  if (n < 1000) return String(n)\n  if (n < 1_000_000) {\n    const k = Math.round((n / 1000) * 10) / 10\n    // 四舍五入后会变成 1000K 时改用 M\n    return k >= 1000 ? scaled(n / 1_000_000, 'M') : scaled(n / 1000, 'K')\n  }\n  return scaled(n / 1_000_000, 'M')\n}\n\n/** 百分比：最多 1 位小数，整数不写 `.0` */\nconst formatPercent = (p: number) => {\n  const rounded = Math.round(p * 10) / 10\n  return `${Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1)}%`\n}\n\n/** 当前模型声明的上下文窗口；未声明则用量环不填充、面板不显示占用 */\nconst contextWindow = computed(() => {\n  return props.models?.find((m) => m.id === model.value)?.contextWindow\n})\n\n/** 上下文占用百分比：最近一次请求总 token / 窗口上限；缺数据时为 null */\nconst contextPercent = computed(() => {\n  const win = contextWindow.value\n  const total = props.lastRequestUsage?.totalTokens\n  if (!win || total == null) return null\n  return Math.min(100, (total / win) * 100)\n})\n\n/** 面板占用行文案：1.5K / 128K · 1.2% */\nconst contextText = computed(() => {\n  const percent = contextPercent.value\n  const win = contextWindow.value\n  const total = props.lastRequestUsage?.totalTokens\n  if (percent == null || !win || total == null) return ''\n  return `${formatTokenCount(total)} / ${formatTokenCount(win)} · ${formatPercent(percent)}`\n})\n\n/** 明细面板行：总 / 输入 / 输出；明细开关下再拼有数据的缓存项，缺字段不写 0 */\nconst usageRows = computed(() => {\n  const usage = props.tokenUsage\n  if (!usage) return []\n  const rows = [\n    { label: '总 token', value: formatTokenCount(usage.totalTokens) },\n    { label: '输入', value: formatTokenCount(usage.promptTokens) },\n    { label: '输出', value: formatTokenCount(usage.completionTokens) }\n  ]\n  if (props.tokenUsageDetail) {\n    if (usage.cacheHitTokens != null) {\n      rows.push({ label: '缓存命中', value: formatTokenCount(usage.cacheHitTokens) })\n    }\n    if (usage.cacheMissTokens != null) {\n      rows.push({ label: '缓存未命中', value: formatTokenCount(usage.cacheMissTokens) })\n    }\n  }\n  return rows\n})\n\n/** 生成中提示用户消息将进入队列 */\nconst placeholderText = computed(() => {\n  if (props.running) return '会话进行中，发送的消息将进入待发送队列'\n  return props.placeholder ?? '输入消息，Enter 发送，Shift + Enter 换行'\n})\n\nconst MAX_INPUT_HEIGHT = 160\n\n/** 多行自适应高度，上限 160px */\nconst autoResize = () => {\n  const el = textareaRef.value\n  if (!el) return\n  el.style.height = 'auto'\n  const nextHeight = Math.min(el.scrollHeight, MAX_INPUT_HEIGHT)\n  el.style.height = `${nextHeight}px`\n  el.style.overflowY = el.scrollHeight > MAX_INPUT_HEIGHT ? 'auto' : 'hidden'\n}\n\nwatch(placeholderText, () => {\n  void nextTick(autoResize)\n})\n\nconst handleSend = () => {\n  if (!hasContent.value) return\n  emit('send', text.value.trim(), attachments.value)\n  text.value = ''\n  attachments.value = []\n  autoResize()\n}\n\n/** 取回内容到输入框（队列编辑场景），并聚焦 */\nconst setContent = (content: string) => {\n  text.value = content\n  void nextTick(() => {\n    autoResize()\n    textareaRef.value?.focus()\n  })\n}\n\n/** 读取当前输入框内容 */\nconst getContent = () => text.value\n\ndefineExpose({ setContent, getContent })\n\n/** 将拾取的文件转为 dataUrl 附件（超限忽略） */\nconst handlePick = (files: File[]) => {\n  const maxSize = props.maxAttachmentSize ?? 10 * 1024 * 1024\n\n  for (const file of files) {\n    if (file.size > maxSize) {\n      console.warn(`[UAiChat] 附件 ${file.name} 超过大小限制，已忽略`)\n      continue\n    }\n    const reader = new FileReader()\n    reader.onload = () => {\n      attachments.value.push({\n        name: file.name,\n        mimeType: file.type,\n        size: file.size,\n        dataUrl: String(reader.result)\n      })\n    }\n    reader.readAsDataURL(file)\n  }\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"chat-input.js","names":[],"sources":["../../../src/components/ai-chat/chat-input.vue"],"sourcesContent":["<template>\n  <div :class=\"cls.e('input-area')\">\n    <div v-if=\"attachments.length\" :class=\"cls.e('input-attachments')\">\n      <div\n        v-for=\"(att, index) in attachments\"\n        :key=\"att.dataUrl\"\n        :class=\"cls.e('input-attachment')\"\n      >\n        <img :src=\"att.dataUrl\" :alt=\"att.name\" />\n        <UIcon :class=\"cls.e('input-attachment-remove')\" @click=\"attachments.splice(index, 1)\">\n          <Close />\n        </UIcon>\n      </div>\n    </div>\n\n    <textarea\n      ref=\"textareaRef\"\n      v-model=\"text\"\n      :class=\"cls.e('input')\"\n      :placeholder=\"placeholderText\"\n      rows=\"1\"\n      @keydown.enter.exact.prevent=\"handleSend\"\n      @input=\"autoResize\"\n    />\n\n    <div :class=\"cls.e('input-toolbar')\">\n      <div :class=\"cls.e('input-toolbar-left')\">\n        <UFilePicker multiple :accept=\"accept ?? 'image/*'\" @pick=\"handlePick\">\n          <UIcon :class=\"cls.e('input-attach')\" title=\"添加图片\">\n            <Attach />\n          </UIcon>\n        </UFilePicker>\n\n        <span :class=\"[cls.e('input-clear-wrap'), bem.is('disabled', !clearable)]\">\n          <UPopConfirm\n            title=\"清空当前对话？进行中的生成将被中止。\"\n            confirm-text=\"清空\"\n            direction=\"top\"\n            alignment=\"start\"\n            @confirm=\"emit('clear')\"\n          >\n            <template #reference>\n              <UIcon :class=\"cls.e('input-clear')\" title=\"清除会话\">\n                <Clear />\n              </UIcon>\n            </template>\n          </UPopConfirm>\n        </span>\n      </div>\n\n      <!-- 右簇：token 用量环 → 模型/推理选择 → 发送或停止（互斥） -->\n      <div :class=\"cls.e('input-toolbar-right')\">\n        <UDropdown\n          v-if=\"tokenUsage\"\n          width=\"auto\"\n          min-width=\"200px\"\n          :content-class=\"cls.e('usage-panel')\"\n        >\n          <template #trigger>\n            <button type=\"button\" :class=\"cls.e('usage-trigger')\" aria-label=\"Token 用量\">\n              <svg :class=\"cls.e('usage-ring')\" viewBox=\"0 0 36 36\">\n                <circle :class=\"cls.e('usage-ring-track')\" cx=\"18\" cy=\"18\" r=\"15.5\" />\n                <circle\n                  :class=\"cls.e('usage-ring-value')\"\n                  cx=\"18\"\n                  cy=\"18\"\n                  r=\"15.5\"\n                  pathLength=\"100\"\n                  transform=\"rotate(-90 18 18)\"\n                  :stroke-dasharray=\"`${contextPercent ?? 0} 100`\"\n                  :stroke-linecap=\"contextPercent ? 'round' : undefined\"\n                />\n              </svg>\n            </button>\n          </template>\n\n          <template #content>\n            <div :class=\"cls.e('usage-list')\">\n              <div v-if=\"contextText\" :class=\"cls.e('usage-row')\">\n                <span :class=\"cls.e('usage-label')\">上下文占用</span>\n                <span :class=\"cls.e('usage-value')\">{{ contextText }}</span>\n              </div>\n              <div v-for=\"row in usageRows\" :key=\"row.label\" :class=\"cls.e('usage-row')\">\n                <span :class=\"cls.e('usage-label')\">{{ row.label }}</span>\n                <span :class=\"cls.e('usage-value')\">{{ row.value }}</span>\n              </div>\n            </div>\n          </template>\n        </UDropdown>\n\n        <ModelPicker v-if=\"models?.length\" v-model:model=\"model\" :models=\"models\" />\n\n        <ReasoningPicker\n          v-if=\"models?.length\"\n          v-model:reasoning-level=\"reasoningLevel\"\n          :levels=\"reasoningLevels\"\n        />\n\n        <UButton\n          v-if=\"showStop\"\n          key=\"stop\"\n          size=\"small\"\n          type=\"danger\"\n          circle\n          title=\"停止生成\"\n          @click=\"emit('abort')\"\n        >\n          <span :class=\"cls.e('input-stop')\" />\n        </UButton>\n        <UButton\n          v-else\n          key=\"send\"\n          size=\"small\"\n          type=\"primary\"\n          circle\n          :disabled=\"!hasContent\"\n          :icon=\"Up\"\n          :title=\"running ? '加入待发送队列' : undefined\"\n          @click=\"handleSend\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { UButton, UDropdown, UFilePicker, UIcon, UPopConfirm } from '@veltra/desktop'\nimport { Attach, Clear, Close, Up } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, nextTick, ref, shallowRef, watch } from 'vue'\n\nimport type { ChatAttachment, ChatTokenUsage } from '../../chat/types'\nimport type { ChatModelOption } from '../../providers'\nimport { AiChatDIKey } from './di'\nimport ModelPicker from './model-picker.vue'\nimport ReasoningPicker from './reasoning-picker.vue'\n\ndefineOptions({ name: 'UAiChatInput' })\n\nconst props = defineProps<{\n  /** 是否生成中（空输入显示停止，有内容则发送入队） */\n  running: boolean\n  /** 可选模型列表；有值则显示选择器 */\n  models?: ChatModelOption[]\n  /** 输入框占位文本 */\n  placeholder?: string\n  /** 附件 accept 类型 */\n  accept?: string\n  /** 单个附件最大字节数 */\n  maxAttachmentSize?: number\n  /** 是否可清除（有消息 / 队列 / 生成中） */\n  clearable?: boolean\n  /** 会话累计 token；无 usage 时为 null，不展示 */\n  tokenUsage?: ChatTokenUsage | null\n  /** 最近一次单次请求的 token（未累计）；配合模型 contextWindow 计算用量环占比 */\n  lastRequestUsage?: ChatTokenUsage | null\n  /** 是否展示缓存命中 / 未命中（默认只显示总 token） */\n  tokenUsageDetail?: boolean\n}>()\n\nconst model = defineModel<string>('model')\nconst reasoningLevel = defineModel<string>('reasoningLevel')\n\n/** 当前模型的推理等级列表，交给独立选择器；不足两档时选择器自身不渲染 */\nconst reasoningLevels = computed(() => {\n  return props.models?.find((m) => m.id === model.value)?.reasoningLevels ?? []\n})\n\nconst emit = defineEmits<{\n  (e: 'send', content: string, attachments: ChatAttachment[]): void\n  (e: 'abort'): void\n  (e: 'clear'): void\n}>()\n\nconst di = inject(AiChatDIKey)\nconst cls = di?.cls ?? bem('ai-chat')\n\nconst text = ref('')\nconst attachments = ref<ChatAttachment[]>([])\nconst textareaRef = shallowRef<HTMLTextAreaElement>()\n\nconst hasContent = computed(() => !!text.value.trim() || attachments.value.length > 0)\n\n/** 生成中且输入为空时显示停止；有内容则显示发送（入队） */\nconst showStop = computed(() => props.running && !hasContent.value)\n\n/**\n * 用量数字：不到 1000 原样；≥1000 用 K；≥100 万用 M。\n * 最多 1 位小数，整数不写 `.0`（1000 → 1K，1500 → 1.5K）。\n */\nconst formatTokenCount = (n: number) => {\n  const scaled = (value: number, unit: 'K' | 'M') => {\n    const rounded = Math.round(value * 10) / 10\n    return `${Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1)}${unit}`\n  }\n  if (n < 1000) return String(n)\n  if (n < 1_000_000) {\n    const k = Math.round((n / 1000) * 10) / 10\n    // 四舍五入后会变成 1000K 时改用 M\n    return k >= 1000 ? scaled(n / 1_000_000, 'M') : scaled(n / 1000, 'K')\n  }\n  return scaled(n / 1_000_000, 'M')\n}\n\n/** 百分比：最多 1 位小数，整数不写 `.0` */\nconst formatPercent = (p: number) => {\n  const rounded = Math.round(p * 10) / 10\n  return `${Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(1)}%`\n}\n\n/** 当前模型声明的上下文窗口；未声明则用量环不填充、面板不显示占用 */\nconst contextWindow = computed(() => {\n  return props.models?.find((m) => m.id === model.value)?.contextWindow\n})\n\n/** 上下文占用百分比：最近一次请求总 token / 窗口上限；缺数据时为 null */\nconst contextPercent = computed(() => {\n  const win = contextWindow.value\n  const total = props.lastRequestUsage?.totalTokens\n  if (!win || total == null) return null\n  return Math.min(100, (total / win) * 100)\n})\n\n/** 面板占用行文案：1.5K / 128K · 1.2% */\nconst contextText = computed(() => {\n  const percent = contextPercent.value\n  const win = contextWindow.value\n  const total = props.lastRequestUsage?.totalTokens\n  if (percent == null || !win || total == null) return ''\n  return `${formatTokenCount(total)} / ${formatTokenCount(win)} · ${formatPercent(percent)}`\n})\n\n/** 明细面板行：总 / 输入 / 输出；明细开关下再拼有数据的缓存项，缺字段不写 0 */\nconst usageRows = computed(() => {\n  const usage = props.tokenUsage\n  if (!usage) return []\n  const rows = [\n    { label: '总 token', value: formatTokenCount(usage.totalTokens) },\n    { label: '输入', value: formatTokenCount(usage.promptTokens) },\n    { label: '输出', value: formatTokenCount(usage.completionTokens) }\n  ]\n  if (props.tokenUsageDetail) {\n    if (usage.cacheHitTokens != null) {\n      rows.push({ label: '缓存命中', value: formatTokenCount(usage.cacheHitTokens) })\n    }\n    if (usage.cacheMissTokens != null) {\n      rows.push({ label: '缓存未命中', value: formatTokenCount(usage.cacheMissTokens) })\n    }\n  }\n  return rows\n})\n\n/** 生成中提示用户消息将进入队列 */\nconst placeholderText = computed(() => {\n  if (props.running) return '会话进行中，发送的消息将进入待发送队列'\n  return props.placeholder ?? '输入消息，Enter 发送，Shift + Enter 换行'\n})\n\nconst MAX_INPUT_HEIGHT = 160\n\n/** 多行自适应高度，上限 160px */\nconst autoResize = () => {\n  const el = textareaRef.value\n  if (!el) return\n  el.style.height = 'auto'\n  const nextHeight = Math.min(el.scrollHeight, MAX_INPUT_HEIGHT)\n  el.style.height = `${nextHeight}px`\n  el.style.overflowY = el.scrollHeight > MAX_INPUT_HEIGHT ? 'auto' : 'hidden'\n}\n\nwatch(placeholderText, () => {\n  void nextTick(autoResize)\n})\n\nconst handleSend = () => {\n  if (!hasContent.value) return\n  emit('send', text.value.trim(), attachments.value)\n  text.value = ''\n  attachments.value = []\n  autoResize()\n}\n\n/** 取回内容到输入框（队列编辑场景），并聚焦 */\nconst setContent = (content: string) => {\n  text.value = content\n  void nextTick(() => {\n    autoResize()\n    textareaRef.value?.focus()\n  })\n}\n\n/** 读取当前输入框内容 */\nconst getContent = () => text.value\n\ndefineExpose({ setContent, getContent })\n\n/** 将拾取的文件转为 dataUrl 附件（超限忽略） */\nconst handlePick = (files: File[]) => {\n  const maxSize = props.maxAttachmentSize ?? 10 * 1024 * 1024\n\n  for (const file of files) {\n    if (file.size > maxSize) {\n      console.warn(`[UAiChat] 附件 ${file.name} 超过大小限制，已忽略`)\n      continue\n    }\n    const reader = new FileReader()\n    reader.onload = () => {\n      attachments.value.push({\n        name: file.name,\n        mimeType: file.type,\n        size: file.size,\n        dataUrl: String(reader.result)\n      })\n    }\n    reader.readAsDataURL(file)\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/components/ai-chat/model-picker.js

@@ -1,69 +1,29 @@
 import { AiChatDIKey } from "./di.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, nextTick, normalizeClass, openBlock, renderList, shallowRef, toDisplayString, unref, useModel, useTemplateRef, withCtx, withModifiers } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, useTemplateRef, withCtx } from "vue";
 import { ArrowDown, Check } from "@veltra/icons/normal";
-import { UDropdown, UIcon } from "@veltra/desktop";
+import { UDropdown, UIcon, UScroll } from "@veltra/desktop";
 import { bem } from "@veltra/utils";
 //#region src/components/ai-chat/model-picker.vue
 const _hoisted_1 = ["onClick"];
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = ["onClick"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "UAiChatModelPicker",
 	__name: "model-picker",
 	props: /*@__PURE__*/ mergeModels({ models: {} }, {
 		"model": {},
-		"modelModifiers": {},
-		"reasoningLevel": {},
-		"reasoningLevelModifiers": {}
+		"modelModifiers": {}
 	}),
-	emits: ["update:model", "update:reasoningLevel"],
+	emits: ["update:model"],
 	setup(__props) {
 		const props = __props;
 		const model = useModel(__props, "model");
-		const reasoningLevel = useModel(__props, "reasoningLevel");
 		const cls = inject(AiChatDIKey)?.cls ?? bem("ai-chat");
 		const dropdownRef = useTemplateRef("dropdownRef");
-		/** 当前内联展开思考强度的模型 id（手风琴，同时只展开一个） */
-		const expandedReasoningId = shallowRef();
 		const currentModel = computed(() => {
 			return props.models.find((m) => m.id === model.value);
 		});
-		const currentReasoningLabel = computed(() => {
-			return currentModel.value?.reasoningLevels?.find((level) => level.value === reasoningLevel.value)?.label;
-		});
-		/** 取模型默认推理等级：显式配置优先，缺省落到首个可选等级 */
-		const resolveDefaultReasoningLevel = (item) => {
-			const levels = item.reasoningLevels ?? [];
-			if (!levels.length) return void 0;
-			return levels.find((level) => level.value === item.defaultReasoningLevel)?.value ?? levels[0]?.value;
-		};
-		/** 胶囊文案：已选中模型展示当前推理等级，其余展示该模型的默认等级 */
-		const getReasoningLabel = (item) => {
-			if (item.id === model.value && currentReasoningLabel.value) return currentReasoningLabel.value;
-			return item.reasoningLevels?.find((level) => level.value === resolveDefaultReasoningLevel(item))?.label;
-		};
-		const isReasoningActive = (item, value) => {
-			return item.id === model.value && reasoningLevel.value === value;
-		};
-		/** 关闭时收起内联思考强度，下次打开仍从模型列表开始 */
-		const handleVisibleChange = (visible) => {
-			if (!visible) expandedReasoningId.value = void 0;
-		};
-		/** 点击模型主体：直接选中模型，并同步到该模型默认推理等级 */
+		/** 选中模型即关闭；推理等级由 useChat 的模型联动校正 */
 		const handleSelectModel = (item) => {
 			model.value = item.id;
-			reasoningLevel.value = resolveDefaultReasoningLevel(item);
-			dropdownRef.value?.close();
-		};
-		/** 点击推理等级胶囊：内联展开/收起该模型的思考强度 */
-		const toggleReasoning = (item) => {
-			expandedReasoningId.value = expandedReasoningId.value === item.id ? void 0 : item.id;
-			nextTick(() => dropdownRef.value?.updateDropdown());
-		};
-		/** 选中思考强度：同时切到该等级所属模型，避免模型与推理等级错配 */
-		const handleSelectReasoning = (item, value) => {
-			model.value = item.id;
-			reasoningLevel.value = value;
 			dropdownRef.value?.close();
 		};
 		return (_ctx, _cache) => {
@@ -71,64 +31,40 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				ref_key: "dropdownRef",
 				ref: dropdownRef,
 				trigger: "click",
+				direction: "top",
+				alignment: "end",
 				width: "auto",
-				"min-width": "220px",
-				"content-class": unref(cls).e("model-panel"),
-				"onUpdate:visible": handleVisibleChange
+				"min-width": "240px",
+				"content-class": unref(cls).e("model-panel")
 			}, {
 				trigger: withCtx(() => [createElementVNode("button", {
 					type: "button",
 					class: normalizeClass(unref(cls).e("model-trigger"))
-				}, [
-					createElementVNode("span", { class: normalizeClass(unref(cls).e("model-trigger-label")) }, toDisplayString(currentModel.value?.label ?? model.value ?? "模型"), 3),
-					currentReasoningLabel.value ? (openBlock(), createElementBlock("span", {
-						key: 0,
-						class: normalizeClass(unref(cls).e("model-trigger-reasoning"))
-					}, toDisplayString(currentReasoningLabel.value), 3)) : createCommentVNode("v-if", true),
-					createVNode(unref(UIcon), { class: normalizeClass(unref(cls).e("model-trigger-arrow")) }, {
-						default: withCtx(() => [createVNode(unref(ArrowDown))]),
-						_: 1
-					}, 8, ["class"])
-				], 2)]),
-				content: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cls).e("model-panel-list")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.models, (item) => {
-					return openBlock(), createElementBlock("div", {
-						key: item.id,
-						class: normalizeClass([unref(cls).e("model-option"), unref(bem).is("active", item.id === model.value)])
-					}, [createElementVNode("div", {
-						class: normalizeClass(unref(cls).e("model-option-main")),
-						onClick: ($event) => handleSelectModel(item)
-					}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("model-option-head")) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("model-option-name")) }, toDisplayString(item.label ?? item.id), 3), createElementVNode("span", { class: normalizeClass(unref(cls).e("model-option-actions")) }, [
-						item.reasoningLevels?.length ? (openBlock(), createElementBlock("button", {
-							key: 0,
-							type: "button",
-							class: normalizeClass([unref(cls).e("model-option-reasoning"), unref(bem).is("expanded", expandedReasoningId.value === item.id)]),
-							onClick: withModifiers(($event) => toggleReasoning(item), ["stop"])
-						}, [createElementVNode("span", null, toDisplayString(getReasoningLabel(item)), 1), createVNode(unref(UIcon), { class: normalizeClass(unref(cls).e("model-option-reasoning-arrow")) }, {
-							default: withCtx(() => [createVNode(unref(ArrowDown))]),
-							_: 1
-						}, 8, ["class"])], 10, _hoisted_2)) : createCommentVNode("v-if", true),
-						createCommentVNode(" 勾选槽位固定占位：未选中也保留位置，保证推理等级按钮跨行对齐 "),
-						createVNode(unref(UIcon), { class: normalizeClass([unref(cls).e("model-option-check"), unref(bem).is("hidden", item.id !== model.value)]) }, {
-							default: withCtx(() => [createVNode(unref(Check))]),
-							_: 1
-						}, 8, ["class"])
-					], 2)], 2), item.description ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass(unref(cls).e("model-option-desc"))
-					}, toDisplayString(item.description), 3)) : createCommentVNode("v-if", true)], 10, _hoisted_1), item.reasoningLevels?.length ? (openBlock(), createElementBlock("div", {
-						key: 0,
-						class: normalizeClass([unref(cls).e("reasoning-levels"), unref(bem).is("expanded", expandedReasoningId.value === item.id)])
-					}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("reasoning-levels-inner")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(item.reasoningLevels, (level) => {
+				}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("model-trigger-label")) }, toDisplayString(currentModel.value?.label ?? model.value ?? "模型"), 3), createVNode(unref(UIcon), { class: normalizeClass(unref(cls).e("model-trigger-arrow")) }, {
+					default: withCtx(() => [createVNode(unref(ArrowDown))]),
+					_: 1
+				}, 8, ["class"])], 2)]),
+				content: withCtx(() => [createVNode(unref(UScroll), { class: normalizeClass(unref(cls).e("model-panel-list")) }, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.models, (item) => {
 						return openBlock(), createElementBlock("div", {
-							key: level.value,
-							class: normalizeClass([unref(cls).e("reasoning-option"), unref(bem).is("active", isReasoningActive(item, level.value))]),
-							onClick: ($event) => handleSelectReasoning(item, level.value)
-						}, [createElementVNode("span", null, toDisplayString(level.label), 1), createVNode(unref(UIcon), { class: normalizeClass([unref(cls).e("model-option-check"), unref(bem).is("hidden", !isReasoningActive(item, level.value))]) }, {
+							key: item.id,
+							class: normalizeClass([unref(cls).e("model-option"), unref(bem).is("active", item.id === model.value)])
+						}, [createElementVNode("div", {
+							class: normalizeClass(unref(cls).e("model-option-main")),
+							onClick: ($event) => handleSelectModel(item)
+						}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("model-option-head")) }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("model-option-name")) }, toDisplayString(item.label ?? item.id), 3), item.id === model.value ? (openBlock(), createBlock(unref(UIcon), {
+							key: 0,
+							class: normalizeClass(unref(cls).e("model-option-check"))
+						}, {
 							default: withCtx(() => [createVNode(unref(Check))]),
 							_: 1
-						}, 8, ["class"])], 10, _hoisted_3);
-					}), 128))], 2)], 2)) : createCommentVNode("v-if", true)], 2);
-				}), 128))], 2)]),
+						}, 8, ["class"])) : createCommentVNode("v-if", true)], 2), item.description ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: normalizeClass(unref(cls).e("model-option-desc"))
+						}, toDisplayString(item.description), 3)) : createCommentVNode("v-if", true)], 10, _hoisted_1)], 2);
+					}), 128))]),
+					_: 1
+				}, 8, ["class"])]),
 				_: 1
 			}, 8, ["content-class"]);
 		};

package/dist/components/ai-chat/model-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"model-picker.js","names":[],"sources":["../../../src/components/ai-chat/model-picker.vue"],"sourcesContent":["<template>\n  <UDropdown\n    ref=\"dropdownRef\"\n    trigger=\"click\"\n    width=\"auto\"\n    min-width=\"220px\"\n    :content-class=\"cls.e('model-panel')\"\n    @update:visible=\"handleVisibleChange\"\n  >\n    <template #trigger>\n      <button type=\"button\" :class=\"cls.e('model-trigger')\">\n        <span :class=\"cls.e('model-trigger-label')\">\n          {{ currentModel?.label ?? model ?? '模型' }}\n        </span>\n        <span v-if=\"currentReasoningLabel\" :class=\"cls.e('model-trigger-reasoning')\">\n          {{ currentReasoningLabel }}\n        </span>\n        <UIcon :class=\"cls.e('model-trigger-arrow')\">\n          <ArrowDown />\n        </UIcon>\n      </button>\n    </template>\n\n    <template #content>\n      <div :class=\"cls.e('model-panel-list')\">\n        <div\n          v-for=\"item in models\"\n          :key=\"item.id\"\n          :class=\"[cls.e('model-option'), bem.is('active', item.id === model)]\"\n        >\n          <div :class=\"cls.e('model-option-main')\" @click=\"handleSelectModel(item)\">\n            <div :class=\"cls.e('model-option-head')\">\n              <span :class=\"cls.e('model-option-name')\">{{ item.label ?? item.id }}</span>\n              <span :class=\"cls.e('model-option-actions')\">\n                <button\n                  v-if=\"item.reasoningLevels?.length\"\n                  type=\"button\"\n                  :class=\"[\n                    cls.e('model-option-reasoning'),\n                    bem.is('expanded', expandedReasoningId === item.id)\n                  ]\"\n                  @click.stop=\"toggleReasoning(item)\"\n                >\n                  <span>{{ getReasoningLabel(item) }}</span>\n                  <UIcon :class=\"cls.e('model-option-reasoning-arrow')\">\n                    <ArrowDown />\n                  </UIcon>\n                </button>\n                <!-- 勾选槽位固定占位：未选中也保留位置，保证推理等级按钮跨行对齐 -->\n                <UIcon :class=\"[cls.e('model-option-check'), bem.is('hidden', item.id !== model)]\">\n                  <Check />\n                </UIcon>\n              </span>\n            </div>\n            <div v-if=\"item.description\" :class=\"cls.e('model-option-desc')\">\n              {{ item.description }}\n            </div>\n          </div>\n\n          <div\n            v-if=\"item.reasoningLevels?.length\"\n            :class=\"[\n              cls.e('reasoning-levels'),\n              bem.is('expanded', expandedReasoningId === item.id)\n            ]\"\n          >\n            <div :class=\"cls.e('reasoning-levels-inner')\">\n              <div\n                v-for=\"level in item.reasoningLevels\"\n                :key=\"level.value\"\n                :class=\"[\n                  cls.e('reasoning-option'),\n                  bem.is('active', isReasoningActive(item, level.value))\n                ]\"\n                @click=\"handleSelectReasoning(item, level.value)\"\n              >\n                <span>{{ level.label }}</span>\n                <UIcon\n                  :class=\"[\n                    cls.e('model-option-check'),\n                    bem.is('hidden', !isReasoningActive(item, level.value))\n                  ]\"\n                >\n                  <Check />\n                </UIcon>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n  </UDropdown>\n</template>\n\n<script lang=\"ts\" setup>\nimport { UDropdown, UIcon } from '@veltra/desktop'\nimport { ArrowDown, Check } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, nextTick, shallowRef, useTemplateRef } from 'vue'\n\nimport type { ChatModelOption } from '../../providers'\nimport { AiChatDIKey } from './di'\n\ndefineOptions({ name: 'UAiChatModelPicker' })\n\nconst props = defineProps<{\n  /** 可选模型列表 */\n  models: ChatModelOption[]\n}>()\n\nconst model = defineModel<string | undefined>('model')\nconst reasoningLevel = defineModel<string | undefined>('reasoningLevel')\n\nconst di = inject(AiChatDIKey)\nconst cls = di?.cls ?? bem('ai-chat')\n\nconst dropdownRef = useTemplateRef('dropdownRef')\n\n/** 当前内联展开思考强度的模型 id（手风琴，同时只展开一个） */\nconst expandedReasoningId = shallowRef<string>()\n\nconst currentModel = computed(() => {\n  return props.models.find((m) => m.id === model.value)\n})\n\nconst currentReasoningLabel = computed(() => {\n  return currentModel.value?.reasoningLevels?.find((level) => level.value === reasoningLevel.value)\n    ?.label\n})\n\n/** 取模型默认推理等级：显式配置优先，缺省落到首个可选等级 */\nconst resolveDefaultReasoningLevel = (item: ChatModelOption) => {\n  const levels = item.reasoningLevels ?? []\n  if (!levels.length) return undefined\n  return (\n    levels.find((level) => level.value === item.defaultReasoningLevel)?.value ?? levels[0]?.value\n  )\n}\n\n/** 胶囊文案：已选中模型展示当前推理等级，其余展示该模型的默认等级 */\nconst getReasoningLabel = (item: ChatModelOption) => {\n  if (item.id === model.value && currentReasoningLabel.value) {\n    return currentReasoningLabel.value\n  }\n  return item.reasoningLevels?.find((level) => level.value === resolveDefaultReasoningLevel(item))\n    ?.label\n}\n\nconst isReasoningActive = (item: ChatModelOption, value: string) => {\n  return item.id === model.value && reasoningLevel.value === value\n}\n\n/** 关闭时收起内联思考强度，下次打开仍从模型列表开始 */\nconst handleVisibleChange = (visible: boolean) => {\n  if (!visible) expandedReasoningId.value = undefined\n}\n\n/** 点击模型主体：直接选中模型，并同步到该模型默认推理等级 */\nconst handleSelectModel = (item: ChatModelOption) => {\n  model.value = item.id\n  reasoningLevel.value = resolveDefaultReasoningLevel(item)\n  dropdownRef.value?.close()\n}\n\n/** 点击推理等级胶囊：内联展开/收起该模型的思考强度 */\nconst toggleReasoning = (item: ChatModelOption) => {\n  expandedReasoningId.value = expandedReasoningId.value === item.id ? undefined : item.id\n  nextTick(() => dropdownRef.value?.updateDropdown())\n}\n\n/** 选中思考强度：同时切到该等级所属模型，避免模型与推理等级错配 */\nconst handleSelectReasoning = (item: ChatModelOption, value: string) => {\n  model.value = item.id\n  reasoningLevel.value = value\n  dropdownRef.value?.close()\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"model-picker.js","names":[],"sources":["../../../src/components/ai-chat/model-picker.vue"],"sourcesContent":["<template>\n  <UDropdown\n    ref=\"dropdownRef\"\n    trigger=\"click\"\n    direction=\"top\"\n    alignment=\"end\"\n    width=\"auto\"\n    min-width=\"240px\"\n    :content-class=\"cls.e('model-panel')\"\n  >\n    <template #trigger>\n      <button type=\"button\" :class=\"cls.e('model-trigger')\">\n        <span :class=\"cls.e('model-trigger-label')\">\n          {{ currentModel?.label ?? model ?? '模型' }}\n        </span>\n        <UIcon :class=\"cls.e('model-trigger-arrow')\">\n          <ArrowDown />\n        </UIcon>\n      </button>\n    </template>\n\n    <template #content>\n      <UScroll :class=\"cls.e('model-panel-list')\">\n        <div\n          v-for=\"item in models\"\n          :key=\"item.id\"\n          :class=\"[cls.e('model-option'), bem.is('active', item.id === model)]\"\n        >\n          <div :class=\"cls.e('model-option-main')\" @click=\"handleSelectModel(item)\">\n            <div :class=\"cls.e('model-option-head')\">\n              <span :class=\"cls.e('model-option-name')\">{{ item.label ?? item.id }}</span>\n              <UIcon v-if=\"item.id === model\" :class=\"cls.e('model-option-check')\">\n                <Check />\n              </UIcon>\n            </div>\n            <div v-if=\"item.description\" :class=\"cls.e('model-option-desc')\">\n              {{ item.description }}\n            </div>\n          </div>\n        </div>\n      </UScroll>\n    </template>\n  </UDropdown>\n</template>\n\n<script lang=\"ts\" setup>\nimport { UDropdown, UIcon, UScroll } from '@veltra/desktop'\nimport { ArrowDown, Check } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, useTemplateRef } from 'vue'\n\nimport type { ChatModelOption } from '../../providers'\nimport { AiChatDIKey } from './di'\n\ndefineOptions({ name: 'UAiChatModelPicker' })\n\nconst props = defineProps<{\n  /** 可选模型列表 */\n  models: ChatModelOption[]\n}>()\n\nconst model = defineModel<string | undefined>('model')\n\nconst di = inject(AiChatDIKey)\nconst cls = di?.cls ?? bem('ai-chat')\n\nconst dropdownRef = useTemplateRef('dropdownRef')\n\nconst currentModel = computed(() => {\n  return props.models.find((m) => m.id === model.value)\n})\n\n/** 选中模型即关闭；推理等级由 useChat 的模型联动校正 */\nconst handleSelectModel = (item: ChatModelOption) => {\n  model.value = item.id\n  dropdownRef.value?.close()\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;EAwDA,MAAM,QAAQ;EAKd,MAAM,QAAQ,SAA+B,SAAC,OAAO;EAGrD,MAAM,MADK,OAAO,WACN,CAAA,EAAI,OAAO,IAAI,SAAS;EAEpC,MAAM,cAAc,eAAe,aAAa;EAEhD,MAAM,eAAe,eAAe;GAClC,OAAO,MAAM,OAAO,MAAM,MAAM,EAAE,OAAO,MAAM,KAAK;EACtD,CAAC;;EAGD,MAAM,qBAAqB,SAA0B;GACnD,MAAM,QAAQ,KAAK;GACnB,YAAY,OAAO,MAAM;EAC3B;;GA3EE,OAAA,UAAA,GAAA,YAyCY,MAAA,SAAA,GAAA;IAxCN,SAAA;IAAJ,KAAI;IACJ,SAAQ;IACR,WAAU;IACV,WAAU;IACV,OAAM;IACN,aAAU;IACT,iBAAe,MAAA,GAAA,CAAG,CAAC,EAAC,aAAA;;IAEV,SAAO,cAQP,CAPT,mBAOS,UAAA;KAPD,MAAK;KAAU,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,eAAA,CAAA;IACjC,GAAA,CAAA,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,qBAAA,CAAA,EACd,GAAA,gBAAA,aAAA,OAAc,SAAS,MAAA,SAAK,IAAA,GAAA,CAAA,GAEjC,YAEQ,MAAA,KAAA,GAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,qBAAA,CAAA,EAAA,GAAA;KAClB,SAAA,cAAa,CAAb,YAAa,MAAA,SAAA,CAAA,CAAA,CAAA;;;IAKR,SAAO,cAmBN,CAlBV,YAkBU,MAAA,OAAA,GAAA,EAlBA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,kBAAA,CAAA,EAAA,GAAA;KAElB,SAAA,cAAsB,EADxB,UAAA,IAAA,GAAA,mBAgBM,UAAA,MAAA,WAfW,QAAA,SAAR,SAAI;MADb,OAAA,UAAA,GAAA,mBAgBM,OAAA;OAdH,KAAK,KAAK;OACV,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,cAAA,GAAkB,MAAA,GAAA,CAAG,CAAC,GAAE,UAAW,KAAK,OAAO,MAAA,KAAK,CAAA,CAAA;MAElE,GAAA,CAAA,mBAUM,OAAA;OAVA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,mBAAA,CAAA;OAAwB,UAAK,WAAE,kBAAkB,IAAI;MACrE,GAAA,CAAA,mBAKM,OAAA,EALA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,mBAAA,CAAA,EAAA,GAChB,CAAA,mBAA4E,QAAA,EAArE,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,mBAAA,CAAA,EAA0B,GAAA,gBAAA,KAAK,SAAS,KAAK,EAAE,GAAA,CAAA,GACrD,KAAK,OAAO,MAAA,SAAzB,UAAA,GAAA,YAEQ,MAAA,KAAA,GAAA;;OAFyB,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,oBAAA,CAAA;;OAC3C,SAAA,cAAS,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA;;MAGF,GAAA,GAAA,CAAA,OAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,CAAA,GAAA,KAAK,eAAhB,UAAA,GAAA,mBAEM,OAAA;;OAFwB,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,mBAAA,CAAA;MACrC,GAAA,gBAAA,KAAK,WAAW,GAAA,CAAA,KAAA,mBAAA,QAAA,IAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,CAAA"}

package/dist/components/ai-chat/reasoning-picker.js

@@ -0,0 +1,68 @@
+import { AiChatDIKey } from "./di.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, useTemplateRef, withCtx } from "vue";
+import { ArrowDown, Check } from "@veltra/icons/normal";
+import { UDropdown, UIcon } from "@veltra/desktop";
+import { bem } from "@veltra/utils";
+//#region src/components/ai-chat/reasoning-picker.vue
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "UAiChatReasoningPicker",
+	__name: "reasoning-picker",
+	props: /*@__PURE__*/ mergeModels({ levels: {} }, {
+		"reasoningLevel": {},
+		"reasoningLevelModifiers": {}
+	}),
+	emits: ["update:reasoningLevel"],
+	setup(__props) {
+		const reasoningLevel = useModel(__props, "reasoningLevel");
+		const cls = inject(AiChatDIKey)?.cls ?? bem("ai-chat");
+		const dropdownRef = useTemplateRef("dropdownRef");
+		const currentLabel = computed(() => {
+			return __props.levels.find((level) => level.value === reasoningLevel.value)?.label ?? "推理";
+		});
+		const handleSelect = (value) => {
+			reasoningLevel.value = value;
+			dropdownRef.value?.close();
+		};
+		return (_ctx, _cache) => {
+			return __props.levels.length > 1 ? (openBlock(), createBlock(unref(UDropdown), {
+				key: 0,
+				ref_key: "dropdownRef",
+				ref: dropdownRef,
+				trigger: "click",
+				direction: "top",
+				alignment: "end",
+				width: "auto",
+				"min-width": "140px",
+				"content-class": unref(cls).e("reasoning-panel")
+			}, {
+				trigger: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					class: normalizeClass(unref(cls).e("reasoning-trigger")),
+					title: "推理等级"
+				}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("reasoning-trigger-label")) }, toDisplayString(currentLabel.value), 3), createVNode(unref(UIcon), { class: normalizeClass(unref(cls).e("reasoning-trigger-arrow")) }, {
+					default: withCtx(() => [createVNode(unref(ArrowDown))]),
+					_: 1
+				}, 8, ["class"])], 2)]),
+				content: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cls).e("reasoning-list")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.levels, (level) => {
+					return openBlock(), createElementBlock("div", {
+						key: level.value,
+						class: normalizeClass([unref(cls).e("reasoning-option"), unref(bem).is("active", level.value === reasoningLevel.value)]),
+						onClick: ($event) => handleSelect(level.value)
+					}, [createElementVNode("span", null, toDisplayString(level.label), 1), level.value === reasoningLevel.value ? (openBlock(), createBlock(unref(UIcon), {
+						key: 0,
+						class: normalizeClass(unref(cls).e("reasoning-check"))
+					}, {
+						default: withCtx(() => [createVNode(unref(Check))]),
+						_: 1
+					}, 8, ["class"])) : createCommentVNode("v-if", true)], 10, _hoisted_1);
+				}), 128))], 2)]),
+				_: 1
+			}, 8, ["content-class"])) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=reasoning-picker.js.map

package/dist/components/ai-chat/reasoning-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reasoning-picker.js","names":[],"sources":["../../../src/components/ai-chat/reasoning-picker.vue"],"sourcesContent":["<template>\n  <UDropdown\n    v-if=\"levels.length > 1\"\n    ref=\"dropdownRef\"\n    trigger=\"click\"\n    direction=\"top\"\n    alignment=\"end\"\n    width=\"auto\"\n    min-width=\"140px\"\n    :content-class=\"cls.e('reasoning-panel')\"\n  >\n    <template #trigger>\n      <button type=\"button\" :class=\"cls.e('reasoning-trigger')\" title=\"推理等级\">\n        <span :class=\"cls.e('reasoning-trigger-label')\">{{ currentLabel }}</span>\n        <UIcon :class=\"cls.e('reasoning-trigger-arrow')\">\n          <ArrowDown />\n        </UIcon>\n      </button>\n    </template>\n\n    <template #content>\n      <div :class=\"cls.e('reasoning-list')\">\n        <div\n          v-for=\"level in levels\"\n          :key=\"level.value\"\n          :class=\"[cls.e('reasoning-option'), bem.is('active', level.value === reasoningLevel)]\"\n          @click=\"handleSelect(level.value)\"\n        >\n          <span>{{ level.label }}</span>\n          <UIcon v-if=\"level.value === reasoningLevel\" :class=\"cls.e('reasoning-check')\">\n            <Check />\n          </UIcon>\n        </div>\n      </div>\n    </template>\n  </UDropdown>\n</template>\n\n<script lang=\"ts\" setup>\nimport { UDropdown, UIcon } from '@veltra/desktop'\nimport { ArrowDown, Check } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, useTemplateRef } from 'vue'\n\nimport type { ChatReasoningLevel } from '../../providers'\nimport { AiChatDIKey } from './di'\n\ndefineOptions({ name: 'UAiChatReasoningPicker' })\n\nconst { levels } = defineProps<{\n  /** 当前模型的推理等级列表；不足两档时没有切换意义，不渲染 */\n  levels: ChatReasoningLevel[]\n}>()\n\nconst reasoningLevel = defineModel<string | undefined>('reasoningLevel')\n\nconst di = inject(AiChatDIKey)\nconst cls = di?.cls ?? bem('ai-chat')\n\nconst dropdownRef = useTemplateRef('dropdownRef')\n\nconst currentLabel = computed(() => {\n  return levels.find((level) => level.value === reasoningLevel.value)?.label ?? '推理'\n})\n\nconst handleSelect = (value: string) => {\n  reasoningLevel.value = value\n  dropdownRef.value?.close()\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;EAsDA,MAAM,iBAAiB,SAA+B,SAAC,gBAAgB;EAGvE,MAAM,MADK,OAAO,WACN,CAAA,EAAI,OAAO,IAAI,SAAS;EAEpC,MAAM,cAAc,eAAe,aAAa;EAEhD,MAAM,eAAe,eAAe;GAClC,OAAO,QAAA,OAAO,MAAM,UAAU,MAAM,UAAU,eAAe,KAAK,CAAC,EAAE,SAAS;EAChF,CAAC;EAED,MAAM,gBAAgB,UAAkB;GACtC,eAAe,QAAQ;GACvB,YAAY,OAAO,MAAM;EAC3B;;GAlEU,OAAA,QAAA,OAAO,SAAM,KADrB,UAAA,GAAA,YAkCY,MAAA,SAAA,GAAA;;IAhCN,SAAA;IAAJ,KAAI;IACJ,SAAQ;IACR,WAAU;IACV,WAAU;IACV,OAAM;IACN,aAAU;IACT,iBAAe,MAAA,GAAA,CAAG,CAAC,EAAC,iBAAA;;IAEV,SAAO,cAMP,CALT,mBAKS,UAAA;KALD,MAAK;KAAU,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,mBAAA,CAAA;KAAuB,OAAM;IAC9D,GAAA,CAAA,mBAAyE,QAAA,EAAlE,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,yBAAA,CAAA,EAAgC,GAAA,gBAAA,aAAA,KAAY,GAAA,CAAA,GAC/D,YAEQ,MAAA,KAAA,GAAA,EAFA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,yBAAA,CAAA,EAAA,GAAA;KAClB,SAAA,cAAa,CAAb,YAAa,MAAA,SAAA,CAAA,CAAA,CAAA;;;IAKR,SAAO,cAaV,CAZN,mBAYM,OAAA,EAZA,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,gBAAA,CAAA,EAAA,GAChB,EAAA,UAAA,IAAA,GAAA,mBAUM,UAAA,MAAA,WATY,QAAA,SAAT,UAAK;KADd,OAAA,UAAA,GAAA,mBAUM,OAAA;MARH,KAAK,MAAM;MACX,OAAK,eAAA,CAAG,MAAA,GAAA,CAAG,CAAC,EAAC,kBAAA,GAAsB,MAAA,GAAA,CAAG,CAAC,GAAE,UAAW,MAAM,UAAU,eAAA,KAAc,CAAA,CAAA;MAClF,UAAK,WAAE,aAAa,MAAM,KAAK;KAEhC,GAAA,CAAA,mBAA8B,QAAA,MAAA,gBAArB,MAAM,KAAK,GAAA,CAAA,GACP,MAAM,UAAU,eAAA,SAA7B,UAAA,GAAA,YAEQ,MAAA,KAAA,GAAA;;MAFsC,OAAK,eAAE,MAAA,GAAA,CAAG,CAAC,EAAC,iBAAA,CAAA;;MACxD,SAAA,cAAS,CAAT,YAAS,MAAA,KAAA,CAAA,CAAA,CAAA"}

package/dist/components/ai-chat/style2.css

@@ -1017,11 +1017,39 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.u-ai-chat__model-trigger-reasoning {
+.u-ai-chat__model-trigger-arrow {
   flex-shrink: 0;
+  font-size: 12px;
   color: var(--u-text-color-assist);
 }
-.u-ai-chat__model-trigger-arrow {
+.u-ai-chat__reasoning-trigger {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+  flex-shrink: 0;
+  padding: 2px var(--u-gap-small);
+  border: none;
+  border-radius: var(--u-radius-default);
+  background: transparent;
+  color: var(--u-text-color-assist);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.u-ai-chat__reasoning-trigger:hover {
+  background-color: var(--u-bg-color-hover);
+  color: var(--u-text-color-main);
+}
+.u-ai-chat__reasoning-trigger-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 72px;
+}
+.u-ai-chat__reasoning-trigger-arrow {
   flex-shrink: 0;
   font-size: 12px;
   color: var(--u-text-color-assist);
@@ -1144,6 +1172,7 @@
 }
 .u-ai-chat__model-panel .u-ai-chat__model-panel-list {
   min-width: 0;
+  max-height: 280px;
 }
 .u-ai-chat__model-panel .u-ai-chat__model-option-main {
   padding: 6px 8px;
@@ -1156,93 +1185,59 @@
 }
 .u-ai-chat__model-panel .u-ai-chat__model-option-head {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 12px;
+  gap: 8px;
+  min-width: 0;
   color: var(--u-text-color-main);
 }
+.u-ai-chat__model-panel .u-ai-chat__model-option.is-active .u-ai-chat__model-option-name {
+  color: var(--u-color-primary);
+  font-weight: 600;
+}
 .u-ai-chat__model-panel .u-ai-chat__model-option-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.u-ai-chat__model-panel .u-ai-chat__model-option-actions {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  gap: 6px;
-}
 .u-ai-chat__model-panel .u-ai-chat__model-option-check {
   flex-shrink: 0;
+  margin-left: auto;
   font-size: 14px;
   color: var(--u-color-primary);
 }
-.u-ai-chat__model-panel .u-ai-chat__model-option-check.is-hidden {
-  visibility: hidden;
-}
-.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 2px;
-  flex-shrink: 0;
-  padding: 1px 6px;
-  border: none;
-  border-radius: var(--u-radius-small);
-  background: var(--u-color-primary-light-9);
-  color: var(--u-color-primary);
-  font-size: var(--u-font-size-main-small);
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning:hover {
-  background: var(--u-color-primary-light-7);
-}
-.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning-arrow {
-  font-size: 12px;
-  transition: transform 0.2s ease;
-}
-.u-ai-chat__model-panel .u-ai-chat__model-option-reasoning.is-expanded .u-ai-chat__model-option-reasoning-arrow {
-  transform: rotate(180deg);
-}
 .u-ai-chat__model-panel .u-ai-chat__model-option-desc {
   margin-top: 2px;
   font-size: var(--u-font-size-main-small);
   color: var(--u-text-color-assist);
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-levels {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.u-ai-chat__model-panel .u-ai-chat__reasoning-levels.is-expanded {
-  grid-template-rows: 1fr;
-}
-.u-ai-chat__model-panel .u-ai-chat__reasoning-levels-inner {
-  min-height: 0;
-  overflow: hidden;
+
+.u-ai-chat__reasoning-panel {
+  padding: 4px;
+  user-select: none;
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-option {
+.u-ai-chat__reasoning-panel .u-ai-chat__reasoning-option {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: nowrap;
   gap: 12px;
-  margin-left: 8px;
-  padding: 5px 8px;
+  padding: 6px 8px;
   border-radius: calc(var(--u-radius-default) + 1px);
   font-size: var(--u-font-size-main-small);
   color: var(--u-text-color-main);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-option:hover {
+.u-ai-chat__reasoning-panel .u-ai-chat__reasoning-option:hover {
   background-color: var(--u-bg-color-hover);
 }
-.u-ai-chat__model-panel .u-ai-chat__reasoning-option.is-active {
+.u-ai-chat__reasoning-panel .u-ai-chat__reasoning-option.is-active {
+  color: var(--u-color-primary);
+}
+.u-ai-chat__reasoning-panel .u-ai-chat__reasoning-check {
+  flex-shrink: 0;
+  font-size: 14px;
   color: var(--u-color-primary);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/ai",
-  "version": "2.1.11",
+  "version": "2.2.0",
   "homepage": "https://github.com/cabinet-fe/ultra-ui#readme",
   "bugs": {
     "url": "https://github.com/cabinet-fe/ultra-ui/issues"

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

@@ -870,7 +870,7 @@ describe('UAiChat', () => {
     unmount()
   })
 
-  it('有 models 时渲染模型选择器；当前模型无 reasoningLevels 时不展示推理等级', async () => {
+  it('有 models 时渲染模型选择器；当前模型无 reasoningLevels 时不展示推理选择器', async () => {
     const { host, unmount } = mountAiChat({
       transport: () => {},
       models: [
@@ -897,12 +897,12 @@ describe('UAiChat', () => {
     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()
+    // 当前模型无 reasoningLevels，独立推理选择器不渲染
+    expect(host.querySelector('.u-ai-chat__reasoning-trigger')).toBeFalsy()
     unmount()
   })
 
-  it('切换到带 reasoningLevels 的模型后触发器展示推理等级', async () => {
+  it('切换到带 reasoningLevels 的模型后展示独立推理选择器并可切换等级', async () => {
     const model = ref('gpt-4o')
     const reasoningLevel = ref<string | undefined>()
     const host = document.createElement('div')
@@ -940,18 +940,31 @@ describe('UAiChat', () => {
     app.mount(host)
     await nextTick()
 
-    expect(host.querySelector('.u-ai-chat__model-trigger-reasoning')).toBeFalsy()
+    expect(host.querySelector('.u-ai-chat__reasoning-trigger')).toBeFalsy()
 
     model.value = 'o3-mini'
     await nextTick()
 
-    const reasoning = host.querySelector(
-      '.u-ai-chat__input-toolbar-right .u-ai-chat__model-trigger-reasoning'
+    const trigger = host.querySelector<HTMLElement>(
+      '.u-ai-chat__input-toolbar-right .u-ai-chat__reasoning-trigger'
     )
-    expect(reasoning).toBeTruthy()
-    expect(reasoning?.textContent).toBe('低')
+    expect(trigger).toBeTruthy()
+    expect(trigger?.textContent).toContain('低')
     expect(reasoningLevel.value).toBe('low')
 
+    // 打开面板切换等级；面板 teleport 到 body 下的 popper 容器
+    trigger!.click()
+    await vi.waitFor(() => {
+      expect(document.querySelector('.u-ai-chat__reasoning-option')).toBeTruthy()
+    })
+    const highOption = [
+      ...document.querySelectorAll<HTMLElement>('.u-ai-chat__reasoning-option')
+    ].find((el) => el.textContent?.includes('高'))
+    highOption!.click()
+    await nextTick()
+    expect(reasoningLevel.value).toBe('high')
+    expect(trigger?.textContent).toContain('高')
+
     app.unmount()
     host.remove()
   })

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

@@ -88,11 +88,12 @@
           </template>
         </UDropdown>
 
-        <ModelPicker
+        <ModelPicker v-if="models?.length" v-model:model="model" :models="models" />
+
+        <ReasoningPicker
           v-if="models?.length"
-          v-model:model="model"
           v-model:reasoning-level="reasoningLevel"
-          :models="models"
+          :levels="reasoningLevels"
         />
 
         <UButton
@@ -132,6 +133,7 @@ import type { ChatAttachment, ChatTokenUsage } from '../../chat/types'
 import type { ChatModelOption } from '../../providers'
 import { AiChatDIKey } from './di'
 import ModelPicker from './model-picker.vue'
+import ReasoningPicker from './reasoning-picker.vue'
 
 defineOptions({ name: 'UAiChatInput' })
 
@@ -159,6 +161,11 @@ const props = defineProps<{
 const model = defineModel<string>('model')
 const reasoningLevel = defineModel<string>('reasoningLevel')
 
+/** 当前模型的推理等级列表，交给独立选择器；不足两档时选择器自身不渲染 */
+const reasoningLevels = computed(() => {
+  return props.models?.find((m) => m.id === model.value)?.reasoningLevels ?? []
+})
+
 const emit = defineEmits<{
   (e: 'send', content: string, attachments: ChatAttachment[]): void
   (e: 'abort'): void

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

@@ -2,19 +2,17 @@
   <UDropdown
     ref="dropdownRef"
     trigger="click"
+    direction="top"
+    alignment="end"
     width="auto"
-    min-width="220px"
+    min-width="240px"
     :content-class="cls.e('model-panel')"
-    @update:visible="handleVisibleChange"
   >
     <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>
@@ -22,7 +20,7 @@
     </template>
 
     <template #content>
-      <div :class="cls.e('model-panel-list')">
+      <UScroll :class="cls.e('model-panel-list')">
         <div
           v-for="item in models"
           :key="item.id"
@@ -31,72 +29,25 @@
           <div :class="cls.e('model-option-main')" @click="handleSelectModel(item)">
             <div :class="cls.e('model-option-head')">
               <span :class="cls.e('model-option-name')">{{ item.label ?? item.id }}</span>
-              <span :class="cls.e('model-option-actions')">
-                <button
-                  v-if="item.reasoningLevels?.length"
-                  type="button"
-                  :class="[
-                    cls.e('model-option-reasoning'),
-                    bem.is('expanded', expandedReasoningId === item.id)
-                  ]"
-                  @click.stop="toggleReasoning(item)"
-                >
-                  <span>{{ getReasoningLabel(item) }}</span>
-                  <UIcon :class="cls.e('model-option-reasoning-arrow')">
-                    <ArrowDown />
-                  </UIcon>
-                </button>
-                <!-- 勾选槽位固定占位：未选中也保留位置，保证推理等级按钮跨行对齐 -->
-                <UIcon :class="[cls.e('model-option-check'), bem.is('hidden', item.id !== model)]">
-                  <Check />
-                </UIcon>
-              </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>
-
-          <div
-            v-if="item.reasoningLevels?.length"
-            :class="[
-              cls.e('reasoning-levels'),
-              bem.is('expanded', expandedReasoningId === item.id)
-            ]"
-          >
-            <div :class="cls.e('reasoning-levels-inner')">
-              <div
-                v-for="level in item.reasoningLevels"
-                :key="level.value"
-                :class="[
-                  cls.e('reasoning-option'),
-                  bem.is('active', isReasoningActive(item, level.value))
-                ]"
-                @click="handleSelectReasoning(item, level.value)"
-              >
-                <span>{{ level.label }}</span>
-                <UIcon
-                  :class="[
-                    cls.e('model-option-check'),
-                    bem.is('hidden', !isReasoningActive(item, level.value))
-                  ]"
-                >
-                  <Check />
-                </UIcon>
-              </div>
-            </div>
-          </div>
         </div>
-      </div>
+      </UScroll>
     </template>
   </UDropdown>
 </template>
 
 <script lang="ts" setup>
-import { UDropdown, UIcon } from '@veltra/desktop'
+import { UDropdown, UIcon, UScroll } from '@veltra/desktop'
 import { ArrowDown, Check } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
-import { computed, inject, nextTick, shallowRef, useTemplateRef } from 'vue'
+import { computed, inject, useTemplateRef } from 'vue'
 
 import type { ChatModelOption } from '../../providers'
 import { AiChatDIKey } from './di'
@@ -109,69 +60,19 @@ const props = defineProps<{
 }>()
 
 const model = defineModel<string | undefined>('model')
-const reasoningLevel = defineModel<string | undefined>('reasoningLevel')
 
 const di = inject(AiChatDIKey)
 const cls = di?.cls ?? bem('ai-chat')
 
 const dropdownRef = useTemplateRef('dropdownRef')
 
-/** 当前内联展开思考强度的模型 id（手风琴，同时只展开一个） */
-const expandedReasoningId = shallowRef<string>()
-
 const currentModel = computed(() => {
   return props.models.find((m) => m.id === model.value)
 })
 
-const currentReasoningLabel = computed(() => {
-  return currentModel.value?.reasoningLevels?.find((level) => level.value === reasoningLevel.value)
-    ?.label
-})
-
-/** 取模型默认推理等级：显式配置优先，缺省落到首个可选等级 */
-const resolveDefaultReasoningLevel = (item: ChatModelOption) => {
-  const levels = item.reasoningLevels ?? []
-  if (!levels.length) return undefined
-  return (
-    levels.find((level) => level.value === item.defaultReasoningLevel)?.value ?? levels[0]?.value
-  )
-}
-
-/** 胶囊文案：已选中模型展示当前推理等级，其余展示该模型的默认等级 */
-const getReasoningLabel = (item: ChatModelOption) => {
-  if (item.id === model.value && currentReasoningLabel.value) {
-    return currentReasoningLabel.value
-  }
-  return item.reasoningLevels?.find((level) => level.value === resolveDefaultReasoningLevel(item))
-    ?.label
-}
-
-const isReasoningActive = (item: ChatModelOption, value: string) => {
-  return item.id === model.value && reasoningLevel.value === value
-}
-
-/** 关闭时收起内联思考强度，下次打开仍从模型列表开始 */
-const handleVisibleChange = (visible: boolean) => {
-  if (!visible) expandedReasoningId.value = undefined
-}
-
-/** 点击模型主体：直接选中模型，并同步到该模型默认推理等级 */
+/** 选中模型即关闭；推理等级由 useChat 的模型联动校正 */
 const handleSelectModel = (item: ChatModelOption) => {
   model.value = item.id
-  reasoningLevel.value = resolveDefaultReasoningLevel(item)
-  dropdownRef.value?.close()
-}
-
-/** 点击推理等级胶囊：内联展开/收起该模型的思考强度 */
-const toggleReasoning = (item: ChatModelOption) => {
-  expandedReasoningId.value = expandedReasoningId.value === item.id ? undefined : item.id
-  nextTick(() => dropdownRef.value?.updateDropdown())
-}
-
-/** 选中思考强度：同时切到该等级所属模型，避免模型与推理等级错配 */
-const handleSelectReasoning = (item: ChatModelOption, value: string) => {
-  model.value = item.id
-  reasoningLevel.value = value
   dropdownRef.value?.close()
 }
 </script>

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

@@ -0,0 +1,70 @@
+<template>
+  <UDropdown
+    v-if="levels.length > 1"
+    ref="dropdownRef"
+    trigger="click"
+    direction="top"
+    alignment="end"
+    width="auto"
+    min-width="140px"
+    :content-class="cls.e('reasoning-panel')"
+  >
+    <template #trigger>
+      <button type="button" :class="cls.e('reasoning-trigger')" title="推理等级">
+        <span :class="cls.e('reasoning-trigger-label')">{{ currentLabel }}</span>
+        <UIcon :class="cls.e('reasoning-trigger-arrow')">
+          <ArrowDown />
+        </UIcon>
+      </button>
+    </template>
+
+    <template #content>
+      <div :class="cls.e('reasoning-list')">
+        <div
+          v-for="level in levels"
+          :key="level.value"
+          :class="[cls.e('reasoning-option'), bem.is('active', level.value === reasoningLevel)]"
+          @click="handleSelect(level.value)"
+        >
+          <span>{{ level.label }}</span>
+          <UIcon v-if="level.value === reasoningLevel" :class="cls.e('reasoning-check')">
+            <Check />
+          </UIcon>
+        </div>
+      </div>
+    </template>
+  </UDropdown>
+</template>
+
+<script lang="ts" setup>
+import { UDropdown, UIcon } from '@veltra/desktop'
+import { ArrowDown, Check } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, useTemplateRef } from 'vue'
+
+import type { ChatReasoningLevel } from '../../providers'
+import { AiChatDIKey } from './di'
+
+defineOptions({ name: 'UAiChatReasoningPicker' })
+
+const { levels } = defineProps<{
+  /** 当前模型的推理等级列表；不足两档时没有切换意义，不渲染 */
+  levels: ChatReasoningLevel[]
+}>()
+
+const reasoningLevel = defineModel<string | undefined>('reasoningLevel')
+
+const di = inject(AiChatDIKey)
+const cls = di?.cls ?? bem('ai-chat')
+
+const dropdownRef = useTemplateRef('dropdownRef')
+
+const currentLabel = computed(() => {
+  return levels.find((level) => level.value === reasoningLevel.value)?.label ?? '推理'
+})
+
+const handleSelect = (value: string) => {
+  reasoningLevel.value = value
+  dropdownRef.value?.close()
+}
+</script>

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

@@ -1137,12 +1137,40 @@ $root-name: ai-chat;
     @include m.ellipsis;
   }
 
-  @include m.e(model-trigger-reasoning) {
+  @include m.e(model-trigger-arrow) {
     flex-shrink: 0;
+    font-size: 12px;
     color: fn.use-var(text-color, assist);
   }
 
-  @include m.e(model-trigger-arrow) {
+  @include m.e(reasoning-trigger) {
+    @include m.flex(flex, flex-start, center);
+    gap: 4px;
+    flex-shrink: 0;
+    padding: 2px fn.use-var(gap, small);
+    border: none;
+    border-radius: fn.use-var(radius, default);
+    background: transparent;
+    color: fn.use-var(text-color, assist);
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+      color: fn.use-var(text-color, main);
+    }
+  }
+
+  @include m.e(reasoning-trigger-label) {
+    @include m.ellipsis;
+    max-width: 72px;
+  }
+
+  @include m.e(reasoning-trigger-arrow) {
     flex-shrink: 0;
     font-size: 12px;
     color: fn.use-var(text-color, assist);
@@ -1278,8 +1306,10 @@ $root-name: ai-chat;
   padding: 4px;
   user-select: none;
 
+  // 面板从贴底的输入栏向上弹出，超出高度在列表内滚动
   .u-#{$root-name}__model-panel-list {
     min-width: 0;
+    max-height: 280px;
   }
 
   .u-#{$root-name}__model-option-main {
@@ -1294,60 +1324,28 @@ $root-name: ai-chat;
   }
 
   .u-#{$root-name}__model-option-head {
-    @include m.flex(flex, space-between, center);
-    gap: 12px;
+    @include m.flex(flex, flex-start, center);
+    gap: 8px;
+    min-width: 0;
     color: fn.use-var(text-color, main);
   }
 
-  .u-#{$root-name}__model-option-name {
-    @include m.ellipsis;
+  .u-#{$root-name}__model-option.is-active {
+    .u-#{$root-name}__model-option-name {
+      color: fn.use-var(color, primary);
+      font-weight: 600;
+    }
   }
 
-  .u-#{$root-name}__model-option-actions {
-    @include m.flex(flex, flex-start, center);
-    flex-shrink: 0;
-    gap: 6px;
+  .u-#{$root-name}__model-option-name {
+    @include m.ellipsis;
   }
 
   .u-#{$root-name}__model-option-check {
     flex-shrink: 0;
+    margin-left: auto;
     font-size: 14px;
     color: fn.use-var(color, primary);
-
-    @include m.is(hidden) {
-      visibility: hidden;
-    }
-  }
-
-  .u-#{$root-name}__model-option-reasoning {
-    @include m.flex(flex, flex-start, center);
-    gap: 2px;
-    flex-shrink: 0;
-    padding: 1px 6px;
-    border: none;
-    border-radius: fn.use-var(radius, small);
-    background: fn.use-var(color, primary, 'light-9');
-    color: fn.use-var(color, primary);
-    font-size: fn.use-var(font-size-main, small);
-    cursor: pointer;
-    transition:
-      background-color 0.15s ease,
-      color 0.15s ease;
-
-    &:hover {
-      background: fn.use-var(color, primary, 'light-7');
-    }
-  }
-
-  .u-#{$root-name}__model-option-reasoning-arrow {
-    font-size: 12px;
-    transition: transform 0.2s ease;
-  }
-
-  .u-#{$root-name}__model-option-reasoning.is-expanded {
-    .u-#{$root-name}__model-option-reasoning-arrow {
-      transform: rotate(180deg);
-    }
   }
 
   .u-#{$root-name}__model-option-desc {
@@ -1355,28 +1353,17 @@ $root-name: ai-chat;
     font-size: fn.use-var(font-size-main, small);
     color: fn.use-var(text-color, assist);
   }
+}
 
-  // 内联思考强度：grid 行高 0fr → 1fr 过渡，展开/收起平滑无跳变
-  .u-#{$root-name}__reasoning-levels {
-    display: grid;
-    grid-template-rows: 0fr;
-    transition: grid-template-rows 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-
-    @include m.is(expanded) {
-      grid-template-rows: 1fr;
-    }
-  }
-
-  .u-#{$root-name}__reasoning-levels-inner {
-    min-height: 0;
-    overflow: hidden;
-  }
+// 推理等级选择面板经 teleport 挂载到 popper 容器，同样需独立定义
+.u-#{$root-name}__reasoning-panel {
+  padding: 4px;
+  user-select: none;
 
   .u-#{$root-name}__reasoning-option {
     @include m.flex(flex, space-between, center);
     gap: 12px;
-    margin-left: 8px;
-    padding: 5px 8px;
+    padding: 6px 8px;
     border-radius: calc(fn.use-var(radius, default) + 1px);
     font-size: fn.use-var(font-size-main, small);
     color: fn.use-var(text-color, main);
@@ -1393,4 +1380,10 @@ $root-name: ai-chat;
       color: fn.use-var(color, primary);
     }
   }
+
+  .u-#{$root-name}__reasoning-check {
+    flex-shrink: 0;
+    font-size: 14px;
+    color: fn.use-var(color, primary);
+  }
 }