@veltra/ai 2.1.10 → 2.2.0

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

@@ -169,13 +169,20 @@
   position: relative;
   flex: 1;
   min-height: 0;
-  width: 100%;
-  max-width: 800px;
+  width: calc(100% + var(--u-gap-default) * 2);
+  margin: 0 calc(var(--u-gap-default) * -1);
   display: flex;
   flex-direction: column;
   padding: var(--u-gap-default) 0;
   box-sizing: border-box;
 }
+.u-ai-chat__list-content {
+  width: 100%;
+  max-width: calc(800px + var(--u-gap-default) * 2);
+  margin: 0 auto;
+  padding: 0 var(--u-gap-default);
+  box-sizing: border-box;
+}
 .u-ai-chat__list {
   flex: 1;
   min-height: 0;
@@ -183,6 +190,8 @@
 .u-ai-chat__welcome {
   flex-shrink: 0;
   width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
   height: 48px;
   display: flex;
   justify-content: flex-start;
@@ -271,7 +280,7 @@
   align-items: center;
   flex-wrap: nowrap;
   gap: var(--u-gap-small);
-  padding: 0 var(--u-gap-default) var(--u-gap-small);
+  padding: 0 0 var(--u-gap-small);
   width: fit-content;
 }
 .u-ai-chat__working .u-ai-orb {
@@ -290,6 +299,11 @@
 .u-ai-chat__working-text {
   font-size: var(--u-font-size-main-small);
 }
+.u-ai-chat__working-time {
+  font-size: var(--u-font-size-main-small);
+  color: var(--u-text-color-assist);
+  font-variant-numeric: tabular-nums;
+}
 @media (prefers-reduced-motion: reduce) {
   .u-ai-chat .u-ai-chat__welcome.is-enter .u-ai-orb,
   .u-ai-chat .u-ai-chat__working .u-ai-orb {
@@ -411,6 +425,12 @@
   flex-wrap: wrap;
   gap: var(--u-gap-small);
 }
+.u-ai-chat__message-duration {
+  align-self: center;
+  color: var(--u-text-color-assist);
+  font-size: var(--u-font-size-main-small);
+  font-variant-numeric: tabular-nums;
+}
 .u-ai-chat__reasoning {
   margin-bottom: 4px;
   color: var(--u-text-color-second);
@@ -997,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);
@@ -1032,14 +1080,32 @@
 .u-ai-chat__input-clear:hover {
   color: var(--u-color-danger);
 }
-.u-ai-chat__input-usage {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--u-font-size-main-small);
-  color: var(--u-text-color-assist);
-  line-height: 1.4;
+.u-ai-chat__usage-trigger {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  padding: 2px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+}
+.u-ai-chat__usage-ring {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+.u-ai-chat__usage-ring-track {
+  fill: none;
+  stroke: var(--u-border-color);
+  stroke-width: 5;
+}
+.u-ai-chat__usage-ring-value {
+  fill: none;
+  stroke: var(--u-color-primary);
+  stroke-width: 5;
+  transition: stroke-dasharray 0.3s ease;
 }
 .u-ai-chat__input-stop {
   display: block;
@@ -1078,12 +1144,35 @@
   font-size: 12px;
 }
 
+.u-ai-chat__usage-panel {
+  padding: 6px 4px;
+  user-select: none;
+}
+.u-ai-chat__usage-panel .u-ai-chat__usage-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 24px;
+  padding: 3px 8px;
+  font-size: var(--u-font-size-main-small);
+  line-height: 1.6;
+}
+.u-ai-chat__usage-panel .u-ai-chat__usage-label {
+  color: var(--u-text-color-assist);
+}
+.u-ai-chat__usage-panel .u-ai-chat__usage-value {
+  color: var(--u-text-color-main);
+  font-variant-numeric: tabular-nums;
+}
+
 .u-ai-chat__model-panel {
   padding: 4px;
   user-select: none;
 }
 .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;
@@ -1096,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/dist/providers/types.d.ts

@@ -18,6 +18,8 @@ export interface ChatModel {
   reasoningLevels?: ChatReasoningLevel[];
   /** 默认推理等级（须落在 reasoningLevels 内） */
   defaultReasoningLevel?: string;
+  /** 上下文窗口上限（token）。配置后输入栏用量环按「最近一次请求总 token / 上限」显示占比 */
+  contextWindow?: number;
 }
 /** 模型服务商配置（内嵌 models） */
 export interface ChatProvider {

package/dist/types/ai-chat.d.ts

@@ -42,7 +42,8 @@ export interface AiChatProps {
   rendererProps?: Record<string, unknown>;
   /**
    * 是否展示 token 用量明细（缓存命中 / 未命中；缺字段不显示）。
-   * 默认 false：仅在拿到 usage 时显示会话累计「总 token」。接口未返回 usage 时不展示。
+   * 默认 false：用量环明细面板只列 总 / 输入 / 输出；true 时追加有数据的缓存项。
+   * 接口未返回 usage 时不展示用量环。
    */
   tokenUsageDetail?: boolean;
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/ai",
-  "version": "2.1.10",
+  "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/chat/use-chat.ts

@@ -60,6 +60,8 @@ export function useChat(options: UseChatOptions) {
   const tokenUsage = ref<ChatTokenUsage | null>(null)
   /** 最近一轮用户对话（含工具多轮请求）的 token；该轮无 usage 时为 null */
   const lastTurnUsage = ref<ChatTokenUsage | null>(null)
+  /** 最近一次单次请求的 token（未跨轮累计），其 totalTokens 近似当前上下文占用 */
+  const lastRequestUsage = ref<ChatTokenUsage | null>(null)
 
   /** session 下由 jobs/snapshot 整体替换；函数 transport 保持空数组 */
   const jobs = ref<ChatJob[]>([])
@@ -344,6 +346,7 @@ export function useChat(options: UseChatOptions) {
             emit('tool-call', toolCall)
           },
           onUsage: (usage) => {
+            lastRequestUsage.value = usage
             lastTurnUsage.value = lastTurnUsage.value
               ? addTokenUsage(lastTurnUsage.value, usage)
               : usage
@@ -462,6 +465,7 @@ export function useChat(options: UseChatOptions) {
     if (session()) {
       sessionRuntime.resetLocal()
       lastTurnUsage.value = null
+      lastRequestUsage.value = null
       return
     }
     abort()
@@ -469,6 +473,7 @@ export function useChat(options: UseChatOptions) {
     messages.value = []
     tokenUsage.value = null
     lastTurnUsage.value = null
+    lastRequestUsage.value = null
     snapshot()
   }
 
@@ -481,6 +486,7 @@ export function useChat(options: UseChatOptions) {
     jobs,
     tokenUsage,
     lastTurnUsage,
+    lastRequestUsage,
     projections,
     title,
     pendingApprovals,